正文

列表式布局UI設計（列表式布局優(yōu)點）

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

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

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

本文目錄:

1、UI設計表單結(jié)構(gòu)2018-09-10
2、移動應用UI設計——導航設計
3、UI設計的規(guī)范標準有哪些
4、UI設計規(guī)范都包含哪些規(guī)范？

列表式布局UI設計（列表式布局優(yōu)點）

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

UI設計表單結(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ù)情況下表單作為標題存在的組合。

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

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

表單常用控件

常用設計原則

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

在單選方案中，有2-5個選項可用，使用分段控件而不是下拉列表。主要是因為分段控制內(nèi)容可見，并且可以通過單個交互完成任務，而不是多步（點擊打開，選擇，點擊）。

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

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

3. 使用開關而不是下拉列表

如果只有2個選項，如顯示或隱藏，打開或關，這種情況使用開關來提升操作效率。

4. 滑塊

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

5. 避免多列表單

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

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

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

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

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

8. 對信息進行分組

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

設計策略

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

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

如果只有2個選項，如顯示或隱藏，打開或關，這種情況使用開關來提升操作效率。

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

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

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

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

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

二、移動應用UI設計——導航設計

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

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

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

圖1-2 次級導航模式

首先看看以下7種主要導航模式：

主要導航模式—— 第一種：跳板式

跳板式導航對操作系統(tǒng)并沒有特殊要求，在各種設備上都有良好表現(xiàn)。它有時也被稱為“快速啟動板”（Launchpad）。跳板式導航的特征是，登錄界面中的菜單選項就是進入各個應用的起點。在國內(nèi)市場上跳板式設計應用很用，如下圖的第一個“百度手機衛(wèi)士”（圖1-3）它主要通過功能來展示菜單選項，這種網(wǎng)格布局清晰的把各個功能區(qū)域進行劃分，能讓用戶快速找到入口并點擊操作。(圖1-4)的云圖TV，它是一個免流量的手機電視，他的模塊相對百度手機衛(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ù)需求的功能來定義，可以成比例放大某些選項，以彰顯其重要性。

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

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

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

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

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

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

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

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

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

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

3.視情況使用個性化設置和自定義選項。

主要導航模式——第二種：列表菜單式

列表菜單式導航與跳板式導航其實是有共同點的，他們的共同點在于，每個菜單項都是進入應用各項功能的入口點。

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

案列分析：

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

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

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

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

主要導航模式——第三種：選項卡式

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

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

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

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

選項卡至于低端的應用市場上面有很多，這里列舉幾個比較常見的APP：

屏幕底部水平滾動的選項卡是個非常不錯的設計，如的Waterlogue應用，它是一款水彩風格照片處理工具，下面的水平翻動選項卡可以讓用戶選擇多種水彩風格

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

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

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

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

所以不管是在導航設計中，還是在移動應用的其它設計中，我們應該盡可能的考慮用戶的手勢操作習慣，給用戶更好更便捷的體驗。

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

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

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

主要導航模式——第四種：陳列館式

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

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

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

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

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

主要導航模式——第5種儀表式

儀表式導航提供了一種度量關鍵績效指標是否達到要求的方法。

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

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

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

主要導航模式——第6種隱喻式

隱喻式導航的特點是用頁面模仿應用的隱喻對象。

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

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

找你妹的游戲中，導航就用闖關的進度來顯示，直觀且具有趣味性。

主要導航模式——第7種：超級菜單式

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

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

美團中就采用了超級菜單式導航做為次級導航使用。

以上均是主要導航模式：那么接下來針對次級導航模式進行案列賞析。

次要導航模式：

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

而次級導航模式是否可以用作主導航，答案不是確定的，因為事物都是貫穿融合的，主要你運用得當，一切均有可能?，F(xiàn)在我把這三種歸納為次級導航是針對現(xiàn)有市場產(chǎn)品進行分析得出，并不一定是絕對。

次級導航模式——第8種：頁面輪盤式。

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

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

次級導航模式——第9種：圖片輪盤式

圖片輪盤式導航類似于一個二維輪盤，圖片輪盤式導航更多的應用于播放器和需要多圖片展示應用中。

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

圖片輪盤式導航可以查看更多的香蕉圖標，相加幾個來幾個~~~~

次級導航模式——第10種：擴展列表式

擴展列表式導航通過左/右/上/下拉屏幕或者點擊按鍵顯示更多的信息。

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

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

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

三、UI設計的規(guī)范標準有哪些

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

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

一、軸

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

簡單說來，軸是在設計的時候組織一系列元素的假象線，在下面的設計圖中，軸以虛線的方式被標注出來。

1、對齊

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

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

2、強化

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

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

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

3、運動

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

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

4、連續(xù)性

如果終點是不確定的，那么你通常會沿著軸線的方向瀏覽/運動，直到你找到感興趣的東西，或者感到厭倦并關閉應用。

在建筑學中，未清楚界定的終點非常少見，因為建筑的修建通常沒法永遠持續(xù)下去，但是UI設計則不一樣，無限地滾動下去是無比受歡迎的設計手法。

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

二、對稱

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

1、平衡

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

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

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

2、不對稱

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

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

三、層級

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

1、尺寸

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

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

2、形狀

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

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

3、位置

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

以設計應用Path的設計為例，時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要，而這個地方正好展示的也是用戶頭像。

四、韻律