如何選擇UI 界面布局樣式？來看丁香園設(shè)計師的總結(jié)！

2019/4/22 16:03:43來源：互聯(lián)網(wǎng)

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

什么是界面布局樣式？

界面布局樣式是指用于區(qū)分信息內(nèi)容，條理的版式設(shè)計的詳細體例。

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

界面布局樣式有哪些？

行使「卡」設(shè)計界面，對應(yīng)的是如今流行的「卡片式設(shè)計」，比如：APP Store 的 Today 網(wǎng)頁。

大海將從以下 3 點描述卡片設(shè)計的上風(fēng)：

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

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

信息類型

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

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

天貓：第一張卡片式用戶小我信息，以及用戶本身珍藏的內(nèi)容和足跡數(shù)據(jù)；第二張卡片都是訂單數(shù)據(jù)；第三張卡片是運營卡片，用于專門的大型活動的內(nèi)容展示
考拉：第一張卡片是用戶小我信息，以及用戶本身珍藏的內(nèi)容和足跡數(shù)據(jù)；第二張卡片都是訂單數(shù)據(jù)；第三張卡片是用戶相干的其他信息；第四張卡片是考拉提供的服務(wù)。
微信讀書：第一張卡片是用戶小我信息；第二張卡片是用戶賬戶的基本數(shù)據(jù)；第三張卡片是用戶本身生成的相干內(nèi)容；

時間

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

這三個設(shè)計，都把復(fù)雜的內(nèi)容信息，用卡片設(shè)計的情勢，按照時間維度進行了整頓和排序。

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

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

付出寶卡包：模擬物理世界真實的銀行卡設(shè)計，行使用戶已有的銀行卡查看風(fēng)俗，讓用戶快速理解和查看已綁定的銀行卡。
ZUO：「ZUO」是一款小眾的，風(fēng)趣奇怪創(chuàng)意的內(nèi)容分享產(chǎn)品。主打追尋更美好的可能，產(chǎn)品設(shè)計別具特色。左滑卡片可以切換內(nèi)容的設(shè)計，讓產(chǎn)品體驗更加靈動風(fēng)趣。
探探：一款陌生人社交軟件，廣告主打：左滑不喜好，右滑喜好的體驗，凸顯本身在同類型軟件中的體驗差異化，用戶的感受更加奇怪風(fēng)趣。