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