出色的用戶界面應(yīng)該遵循人性化的設(shè)計原則，基于用戶的思維和工作模式，而不是移動設(shè)備的功能和特點。若是界面不吸引人、邏輯不合理，再偉大的APP軟件也不會受到用戶的青睞的，但是一個漂亮的、吸引人的UI不僅能夠增加用戶對APP軟件的喜愛，還能增強APP軟件的功能，從而增加用戶對軟件的粘性。
人機交互界面設(shè)計的五大原則
原則一：美學(xué)完整性
美學(xué)完整性并不是用來衡量一個APP軟件的界面有多好看，而是用來衡量APP軟件的界面與功能是否匹配。例如，對于一個應(yīng)用來說，會用比較微妙的修飾元素和背景來體現(xiàn)生產(chǎn)性的任務(wù)，對于突出的任務(wù)則會使用標(biāo)準(zhǔn)的控件和操作行為。這樣的APP軟件會傳達一個清晰和統(tǒng)一的信息給用戶，讓用戶懂得APP軟件的目的。但要是APP軟件在生產(chǎn)性任務(wù)上使用了異想天開的元素，用戶就會被這些相互矛盾的信號所困擾。
同樣的，在一個仿真任務(wù)的APP軟件里，例如游戲應(yīng)用，用戶希望一個漂亮的界面來提供更多的樂趣從而鼓勵他們繼續(xù)游戲。盡管用戶不期待能夠在一個游戲中完成一個艱難或者是生產(chǎn)性的任務(wù)，但他們?nèi)匀幌Ｍ螒虻慕缑婺軒硗暾捏w驗。
原則二：一致性
APP軟件界面的一致性允許用戶利用他們自身的知識和技能完成APP軟件的過渡。當(dāng)然，保持界面的一致性，并不是讓你盲目的復(fù)制其他的APP軟件，相反的，作為開發(fā)者應(yīng)該懂得利用同類型APP軟件大眾接受的標(biāo)準(zhǔn)和范式來設(shè)計自己的應(yīng)用。
為了確定你的APP軟件是否遵循一致性原則，開發(fā)者們應(yīng)該想想以下幾個問題：
A. APP軟件與iOS的標(biāo)準(zhǔn)是否一致？是否正確的使用了系統(tǒng)提供的控件、視圖和圖標(biāo)？設(shè)計是否符合設(shè)備的功能和特色？
B. APP軟件與本身的定位一致么？文本使用了統(tǒng)一的風(fēng)格了么？一樣的圖標(biāo)是否代表的一個意思？不同場景執(zhí)行相同的操作，結(jié)果是否符合用戶的預(yù)期？
C. 在合理的范圍內(nèi)，APP軟件與早期的版本一致么？條款和提示是一個意思么？
原則三：直接操作
當(dāng)用戶操作屏幕上的對象而不是單獨的控件進行操作時，用戶更能理解自己的任務(wù)和操作的結(jié)果。iOS用戶更喜歡直接的操作行為，因為多點觸控的設(shè)備特點。當(dāng)看到屏幕的對象，直接用手勢進行操作給人一種更為親切的感覺，而且很有控制感，因為沒有了媒介的干預(yù)，更多指的是對鼠標(biāo)的依賴。
舉個例子，用戶可以使用兩指的縮小或放大所要控制的面積就可完成點擊縮放的操作。游戲中，玩家還可以直接與物體互動，直接移動他們。例如，在顯示密碼鎖的游戲中，玩家可以直接通過旋轉(zhuǎn)操作打開鎖。
在iOS的APP軟件中，在以下的場景中可以使用直接操作：
A. 旋轉(zhuǎn)或反轉(zhuǎn)來移動設(shè)備來控制屏幕中的對象
B. 利用手勢直接操作屏幕中的對象
C. 能夠直觀的看到操作的結(jié)果
原則四：隱喻
當(dāng)虛擬的物品和操作行為是對現(xiàn)實生活中的物品和操作進行模仿的時候，玩家能夠很快的掌握APP軟件的規(guī)則和操作。一個簡單的軟件隱喻是文件夾：在現(xiàn)實生活中，人們把物品放入文件夾中，所以在計算機中，用戶能夠很快的理解這個操作的意思，很快的理解將文檔等文件放入文件夾的意思。
最合適的隱喻應(yīng)該是不受現(xiàn)實生活的限制。例如，用戶可以將很多內(nèi)容放入文件夾中，包括音樂、文檔、視頻等，但現(xiàn)實生活中顯然無法做到。
iOS操作系統(tǒng)為開發(fā)者提供了很多的隱喻，因為他支持豐富的同行圖像和手勢。用戶可以與屏幕中的物體進行物理交互，很多場景中的交互十分逼真，iOS的隱喻包括：
A. 音樂播放的倒退控制
B. 游戲中的拖拽、彈和刷操作
C. 滑動開關(guān)的操作
D. 選擇轉(zhuǎn)輪做選擇
原則五：用戶控制
注意，APP軟件中，是用來控制操作行為的，而不是APP軟件。盡管APP軟件能夠建議用戶做哪些操作或者警告用戶有危險，但是這顯然對于應(yīng)用本身是個錯誤，因為這會將玩家推得更遠。成功的APP軟件應(yīng)該在一味的提示和關(guān)鍵時刻做提示之間進行平衡。當(dāng)對操作行為和控制感到熟悉和可預(yù)見的時候，用戶將會明顯感覺到自己對于APP軟件的控制。操作行為越是簡單直接，玩家就能更容易的理解和記住。
文章來源：站酷 作者：pdpcss123_520
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、
BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
公平等級是用戶按重要性處理信息的順序。在界面設(shè)計中，就像任何其他形式的設(shè)計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結(jié)構(gòu)，頭腦可以對元素進行分組和優(yōu)先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內(nèi)容和用戶的成就感。
界面設(shè)計中經(jīng)常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導(dǎo)致混亂并增加導(dǎo)航的工作量。對這些元素進行優(yōu)先級排序?qū)τ诒苊獯藛栴}很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內(nèi)容。因此，重點應(yīng)該清楚地說明網(wǎng)站或應(yīng)用程序的內(nèi)容。
這種優(yōu)先次序不僅應(yīng)被視為美學(xué)問題，而且應(yīng)被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設(shè)備中）將與站點導(dǎo)航相關(guān)。盡管圖形設(shè)計中的層次結(jié)構(gòu)已經(jīng)存在多年，但恒定的交互因素已添加到UI設(shè)計中。用戶與元素交互的事實使設(shè)計直觀的界面更加相關(guān)。
創(chuàng)建正確的層次結(jié)構(gòu)必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結(jié)構(gòu)背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應(yīng)用程序的此快照中，標(biāo)題“ Pawtraits：我們的不斷變化的……”的大小比副標(biāo)題“我們的真實感受……”大得多。通過將這些分數(shù)分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當(dāng)同時發(fā)送兩條消息時，閱讀順序?qū)⒆兊酶永щy。這可能不是一個大問題，但是您應(yīng)該記住，這可能會創(chuàng)建效率較低的層次結(jié)構(gòu)。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設(shè)計黯然失色，并使其他信息在閱讀中丟失。像設(shè)計中的所有其他內(nèi)容一樣，平衡是關(guān)鍵。
明亮的色彩比柔和的色調(diào)更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優(yōu)先排序或降低優(yōu)先級。在界面設(shè)計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統(tǒng)接收反饋。
在此Cabify應(yīng)用截圖中，紫色的使用是主要顏色。行程路線和“繼續(xù)”按鈕均為第一層級，其次是地圖和汽車。色調(diào)和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出?；疑捌錁?biāo)度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結(jié)構(gòu)，當(dāng)我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產(chǎn)生一種幻覺，即一切對構(gòu)圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關(guān)的事物而不是最不相關(guān)的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創(chuàng)建閱讀順序時，使用距離進行分組是非?？尚械馁Y源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標(biāo)題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設(shè)計中對象的分組，以創(chuàng)建連接和關(guān)聯(lián)。當(dāng)事情接近時，通常意味著它們必須相關(guān)。如果事情離得更遠，則意味著它們可能不相關(guān)。簡而言之，接近會創(chuàng)建這些關(guān)系，并將組織和層次結(jié)構(gòu)帶入信息。
在Airbnb住宿頁面上，標(biāo)題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創(chuàng)建了層次結(jié)構(gòu)。
元素的對齊對于在界面設(shè)計中創(chuàng)建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關(guān)性，還可以確定交互式或信息性特定元素的開頭和結(jié)尾。
人類的大腦喜歡模式，這就是為什么許多最好的網(wǎng)站都是對稱的。這使我們有機會打破該規(guī)則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據(jù)它們的對齊或未對齊來關(guān)聯(lián)這些元素。
重復(fù)的樣式給人以元素相關(guān)的印象。這種層次結(jié)構(gòu)包括在接口中重用相同或相似的元素。重復(fù)還基于視覺模式提供了一些優(yōu)勢。如果重復(fù)某件事，那是因為很重要。
在Uber網(wǎng)站的白色菜單中，圖標(biāo)和標(biāo)簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結(jié)構(gòu)的第二位，緊隨主標(biāo)題“進入駕駛員座位……”。重要的是要知道重復(fù)對于創(chuàng)建第二級或第三級信息非常有用。
在界面設(shè)計中，重復(fù)會在整個體驗過程中產(chǎn)生統(tǒng)一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復(fù)的樣式標(biāo)記，粗體的使用和較大的字體大小為用戶提供了基于重復(fù)的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產(chǎn)生的注意力就越多。負空間是顯示空白畫布的區(qū)域，不僅可以在同一元素的周圍而且可以在同一元素之間和內(nèi)部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網(wǎng)站設(shè)計”的此示例中，數(shù)字“ 01”和標(biāo)題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權(quán)重，但應(yīng)用良好的負空間可以實現(xiàn)平衡，防止其他元素貶值。
盡管有些設(shè)計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設(shè)計會導(dǎo)致界面飽和，并且沒有層次結(jié)構(gòu)指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創(chuàng)建層次結(jié)構(gòu)的一種優(yōu)雅資源，而且還可以為設(shè)計提供支持結(jié)構(gòu)。也就是說，它創(chuàng)建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復(fù)雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復(fù)雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結(jié)合了其他重要的設(shè)計元素，例如風(fēng)格和氛圍。
UI設(shè)計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應(yīng)用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應(yīng)按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導(dǎo)致不必要的壓縮。紋理往往會與其他分層資源（包括大?。┲丿B，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設(shè)備屏幕上看到的所有內(nèi)容。同樣，平衡是關(guān)鍵。
當(dāng)設(shè)計沒有清晰的視覺層次時，用戶的導(dǎo)航將被迫進入其他形式的閱讀，例如F和Z模式。作為設(shè)計師，我們可以加強這些模式或破壞它們，以找到更多動態(tài)的交流形式。在UI設(shè)計中，沒有什么僅僅是美感，而視覺層次結(jié)構(gòu)無疑是我們擁有的指導(dǎo)用戶體驗，重新設(shè)計標(biāo)準(zhǔn)并提供直接接口目標(biāo)的最佳武器。
《一款A(yù)PP設(shè)計的從0到1》這是一篇系列文章干貨，上次U妹講的是關(guān)于APP項目立項和預(yù)估時間篇，今天U妹來說一下，APP界面設(shè)計和iPad界面設(shè)計規(guī)范。
往期回顧：
《一款A(yù)PP設(shè)計的從0到1之：項目立項篇》
《一款A(yù)PP設(shè)計的從0到1之：項目預(yù)估時間篇》
這次U妹接著上次的茬繼續(xù)，繼續(xù)之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
一、項目立項
二、項目預(yù)估時間
三、界面設(shè)計
四、切圖標(biāo)注
五、視覺還原
六、上線準(zhǔn)備
界面設(shè)計篇
我是一名UI設(shè)計師，所以U妹這里說的都是從設(shè)計師的角度去闡述一款A(yù)PP從無到有的一個過程中，設(shè)計師應(yīng)該干的事。
目前在行業(yè)里，關(guān)于APP界面設(shè)計規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說的是最新的iOS 界面設(shè)計規(guī)范（Android設(shè)計規(guī)范，我們下次見）
一、關(guān)于設(shè)計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當(dāng)然是推薦高版本，因為功能更強大，作圖的速度也就更快。
我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現(xiàn)在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據(jù)個人習(xí)慣，選擇自己順手的工具就好。
二、設(shè)計稿尺寸
在看設(shè)計稿尺寸之前，我們先來了解一下APP界面設(shè)計構(gòu)成
界面構(gòu)成由：布局層、圖文排版層和圖標(biāo)層。
在iPhone 6還沒出的時候，都是用640x1136 px來做設(shè)計稿的，自從6的發(fā)布，所有的設(shè)計稿尺寸以750x1334 px來做設(shè)計稿尺寸
U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設(shè)計規(guī)范：
iPhone 界面尺寸：
以750x1334px作為設(shè)計稿標(biāo)準(zhǔn)尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配。
2. 大屏幕時代依然以小尺寸作為設(shè)計尺寸，會限制設(shè)計師的設(shè)計視角。
3. 設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率。
所以做設(shè)計稿事請以750x1334px來做設(shè)計稿
在文檔建立參考線是一個很好的習(xí)慣，我希望大家也可以養(yǎng)成這個習(xí)慣，上下很容易設(shè)置，左右我習(xí)慣設(shè)置24 px的距離，我通過對國內(nèi)外很多APP就行了對比，總結(jié)是24 px更合理，這個是我的個人習(xí)慣，所以也不要當(dāng)做是明文規(guī)則，你設(shè)置為30 px，也是可以的。
然后就可以開始你的設(shè)計了
這里U妹再給大家略過一下iPad的設(shè)計規(guī)范：
三、圖標(biāo)設(shè)計
iPhone 圖標(biāo)尺寸：
圖標(biāo)設(shè)計請用柵格化系統(tǒng)進行設(shè)計
設(shè)計尺寸：1024x1024px，竟可能的采用黃金比例設(shè)計
四、關(guān)于設(shè)計字體
先來看一下字體的歷史演變過程：
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
↓↓↓
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關(guān)于字體大小的問題：
頂部操作欄文字大小 34-38px
標(biāo)題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據(jù)設(shè)計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。
關(guān)于界面設(shè)計就說到這里了，好的工作方法才能讓自己事半功倍，你覺得對自己有幫助，那可以借鑒學(xué)習(xí)我的方法，在具體工作中也要靈活應(yīng)用，有不足之處或問題也可給U妹留言，下期U妹帶你一起來看看界面切圖標(biāo)注，我們下期再見！
圓形元素在界面設(shè)計中被廣泛運用，從常見的圓形圖標(biāo)到圓形的頭像，又或是圓形的輪廓形狀。圓形是一種特殊的形狀，它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此，在使用圓形元素設(shè)計界面時會有一些注意事項。
一、圓形頭像
放眼望去，圓形頭像已然占領(lǐng)了我們的手機。不妨看看下面舉的這些例子，如下圖所示。
從左到右依次是搜狗地圖、QQ、Instagram。當(dāng)然，還有很多其它的例子，就不一一列舉啦。此刻，肯定有同學(xué)已經(jīng)按耐不住要跳出來反駁了，微信和Facebook就不是圓形頭像，不信你看下面兩張圖。
方與圓之間，孰對孰錯，請繼續(xù)看下文分解。
1.用戶使用頭像的目的
不管是圓形頭像，還是方形頭像，其歸根結(jié)底都是頭像。用戶使用頭像的目的，主要是作為個人身份的象征。區(qū)別于其他用戶的特征有很多，例如用戶名、用戶ID、用戶頭像。在這些備選項中，頭像最便于快速識別和記憶，尤其是帥哥美女。
除此之外，還有一部分通過頭像來彰顯自己的個性，例如美女通常會使用自己的性感自拍作為頭像來表現(xiàn)自己的魅力，又或是使用卡通人物或形象作為頭像來表現(xiàn)自己的藝術(shù)氣息，再或是使用萌寵作為頭像來表現(xiàn)自己的愛心或是呆萌。
2.用戶使用什么照片作為頭像
隨著智能手機的越來越普及，人們拍攝照片的門檻也變得越來越低，越來越多的用戶使用自拍的照片作為頭像。照片的內(nèi)容五花八門，例如人物、風(fēng)景、花草、寵物。即使是正常的人物照片，背景中也會摻雜著很多其它的元素，例如下圖所示。
第一張照片中人物背景雖然虛化了，但背景仍然很凌亂，一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角，豪車才是真正的主角，這類型的自拍照不再少數(shù)。第三張照片人物拍攝的光線陰影錯亂，故意露出一線背景內(nèi)容，其用意如何昭然若揭。此外，用戶手機的好壞、拍照水平也不一致，拍攝出的照片質(zhì)量也參差不齊。
使用這些照片作為頭像時，人物不但不被突出，反而被弱化了。雖然智能手機屏幕越來越大，但是當(dāng)頭像集體在界面中展示的的時候，每個頭像依然較小。
3.方形頭像和圓形頭像的區(qū)別
方形頭像和圓形頭像的區(qū)別可以用兩張對比圖來說明，如下圖所示。
左圖是方形頭像，右圖是圓形頭像。通過對比，可以發(fā)現(xiàn)以下幾點：
a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現(xiàn)人物特征，但是干擾信息較多，例如背景中的燈光、門柱、屏風(fēng)。對比之下，右圖更為清晰地展示了人物的臉部特征，例如錐子臉、美瞳、假睫毛。在前面的分析中也提到，手機拍攝的照片質(zhì)量參差不齊。在這種現(xiàn)實情況下，圓形頭像更有利于忽略照片的背景，提高頭像的識別效率。
b、嚴格意義上講左圖并不能稱之為頭像，而更應(yīng)該稱之為照片。原因很簡單，頭像嘛，自然應(yīng)該以展示“頭”為主，而左圖中頭像只占畫面四分之一不到的區(qū)域。從這個角度來說，顯然右圖更為合適。在選擇照片作為頭像時，如果是圓形，用戶更愿意選擇臉部的照片作為頭像；如果是方形，用戶則相對更隨意，通常是全身或是半身照。不信，你可以打開自己的微信，看看自己的好友頭像，或者往前滑滑看看前面的配圖。
c、日常生活中，我們看到的大多數(shù)相框都是方形的，圓形的相框較少，這是因為大多數(shù)照片都是方形的。因此，使用圓形的輪廓來表現(xiàn)頭像，能夠快速地和照片區(qū)分開來，更加突出。
當(dāng)然，使用圓形的輪廓作為頭像，還有一些其它的原因，例如技術(shù)上的進步。
早期由于CSS等技術(shù)的不成熟，圓形、圓角圖形的處理非常麻煩，現(xiàn)在變得容易很多。
二、圓形的icon
在APP的UI設(shè)計中，我們會經(jīng)?？吹揭慌排艌A形的icon，例如下圖所示。
上圖中，前面兩個分別是美團和淘寶。在設(shè)計上，都有兩行橫排的圓形圖標(biāo)。最后一張圖是搜狗地圖的服務(wù)tab頁，可以發(fā)現(xiàn)也有縱向排列的一溜圓形圖標(biāo)。
在這里，要回答兩個問題：
1.為什么要用圓形？
2.為什么要用圓形而非矩形？
第1個問題很方便回答。每個功能入口的圖標(biāo)都不相同，如果去掉圓形輪廓，勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體，加上圓形之后就能夠弱化圖標(biāo)的差異性，讓其變得更加規(guī)整，看起來也更加清爽，整齊劃一。同時，在功能上也表明各個圖標(biāo)之間的平等地位，不會因為某個圖標(biāo)形狀特殊而有所偏袒。
在回答第2個問題之前，首先回歸圓形和方形的基本特征，
圓形：動，曲線，運動，靈動，流動
方形：靜，直線，規(guī)則，嚴肅，理性
圓形和方形比起來，顯得要靈動很多，不至于那么呆板、嚴肅。如此，不難理解為什么用圓形而非矩形。
其次，圓形能夠使圖標(biāo)在方形頁面中脫穎而出——不覺得這幾個圓形圖標(biāo)在頁面中非常突出搶眼么？原因嘛，很簡單。我們的手機屏幕大多是方形的，界面中的大多數(shù)元素也是方形的，這時候用一點少量的圓形，自然在界面中形成焦點，這一點在后面的分析中還會見到。
除了這種形式之外，還有一些單個的圓形圖標(biāo)浮于頁面底部，通常執(zhí)行的是返回至頂部的操作。
圓與方就像太極中的陰與陽，相生相克，而又生生不息。巧妙地將圓形與方形進行結(jié)合，能夠讓頁面變得生動活潑的同時，也能夠更好實現(xiàn)功能上的引導(dǎo)，如下圖所示的幾個案例。
第一幅圖是谷歌手機地圖，地點右上角的出行方式圖標(biāo)剛好被方形的臨時層一分為二。從功能上來講，出行方式是下一步的行為，不屬于臨時層里的內(nèi)容，因此置于右上角的位置是比較合適的。從UI角度來說，圓形與方形結(jié)合，使的圓形變得更加突出顯眼；同時圓形置于右上角，頁面也不那么死板，反而讓頁面變得生動、活潑起來。
第二幅圖是宜人貸，微微鼓起的弧度讓這個理財項目變得十分突出，同時也打破了頁面沉悶的布局。
第三幅圖是kitchen stories，整個頁面保持左右居中，作者的頭像居中現(xiàn)實，對頁面進行了分割的同時起到了承上啟下的作用。
在頁面設(shè)計中，圓形元素通常不是獨立存在的，而是和其他元素相生相息，相互包容。尋求好的視覺效果的同時，也要弄清楚頁面元素之間的相互關(guān)系，這樣產(chǎn)出的設(shè)計才是真的好設(shè)計。
四、圓形的輪廓
結(jié)合現(xiàn)實物體，借用圓形輪廓，打造頁面點睛之筆。還是舉幾個栗子給大家看看吧，如下圖所示。
第一幅圖所示的是網(wǎng)易云音樂的播放界面。圓形輪廓與唱片保持一致，雖然占據(jù)了頁面的主要空間，但是使的整個頁面變得文藝簡潔。
第二幅圖所示的是搜易貸的賬戶頁面。可用余額采用瓶裝水的設(shè)計，余額較多則水漲的越高，同時會有晃動的效果，栩栩如生的同時讓頁面變得靈動起來。
第三幅圖所示的是樂動力的首頁。步數(shù)越多，則描邊進度條越多，暗色變得越暖。與現(xiàn)實生活中的儀表盤相對應(yīng)，漸變色搭配圓形，使的頁面變得主次分明，極富視覺沖擊力。
可以發(fā)現(xiàn)，在使用圓形元素時要注意頁面的平衡，例如左右和上下的對齊居中。為了保證頁面的均衡和清爽，通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。
好久沒有發(fā)文章了，今天順叔和大家一起聊一聊卡片式設(shè)計，無論是WEB還是APP卡片式設(shè)計運用的比較多，很多UI設(shè)計師比較偏愛這樣的表現(xiàn)，卡片式設(shè)計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設(shè)計中有一些技法還是需要了解，不能因為卡片式設(shè)計而卡片式設(shè)計，要能更好的應(yīng)用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設(shè)計技法進行分析，希望能幫助到一些設(shè)計的小伙伴。
教程前的引言
卡片式設(shè)計這幾年比較流行，同樣這樣的設(shè)計表達也是個趨勢，應(yīng)用在APP PC界面中至今還流行著，從事UI設(shè)計的都會知道卡片式設(shè)計，具有把內(nèi)容整合模塊化，從視覺，個性化體驗上進行呈現(xiàn)，是設(shè)計師在設(shè)計時常用的一種表現(xiàn)，同樣也具有獨特的創(chuàng)新概念。
在一些項目中，一些客戶會說這個設(shè)計的APP界面有點太白，沒有層次感怎么辦，那這時你應(yīng)該和客戶說在APP設(shè)計中運用了現(xiàn)在比較流行的一個表現(xiàn)手法，卡片式設(shè)計，可以解決在畫面中有個性化 、變化、 層次感的設(shè)計。那客戶又問什么是卡片式設(shè)計呢？
一、什么是卡片
無處不在的卡片設(shè)計具有個性的美感和很好的易用性，是以文字標(biāo)題，小標(biāo)題， 圖形或圖片組成的模塊化，以塊狀形式規(guī)整的整合內(nèi)容，讓內(nèi)容更規(guī)整化，視覺上更個性化，也是操作上快捷的內(nèi)容信息入口。更直觀的表達內(nèi)容信息和快捷跳轉(zhuǎn)操作。成為當(dāng)今在設(shè)計中一個比較流行趨勢，而卡片在設(shè)計中也占用一定的優(yōu)勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優(yōu)點
設(shè)計效果圖展示
順叔為了這個文章特意設(shè)計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設(shè)計優(yōu)勢
1.趨勢
無論是大平臺 還是小平臺的產(chǎn)品都會運用這樣的卡片式，跟風(fēng)式設(shè)計趨勢，也讓卡片式設(shè)計成為了一個現(xiàn)在常用的優(yōu)勢，不過卡片式設(shè)計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設(shè)計上的不同，個性化變化，頁面層次感區(qū)分強烈，能更好的體現(xiàn)提煉出內(nèi)容
3. 規(guī)整化
卡片式設(shè)計以圖片、 圖標(biāo) 、LOGO、 標(biāo)題、 整合到一起 以塊狀的形式在界面中展示，更規(guī)整的排版呈現(xiàn)。雖然內(nèi)容多會導(dǎo)致頁面亂，一個模塊包含內(nèi)容之后就會規(guī)整不少，也給頁面設(shè)計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設(shè)計。同樣對卡片式也感覺到舒適感。卡片式設(shè)計還是需要根據(jù)整個布局、 產(chǎn)品需求 、功能進行設(shè)計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設(shè)計而卡片設(shè)計。
5. 易用性
卡片式設(shè)計在易用性和靈活性上比較高，在響應(yīng)式設(shè)計中同樣應(yīng)用的也比較多一些。能更好的有序排列。
6.簡約設(shè)計
簡約設(shè)計會更顯得品質(zhì)，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標(biāo)和標(biāo)題 副標(biāo)的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設(shè)計 內(nèi)容上的標(biāo)題 、圖標(biāo)、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設(shè)計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設(shè)計知識
一般在界面設(shè)計中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設(shè)計表達姿勢。希望小伙伴在設(shè)計的同時有所靈感和參考，把一些表現(xiàn)手法加入到自己的設(shè)計中，適合才最重要?？ㄆ皆O(shè)計還是要根據(jù)整個風(fēng)格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結(jié)分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現(xiàn)在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設(shè)計比較常見的運用手法，卡片的長高在設(shè)計中也是根據(jù)結(jié)構(gòu)，內(nèi)容功能而進行設(shè)定。正方形，長方形都是一個表現(xiàn)得手法，在色塊上面標(biāo)題文字，圖標(biāo)，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應(yīng)用場景：卡包、天氣、類別、入口、優(yōu)惠劵，卡劵
此圖片來自于網(wǎng)絡(luò)
2. 卡片式形式二
這種形式共同點都是在頭部C位出現(xiàn)的卡片式設(shè)計，其中承載著標(biāo)題，副標(biāo)題，以及圖文版式，不難發(fā)現(xiàn)，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現(xiàn)還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設(shè)計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調(diào)，背景有色塊，上面就用白色卡片，卡片上方標(biāo)題、 文字、 圖片呈現(xiàn)。只不過排版的方式有所不同而已，在很多APP設(shè)計中，這樣的表達也很多，通過主色調(diào)可以很融合的把上面的狀態(tài)欄，導(dǎo)航欄融為一體視覺上統(tǒng)一性，底部背景顏色延續(xù)下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現(xiàn)的上面的文字和圖片。
應(yīng)用場景：會員卡，滑動卡片，圖文標(biāo)題，入口
此圖片來自于網(wǎng)絡(luò)
3. 卡片式形式三
這種形式上圖下文字，或者是上標(biāo)題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現(xiàn)的圖片質(zhì)量上好的話可以帶動整個設(shè)計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多，同樣也能體現(xiàn)出整體化和視覺化
應(yīng)用場景：滑動卡片，圖文標(biāo)題，入口，列表
此圖片來自于網(wǎng)絡(luò)
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內(nèi)容，圖片相結(jié)合，讓瀏覽者更愿意多看一會。表達的圖片與文字內(nèi)容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質(zhì)量的圖效果會降低。
應(yīng)用場景：列表，說明，入口，天氣
此圖片來自于網(wǎng)絡(luò)
5.卡片式形式五
列表卡片設(shè)計，這種形式一般白色的卡片，上面標(biāo)題，頭像，按鈕，扁平插畫形式體現(xiàn)，更多應(yīng)用在一級頁面的下方內(nèi)容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現(xiàn)上面內(nèi)容部分。每個模塊的單元體具有統(tǒng)一的視覺。
應(yīng)用場景：列表，集合頁，入口
此圖片來自于網(wǎng)絡(luò)
6. 卡片式形式六
大卡片式設(shè)計，表現(xiàn)為一塊特大的卡片式，上面會有標(biāo)題，按鈕等信息，同樣表現(xiàn)出突出層次感，個性化設(shè)計的特質(zhì)。體現(xiàn)出內(nèi)容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應(yīng)用場景：提示，說明，優(yōu)惠劵，劵，入口
此圖片來自于網(wǎng)絡(luò)
以上總結(jié)的幾種卡片的形式，在設(shè)計中可以根據(jù)情況而設(shè)計，卡片多樣化，布局多樣化，適合自己產(chǎn)品的才最重要，雖然在界面設(shè)計中常用的設(shè)計，但不要盲目的為了卡片而卡片套用設(shè)計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結(jié)能給大家?guī)硪恍╈`感和啟發(fā)。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據(jù)潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現(xiàn)出層次
4. 卡片上面組成部分，標(biāo)題，副標(biāo)題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應(yīng)用在會員，列表，說明，優(yōu)惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設(shè)計知識
為了講解文章，順叔臨時構(gòu)思一個產(chǎn)品原型，而快速進行了簡單的設(shè)計，一個第一版，一個優(yōu)化版，主要為了講解一下這個卡片設(shè)計一些問題，
以下此圖為構(gòu)思的原型圖
經(jīng)過分析原型圖之后開始進行設(shè)計，首先設(shè)計一個版本的，如果這樣卡片布局設(shè)計，這樣色彩搭配的情況下，會怎么樣呢，整體設(shè)計用了藍紫色為主色調(diào)，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內(nèi)容，比如數(shù)字，圖形 能更好的豐富支撐卡片。同樣數(shù)據(jù)流也是比較重要的C位。也是比較重要的位置。接著根據(jù)原型圖下面有兩個卡片，通過扁平化設(shè)計，以色塊為主設(shè)計一個藍色，一個橙色的卡片，上面并有圖標(biāo)，頭像，以及標(biāo)題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設(shè)計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當(dāng)打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設(shè)計上就出現(xiàn)了問題，上面的數(shù)據(jù)，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設(shè)計上的變化，
那么只能在這個基礎(chǔ)上在進行優(yōu)化，其實大家在做設(shè)計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優(yōu)化呢，其實還是有空間在進行優(yōu)化。以下圖為第一版
設(shè)計第一版
根據(jù)上面的設(shè)計在進行優(yōu)化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標(biāo)，這樣更好的給功能上快捷入口，也能給卡片設(shè)計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風(fēng)格更簡約，同時功能也更全面。
調(diào)整后
從原型圖，在到設(shè)計第一版，在到優(yōu)化調(diào)整之后，證明一點，卡片不要因為卡片而套設(shè)計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設(shè)計中也一定要有主，有次的進行設(shè)計。這樣層級關(guān)系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設(shè)計不要先著急做設(shè)計，前期的進行思考，邏輯清楚了，在進行設(shè)計的時候會更加的順暢。卡片式設(shè)計，大家都在應(yīng)用，希望這個文章能給大家?guī)硪稽c點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內(nèi)容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
隨著當(dāng)今越來越多的信息需要被展示、曝光，而移動設(shè)備的屏幕空間又有限，為了減少用戶在使用應(yīng)用時的跳轉(zhuǎn)，減少用戶的路徑，設(shè)計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達，從二維到三維，這樣更能有效利用手機屏幕上的有限空間，這也是以后界面設(shè)計的大趨勢。
這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現(xiàn)出來的。（以下簡稱MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的設(shè)計規(guī)范中，用Depth來說明界面設(shè)計中的深度，既而在界面設(shè)計中引入了Z軸的設(shè)計思維，將界面設(shè)計由二維設(shè)計引進了三維設(shè)計思維的地帶。MD通過抽象化紙片在物理世界中的形態(tài)，定義除了各種信息層級以及常用狀態(tài)的表達方式。
再來看看，如今iOS的最新版本iOS 12，也已經(jīng)開始向這一方向進行發(fā)展。最典型的要屬以下的iOS的內(nèi)置應(yīng)用：股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。
三維設(shè)計法，在界面設(shè)計當(dāng)中，主要分為兩個方向來運用，視覺設(shè)計和交互設(shè)計。
人們通過雙眼能夠分辨出物體遠近大小的形態(tài)，因此如果利用這樣的視覺規(guī)律，便可以在畫面中呈現(xiàn)出真實的效果，突出視覺的立體化。
因為使畫面產(chǎn)生三維的模擬真實的效果，可以畫面更具有吸引力，我們之所以能夠看清楚物體，是因為有光的存在，現(xiàn)實生活的影子是因光而產(chǎn)生的，才是一個真實立體形。如果能恰當(dāng)運用光影的效果，那將會讓圖形在進行三維空間轉(zhuǎn)換時變得更加凸顯。
當(dāng)今，在界面的視覺設(shè)計方面，通過層疊、卡片化和投影的設(shè)計手法來對界面的內(nèi)容進行處理，可以增加界面的層次感。在如今同質(zhì)化嚴重的扁平化設(shè)計下，能給人煥然一新的感覺，同時也給人一種內(nèi)容呼之欲出的感覺，加強了點擊的欲望。這樣的設(shè)計手法讓界面的Z軸空間得以加強，必將是下一個新的趨勢。
例如：KEEP、潮汐、蝦米音樂
例如：Dribbble 和 Behance
圖片來源于網(wǎng)絡(luò)
而在交互設(shè)計方面，想同時展示多種內(nèi)容時，假設(shè)對一個需求有著很強的曝光要求，或者是想讓用戶知道有這項內(nèi)容的存在，但又不想讓頁面內(nèi)容過長，導(dǎo)致被忽略或難以找到時，可以采用頁面Z軸層級覆蓋的表現(xiàn)形式。
采用了Z軸層級覆蓋的架構(gòu)形式，用戶主要的交互操作變?yōu)樯侠?、下拉來閱讀信息，減少了點擊跳轉(zhuǎn)這一類的操作，減少了用戶的操作成本。且滑動手勢，是以后人機交互發(fā)展中的一個必然趨勢。
在一些APP中有所表現(xiàn)的有：豆瓣FM、豆瓣詳情頁等。（大家可以從這些APP上獲取設(shè)計靈感）
豆瓣FM
豆瓣（電影詳情頁）
例如：
上圖是京東（APP）的商品詳情頁，這時候我們接到的需求是將上圖的文案放進這個界面中。
要知道在寸土寸金的APP界面中，每一個位置都是十分的寶貴，一但放置不佳，就會給用戶的視覺流造成一定的影響，使得用戶體驗下降。況且，還是京東這樣流量巨大的電商APP，位置便顯得更加寶貴，而上圖中的紅色標(biāo)記范圍就是我們的限制區(qū)域，下面我們先來看一個不合理的做法。
上圖我們是直接加了一個界面，將這個模塊設(shè)定為可以進行跳轉(zhuǎn)，從而達到顯示完整（文案）的需求。
這樣做，不僅增加了用戶的路徑，而且還會給來回切換的用戶造成一定的困擾，消耗了手機的資源的同時，下面的留白也顯得很浪費、空曠，視覺上就很不美觀。
那么，京東是怎么做的呢？
京東采用了一個浮層設(shè)計（Z軸），將全跳轉(zhuǎn)改為半跳轉(zhuǎn)，這便是在界面設(shè)計中的Z軸運用，這樣既可以達到文案所要求的曝光，也能最大利用讓界面的空間，實現(xiàn)與原場景的完美銜接。
通過在 Z 軸上進行分層設(shè)計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產(chǎn)品設(shè)計，將信息更好的淺層化，這樣可以給設(shè)計師們帶來更多發(fā)揮的空間。
在使用這個思維來做設(shè)計時，可以事先考慮以下幾點：
根據(jù)用戶使用體驗，來判斷是否需要使用Z軸分層交互。
這樣做是否能幫助用戶更好的理解你所做的設(shè)計？
空間感設(shè)計主要意義是能正確的引導(dǎo)用戶，并建立起對產(chǎn)品的使用邏輯。
每一個界面層級只需要表現(xiàn)一件事。
當(dāng)你想要在界面中加入一個菜單欄但發(fā)現(xiàn)沒有空間？這時候可以考慮使用Z軸的設(shè)計。
謹慎使用Z軸層級交互，因為它會增加空間關(guān)系的復(fù)雜度。
多參考現(xiàn)實世界中的真實交互，它給你的預(yù)期和感受，在互聯(lián)網(wǎng)設(shè)計中的很多靈感都來自于對真實世界的理解。
總結(jié)：
我們在做設(shè)計時，可以把當(dāng)前的界面可以想象成一個的三維世界——分作X軸，Y軸，與Z軸，在這三個坐標(biāo)軸上，可以進行思維上拓展。
在交互設(shè)計當(dāng)中，減少跳轉(zhuǎn)便是減少用戶路徑，就是使用各種方法在三維空間中，用x軸、y軸、z軸做出最合適、合理的用戶體驗設(shè)計。
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設(shè)計思路，讓大家明白，為什么這樣設(shè)計，出于什么目的，要解決什么問題，這些正是UI設(shè)計的根本所在，掌握了設(shè)計思路就能應(yīng)對各種問題。
接下來本期的分享，依舊會用真實案例解析從需求到設(shè)計的完整過程。
接需求與案例解析
我司的運營小姐姐@我要改個產(chǎn)品的UI，下午找我聊需求。
一、準(zhǔn)備工作
提前了解產(chǎn)品，從視覺、交互上感受一遍，標(biāo)記產(chǎn)品中有疑問的地方，這樣大概對產(chǎn)品有個概念，為接下來的溝通做好鋪墊。
二、了解業(yè)務(wù)
首先需要運營小姐姐講解一下業(yè)務(wù)邏輯，了解產(chǎn)品涉及到的各種角色，產(chǎn)品使用場景等等，期間把疑問一一了解清楚，盡可能對業(yè)務(wù)、角色、使用場景有充分的了解。
通過溝通，了解到這個產(chǎn)品是一個H5問卷后臺，業(yè)務(wù)上用來查看問卷統(tǒng)計的結(jié)果，使用的人群是公司的運營人員，產(chǎn)品時常會打包賣給客戶，客戶的使用場景不定，多數(shù)用戶會用手機端查看統(tǒng)計結(jié)果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產(chǎn)品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時候就要想到她是不是用了其他體驗好的產(chǎn)品，如果是的話，這個產(chǎn)品可能是重要的設(shè)計參考，然而了解后并不是因為用了其他產(chǎn)品，是一直以來就不好用，沒時間改而已。
接下來的需求溝通就要落實到頁面中，需要一起探討產(chǎn)品，不明白的地方要了解清楚，從中總結(jié)優(yōu)化的地方。
下面開始案例分享：
第一個頁面改版
上圖為“統(tǒng)計問卷”首頁，A、B、C處為頁面中較為突出的點，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設(shè)計上需要弱化。
其實用戶之所以覺得頁面看起來不舒服，是因為想看的元素被弱化，而不該看的卻過度設(shè)計，這樣用戶在看頁面過程就會很費神，因為獲取信息要躲開視覺上被過度設(shè)計的地方。
例如A處，用了頁面中唯一的橘黃色，當(dāng)初設(shè)計者應(yīng)該是為了能強化區(qū)別上下題目的分界，但也成了突出的視覺干擾項。
其實分析后，頁面中用戶要看的是兩個地方，一個是B處答題的比例數(shù)據(jù)，另一個是旁邊的“小記”數(shù)據(jù)量，而B處進度條的設(shè)計過于突出，與文字沒有良好的視覺比重。
結(jié)合以上問題進行改版：
解決A處問題
把每道題設(shè)計為卡片式，這樣能很好的區(qū)別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細進度條，與文字視覺比重相當(dāng)，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內(nèi)容。
解決C處問題
圖表切換是個弱功能，使用頻率較低，所以放到卡片的右上角弱化設(shè)計，用切換的方式展示。
不僅僅是以上的問題，排版的細節(jié)也會大大提升產(chǎn)品的質(zhì)感。
舊版所有元素的排版間距幾乎沒有什么規(guī)律，這也是導(dǎo)致用戶對產(chǎn)品有亂糟糟印象的原因。
改進后，用間距去表達元素之間的關(guān)系，間距設(shè)計常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關(guān)的元素用周邊0.5倍的距離表達親密關(guān)系。
當(dāng)設(shè)計好第一個頁面后，需要先給到需求方評審，確認沒問題后再繼續(xù)，這樣就盡可能保證了后面的設(shè)計是符合他們需要的。
上圖只是個最終的結(jié)果，過程中做過一些小改動，最初發(fā)給需求方設(shè)計的頁面，需要做簡單的設(shè)計注解，這樣才會更容易被理解，且具有說服力，最終確認沒問題再繼續(xù)其他頁面的設(shè)計。
第二個頁面改版
上圖是給做問卷的人配置紅包獎品的頁面，看完后我表示心疼我們的運營人員。
A處本可以切換項目，但現(xiàn)在的設(shè)計顯然是不可點擊切換的狀態(tài)。
B處是這個項目總金額統(tǒng)計，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎品的各個屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關(guān)系，排版擁擠。
E處是個“增加獎品”按鈕，現(xiàn)在看起來沒太大問題。
改版后頁面延續(xù)了首頁的卡片風(fēng)格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因為不是確切詞，例如換成“項目切換”“問卷切換”就很容易理解，當(dāng)然也是可以去掉的，因為運營人員對每個項目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態(tài)變化的金額用顏色突出強調(diào)，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數(shù)量”跟“個數(shù)”為重復(fù)信息，只留一個即可。
解決D處問題
按鈕“已啟動點擊禁用”拆分為“點擊下線”按鈕，和問卷狀態(tài)（進行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎品”按鈕，如果增加配置獎品列表，就會把按鈕擠到不可視區(qū)域，這樣的設(shè)計不是特別推薦，所以設(shè)計成懸浮按鈕，舊版本已經(jīng)建立用戶的按鈕功能認知，懸浮按鈕上面配加號圖標(biāo)，用戶就會很容易理解。
第三個頁面改版
上圖還是第二個改版頁面，此次要改版的是，點開“展開”按鈕顯示的屬性，目前的問題是有很多重復(fù)的信息，例如時間，上面已經(jīng)顯示時間，最下面又出現(xiàn)同樣的時間。
最嚴重的問題是，所有灰色字的注釋，不符合邏輯，不應(yīng)該在展開的屬性下面提示，因為這已經(jīng)是編輯好的內(nèi)容，再去提示就意義不大了。
模擬一個場景，比如上圖紅圈的地方，已經(jīng)設(shè)置好了獎品名稱為“幸運紅包”，展開后有個灰色字提示“用戶中獎后，用于顯示給用戶看”，如果發(fā)現(xiàn)理解錯了，然而在此頁面是不可以改正的，所以灰色字應(yīng)該在“新增獎品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進后，去掉重復(fù)的屬性信息，去掉灰色字的提示，（去掉這些內(nèi)容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個頁面改版
當(dāng)我看到這個頁面時，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發(fā)人員提供便捷查詢，例如這個中獎?wù)叽嬖谒⒓t包行為，可以通過A處的信息進行查詢。
很顯然這并不合理，因為對用戶來說沒有用，還造成了認知負擔(dān)，如果存在不良行為，提供編號信息就可以搞定了。
B處的設(shè)計，讓頁面沒有條理，更是一個信息干擾項。
頁面改進后，依然沿用首頁卡片式的設(shè)計，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因為答問卷一般不會獲取到用戶昵稱。
“中獎”和“未中獎”卡片，設(shè)計上有明顯的視覺比重差異，去掉未中獎的綠色標(biāo)示，只突出中獎?wù)摺?
最后一個頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個不合理的“確定”按鈕，原因是用詞錯誤，應(yīng)該叫“關(guān)閉”更合適，因為這個頁面是查看信息，并沒有執(zhí)行某些任務(wù)操作。
改進后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因為太占面積，改為右上角“關(guān)閉”按鈕。
最后
當(dāng)我們看到一個頁面時，如果只看到美與丑，那是不客觀的，這可能是對UI設(shè)計最大的誤解，UI的美不只體現(xiàn)在表面上，還有內(nèi)在的體驗中。
UI設(shè)計一般都會帶著一種目的進行設(shè)計，目的絕不只是設(shè)計的好看，更多的是創(chuàng)造一個良好的產(chǎn)品體驗，同時能夠助力業(yè)務(wù)，實現(xiàn)產(chǎn)品價值。
UI設(shè)計師對于業(yè)務(wù)要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業(yè)務(wù)的熟知，需求的準(zhǔn)確拿捏，是你開始設(shè)計前最好的基石。
看了一位著名設(shè)計大師Aaron Gustafson關(guān)于UI設(shè)計的演講報告，討論和剖析了幾個自適應(yīng)界面，并演示了他們?nèi)绾沃悄艿刈冃我詽M足用戶的需求。這里我有一些心得體會分享給大家。
當(dāng)我開始我的職業(yè)生涯，我還是一個簡單的網(wǎng)頁設(shè)計師。我在網(wǎng)頁設(shè)計工作了一年，從小型商業(yè)網(wǎng)站開始，最終轉(zhuǎn)移到更大的客戶。我發(fā)現(xiàn)對它并不感興趣。我對分頁模式，用戶與表單交互的方式，以及感覺到的性能，比網(wǎng)頁的視覺設(shè)計更感興趣。我發(fā)現(xiàn)我愛上了交互，體驗各種的性能。
當(dāng)我看科幻電影時，我會看看界面。當(dāng)我玩視頻游戲時，我會觀察菜單的布局方式。如果任何這些特質(zhì)聽起來很熟悉，你也可能有一顆UI設(shè)計師的心臟。
于是我退出我的之前的設(shè)計公司，開始了我自己感興趣的項目與目標(biāo)。在我的LinkedIn頁面上，我試圖總結(jié)我的新職業(yè)目標(biāo)：創(chuàng)作出不僅具有視覺，交互，體驗，還應(yīng)更加智能，更加方便的大膽構(gòu)想。自從我愛上了我現(xiàn)在這份工作以來已經(jīng)有三年了，我并不是把它當(dāng)作工作，而是把它當(dāng)作我興趣慢慢去培養(yǎng)，所以我的旅程并沒有停止。我目前在一家創(chuàng)業(yè)公司，這里有我們共同的夢想與信念，我們想把東西做好，做全面，希望廣大用戶會喜歡，我每天逼著自己去思考，去學(xué)習(xí)，去看一些書籍資料，但是很多時候事與愿違！
在這篇文章中，我主要想描述一個UI設(shè)計師是什么樣子：
這些工作是什么構(gòu)成的？
哪里是最好的學(xué)習(xí)資源？
你如何在你的技藝得上展現(xiàn)更好？
UI設(shè)計的工作
我會將用戶界面設(shè)計的工作分為四類。與客戶溝通，研究，設(shè)計和原型，并與開發(fā)人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。
溝通
客戶溝通是關(guān)于理解客戶的問題。目標(biāo)是掌握客戶的業(yè)務(wù)。項目的開始通常包括很多的談話。在工作開始時，不要太多地去了解客戶的想法- 你可以設(shè)想可能的設(shè)計解決方案時，以全新的方式展現(xiàn)給她們看，然后接受需求，進行分析。
要成為一個好的UI設(shè)計師，你需要能夠最終考慮你的客戶的意愿。例如，您的客戶可能在航空，為他們工作最終將使你對這個行業(yè)有很多認知。所以，你會感受到：不能明智的去選擇你的工作行業(yè)，也就不會成為這行業(yè)的專家。我們需要對自己有足夠的認知。
在項目期間，溝通不會停止。作為設(shè)計師，你將不斷地展示你的工作。產(chǎn)品的誕生需要有火花的碰撞，所以我們迭代好，不斷的進行溝通與討論。
研究
與客戶溝通，你會做很多研究。這可能包括實地研究，與客戶的研討會，分析競爭或定義一個策略 - 基本上，只是幫助你理解手頭的問題。
研究是什么？研究可以告訴你的設(shè)計選擇。這是你讀過的文章，或者蘋果剛剛發(fā)布的新東西。當(dāng)你解釋為什么做出一個特定的設(shè)計選擇時，你的研究會幫助你。
研究可以非常廣泛。我經(jīng)常測試新的設(shè)備用于研究目的; 或注冊新的網(wǎng)絡(luò)應(yīng)用程序以研究其用戶界面。
設(shè)計和原型
作為設(shè)計師，你可能會花大部分時間做設(shè)計調(diào)整工作。UI設(shè)計項目可以以多種方式前進，從素描，詳細設(shè)計到編碼。
您使用的方法在很大程度上取決于項目的類型。你在設(shè)計什么？這是一個網(wǎng)站，還是應(yīng)用程序，或者你寧愿稱它為一個應(yīng)用程序嗎？它使用本地技術(shù)嗎？是重新設(shè)計還是從頭開始？
在我們公司沒有固定的過程，但大多數(shù)項目遵循相同的粗略順序：他們從草圖和線框開始，繼續(xù)詳細的視覺和交互設(shè)計，并以一個原型結(jié)束。
作為設(shè)計師，我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要，但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應(yīng)用程序是相當(dāng)于能夠使用鉛筆繪畫或刷子來繪畫。
話雖如此，對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設(shè)計工具，可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator，但我的大部分視覺設(shè)計工作是在這些天在PS上完成的。其他團隊成員已經(jīng)切換到較新的工具，如Sketch,Affinity Designer,這些工具我們都需要了解，找到適合自己的就行。
工具是一個非常個人的選擇。只要我們能輕松地一起工作，每個人都可以自由選擇自己。為了使與客戶的討論，我們的設(shè)計更簡單，我們使用Axure制作原型。對于更高級的原型，我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。
開發(fā)者溝通
溝通設(shè)計有多種形式：詳細規(guī)格，提供資產(chǎn)，一起審查設(shè)計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應(yīng)用程序。
傳統(tǒng)的方法是在屏幕設(shè)計旁邊交付資源。屏幕設(shè)計可用于查看設(shè)計整體看起來是什么樣子，而資產(chǎn)是即用型PNG和圖標(biāo)的SVG，因此開發(fā)人員不必處理圖形編輯器。
在我們公司，我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設(shè)計的一致性。當(dāng)我們處理一個web項目時，我們提供了詳細的HTML和CSS集合，逐條記錄，準(zhǔn)備實施。我相信在軟件開發(fā)的每個階段都有設(shè)計眼光是實現(xiàn)我創(chuàng)建一流級軟件目標(biāo)的唯一途徑。
Web與本機應(yīng)用程序
然而，這些指南傾向于針對營銷網(wǎng)站進行調(diào)整，并且其中的內(nèi)容并不總是導(dǎo)致良好的用戶界面決策。字體傾向于出于營銷原因而選擇，而不是為了易于理解。顏色可以是粗體和醒目的，它可以在廣告活動中使用，但不會在您日常使用的應(yīng)用中使用。這些指南必須解釋。
有幾個UI設(shè)計的網(wǎng)絡(luò)指南。你可以認為網(wǎng)絡(luò)是不同風(fēng)格的熔爐。如果你做任何感覺更像一個應(yīng)用程序而不是一個網(wǎng)站，你需要知道廣泛使用的框架如Bootstrap和ZURB基金會?？蚣芟却蚝?，再開始確定事情應(yīng)該如何去做，因為你不想重復(fù)做某一件事。
我比較喜歡使用Bootstrap。它為常見的UI元素（如按鈕，數(shù)據(jù)表和模態(tài)）提供了合理的默認大小。
在網(wǎng)頁設(shè)計中，您受網(wǎng)絡(luò)技術(shù)能力的限制。它曾經(jīng)是很難實現(xiàn)簡單的視覺華麗像網(wǎng)站上的圓角?，F(xiàn)在很多構(gòu)想都可以做了 - 你現(xiàn)在可以自由繪制大量的陰影，過渡，動畫甚至3D的用戶界面。
作為設(shè)計師，在瀏覽器中控制流程和設(shè)計是更加現(xiàn)實的。我還沒有看到許多UI設(shè)計師接管本地應(yīng)用程序的UI編程，但是設(shè)計師做一個網(wǎng)絡(luò)應(yīng)用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設(shè)計，你將有一項專業(yè)獨特的技能在你的同行，也會增加你許多優(yōu)勢。但是對我來說，這也是唯一的方式，真正了解網(wǎng)絡(luò)的工作原理。所以作為一名設(shè)計師，還是需要懂代碼的。
Web約束
您很快就會發(fā)現(xiàn)，并非所有的瀏覽器都支持您學(xué)習(xí)的所有酷技巧，這是網(wǎng)頁設(shè)計的現(xiàn)實。這是很好的遵循著名的原則，如漸進增強，你盡可能加載增強內(nèi)容，但也想想如何內(nèi)容降級。
最近，“切割芥末”已經(jīng)變得流行。在BBC的網(wǎng)絡(luò)團隊的支持下，這包括區(qū)分“好”和“壞”瀏覽器，并為“壞”瀏覽器提供有限的體驗。但是，它真的只適用于內(nèi)容網(wǎng)站。
當(dāng)涉及到類似應(yīng)用程序的體驗，許多人只限于支持一些領(lǐng)先的瀏覽器，使開發(fā)更容易?？杀氖?，這讓我們回到1996年的情況，你需要一個特定的瀏覽器來查看內(nèi)容。
改善你的技能
那么，你如何跟上快速移動的網(wǎng)絡(luò)行業(yè)的最新發(fā)展，并提高你的技能？讓我們看看幾種不同的方法提高你的技能...
平臺知識
設(shè)計師的主要部分是平臺知識。你應(yīng)該知道各種操作系統(tǒng)，以及如何使用它們。作為設(shè)計師，我們傾向于使用Mac，但是很容易忘記，大多數(shù)人使用Windows框來完成他們的工作。
我覺得你只有真正理解的東西，如果你自己使用它。我喜歡使用我的Mac設(shè)計，但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構(gòu)建，以檢查UI中的各種更改。
我也經(jīng)常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它，因為我覺得它并不是必要的。
此外，web可以被視為其自己的操作系統(tǒng)。它不斷發(fā)展，每周都會向每個瀏覽器供應(yīng)商添加新功能。非常值得了解瀏覽器的技術(shù)方面，特別是關(guān)于CSS和圖形能力。你需要知道SVG和WebGL是什么，以及如何使用Web動畫API。
每個平臺隨著時間演變，作為一個用戶界面設(shè)計師，它是你的任務(wù)，保持最新。畢竟，無論你在設(shè)計什么，都不是孤立生活，而是一個更大的軟件生態(tài)系統(tǒng)的一部分。
回到基本
我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設(shè)計的網(wǎng)頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學(xué)者。
如果你不知道概念，如模態(tài)和可承受性，你需要讀。你應(yīng)該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設(shè)計的面包和黃油。
受游戲和電影的啟發(fā)
作為UI設(shè)計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復(fù)雜，UI設(shè)計人員不得不解決與UI設(shè)計師在商業(yè)項目上工作相同的復(fù)雜界面問題。
游戲也可以表示趨勢。在Colin McRae Rally的菜單中發(fā)現(xiàn)的極簡主義讓我想起了iOS7的方向。在某種程度上，現(xiàn)在時尚的UI動畫設(shè)計出現(xiàn)在幾年和幾年前的游戲中。從skeuomorphism到裸，功能界面和“平面設(shè)計”的轉(zhuǎn)變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG，但差異是驚人的。
Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子，但他們確實讓我更多地關(guān)注計算作為一個整體。我們想要一個未來的屏幕，或者我們想讓屏幕消失？這可能是一個很好的問題，在一個酒吧的設(shè)計師。
前言
近年來，「設(shè)計規(guī)范」逐漸被「設(shè)計體系」或「設(shè)計語言」的概念重塑。基于一套架構(gòu)嚴謹、規(guī)則統(tǒng)一的體系框架，產(chǎn)品表現(xiàn)層面的設(shè)計工作可以逐漸實現(xiàn)模塊化運作，從而讓視覺設(shè)計工作變得更加高效。
「Design System 系列」將會從設(shè)計觀、設(shè)計原則、設(shè)計形式三個方向入手，由深到淺、由整到分地演繹設(shè)計體系對整個產(chǎn)品迭代過程的價值和意義。有正確的設(shè)計觀作判斷好壞的標(biāo)準(zhǔn)，并結(jié)合行之有效的設(shè)計原則作指引，才能制定出最優(yōu)的設(shè)計方案。
簡介
Robin Williams 的四大基本設(shè)計原則相信大家都不陌生，尤其在平面設(shè)計領(lǐng)域內(nèi)對它的應(yīng)用更為廣泛。在此基礎(chǔ)上，我結(jié)合中后臺產(chǎn)品的設(shè)計特點，將其縮寫為「兩對兩性」原則，即：對齊、對比、親密性、一致性。
每個優(yōu)秀的設(shè)計中都會應(yīng)用這些設(shè)計原則，并且各自是相互關(guān)聯(lián)的，只應(yīng)用某一個原則的情況很少。
作為設(shè)計體系的一部分，這套設(shè)計原則也為設(shè)計實踐提供了理論依據(jù)。本章引用中后臺產(chǎn)品設(shè)計中一些常見的案例，并以簡潔凝練的語言，分析總結(jié)了這四個基本原則的實際應(yīng)用方法和注意事項。
本章大綱如下：
一、對齊原則
任何元素都不能在頁面上隨意擺放，每一項都應(yīng)該與頁面上的另一項或多項存在某種視覺關(guān)聯(lián)。即使對齊的元素空間上是相互分開的，但在水平或垂直位置上也會有一條“隱形的線”把它們連在一起。
在界面設(shè)計中，將元素進行對齊，既符合用戶的認知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
1. 左對齊
左對齊是將文本信息或視覺元素沿垂直方向向左對齊的一種對齊方式，左側(cè)會有一條“隱形的線”，將彼此分離的文本或元素連在了一起。
文案類、列表類、表單類等排版會常用到左對齊的方式，這能讓用戶順著視覺流的方向，快速高效地接收信息或填寫表單內(nèi)容。
2. 右對齊
右對齊與左對齊相反，右側(cè)會有一條“隱形的線”，將文本信息或視覺元素連在一起。
在表格或表單中使用右對齊，可以實現(xiàn)快速對比數(shù)值大小，建議數(shù)值的格式保持統(tǒng)一。常規(guī)類數(shù)值可以統(tǒng)一使用千位符，如「1,024」；金額類數(shù)值可以保留小數(shù)點后兩位，如「￥88.00」。
3. 居中對齊
居中對齊是第三種常見的對齊方式，中間會有一條“隱形的線”，將文本信息或視覺元素連在一起。
居中對齊會形成一種更正式、更穩(wěn)重的外觀。盡管這是一種合理的對齊方式，但邊界是“軟”的，“對齊線”的強度也較弱，所以會顯得中規(guī)中矩。通常，首頁的功能介紹文案以及數(shù)據(jù)、金融等類型的產(chǎn)品界面會使用這種對齊方式。
4. 兩端對齊
兩端對齊也稱方形左右對齊，因為文本信息的左右兩端均對齊。
通常在商品信息結(jié)算、帶有輔助說明的列表等場景中會使用兩端對齊的方式，不僅能讓橫向的文案更具關(guān)聯(lián)性，易于用戶接受信息，也能使排版顯得更加工整和嚴謹。
二、對比原則
對比可以有效地增強頁面的視覺效果，同時也有助于元素之間建立一種有組織的層級結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
需要注意的是，要想實現(xiàn)有效的對比，就應(yīng)當(dāng)拉開元素之間的差異，差異越大，對比效果越明顯。
1. 字體對比
字體對比包括：襯線體和無襯線體的對比，如 Georgia 和 PingFang；字重粗細的對比，如 Regular 和 Semibold；字號大小的對比，如 14px 與 20px；字體顏色的對比，如 #333 和 #999。
當(dāng)界面或模塊的標(biāo)題字體大而粗、且顏色較深，正文字體小而細、且顏色較淺時，信息層級關(guān)系更明顯，字體對比效果將更理想。
2. 顏色對比
顏色對比包括：色相對比，如 Red 和 Blue；飽和度對比，如 S100 和 S60；明度對比，如 B100 和 B60。
下圖中的百分比堆疊面積圖利用不同維度 (區(qū)域) 的色相對比，清晰的反應(yīng)每個數(shù)值所占百分比隨時間或類別變化的趨勢，對于分析自變量是大數(shù)據(jù)、時變數(shù)據(jù)、有序數(shù)據(jù)時各個指標(biāo)分量占比極為有用。
3. 大小對比
大小對比就是在同一畫面里利用大小兩種元素，以小襯大，或以大襯小，使主體得到突出。大小對比主要體現(xiàn)在面積或體積兩種維度上的對比。
在下圖的 Dialog 中，主體圖片的面積相對于商品信息文字的面積得到最大化突出，主次更加分明，視覺沖擊感也更加強烈。
4. 水平與垂直對比
水平與垂直對比，是指水平分布的視覺元素與垂直分布的視覺元素在橫縱方向上的對比。
在排版上，水平與垂直對比可以打破單一呆板的排列方式，在保持對齊的基礎(chǔ)上，豐富了界面元素的空間表現(xiàn)形式，減輕了用戶的疲勞感和無味感。
三、親密性原則
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，從而形成一個視覺單元；反之，則它們的距離就應(yīng)該越遠，從而形成多個視覺單元。
親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層級一目了然。
1. 水平空間關(guān)系
為了自適應(yīng)不同尺寸的屏幕，同時保持橫向上控件的關(guān)聯(lián)性，因而采用柵格布局的方式來組織擺放元素和控件，保證布局的靈活性。
同一控件內(nèi)部的元素，橫向間距上也會有“親疏”之分，以體現(xiàn)組織性。
2. 垂直空間關(guān)系
在復(fù)雜的頁面或模塊設(shè)計中，縱向上需要使用高、中、低三種規(guī)格的間距來區(qū)分信息的層級關(guān)系。基于「元間距」8px，三種規(guī)格可以是 24px (高間距)、16px (中間距)、8px (低間距)。
注：縱向間距公式：y=8+8×n。其中 y 是縱向間距，8 是元間距，n≥0。
另外，增加「分割線」等視覺元素，也是有效劃分頁面結(jié)構(gòu)和信息層級的常用手段。
四、一致性原則
可以把「一致性」理解為「復(fù)用」，相同的元素在整個界面中不斷復(fù)用，復(fù)用元素可以是線框、顏色、控件、文本格式、空間間距、設(shè)計要素等等。
一致性的根本目的是統(tǒng)一元素，并增強視覺效果，降低用戶的學(xué)習(xí)成本，幫助用戶快速識別出這些元素之間的關(guān)聯(lián)性。
1. 線框復(fù)用
同類信息的載體可以是相同粗細的線框、相同投影的卡片、或是相同顏色的底面，注意保持樣式屬性值的一致，以及上下左右間距的一致。
2. 顏色復(fù)用
在界面設(shè)計中，相同的功能提示、圖表數(shù)據(jù)、文字層級、按鈕、圖標(biāo)、分割線、背景等，應(yīng)使用相同的顏色，保持色彩體系上的統(tǒng)一，避免同類型的元素使用不同顏色給用戶造成認知困擾。
3. 控件復(fù)用
使用統(tǒng)一的導(dǎo)航、按鈕、彈框、圖表、選擇器等控件，既可以提高設(shè)計者和開發(fā)者的工作效率，避免重復(fù)造輪子的現(xiàn)象出現(xiàn)，又可以保持界面設(shè)計的一致性，降低用戶的理解成本，提高使用效率。
4. 格式復(fù)用
相同類型、維度或級別的文案，應(yīng)使用相同的展現(xiàn)格式。注意標(biāo)題、正文、輔助信息的層級關(guān)系，使用統(tǒng)一的對齊方式，讓關(guān)聯(lián)性高的信息之間形成一個視覺整體。
本章小結(jié)
1. 對齊
任何元素都不能在頁面上隨意擺放，每一項都應(yīng)該與頁面上的另一項或多項存在某種視覺關(guān)聯(lián)。
2. 對比
對比可以有效地增強頁面的視覺效果，建立一種有組織的層級結(jié)構(gòu)，如果想讓元素不同，那就讓它們截然不同。
3. 親密性
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，從而形成一個視覺單元，這有助于組織信息，減少混亂。
4. 一致性
一致性的根本目的是統(tǒng)一元素，并增強視覺效果，降低用戶的學(xué)習(xí)成本，幫助用戶快速識別出這些元素之間的關(guān)聯(lián)性。
藍藍設(shè)計的小編 http://www.yvirxh.cn