您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

如何選擇UI 界面布局樣式?來看丁香園設計師的總結!


大海一向鼓勵本身多總結,多積累,多分享,最近看到一篇大牙的文章,對于不要盲從趨勢,總結的分外好,于是有感而發,在此基礎上,做了一些拓展衍生。

什么是界面布局樣式?

界面布局樣式是指用于區分信息內容,條理的版式設計的詳細體例。

總結和了解目前常用的界面布局樣式,可以讓設計師快速決策,選擇合適的設計體例。

界面布局樣式有哪些?



一、卡

行使「卡」設計界面,對應的是如今流行的「卡片式設計」,比如:APP Store 的 Today 網頁。

大海將從以下 3 點描述卡片設計的上風:

  • 天真性

  • 信息區分

  • 操作性和趣味性

1. 天真性

示例如下,分別是 Instagram,知乎,微博的首頁。



Instagram 的「保舉用戶」模塊,知乎的「知乎書店」模塊,微博的「問答」模塊,都行使了可以橫向滑動的卡片設計,打破了訂閱流信息垂直展示的限定,從而展示更多的信息。

2. 信息區分

信息類型

示例如下,分別是天貓,嚴選,微信讀書的小我中間截圖。



這三個「小我中間」的設計,都行使卡片設計,對不同類型的信息進行了區分和歸整。

  • 天貓:第一張卡片式用戶小我信息,以及用戶本身珍藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是運營卡片,用于專門的大型活動的內容展示

  • 考拉:第一張卡片是用戶小我信息,以及用戶本身珍藏的內容和足跡數據;第二張卡片都是訂單數據;第三張卡片是用戶相干的其他信息;第四張卡片是考拉提供的服務。

  • 微信讀書:第一張卡片是用戶小我信息;第二張卡片是用戶賬戶的基本數據;第三張卡片是用戶本身生成的相干內容;

時間

示例如下,分別是 APP Store,微信公眾號,微博的截圖。



這三個設計,都把復雜的內容信息,用卡片設計的情勢,按照時間維度進行了整頓和排序。

3. 操作性和趣味性

示例如下,分別是付出寶,ZUO,探探的截圖。



卡片是一種模仿物理世界的設計情勢,擁有可操作隱喻,可以被覆蓋、堆疊、移動、劃去。

  • 付出寶卡包:模擬物理世界真實的銀行卡設計,行使用戶已有的銀行卡查看風俗,讓用戶快速理解和查看已綁定的銀行卡。

  • ZUO:「ZUO」是一款小眾的,風趣奇怪創意的內容分享產品。主打追尋更美好的可能,產品設計別具特色。左滑卡片可以切換內容的設計,讓產品體驗更加靈動風趣。

  • 探探:一款陌生人社交軟件,廣告主打:左滑不喜好,右滑喜好的體驗,凸顯本身在同類型軟件中的體驗差異化,用戶的感受更加奇怪風趣。

4. 卡片設計的反例

自從 iOS 11 之后,卡片設計的趨勢就被推向了高潮。設計網站上有許多卡片式設計作品出現。

卡片設計經常會呈現出比較好的視覺結果,但是卡片設計用的不好,會導致虛耗空間,降低服從。

示例如下:是大海從 dribbble 上找來的設計,通信錄的設計行使了卡片設計。

當用戶必要探求聯系人時,呈「Z字型」閱讀曲線,遠沒有微信通信錄的「直線型」閱讀服從高。



二、線

「線」指的是 APP 設計中最常見的「分割線」,在分割線當中可以分為兩類:



1. 貫穿式

「貫穿式」是指,線長度貫穿屏幕,左右邊距為零。貫穿式分割線可以讓被分割的信息的自力性變強。

示例如下:分別是豆瓣的首頁,網易云音樂的動態截圖。



兩者的共同點是,每一塊信息的內容較多,關聯性弱。必要用貫穿式分割性,讓每一個信息內容,更加自力。

2. 內嵌式

「內嵌式」是指,線的左右邊距留有閑暇。內嵌式分割線,可以有助于信息閱讀的流暢性。

示例如下:分別是 APP Store 今日主題的列表頁,36Kr 的小我中間網頁。



貫穿式和內嵌式經常是同時使用的,如下圖:網易嚴選的填寫訂單網頁。



圖中列表「商品合計」「運費」是相對關聯性較強的,因此這兩者之間用了內嵌式分割線?!肝乙_發票」和它們之間是相對自力的,因此使用貫穿式分割線。

3. 分割線設計的反例

分割線設計是界面當中最常用的元素,大??戳诉@么多 APP,截了這么多圖,都沒有發現界面中一根線都沒有使用的產品。

分割線設計要細致是否應該使用,以及使用時線的顏色,粗細。

下圖中:知乎的「小我中間」,來源于網絡的日歷設計。



知乎:線的顏色用的過重,導致當看到這個網頁時,會感受到滿眼都是線。改進方法有兩種:把線改細,改淡;把列表筆墨改重??偨Y下來就是拉開筆墨和線的對比。

日歷:日期自己的排版已經把信息區分的比較顯明,此時不必要使用分割線。假設 「親密」 「對比」 「重復」 足以讓信息得到區分,不使用分割線,可以讓你的設計,更加透氣簡潔。

三、間距

行使「間距」設計界面,對應的是如今流行的「無框設計」,不用分割線,純粹用間距實現信息的排版。

大海將從以下2點描述其適用性:

  • 圖片為主

  • 內容少且有規律

1. 圖片為主

示例如下:分別是 Instagram,愛彼迎,紅板報的界面截圖。這些網頁中,均以圖片為主。圖片自己的邊緣具備分隔作用。



2. 內容少且有規律

示例1:愛彼迎的「故事網頁」和「搜索效果頁」,兩者都只有2種信息版式。內容少且有規律。



示例2:輕芒的「分類頁」和「類別首頁」,分類頁只有一種版式,并橫向排版展示。類別首頁只有一屏信息。



總結

卡,線,間距都是網頁當中基礎元素,盼望本篇文章可以幫助設計師掌握和了解這3個基礎元素的適用性。在設計實行中,更加風馳電掣,如沐春風。

迎接關注作者的微信公眾號:「花廠設計招待所」


圖片素材作者:Dennis Cortés


圖趣之前有關布局的網頁教程

扔掉黃金比例,網頁布局還能這樣做

http://www.9254975.live/Tutorial/di2547.html

詳解創造完美網站布局的20個步驟

http://www.9254975.live/Tutorial/di2608.html


[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
本文地址:http://www.9254975.live/Tutorial/di4162.html
基礎科普!重復與突變在產品設計中的應用
這15個好風俗-助你成為優秀UX設計師
圖趣網微信
建議反饋
×
股票软件下载排名