正文

列表式布局UI設(shè)計(jì)（列表式布局優(yōu)點(diǎn)）

發(fā)布時(shí)間：2023-04-28 22:05:50 稿源：創(chuàng)意嶺閱讀： 1299

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于列表式布局UI設(shè)計(jì)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計(jì)相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、UI設(shè)計(jì)表單結(jié)構(gòu)2018-09-10
2、移動應(yīng)用UI設(shè)計(jì)——導(dǎo)航設(shè)計(jì)
3、UI設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)有哪些
4、UI設(shè)計(jì)規(guī)范都包含哪些規(guī)范？

列表式布局UI設(shè)計(jì)（列表式布局優(yōu)點(diǎn)）

一、UI設(shè)計(jì)表單結(jié)構(gòu)2018-09-10

UI設(shè)計(jì)表單結(jié)構(gòu)

http://www.tianhusj.com/list-93-1.html?wm=818_xxxiao_mgsj

表單結(jié)構(gòu)

表單的結(jié)構(gòu)由表單的基本樣式和基本內(nèi)容組成，表單的內(nèi)容都居中布置。表單的基本樣式分為單行表單、多行表單、少數(shù)情況下表單作為標(biāo)題存在的組合。

表單的內(nèi)容作用是信息查看、信息入口、信息操作以及內(nèi)容輸入，表單的內(nèi)容分主要是信息文字和輔助信息文字。

輔助信息文字通過是否為流程的必要內(nèi)容來區(qū)別對應(yīng)使用不同的字號，重要內(nèi)容或需要突出對待的內(nèi)容可以相應(yīng)的搭配組合圖標(biāo)。

表單常用控件

常用設(shè)計(jì)原則

1. 如果5個(gè)以下內(nèi)容，全部放出來，而不是折疊

在單選方案中，有2-5個(gè)選項(xiàng)可用，使用分段控件而不是下拉列表。主要是因?yàn)榉侄慰刂苾?nèi)容可見，并且可以通過單個(gè)交互完成任務(wù)，而不是多步（點(diǎn)擊打開，選擇，點(diǎn)擊）。

2. 多個(gè)選擇的功能，收納在一個(gè)選擇容器里

一般日期由年、月、日三個(gè)部分組成，如果使用下拉列表會有9步操作，對于這種功能接近的可以整合到一個(gè)設(shè)計(jì)組件里。

3. 使用開關(guān)而不是下拉列表

如果只有2個(gè)選項(xiàng)，如顯示或隱藏，打開或關(guān)，這種情況使用開關(guān)來提升操作效率。

4. 滑塊

通過滑動控件，將單調(diào)的下拉式操作調(diào)整為用戶易于掃描的視覺體驗(yàn)，可以使用滑塊定義好范圍內(nèi)的一個(gè)或多個(gè)值。

5. 避免多列表單

移動端都是小屏幕，需要讓用戶重點(diǎn)放在內(nèi)容上，保持從上而下的閱讀視線，避免過于復(fù)雜的表單。

6. 使用增加或減少按鈕而不是下拉

當(dāng)用戶需要通過增加或減少時(shí)，避免自由表單輸入和下拉列表，用按鈕幫助最大限度的減少錯誤。

7. 盡量避免顯示不需要的字段

盡量避免顯示不需要的字段，使表單更短，不要把必填和非必填的內(nèi)容混在一起。

8. 對信息進(jìn)行分組

對相同內(nèi)容信息進(jìn)行分組，方便用戶快速準(zhǔn)確的掃描查找。

設(shè)計(jì)策略

如果5個(gè)以下內(nèi)容，全部放出來，而不是折疊。

多個(gè)選擇的功能，收納在一個(gè)選擇容器里。

如果只有2個(gè)選項(xiàng)，如顯示或隱藏，打開或關(guān)，這種情況使用開關(guān)來提升操作效率。

通過滑動控件，將單調(diào)的下拉式操作調(diào)整為用戶易于掃描的視覺體驗(yàn)。

避免多列表單，保持從上而下的閱讀視線，避免過于復(fù)雜的表單。

當(dāng)用戶需要通過增加或減少時(shí)，避免自由表單輸入和下拉列表，用按鈕幫助最大限度的減少錯誤。

盡量避免顯示不需要的字段，使表單更短，不要把必填和非必填的內(nèi)容混在一起。

對相同內(nèi)容信息進(jìn)行分組，方便用戶相更快地掃描查找，不要內(nèi)容都混在一起

二、移動應(yīng)用UI設(shè)計(jì)——導(dǎo)航設(shè)計(jì)

年正如精良的設(shè)計(jì)一樣，優(yōu)秀的導(dǎo)航也大象無形。不管是瀏覽好友信息，還是租賃汽車，完美的導(dǎo)航設(shè)計(jì)能讓用戶根據(jù)直覺使用應(yīng)用程序，也能讓用戶非常容易地完成所有任務(wù)。

導(dǎo)航的設(shè)計(jì)是 App 設(shè)計(jì)發(fā)展過程中很值得玩味的地方，由于移動設(shè)備特別是智能手機(jī)的屏幕尺寸有限，設(shè)計(jì)者們通常會將屏幕空間盡量留給主體內(nèi)容，為了在手機(jī)屏幕給定的范圍內(nèi)展示出更多內(nèi)容，優(yōu)秀的導(dǎo)航欄設(shè)計(jì)將起到關(guān)鍵性作用，對于不同的操作也當(dāng)因地制宜地選則不同的設(shè)計(jì)方案。

如網(wǎng)站設(shè)計(jì)中，我們會把導(dǎo)航分為一級導(dǎo)航、二級導(dǎo)航等等，其實(shí)移動應(yīng)用和網(wǎng)站設(shè)計(jì)一樣，也具有自己的信息架構(gòu)。這里我們主要依據(jù)市場上面已有的產(chǎn)品對移動應(yīng)用導(dǎo)航大體分為以下兩類：主要導(dǎo)航模式與次級導(dǎo)航模式。

圖1-2 次級導(dǎo)航模式

首先看看以下7種主要導(dǎo)航模式：

主要導(dǎo)航模式—— 第一種：跳板式

跳板式導(dǎo)航對操作系統(tǒng)并沒有特殊要求，在各種設(shè)備上都有良好表現(xiàn)。它有時(shí)也被稱為“快速啟動板”（Launchpad）。跳板式導(dǎo)航的特征是，登錄界面中的菜單選項(xiàng)就是進(jìn)入各個(gè)應(yīng)用的起點(diǎn)。在國內(nèi)市場上跳板式設(shè)計(jì)應(yīng)用很用，如下圖的第一個(gè)“百度手機(jī)衛(wèi)士”（圖1-3）它主要通過功能來展示菜單選項(xiàng)，這種網(wǎng)格布局清晰的把各個(gè)功能區(qū)域進(jìn)行劃分，能讓用戶快速找到入口并點(diǎn)擊操作。(圖1-4)的云圖TV，它是一個(gè)免流量的手機(jī)電視，他的模塊相對百度手機(jī)衛(wèi)士來說較簡單，主要通過電視臺來區(qū)分模塊名稱。比如：中央電視臺CCTV、衛(wèi)士、體育甚至海外頻道等等。而美圖秀秀（圖1-5），更是我們比較熟知的一種，它的主界面用2X3的網(wǎng)格布局把常用的功能入口都直觀的表現(xiàn)在上面。

什么是2X3的網(wǎng)格布局了？

2X3網(wǎng)格布局是一種布局形式，常見的布局形式有：3X3、2X3、2X2、1X2（圖1-6）。但不一定非拘泥于網(wǎng)格布局，根據(jù)需求的功能來定義，可以成比例放大某些選項(xiàng)，以彰顯其重要性。

XiiaLive，一款功能無比強(qiáng)大的網(wǎng)絡(luò)電臺，兼具簡潔而清新的 UI 設(shè)計(jì)。這款應(yīng)用具有不容忽視的導(dǎo)航，設(shè)計(jì)師用3X3的網(wǎng)格布局把菜單的6個(gè)菜單項(xiàng)目布局在屏幕中間，使每個(gè)格子都扮演著功能性的作用（圖1-7）。

Tripper是一款日本的本地導(dǎo)游應(yīng)用，他用扁平的設(shè)計(jì)圖標(biāo)把應(yīng)用的功能用2X3的網(wǎng)格布局羅列在整個(gè)界面中，使得用戶能夠相當(dāng)輕松順手地瀏覽這款A(yù)PP（圖1-8）.

跳板式菜單也可以說是網(wǎng)格式菜單，它類似于metro UI的堆砌色塊，優(yōu)點(diǎn)簡約而不簡陋，導(dǎo)航清晰、明顯，并能提高操作效率。但設(shè)計(jì)時(shí)切記不分青紅皂白的去使用色彩哦，這可能會讓用戶不知所措和產(chǎn)生疲倦感。

ASM采用的是不規(guī)則網(wǎng)格的跳板式導(dǎo)航，以突出內(nèi)容的優(yōu)先級（圖1-9）。

最近經(jīng)典的游戲：“別踩白塊兒”（圖1-10）也是跳板式模塊的經(jīng)典體現(xiàn)。

它把各種游戲模式用網(wǎng)格區(qū)分開，僅用黑白兩色就能清晰的讓用戶理解并操作。正如前面所說，在網(wǎng)格布局的設(shè)計(jì)中，不一定必須遵循幾乘幾的網(wǎng)格形式，甚至可以成比例的放大或者縮小某些選項(xiàng)，用以彰顯他的功能特色，舉一反三，設(shè)計(jì)師還可以合并他的多種網(wǎng)格形式，使得功能之間的邏輯流程更準(zhǔn)確。比如別踩白塊兒中的每個(gè)游戲選項(xiàng)，點(diǎn)擊的二級菜單也用跳板式或者列表式展現(xiàn)了更多的功能選擇。

個(gè)性化的跳板式導(dǎo)航可在顯示菜單選項(xiàng)的同時(shí)顯示用戶個(gè)人資料。通常會提供自定義功能，允許用戶改變跳板導(dǎo)航的布局，如優(yōu)酷界面。

通過以上的案列分析，我們可以整理如下幾點(diǎn)：

1.為同等重要的內(nèi)容項(xiàng)使用網(wǎng)格布局。

2.為相比之下更為重要的內(nèi)容項(xiàng)使用不規(guī)則布局。

3.視情況使用個(gè)性化設(shè)置和自定義選項(xiàng)。

主要導(dǎo)航模式——第二種：列表菜單式

列表菜單式導(dǎo)航與跳板式導(dǎo)航其實(shí)是有共同點(diǎn)的，他們的共同點(diǎn)在于，每個(gè)菜單項(xiàng)都是進(jìn)入應(yīng)用各項(xiàng)功能的入口點(diǎn)。

但是不同點(diǎn)在于列表菜單式導(dǎo)航有很多種變化形式，包括個(gè)性化列表菜單，體現(xiàn)分組列表和增強(qiáng)列表等。

案列分析：

個(gè)性化列表的方式：在photo sticker中首頁就采用了個(gè)性化列表菜單的方式。而IOS系統(tǒng)設(shè)計(jì)則采用了分組列表菜單式。

印象筆記的IOS版本它把列表式導(dǎo)航與跳板式導(dǎo)航設(shè)計(jì)相結(jié)合。下廚房即是增強(qiáng)列表導(dǎo)航，何為增強(qiáng)列表導(dǎo)航呢？即就是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能后形成的。

其實(shí)列表菜單式導(dǎo)航，這個(gè)從網(wǎng)站到手機(jī)APP上都很常用的，遵循由上至下的閱讀習(xí)慣方式，所以使用起來用戶不會覺得困難。

通過例舉的四個(gè)案列，以及列表菜單式導(dǎo)航與跳板式導(dǎo)航的對比，列表菜單，更適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題。

主要導(dǎo)航模式——第三種：選項(xiàng)卡式

選項(xiàng)卡式導(dǎo)航，在不同的操作系統(tǒng)有不同的表現(xiàn)和規(guī)則。所以在設(shè)計(jì)時(shí)需要為不同的操作系統(tǒng)專門定義選項(xiàng)卡的位置。

Ios、webOS和Blackberry（黑莓）系列都把選項(xiàng)卡放在了屏幕底端，這樣用戶就可以用拇指進(jìn)行操作。

選項(xiàng)卡的導(dǎo)航設(shè)計(jì)方式，一般為四個(gè)導(dǎo)航按鈕最為普遍，最方便操作的是第二和第三個(gè)按。受制于屏幕寬度的限制，其欄目的個(gè)數(shù)是有限的，不能超過5個(gè)。過多的話明顯不利于用戶的切換。從界面布局來看，也降低體驗(yàn)友好度。

目前也有部分APP在選項(xiàng)卡的基礎(chǔ)上，衍生出了一種交互比較好的彈出導(dǎo)航菜單。突出選項(xiàng)卡上展示的那些核心功能的按鈕，方便用戶快捷操作。

選項(xiàng)卡至于低端的應(yīng)用市場上面有很多，這里列舉幾個(gè)比較常見的APP：

屏幕底部水平滾動的選項(xiàng)卡是個(gè)非常不錯的設(shè)計(jì)，如的Waterlogue應(yīng)用，它是一款水彩風(fēng)格照片處理工具，下面的水平翻動選項(xiàng)卡可以讓用戶選擇多種水彩風(fēng)格

Android（安卓）、Symbian(塞班）和Windows系統(tǒng)都把選項(xiàng)卡定位在屏幕頂端，它模仿了網(wǎng)址導(dǎo)航模式。

Horner包含了可隱藏菜單，不過它能很妙地從頂部出現(xiàn)，由于明亮的顏色和有關(guān)聯(lián)性的巨大圖標(biāo)，它與整個(gè)界面內(nèi)容形成了鮮明對比。Bettertec設(shè)計(jì)的氣流計(jì)算APP，巧妙地運(yùn)用了占據(jù)頂部的標(biāo)簽頁。

頂部菜單和底部意義差不多，把菜單放在頂部，可以遵循從上至下的閱讀習(xí)慣，但也有缺點(diǎn)，即不適用與單手操作。

單手操作用戶是所示的這兩種姿勢（左手用戶相反）。綠色代表容易點(diǎn)擊區(qū)域，黃色為拇指伸展可到點(diǎn)擊區(qū)域，紅色區(qū)域超出單手可點(diǎn)擊范圍。

所以不管是在導(dǎo)航設(shè)計(jì)中，還是在移動應(yīng)用的其它設(shè)計(jì)中，我們應(yīng)該盡可能的考慮用戶的手勢操作習(xí)慣，給用戶更好更便捷的體驗(yàn)。

單手操作手指滑動區(qū)域圖片

網(wǎng)易新聞則采用了頂部可滑動的導(dǎo)航形式，屏幕頂端可滾動的選項(xiàng)卡:用戶移動選項(xiàng)卡后能看到更多的菜單選項(xiàng)。

愛奇藝應(yīng)用同樣也采用了頂部滑動導(dǎo)航的模式。但是這里更值得一提的是，為已選擇的菜單項(xiàng)設(shè)置使用易于識別或帶有標(biāo)簽的圖標(biāo)等不同的視覺效果，用戶就能清晰的知道自己選擇了哪一項(xiàng)。

主要導(dǎo)航模式——第四種：陳列館式

陳列館式的設(shè)計(jì)通常在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航。主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或幻燈片演示。

陳列館式導(dǎo)航能夠很好地應(yīng)用與用戶需要經(jīng)常瀏覽，頻繁更新的內(nèi)容，如下圖的超級相冊和便簽本。

相冊是我們在日常生活中時(shí)常運(yùn)用到的一個(gè)功能，使用頻率高，圖片數(shù)量多，所以采用陳列館的形式是再合適不過了。

而便簽本也不陌生，下圖中的便簽本可以上下左右拉伸不斷創(chuàng)建新的收納空間，一個(gè)個(gè)方方正正的分類視圖，顏色各異卻能達(dá)到一種養(yǎng)眼的和諧美。沒有花哨的功能，主界面上只簡潔地顯示收納盒名稱與其中的項(xiàng)目數(shù)量。

最美應(yīng)用:是一款通過互聯(lián)網(wǎng)平臺，每天為用戶發(fā)送一款賞心悅目的移動互聯(lián)網(wǎng)應(yīng)用。它通過類似幻燈片的形式來導(dǎo)航，用戶通過查看每個(gè)應(yīng)用來劃屏切換屏幕內(nèi)容，而它下面的進(jìn)度條也會互動性的跟隨著用戶的切換而進(jìn)行圖標(biāo)的動態(tài)變化。

主要導(dǎo)航模式——第5種儀表式

儀表式導(dǎo)航提供了一種度量關(guān)鍵績效指標(biāo)是否達(dá)到要求的方法。

過設(shè)計(jì)以后，每一項(xiàng)量度都可以顯示出額外的信息。這種主要的導(dǎo)航模式對于商業(yè)應(yīng)用、分析工具以及銷售和市場應(yīng)用非常有用。

Timi時(shí)光記賬—精美獨(dú)特的時(shí)間軸記賬:Timi 時(shí)光記賬采用了時(shí)下非常流行的時(shí)光軸的形式，幫你整理賬目，簡潔明了，界面精美，在方便好用的同時(shí)，還滿足了視覺享受的需求~。

樂動力：通過數(shù)據(jù)來查看自己每天活動狀態(tài)。下滑還有很多功能，都可以點(diǎn)擊查看。

主要導(dǎo)航模式——第6種隱喻式

隱喻式導(dǎo)航的特點(diǎn)是用頁面模仿應(yīng)用的隱喻對象。

這種導(dǎo)航主要用于游戲，但在幫助人們組織事物（如日記、書籍、紅酒等），并對其進(jìn)行分類的應(yīng)用中也能看到。

途書筆記，用牌照記錄數(shù)據(jù)的筆記。它把導(dǎo)航界面菜單做成了一本一本的書，有一本書的形式，隱喻的表達(dá)了書的概念。自定義標(biāo)題，分類進(jìn)行查閱。

找你妹的游戲中，導(dǎo)航就用闖關(guān)的進(jìn)度來顯示，直觀且具有趣味性。

主要導(dǎo)航模式——第7種：超級菜單式

移動設(shè)備上的超級菜單式導(dǎo)航與網(wǎng)站所用的超級菜單導(dǎo)航類似，它在一個(gè)較大的覆蓋面板上分組顯示已定義好格式的菜單選項(xiàng)。

這種導(dǎo)航模式在現(xiàn)在的app設(shè)計(jì)中使用的比較少，而且一般會用做分類檢索de 次級導(dǎo)航使用。在手機(jī)網(wǎng)站的導(dǎo)航設(shè)計(jì)中比較常見。

美團(tuán)中就采用了超級菜單式導(dǎo)航做為次級導(dǎo)航使用。

以上均是主要導(dǎo)航模式：那么接下來針對次級導(dǎo)航模式進(jìn)行案列賞析。

次要導(dǎo)航模式：

這里我們值得注意的是在導(dǎo)航的設(shè)計(jì)中，所有的主要導(dǎo)航模式都可以用作次級導(dǎo)航。我們經(jīng)常能夠看到選項(xiàng)卡下再用選項(xiàng)卡導(dǎo)航、導(dǎo)航卡下用列表導(dǎo)航、選項(xiàng)卡下采用儀表式導(dǎo)航、跳板式導(dǎo)航下采用陳列館式導(dǎo)航燈情況。

而次級導(dǎo)航模式是否可以用作主導(dǎo)航，答案不是確定的，因?yàn)槭挛锒际秦灤┤诤系模饕氵\(yùn)用得當(dāng)，一切均有可能。現(xiàn)在我把這三種歸納為次級導(dǎo)航是針對現(xiàn)有市場產(chǎn)品進(jìn)行分析得出，并不一定是絕對。

次級導(dǎo)航模式——第8種：頁面輪盤式。

通過這種導(dǎo)航模式，操作者可利用“滑動”操作快速瀏覽一系列離散的頁面。

瘋狂來找錢就采用頁面輪盤式，頁面指示器（iOS中的術(shù)語，指用來表示頁面數(shù)量的小點(diǎn)）可以顯示出導(dǎo)航中的頁面數(shù)量；執(zhí)行“滑動”操作可以顯示下一頁。

次級導(dǎo)航模式——第9種：圖片輪盤式

圖片輪盤式導(dǎo)航類似于一個(gè)二維輪盤，圖片輪盤式導(dǎo)航更多的應(yīng)用于播放器和需要多圖片展示應(yīng)用中。

香蕉相機(jī)，作為一個(gè)相機(jī)應(yīng)用，該有的功能相對還是挺齊全的。拍照、添加相冊圖片、添加文字等等，都木有問題，還有很文藝的濾鏡和相框~

圖片輪盤式導(dǎo)航可以查看更多的香蕉圖標(biāo)，相加幾個(gè)來幾個(gè)~~~~

次級導(dǎo)航模式——第10種：擴(kuò)展列表式

擴(kuò)展列表式導(dǎo)航通過左/右/上/下拉屏幕或者點(diǎn)擊按鍵顯示更多的信息。

在網(wǎng)易新聞，TIMI記賬和暢讀等應(yīng)用設(shè)計(jì)當(dāng)中，通過點(diǎn)擊屏幕左上角的按鈕喚出切換項(xiàng)，有些也可以通過向右或者向左，滑動手指來完成。所以當(dāng)我們覺得菜單比較占用位置的時(shí)候，可以嘗試用這種方式來隱藏菜單，需要注意的是設(shè)計(jì)展開菜單按鈕大部設(shè)計(jì)在左或右上角這些顯眼的位置。

一個(gè)簡單的滑動動畫，就像拉出一個(gè)抽屜，「抽屜式導(dǎo)航」這個(gè)名稱應(yīng)該就是來源于此。抽屜式導(dǎo)航突破了數(shù)量的限制，更大程度上釋放了主體空間，也因此提高了操作成本。

此處就個(gè)人意見，如果能將主要功能項(xiàng)組織在 4 到 5 項(xiàng)，選項(xiàng)卡導(dǎo)航的設(shè)計(jì)方式可能會更好，否則，就應(yīng)該優(yōu)先考慮抽屜式導(dǎo)航了。抽屜式導(dǎo)航通過縱向排列切換項(xiàng)解決了具有過多的切換項(xiàng)這一問題。不過這也意味著導(dǎo)航不能和主體內(nèi)容同時(shí)出現(xiàn)在屏幕上

三、UI設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)有哪些

UI即User Interface(用戶界面)的簡稱，UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計(jì)工作一點(diǎn)點(diǎn)的被重視起來，做界面設(shè)計(jì)的“美工”也隨之被稱之為“UI設(shè)計(jì)師”或“UI工程師”，其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣點(diǎn)，一個(gè)產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)，那么，UI設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)有哪些呢？

一、軸

軸在UI設(shè)計(jì)中是最基本、最常見的概念，也是用來組織界面結(jié)構(gòu)的重要核心。

簡單說來，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，在下面的設(shè)計(jì)圖中，軸以虛線的方式被標(biāo)注出來。

1、對齊

軸最常見于對稱元素的使用，當(dāng)元素被布置成軸對稱的布局的時(shí)候，會給人有序感。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。

最簡單的一個(gè)例子就是iTunes程序中的專輯列表的設(shè)計(jì)，所有的專輯列表在界面的左側(cè)保持對齊，圍繞虛線軸軸對稱。

2、強(qiáng)化

雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，這跳線會在視覺中變得更加“明顯”的。

最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒有，那么這種軸線的感覺不會那么強(qiáng)烈。

從產(chǎn)品設(shè)計(jì)的角度上來看，Twitter的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。

3、運(yùn)動

當(dāng)我們碰到某先線條的時(shí)候，視覺會很自然地沿著這些方向運(yùn)動，就如同我們站在街上，會自覺地沿著街道的兩頭走動。兩個(gè)端點(diǎn)決定了線，界定了開始和結(jié)束的地方，線或者說軸線的存在會引導(dǎo)和提示運(yùn)動的方向。

SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動，隨著音樂的播放，音軌自然地自左向右勻速運(yùn)動（具體可查看馬海祥博客《如何利用動效設(shè)計(jì)吸引訪客的注意力》的相關(guān)介紹）。

4、連續(xù)性

如果終點(diǎn)是不確定的，那么你通常會沿著軸線的方向?yàn)g覽/運(yùn)動，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。

在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見，因?yàn)榻ㄖ男藿ㄍǔ]法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無限地滾動下去是無比受歡迎的設(shè)計(jì)手法。

Pinterest的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動下去，只要你有興趣一直觀看下去。

二、對稱

當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對應(yīng)之時(shí)，它們就形成了完美對稱。

1、平衡

對稱令整個(gè)設(shè)計(jì)更加平衡，當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會給人以協(xié)調(diào)和諧的設(shè)計(jì)感。

當(dāng)我們在規(guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會令人非常舒適，這是平衡給人的感受。

Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則，屏幕兩側(cè)的控件是相同的規(guī)格，這類布局很適宜閱讀，用戶會自覺地自上到下，從左向右查看。

2、不對稱

如果軸線兩側(cè)的控件布置不再是一一對應(yīng)尺寸相近，那就是不對稱的設(shè)計(jì)，不對稱的設(shè)計(jì)會給人明顯的失衡感，可能會令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。

雖然Pinteret的APP設(shè)計(jì)在整體上是沿著中軸線對稱的(寬度一致)，但是兩邊的界面控件并非是對稱的，它們的高度并不一致，位置也是錯落的，稍微一點(diǎn)的落差都會被眼睛捕捉到，而這樣的差異讓用戶無法準(zhǔn)確地左右順序閱讀，不對稱設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性，但是也可以緩解了規(guī)律性設(shè)計(jì)帶來的視覺疲勞。

三、層級

當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候，層級就出現(xiàn)了。

1、尺寸

如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大，就會區(qū)分出層級。毫無疑問，我們查看某個(gè)設(shè)計(jì)的時(shí)候，通常會被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶，其中一個(gè)是其他四個(gè)的兩倍大，我們的注意力自然而然會被吸引過去。

通過尺寸來區(qū)分文章列表層級的典型就是稍后讀應(yīng)用Pocket，頂部的輪播文章?lián)碛懈蟮膱D片，它的位置和尺寸會令我們一眼注意到（具體可查看馬海祥博客《詳解移動端設(shè)備頁面尺寸設(shè)計(jì)原理》的相關(guān)介紹）。

2、形狀

如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣，也可以讓它獨(dú)立出一個(gè)層級，不規(guī)則的設(shè)計(jì)同樣會令人側(cè)目，建筑物的正面擁有五個(gè)相同的窗戶和一閃大門，你會立刻注意到門的獨(dú)特之處。

在Instagram的個(gè)人信息頁中，圓形的個(gè)人頭像在方形的圖片中別具一格，非常抓人眼球。它會讓人意識到，這個(gè)獨(dú)特的東西，更為重要。

3、位置

位置的存在同樣能彰顯層級的不一樣，在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來更重要，位于軸線頂端的控件會顯得比其他部分的優(yōu)先級更高。

以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例，時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要，而這個(gè)地方正好展示的也是用戶頭像。

四、韻律

UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美，重復(fù)的模式會營造出獨(dú)特的節(jié)奏之美。

1、模式

理解韻律最直接的方式就是聽歌，音樂擁有節(jié)奏感，絕大多數(shù)的音樂遵循著相同的節(jié)拍，節(jié)拍就是音樂模式的一部分。

這方面最典型的APP是Airbnb，APP列表中每一間房子都占據(jù)一個(gè)模塊，模塊中有著大小相同的圖片，價(jià)格、位置和房東信息和圖片的相對位置一定，且排版勻稱舒服，兩個(gè)模塊之間的間距也相同，當(dāng)你瀏覽的時(shí)候，熟悉的節(jié)奏會讓你清楚地知道上哪看關(guān)鍵信息。

2、間斷

當(dāng)節(jié)奏被間隔打斷的時(shí)候，會形成不同的層級，聽歌的時(shí)候，均勻的節(jié)奏被其他的音樂元素打斷的時(shí)候，你會意識到這是比較特別的部分。

在Twitter的APP中，推文和推文保持著相同的樣式，均勻的節(jié)奏，但是其中的“推薦用戶”一項(xiàng)有著不同的樣式，它插入到推文列表中，打破了整個(gè)信息流的節(jié)奏，凸顯出不同的層級，會很快抓住你的注意力。

四、UI設(shè)計(jì)規(guī)范都包含哪些規(guī)范？

1.基礎(chǔ)規(guī)范

基礎(chǔ)規(guī)范我劃分的是組成頁面最小的元素、是最基礎(chǔ)的一步?；A(chǔ)規(guī)范有文字、顏色、布局層級、圖形、分割線等。

2.組件規(guī)范

組件規(guī)范是由兩個(gè)元素組成，且可點(diǎn)擊的控件。組件規(guī)范有按鈕、導(dǎo)航欄、搜索框、tab欄、列表、表格、篩選器等。

3.模塊規(guī)范&banner運(yùn)營規(guī)范

模塊規(guī)范是一個(gè)大的板塊，如金剛區(qū)、列表流、圖片流等;因?yàn)閎anner運(yùn)營是一個(gè)很復(fù)雜的模塊，需要單獨(dú)定義規(guī)范。

4.特殊狀態(tài)規(guī)范

設(shè)計(jì)場景中一些特殊的狀態(tài)，也是我們設(shè)計(jì)時(shí)經(jīng)常忽略的地方。特殊狀態(tài)規(guī)范有彈窗、空白頁、加載態(tài)、toast浮層、啟動圖等等。

通過這四種規(guī)范的建立，UI設(shè)計(jì)規(guī)范已經(jīng)很全面、細(xì)致了，希望大家在做設(shè)計(jì)的過程中善于總結(jié)歸納，同時(shí)積極主動的去建立規(guī)范、建立組建庫。逐步的去解放自己的時(shí)間、成本，去做一些更具有創(chuàng)造力的工作，減少重復(fù)性工作。

以上就是關(guān)于列表式布局UI設(shè)計(jì)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。