建議收藏起來，方便隨時查看～
用戶頭像篇
關于用戶頭像這個板塊的信息，如果采用昵稱向上對齊，ID向下對齊的方式，兩塊內容就會很分散，不夠聚焦。
如果頭像和背景的顏色有一部分接近或者顏色一樣，看起來會感覺頭像好像少了一塊，例如左圖。為頭像框添加描邊，讓頭像更有整體性，還可以讓文案對比更明顯，頁面看起來也會更精致。
當用戶使用手機注冊登錄后，新用戶沒有頭像的情況下，就要給一個默認頭像，或者使用品牌IP形象，增加用戶的品牌記憶。
按鈕篇
當一個頁面有兩個操作按鈕時，可以區分出來一個最重要的按鈕，引導用戶更容易去進行選擇。
當彈窗背景是白色的時候，會有點空蕩的感覺，顯得細節不夠，可以為背景豐富細節，增加耐看程度。
當使用亮色按鈕時，如果文字也比較亮，識別度就會很差。識別度對比一定要明顯，亮底暗字，暗底亮字，畫面一定不能出現識別模糊的情況。
登錄板塊，在用戶未輸入的狀態下，登錄/注冊按鈕呈現置灰狀態，給人不可點擊的感覺。輸入信息后，激活登錄按鈕高亮狀態，這樣可以更清晰地引導用戶操作下一步。
在這樣的登錄狀態中，輸入后與未輸入的文字顏色需要給予一定的區分，這樣便于用戶區分哪些是填寫和未填寫的。在輸入框可以增加對應的icon ，讓整體感覺更豐富。
卡片排版篇
關于投影的使用技巧，盡量選擇顏色微淺或者和卡片顏色相近的投影。左圖的投影使用比較深的顏色，會讓畫面太過沉重。
在圖文式卡片排版的場景中，圖片占比內容區域大，能起到突出重點的作用。
右圖內容少的時候使用的是黃金分割比法則 0.618:1的比例。當內容多的時候，左圖的布局也不錯，瀑布流排下去能避免過于死板。
卡片上有過多的小標簽時，可以加一個淡色的底，這樣不會給人文案很多的感覺，整體視覺不會很分散，且層級更加分明，讓用戶更快速的找到自己需要的信息。
卡片背景直接排上文案，背景會顯得很空，沒有層次和細節。所以在做背景的時候，適當加上一些細節，就會顯得耐看很多。
文案直接加在圖片上時，要去對應地處理圖片，例如給圖片加一個蒙版，這樣就不會導致文字的顏色和圖片疊加在一起看不清的情況。
在做效果圖的時候，有圖片需要添加到設計稿中，盡量選擇搭配起來比較和諧的圖片，比如：飽和度、色相、亮度等盡量保持差不多的感覺，這樣看起來會增加設計稿中的整體一致。
在有多個板塊需要做成滑動的時候，需要留出一個被遮住的板塊，代表還有內容可以滑動。在左圖中，多個板塊剛好做成一個寬度的內容，那么用戶不知道后面還有內容可以滑動。
文字排版篇
文字行間距的把控，對于較大的文字，行間距通常來說采用文字大小1.5倍的間距，文字較小時使用1.2倍的間距會比較合適。通常情況下，我會設置比1.5倍還大一些的間距，文字行間距太小不易于用戶閱讀，可適具體情況而定。
當主標題和副文案一樣長的時候，整體會顯得很呆板，且看著是一團字的感覺，這時就可以讓標題和副標題之間產生長短不一的顯示，就不會那么呆板。
在卡片上排列信息時，需要用到線條的時候，線太深給人感覺分割會很明顯，把線的顏色調淺，有一點感覺在會比較好。
接著上面的信息排列，另一種方案是可以把線去掉，增加上下兩者的間距，擴大留白也可以起到拉開信息之間的板塊區分，讓整個畫面更加簡潔和干凈。
信息已填寫與未填寫的一個區分，已填寫過的信息用深一些的顏色，未填寫的信息用淺一些的顏色，這樣利于用戶更快速找到需要修改和填寫的信息。
對于導航選中的欄目，選中的信息顯示和其他的欄目對比要拉開。對比弱的話，用戶一眼看不出來當前選擇的導航欄目是哪一個。針對選中的欄目，可以根據品牌形象去做延展，建立品牌認知感。
面對內容過多的場景，分別將兩組信息排在畫面里，例如左圖，會感覺整個畫面信息很多，而且很分散。
在右邊的排版中，加了一層背景包裹起來分別對應的信息時，會讓信息層級更加分明。
圖標和文字搭配的情況下，為圖標加一個底色，可以讓該頁面圖標的大小視覺保持一致，也會給予其重心的承載作用。
在需要突出信息的時候，左圖的排版方式并沒有達到需要突出的信息，看不到重要的信息。如前面所說，在做信息層級的時候對比一定要拉開，才能突出最重要的信息，讓用戶一眼get到主要信息。
文案信息板塊的排版，當文案層級對比不是很明顯的時候，如第三種，居中排列文案，會使閱讀體驗很差，視覺參差不齊的循環。當文案層級比較明顯的時候，居中對齊也是一種比較好的方式。
當文案標題需要加硬投影的時候，亮字下應該加顏色較暗的投影，例如右圖。如果亮字下面的投影顏色還是很亮，會出現標題文案識別不清晰，對比度不足。
最后
以上就是全部的UI/UX設計技巧，希望通過這些技巧能夠讓你對界面設計加入更多思考，打造更好用的產品！
另外推薦大家去「下雨天DS」主頁查看更多內容：myandy.zcool.com.cn
慢慢來比較快，如覺得有幫助，
]]>
懶人目錄
一.前言
二.UI界面中實戰版式技巧分析
三.總結思考
一. 前言
在做UI界面的時候，很多時候我們需要去看很多的產品進行競品分析、市場調研，不論是交互邏輯還是設計細節，非常占用設計師的時間成本，在這里我為大家分析和整理了常用的一些實戰設計小技巧，幫助大家節省一些搜集資料的時間，希望幫助設計師們提高設計品質和效率！
二. UI界面中實戰版式技巧分析
1. 版面中的空間關系元素
在界面版式設計中，可以運用平面設計中的結構思考方法去理解UI界面中的空間元素結構的分布對應，下面以新聞類客戶端為例進行頁面元素分析
2. 內容過多處理方法
為了讓閱讀更有效，可以采用不同標題規格、不同編排比例或不同色底進行層次上的劃分
3. 模塊化分割方法
線條分割和空間分割的區別，分割線給人一種壓迫感，而空間的分割給人更加輕松的閱讀感受
4. 如何改變版面圖版率與視覺空間比重
我們來看下qq音樂會員中心頁面的設計，不同的等級對應不同的顏色card，運用顏色填充背景吸引用戶增加界面專屬比重，起到賬戶切換視覺的引導作用，是一個很好的設計思路
5. 根據主題選擇配圖及配色方案
我們在做設計時很多時候會去追求“高級灰”、“高逼格”亦或者是“獨特性”，其實更重要的是要符合產品的調性和產品對象人群，不能一味的去追求自我的“設計追求”，比如下面的2個案例就很好的表達出了產品的調性，明確的告訴用戶我是做什么產品的，為什么樣的人群去服務的
6. 畫面焦點
表示在畫面中相對更加突出的內容，讓用戶在瀏覽產品時能夠第一視覺捕捉用戶的眼球；焦點是相對的，在大頁面中可以是焦點，在小模塊中也可以是焦點
6.1 頁面中焦點
采用模態效果的彈窗給人以不可忽視的方式出現
6.2 模塊中的焦點
我們可以看到在優酷的“我的”頁面信息以卡片的形式呈現，而會員購買入口則以一種帶有色彩傾向性的顏色設計，表達了其的重要性；還有優酷的首頁精選的卡片中“全網獨播”等角標的設計在每一個模塊中都很搶眼，很容易就能夠捕捉到用戶的視覺重心；蘋果手機自帶日歷中當前日期的紅色選中態以絕對的焦點方式設計呈現給用戶
7. 界面平衡
平衡是版面元素上下左右比例都比較適中，給人一種穩定和平衡的視覺感受。平衡的版式設計可以讓畫面穩定不會產生上下比重失衡的現象，平衡的比例構圖令人愉悅，而不平衡的設計會造成不穩定的分散注意力。視覺平衡是指在設計中的負元素和正元素比例相對合適，設計師的作用就是發揮元素的視覺重量的構圖平衡。
8. 字體的選擇
很多時候有的設計師在做界面時候都希望全端的字體能夠統一，最好的辦法是嵌入文字包，但給代碼包增加了負擔，所以我們需要去取舍！很多國產安卓手機都有自己的系統字體，要實際調研真機效果（如差異不大非必須嵌入字體）蘋果和安卓常用字體如下
9. 有節奏感的版式設計
節奏感的設計表現形式有很多種，比較常用的是在統一的樣式節奏中穿插不同的模塊來使得頁面的節奏感更加的跳躍和靈活，比如Medium、網易云音樂的版式設計中都運用了節奏感的設計方法
跳躍的節奏感給人以活潑和時尚現代的感受，不會讓畫面通盤單一且枯燥的呈現給用戶；靈活的節奏感也為很多付費內容提供了很好的呈現方式
10. 常用版心邊距距離整理
不同行業的邊距大小不同，內容信息較多的文字類和購物類產品的邊距相對較小，而很多以圖片、視頻和音樂為主的產品相對較大！我為大家整理了常用參數，方便設計師們查看和參考，不必每次都需要測量很多產品
11. 多端思維版式設計，符合平臺特性的版式設計
我們發現很多產品移動端的版式設計與Web端網頁的Feed流版式設計結構會有不同，如果是你你會這么排版嗎？
其實這樣的版式設計師有原因的，第一是移動端更多時候以文字標題作為吸引人的視線，而圖片在手機端顯示較小，所以很多圖片的清晰度和內容呈現都不夠清晰，第二和手機端不同，網頁端圖片較大，可以很好的起到其本身的作用，也正因為網頁端的呈現空間較大，所以當標題比較短的時候，如果還按照移動端的結構，那么標題和圖片的中間會產生空白，造成視覺的瀏覽的不連貫，這就是為什么不同平臺版式差異化的原因。
12. 色彩在版式中的對比運用
其中主要包含經典的3種-純度對比、色相對比、明暗對比，界面設計師如果掌握了這3種常用對比手法，可以在界面設計中靈活自如的制造出不錯的色彩對比
12.1 純度對比
我們可以看到此案例中進度條部分，采用了低純度的藍色和高純度的藍色和綠色制造色彩對比形成層次反差，讓畫面非常的有活力
12.2 明暗對比
這張圖片中的主背景顏色左側為白色，右側則調整成了黑色，通過色彩明度的對比可以表現出整個界面的層次感，使得整體的感受呈現出簡約和高品質的風格（現在很多產品都已經適配了深色模式，可以為用戶呈現出Light和Darkmode兩種用戶體驗）
12.3色相對比
整體界面的主色調不難看出，是以綠色為基本色進行大面積運用，橙色在綠色中的運用非常鮮明，形成強烈對比，讓用戶非常清晰的知道此為強引導入口
13. 圖片版面率的有效利用
我們在網上購物時，更多的是通過圖片的第一印象來獲取產品，所以圖片在購物網站的比例都做到盡可能的適合自己的產品特點才能讓版式設計更優；常見的圖片尺寸有16:9、4:3、3:2、1:1、2:1、1:0.618（黃金比例），
比如淘寶、京東的產品圖片，在有限的空間內，正方形比例的呈現則是最大的空間展示；優酷采用16：9的比例更加符合人眼瀏覽視頻的習慣等
14. 版式設計的軟硬關系
在界面設計中，為了功能的突出或者版式的“活躍性”等需要，必須增加一些元素來烘托，此時不妨試試看如下幾種軟硬搭配的方法，能夠起到不錯的效果
14.1 曲線與圓角
通過曲線與圓角的方式讓界面變得更加“柔和”，比如以下產品的頂部位置的背景層的處理上，通過運用柔和的具有弧度的線條，讓整個畫面都不那么生硬了
14.2 漸變與過渡蒙層
在界面設計中我們常常因為為了保證界面元素存在而又不失品質在圖片上增加icon的方式，此時可以通過增加過渡蒙層的效果上增加icon既能夠保證功能性又能夠保證美觀度
14.3 直線加浮層
通過直線設計手法把圖片和功能入口進行風格，是一種界線清晰的“生硬”設計方法，讓界面有一種剛硬、強勁的感受
15.「高級感」的版式設計
有一種高級感版式設計是利用大留白與大卡片的版式設計的方式，讓整個產品的氣質凸顯了出來，使得產品別具一格，比如下面3個產品，利用卡片進行模塊化設計，內容里凸顯少量文字運用色彩重量對比和修飾性的語句，再配以高品質的圖片，使得整個界面非常的具有高級感
16. 差異化版式設計方法
設計工作中，經常會用到的方法，主要目的是能夠達到在同類型功能入口中，起到脫穎而出的效果，比較具有典型代表的是增加動畫效果或者增加角標等修飾性的設計，如拼多多的入口里增加了icon的動效和角標的動效設計在新人專享處特別運用紅包的表現手法讓元素都動了起來；在蘑菇街的入口位置對直播入口的頭像進行了動效設計，增加視覺引導性
三. 總結思考
以上就是我為大家整理的實戰中常用的版式設計的小技巧，希望能夠幫助到大家，提升自己的設計能力和水平；
其實還有更多好的實際工作中的知識點和防踩坑技巧可以分享給大家，期待未來能夠繼續幫助大家進行梳理。
在此還是希望同學們給文章進行點贊加關注，留言區評論。讓文章里的知識點能夠有更多的角度融入到實際工作中
讓我們一起努力，每天進步一點點，成為更好的自己。
原文地址：站酷
作者：Zeal莊治柱
]]>2020年已經過去一大半，這些時間以來，我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集，到今8月份了，我想是時候將發現的一些趨勢風格分享出來，這些風格很有可能繼續延續到2021的產品設計上。
對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環節，下面正式開始。
少量的漸變
今年在各網站上看到大面積的漸變色設計，相對前兩年來說越來越少，設計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制，將漸變色彩運用到關鍵功能上，突出強調重要信息。
機票選購界面，將漸變色運用到頭部位置去強調功能。
運用在功能卡片上，突出重點信息。
如上圖，設計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。
包豪斯風格圖形
幾何圖形設計是目前運用最多一個設計手法，今年發現一些比較抽象藝術化包豪斯風格幾何圖形，在UI設計中大量運用，且效果還不錯。
這種圖形帶來好處就是記憶性強，應用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形，來表達功能的設計，形成記憶點。
品牌設計上，也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復運用在設計中。
有深度的界面
今年這樣的設計屢見不鮮，大量3D運用在界面設計中，二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合，形成一種全新的視覺感官。
uber的概念官網就通過3D來呈現，表達功能亮點。
將二維世界三維化，將是2021年重要的趨勢。目前國內外線上有一些產品，開始在部分功能模塊使用這樣設計手法，如Naver，支付寶等。
毛玻璃效果
可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明，用在視覺強調的地方。
如上圖設計，毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用，還可以對功能信息進行強調。
毛玻璃效果運用在個人中心，人物頭像位置，進行設計強調。
運用毛玻璃去包裝UI界面，可以提升品質感與神秘感。
沉浸式界面
將功能與場景融合設計，用戶在使用產品過程中，能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上，這樣設計出現次數越來越多，設計效果沖擊力強，得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現實設計手法，將人物與酒店場景進行排版布局。
將制作材料與產品集合。
擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。
界面排版雜志化
雜志化設計風格鮮明，可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束，排版使用大字體，同時設計排版上更加個性。我們在做產品概念探索前期，可以多去嘗試這樣的風格。
擬物化圖標
擬物圖標又回來了，apple新版本的Big Sur系統，就采用擬態圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現。
不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用，相對之前扁平化設計，目前具有空間的擬物化設計，增加了真實感。
圓形的運用
圓形趨勢，我想大家也許會忽略的點，最近幾年設計中，圓形的設計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計，采用圓形與產品進行集合設計排版。
2021新擬態界面
新擬態趨勢是2020年受到廣泛關注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設計既具有未來感又具有現實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態界面，會克制使用這些元素。
2021年擬態界面，更注重功能與體驗。擬態效果會使用在關鍵功能上，如儀表、按鈕，又或者需要重點強調的地方，避免了大面積使用這種設計手法。
寫在最后
2021年的趨勢相對來說，有繼續延續2020年一些設計風格，這些風格將會在繼續加強，同時我們也有發現，目前越來越多3D元素與二維界面進行集合設計，能更生動傳達功能與將故事，2021年大家務必要注意這種趨勢的延續。
作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中，以產生最大化收益。
原文地址：功夫UX（公眾號）
作者：功夫UX
Playstation 5 Dualsense 3d Neumorphic Mobile 3d App by Dawid Tomczyk
Radio Player App by Alexander Plyuto
Fitness Device App by Sergi Mi
Tesla Smart App by Gavrisov Dmitri
Playlists by Filip Legierski
Player App Ui Concept by Anton Skvortsov
Crypto Exchange App by Taras Migulko
Player App Ui Night Version by Anton Skvortsov
Sleep Cycle App by Devanta Ebison
Kettle App Concept by Vadim Demenko
Neumorphism Tutorial by Julia Shagofferova
Skeuomorph Banking App by Mikolaj Galeziowski
Banking App by Filip Legierski
Sky Vpn App by Sergey Dyachenko
Skeuomorph Anicorn Watches App V2 by Dawid Tomczyk
Ui For Tracking Project by Mariana Konstantinova
Purchase Guitar App by Ozturk Erdag
Soft Ui Countdown Timer by Marc Merle
Sign In Mobile Screen by Dali
Best Powder Snowboard by Olya Safianova
Home Automation Remote Control by Martin Priotti
Neumorphism – To Do List by Oliver H. Gunther
Time With Some Clouds by Julia
Alfred Smart Lock by Xiaoming Phan
Headphone Controller App by Ariunbold Ankhaa _
Mi Remote Control Mobile App by Igor Erema
Simple Music Player by Luiks Tsaryk
Voice Recorder Interface by Tanmoy
Mp3 Player Mobile Application by Orkhan Salahov
Shazam Redesign In Dark Neomorphism by Marius
]]>
]]>
今天為大家談談APP UI界面中的一些版式排版設計理論，學習這些理論知識，對你日后做移動端界面設計也會起到一定的幫助。
1.信息的排布
對任何信息進行排布的時候，首先必須要掌握的是對齊/重復/親密/對比，貫穿設計的四大原則。
對齊除了能建立一種清晰精巧的外觀，還能方便開發的實現。基于從左上至右下的閱讀習慣，移動端界面中內容的排布通常使用左對齊和居中對齊，表單填寫的輸入項使用右對齊。
設計和做其他事情一樣，也要有輕重緩急之分，不要讓用戶去找重點/需要注意的地方，應該讓用戶流暢地接收到我們想要傳達的重要的信息。重復和對比是一套組合拳，讓設計中的視覺元素在整個設計中重復出現既能增加條理性也可以加強統一性，降低用戶認知的難度。那么在需要突出重點的時候就可以使用對比的手法，例如圖片大小的不同或者顏色的不同表示強調，讓用戶直觀地感受到最重要的信息。
在排布復雜信息的時候，如果沒有規則地排布那么文本的可讀性就會降低。組織信息可以根據親密性的原則，把彼此相關的信息靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于減少混亂，為讀者提供清晰的結構。
在設計表達的時候，一定要考慮內容的易讀性。適當使用圖形可以增加易讀性和設計感，而且圖形的理解比文字更高效。那些用文字方式表現時顯得冗長的說明，一旦換成可視化的表現方式也會變得簡明清晰，可視化的圖形可以將說明/標題/數值這種比較生硬的內容，以比較柔和的方式呈現出來。
2.圖片的使用
app的頁面結構和文本確定之后，就要開始安排圖標/按鈕/圖片的安排了，這時頁面也就從單純文本的“閱讀”型結構調整為“觀看”型結構，對于頁面的易讀性以及頁面整體的效果會產生巨大的影響。頁面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會給人一種寧靜典雅、高級的感覺。提升圖版率會有充滿活力，使畫面有富有感染力的效果。
實際中也跟選取圖片的元素/色調/表達出來的情感有關系，合適的圖片也能散發出整個應用的氣質，直接傳達給人“高級”，“平民化”，“友好”等不同的感覺。
在內容比較少但是又想提高版面率的話可以采用一些色塊，或者抽象化模擬現實存在的物件，例如電影票，書本紙張，優惠券，便簽等的效果，使界面更友好也降低空洞的感覺。通過這種方式也可以改變頁面所呈現出的視覺感受，只是這種方法最多改變頁面的色調/質感，并不能改改變“閱讀”內容的比例，這點是需要注意的。
3.顏色的使用
不同的顏色可以帶給用戶不同的感覺，這點應該是常識。在移動端界面中通常需要選取主色，標準色，點晴色。移動端與網頁端稍微不同，主色雖然是決定了畫面風格的色彩但是往往不會被大面積的使用。通常在導航欄/部分按鈕/icon/特殊頁面等地方出現，會有點晴，定調的作用。統一的主色調也能讓用戶找到品牌感的歸屬，例如網易紅/騰訊藍/京東紅/阿里橙等等。標準色指的是整套移動界面的色彩規范，確定文本/線段/圖標/背景等等的顏色。點晴色通常會用在標題文本/按鈕/icon等地方，通常起強調和引導閱讀的作用。
主色在選擇上可能不止一個，點睛色通常也由兩三個顏色組成，標準色更是一套從強到弱的標準群，那么在點晴色與主色，主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環上鄰近的顏色)，這種方法比較常用因為色相柔和過渡也非常自然。
第二種是同色系配色(色相一致，飽和度不同)，主色和點晴色都在統一的色相上，給用戶一種一致化的感受。
第三種是點亮色配色，主色用相對沉穩的顏色，點晴色采用一個高亮的顏色，起帶動頁面氣氛，強調重點的作用。
第四種是中性色配色，用一些中性的色彩為基調搭配，弱化干擾。這種方法在移動端是最常見的方法。
還有一些漸變，明暗調對比，多色搭配等方法在這里不一一說明，你感受一下。
4.留白的藝術
不單單是文字和圖片需要設計，留白也是構成頁面排版必不可少的因素。所有的白都是“有目的的留白”，帶有明確的目的來控制頁面的空間構成。
常見的手法有幾種，第一通過留白來減輕頁面帶給用戶的負擔。首屏對一個應用來說十分重要，因此一些比較復雜的應用首評都堆積了大量的入口。如果無節制的添加，頁面中包含的內容太多時，會給人一種頁面狹窄的感覺，給用戶帶來強烈的壓迫感，所以元素太多有時候反而不是好事。留白能使頁面的空間感更強，視線更開闊，通過留白來減輕頁面的壓迫感，使用戶進入一種輕松的氛圍。
第二通過留白區分元素的存在，弱化元素與元素之間的阻隔。表單項與表單項之間，按鈕與按鈕之間，段落與段落之間這種有聯系但又需要區分的元素用留白的方式可以輕易造成一種視覺上的識別，同時也能給用戶一種干凈整潔的感覺。
第三通過留白有目的的突出表達的重點。“設計包含著對差異的控制。不斷重復相同的工作使我懂得，重要的是要限制那些差異，只保留那些最關鍵的。”這句話出自原拓哉的“白”一書中，通過留白去限制頁面中的差異使內容突出是最簡單自然的表達方式。減少頁面的元素以及雜亂的色彩，讓用戶可以快速聚焦到產品本身，這種方法在電商類的應用上被大量的使用。
第四留白賦予頁面構成產生不同的變化。版式設計中要有節奏感，這也是我一直強調了。傳統雜志在每一頁翻開都會有不同的視覺感受，我認為在app內很多板塊之間的也是可以局部去突出個性或特點的。留白可以賦予頁面輕重緩急的變化，也可以營造出不同的視覺氛圍，通過留白去改變版式再配合四大原則可以產生出不同的效果。
值得注意的是，留白不是一定要用白色去填充界面，而是營造出一種空間與距離的感覺，自然與舒適境界。
5.視覺心理的靈活運用
在觀看事物時，往往會產生一些不同的視覺心理，例如兩個等寬的正方形和圓形放在一起，你一定會覺得正方形更寬。在版式設計中同樣大量運用這些科學視覺方法對用戶進行視覺上的引導，也能讓設計師快速找到一些排版布局的方法。
(via 版式設計原理)
首先最常見方法是的是靈活運用黃金分割比，文本與線段的間隔，圖片的長寬比等地方都可以通過黃金分割比快速的設定。比如通欄高度的設定等等。
在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。直角通常用在需要更全面展示的地方，例如用戶的照片，唱片封面，藝術作品，商品展示等地方。在個人類的feed或者頭像，板塊的樣式等使用圓角會有更好的效果。
在全局頁面的排版中也要避免單調，增加節奏感。在上文我也提到過排版要有輕重緩急之分，這樣讓用戶在觀看的過程中不會感到冗長，無趣。
圖片也是有不同的色調的，通過蒙版的方法可以控制這種色調。如果選擇比較明亮的色調可以減輕這種對用戶的壓迫感，選擇比較暗的色調可以讓整個畫面更沉穩，內容顯示更為清晰。
6.沒有設計的設計
最后這段不是版式設計原理，更像是一種設計的心境。古人在寫詩的時候有一種手法叫白描，原拓哉也曾強調“最美的設計是虛無”，在界面設計中同樣追求一種“讓用戶感受不到設計”的境界。每一條線/每一行文字/每一個按鈕的存在都是都有它存在的理由。它不加無意義的修飾、不須陪村和烘托，讓用戶更關注內容的主體，弱化對視覺的認知。甚至于用戶在滑動時看到一個按鈕或一行文字也感覺這是理所當然的存在。“菩提本無樹，明鏡亦非臺”，做設計和做人一樣，一切有為法皆如夢幻泡影，不要注重形式才能明心見性。
圖中的例子在某些地方處理得也不是那么自然，但是我認為以上的例子是有向“讓用戶感知不到設計”的方向上走的，沒有完美的設計，只有努力變的更好的設計。最后，做好設計非一朝一夕，理解設計也非一朝一夕，希望各位善于發現美，也善于理解美。
來源：知乎 作者：justinlam
]]>
建立這種信任將有助于建立你和用戶之間堅實的基礎，它可以促進銷售，提高用戶對產品的忠誠度，它建立了品牌形象，促進了成功，并有利于建立長期有效的用戶關系。那么，這種設計該注意什么呢？下面，我們有十點建議，可以幫助你更好的建立一個高度信任感的用戶界面。
1.高清晰度
如果一個隨機的用戶登陸你的網站，首先，接口信息或者目標是否明確？他是否知道該如何操作？能否快速的了解你網站主打的功能是什么？
如果答案是肯定的，那么你的設計已經達到了簡易明了的要求。如果答案是否定的，那你可能就要重新調整一下了。
網站的清晰度意味著你網站設計的方式，對于用戶而言是否是容易理解辨別的。用戶需要了解這個網站是用來干什么的，信息傳達，產品展示還是游戲。你可以使用一些會給人驚喜的或者給人懸念的元素，但是必須在于網站的清晰度上找到一個平衡點。
2.透明度
你有沒有遇到過這種情況，一個網站起始頁向用戶傳達了一種信息，但當翻閱到后文，發現它講的是完全不同的信息。所以網站的前期設計，必須明確的傳達后期的信息。不能前后不統一。
以下是一些簡單的例子:
- 告訴用戶你將會用什么形式展示信息
- 告訴用戶你是否會使用cookies追蹤他們的行為
- 建立一個隱私保障概述或者用戶須知告訴用戶你會怎么處理他們的信息
- 在進行常用問題解答或者用戶開放交流時，使用安全連接和HTTPS。
- 如果你進行金融交易，制定一個明確的政策，包括回報和保障。
- 如果發生了一些失誤（比如安全漏洞），盡快給予解釋并提供解決方法
3.注重誠信
雖然這個聽起來是個非常簡單的概念，但是當實施起來的時候，很多人會選擇丟掉誠信，你每次都會執行你所承諾的嗎？
這點需要在所有地方都得到保障，從一個應用的發布日期，到郵件列表，導航項目的維護。你許下一個承諾，那你最好保證能兌現。否則，一次不忠百次不用，你會永遠失去你的用戶。
4.賦予用戶控制權
如今的用戶已經習慣事情在他或她的掌控之中了。用戶喜歡自定義網站和應用程序體驗。給他們這個選擇，哪怕只是一小部分。
允許用戶做出交互式選擇。你可以通過幾種方式做到這一點：
- 提供導航選項，讓用戶作出選擇
- 對用戶的操作做出反饋
- 賦予他們一些小的控制權，比如開啟或者關閉通知欄
- 服裝購物時，允許用戶自行選擇的內容，如女士/男士/男童/女童
- 當選擇使用工具時，向用戶提供一定的指令，通過懸停元素或者下拉菜單，幫助用戶了解選項。
5.采用清晰的排版
每個模式都有存在的原因。它們具有普遍接受，易于使用，鼓勵用戶交流互動的特性。堅持按著基本模式進行設計。
當你的設計易于使用和易于理解，用戶就不會質疑網站的運行方式，為什么這么做還是怎么的。信任是與生俱來的。但是，當這些事情都不清楚，用戶可能會問為什么還是怎么的，而這也正是不信任的種子萌芽的地方。
6.清晰的導航菜單
清晰的導航菜單有利于提高用戶對于網站的信任度，它為用戶提供了一個易于理解的途徑進行搜索或者操作。導航同樣引導用戶在頁面跳轉之間更方便的找到他們想要查看的內容。
有助于建立清晰導航菜單的關鍵UI元素包括：
- 頁眉和標題的頁面
- 視覺識別
- 標志和品牌跨頁
- 頁腳，包括相關的信息和聯系
- 一致的圖標使用
- 頁面之間簡便轉化的途徑
- 清楚說明的文本元素
- 基本菜單結構，可以從任何頁面訪問
7.解決問題
你的網站是做什么的？它解決了用戶的問題嗎？還是它會給用戶提供答案。
網站需要能幫助用戶解決問題，不然用戶使用它干嘛。你是否了解用戶想要知道什么，解決的方案又是什么？你的網站界面，每一個環節和行動和交互都應該引導用戶實現這一解決方案。
這一切又回到一個議題：你的網站需要有一個明確的目標。
8.溝通簡潔明了
別想太多，別搞太多套路。使用簡單清晰的語言閱讀方式。這要延伸到所有的副本，特別注意那些經常被人遺忘的元素（比如文字鏈接或者底部的按鈕等等）
然后編輯，編輯，編輯。
如果不和用戶溝通，你永遠不會知道該怎么樣贏得用戶的信任，也找不到自己溝通，傳播信息時的錯誤。使用性能良好的編輯器工作，保證你編輯的所有副本語法正確。通過QA測試確保底部所有鏈接都可用。在合適的位置設置一個社交網站圖標按鈕鏈接，確保提交形式正確。網站上的每一個元素都會傳達你理念的一部分，建立用戶對網站的信任和好感。
9.結合一兩個流行趨勢
你可能會想在你的網站中使用一個時髦的設計或者流行的模式。過時的接口會使用戶懷疑你的網站是否有效或者管用，或者直接導致懷疑。
通過一種時髦的方式來呈現你的內容，不斷的努力改進，使用最新的互聯網技術，可以增強用戶對于網站的信任感，通過一種可視化的方式建立信任。
這并不是說你非得采用最新的技術，走在潮流最前端，你只需要添加一點點的時尚元素就可以了，比如說扁平化的按鈕，鮮艷的配色或者簡約的設計風格，使你的設計給人感覺清新就可以了。Cards系統或者不同質感的設計同樣可以使你的網站看起來很有現代感。
10.測試 測試 測試
最后，每個元素都必須保證有效可用。在設計之初，你必須保證每個元素親測有效，然后后期也必須定期維護升級，這樣才能保證為用戶提供一個卓越的使用體驗。
為用戶預留一個位置，使他們可以提意見。用戶時不時就會產生問題或者其他反饋，保證他們的反饋能及時被解決，你需要及時跟進他們反饋的問題并讓他們知道你積極的在為他們解決問題。
制衡和糾正錯誤的過程會讓用戶感受到人性化，錯誤發生，聯系破裂，你的反應方式決定了用戶對你的信任度。
結論
信任是一個用戶界面成功的基礎，也是用戶體驗的一個重要部分。沒有信任，用戶會懷疑你的網站和產品，然后離開你的網站投降他人懷抱。沒有信任，用戶就會拒絕在你的網站上進行任何操作，無論是表格填寫還是進行購買。最重要的是，如果用戶不信任你的網站，他會跟自己的朋友傳播自己的觀點，你失去的就不是這一個客戶，而是他周圍一片的潛在用戶。
一個信任你和你的網站的用戶更有可能成為忠實用戶，然后與企業或者網站進行進一步的互動。并向他身邊的朋友分享自己的想法。無論從何種角度來看，如果想要取得長期的成功的話，建立網站同用戶之間的信任都是一項必要且重要的步驟。