動(dòng)效在 UI 場(chǎng)景中的運(yùn)用已經(jīng)非常普遍，帶給用戶的體驗(yàn)升級(jí)也是很直觀的。無(wú)論是一個(gè)圖標(biāo)動(dòng)效到界面間的轉(zhuǎn)場(chǎng)動(dòng)效，還是聊天場(chǎng)景中的表情動(dòng)效等，都證明了動(dòng)效已經(jīng)是無(wú)處不在。
最近黑馬哥在體驗(yàn)產(chǎn)品的過(guò)程中，發(fā)現(xiàn)了很多優(yōu)秀的動(dòng)效案例，今天選擇其中的 10 個(gè)和大家一起交流學(xué)習(xí)，希望能夠帶給大家一些靈感啟發(fā)。
01. 動(dòng)效，讓點(diǎn)贊與眾不同
動(dòng)態(tài)表情為社交場(chǎng)景帶來(lái)更活躍的體驗(yàn)，使得交流過(guò)程變得更加趣味性。一個(gè)動(dòng)態(tài)的表情不僅活躍了氛圍，也使得通過(guò)簡(jiǎn)單的一個(gè)符號(hào)代表了千言萬(wàn)語(yǔ)。
最近在使用釘釘 APP 進(jìn)行聊天的過(guò)程中，發(fā)現(xiàn)輸入框的大拇指圖標(biāo)在長(zhǎng)按的時(shí)候結(jié)合了動(dòng)效的變化，對(duì)話場(chǎng)景中出現(xiàn)的大拇指表情會(huì)隨著長(zhǎng)按而增大。結(jié)合動(dòng)效和長(zhǎng)按手勢(shì)，為點(diǎn)贊的圖標(biāo)增加了不一樣的趣味性，帶給用戶不一樣的社交體驗(yàn)。
02. 動(dòng)態(tài)提醒，增強(qiáng)消息的關(guān)注度
各類通知/消息在產(chǎn)品中隨處可見(jiàn)，紅點(diǎn)提示剛出現(xiàn)的時(shí)候還引起了用戶強(qiáng)迫癥，短時(shí)間內(nèi)也增強(qiáng)了消息的閱讀率。隨著紅點(diǎn)效應(yīng)逐漸淡化，未讀消息的點(diǎn)擊率逐漸降低，大家都在嘗試更多提高關(guān)注度的形式。
支付寶在消息模塊的服務(wù)提醒中，采用了動(dòng)態(tài)形式提高關(guān)注度。當(dāng)用戶點(diǎn)擊消息進(jìn)入界面時(shí)，小鈴鐺圖標(biāo)會(huì)左右晃動(dòng)，以此來(lái)吸引用戶的目光，達(dá)到增加關(guān)注度的目的。
03. 圖標(biāo)動(dòng)效，讓你脫穎而出
在金剛區(qū)眾多的業(yè)務(wù)模塊中，想要突出重點(diǎn)模塊的關(guān)注度，采用動(dòng)態(tài)圖標(biāo)是比較常用的方式。采用動(dòng)靜結(jié)合的形式，會(huì)讓動(dòng)態(tài)表達(dá)得到突出。
比如 Keep App 將活動(dòng)挑戰(zhàn)圖標(biāo)動(dòng)效化，在不改變配色規(guī)則和圖標(biāo)設(shè)計(jì)規(guī)范前提下，依然可以達(dá)到突出主題的作用。
04. 博人眼球的動(dòng)態(tài)懸浮廣告
在不破壞產(chǎn)品結(jié)構(gòu)的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動(dòng)態(tài)異形較多，而動(dòng)態(tài)的關(guān)注度相對(duì)更強(qiáng)一些。
比如 Keep App 將活動(dòng)的折扣信息以懸浮層的形式表達(dá)，既不會(huì)占用太多空間（隨著滑動(dòng)會(huì)隱藏顯示），又能吸引用戶的關(guān)注度。如果用戶覺(jué)得影響操作，也可以直接關(guān)閉，就不會(huì)反復(fù)提醒而形成干擾。
05. 內(nèi)容模塊結(jié)合動(dòng)效替換突出存在感
在一些內(nèi)容量比較多的產(chǎn)品中，比如電商產(chǎn)品，很多內(nèi)容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來(lái)更好的流量引入。而動(dòng)效的結(jié)合也是不錯(cuò)的選擇，但是需要考慮動(dòng)效的干擾度。
當(dāng)當(dāng) App 在突出今日搶購(gòu)欄目時(shí)，為了不影響臨近板塊的干擾度，利用動(dòng)效轉(zhuǎn)場(chǎng)來(lái)替換展示的商品信息。縮放替換商品時(shí)的動(dòng)效既能達(dá)到差異化，也不會(huì)破壞整體的結(jié)構(gòu)，算是一舉兩得的設(shè)計(jì)解決方案。
06. 微弱的動(dòng)效也能呈現(xiàn)有溫度的設(shè)計(jì)
有時(shí)候在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候，動(dòng)效帶來(lái)的關(guān)注度并不是需要很強(qiáng)的表現(xiàn)力，一些微弱的動(dòng)效依然可以提升產(chǎn)品體驗(yàn)，帶給用戶更有溫度的設(shè)計(jì)。
自如 App 整體的設(shè)計(jì)都是做得非常不錯(cuò)的，在“我的”板塊頭部區(qū)域，結(jié)合背景插畫(huà)視覺(jué)感也是非常不錯(cuò)。插畫(huà)中部分元素的微動(dòng)效增強(qiáng)了生活氣息和真實(shí)感，讓用戶感受到這是一款有溫度的產(chǎn)品，提升用戶的好感度。
07. 動(dòng)態(tài)感十足的底部標(biāo)簽欄
圖標(biāo)動(dòng)效運(yùn)用到底部標(biāo)簽欄十分普遍，在這個(gè)頻繁切換的操作中，動(dòng)態(tài)的形式可以帶來(lái)更強(qiáng)的趣味性和關(guān)注度。
優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場(chǎng)，結(jié)合路徑動(dòng)效帶來(lái)動(dòng)感十足的體驗(yàn)。首頁(yè)圖標(biāo)還結(jié)合了刷新的功能，方便用戶進(jìn)行內(nèi)容的刷新，增強(qiáng)用戶體驗(yàn)感。
08. 拓展功能的動(dòng)態(tài)指引設(shè)計(jì)
針對(duì)一些功能體量較大的產(chǎn)品，會(huì)經(jīng)常結(jié)合一些隱藏式設(shè)計(jì)，拓展出更多功能操作。通常默認(rèn)為展開(kāi)狀態(tài)，在滑動(dòng)瀏覽內(nèi)容時(shí)隱藏，通過(guò)動(dòng)效吸引點(diǎn)擊展開(kāi)，不會(huì)造成主內(nèi)容的干擾。
比如平安口袋銀行底部標(biāo)簽欄上方的拓展功能區(qū)，動(dòng)態(tài)形式的展開(kāi)與隱藏方便用戶瀏覽主頁(yè)內(nèi)容。個(gè)別內(nèi)容采用動(dòng)態(tài)設(shè)計(jì)（點(diǎn)我抽獎(jiǎng)），突出其點(diǎn)擊欲望。動(dòng)態(tài)設(shè)計(jì)不僅提高了功能的曝光度，也能引導(dǎo)用戶操作，將繁瑣的操作變得更便利。
09. 結(jié)合動(dòng)態(tài) IP 的下拉刷新
針對(duì)下拉刷新這一常規(guī)操作，設(shè)計(jì)形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動(dòng)態(tài)演變完成刷新動(dòng)作，被很多產(chǎn)品設(shè)計(jì)師所采納。
美團(tuán)外賣就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時(shí)兩只耳朵搖擺非常俏皮可愛(ài)，松開(kāi)后 IP 形象露出，還配合眨眼睛等可愛(ài)的表情動(dòng)效。情感化設(shè)計(jì)結(jié)合動(dòng)態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗(yàn)。
10. 圖標(biāo)動(dòng)效帶動(dòng)局部功能的關(guān)注度
對(duì)于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關(guān)注度，動(dòng)態(tài)的形式是比較常用的方法。通常會(huì)在圖標(biāo)部分、文字部分、裝飾元素部分等進(jìn)行動(dòng)效設(shè)計(jì)，帶來(lái)的效果也是顯而易見(jiàn)。
比如 QQ 音樂(lè)在“我的”模塊中，將活動(dòng)中心、會(huì)員中心、每日簽到的圖標(biāo)采用動(dòng)態(tài)設(shè)計(jì)形式，雖然幾個(gè)模塊占比較小，但是依然能夠獲得用戶的關(guān)注度。
小結(jié)
動(dòng)效表達(dá)在產(chǎn)品設(shè)計(jì)中的應(yīng)用越發(fā)普及，不僅可以強(qiáng)化功能的關(guān)注度，也能帶給用戶感官體驗(yàn)上的升級(jí)。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運(yùn)用到項(xiàng)目設(shè)計(jì)中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問(wèn)的，漂亮的ui時(shí)，只需要最小的調(diào)整來(lái)幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡(jiǎn)短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì)，還有用戶體驗(yàn)。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個(gè)陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來(lái)泥濘的陰影。
標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長(zhǎng)格式正文的字母間距？這是一個(gè)大大的“不”。但對(duì)于標(biāo)題……我要說(shuō)“是”!
你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時(shí)會(huì)出現(xiàn)視覺(jué)上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺(jué)平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺(jué)風(fēng)格。確保它們擁有相同的視覺(jué)風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計(jì)時(shí)，使用單一字體是絕對(duì)沒(méi)問(wèn)題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。
留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣，而且看起來(lái)更光亮。
創(chuàng)建長(zhǎng)篇內(nèi)容？給20 pt試試。對(duì)于長(zhǎng)形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號(hào)。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時(shí)效果得很好，并帶來(lái)更好的閱讀體驗(yàn)當(dāng)你的用戶面對(duì)一堵文字墻的時(shí)候。18pt太過(guò)時(shí)了。
使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來(lái)和諧的文本字號(hào)集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。
選擇一個(gè)基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許，簡(jiǎn)單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡(jiǎn)單的方式來(lái)改變你的設(shè)計(jì)。
改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過(guò)您的移動(dòng)應(yīng)用程序上線序列，并且放置跳過(guò)鏈接在拇指容易觸及的位置。只是一個(gè)簡(jiǎn)單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……
記住，拇指仍然是主宰！
你的影子來(lái)自其中一個(gè)光源對(duì)吧？確保你的影子總是來(lái)自一個(gè)光源。這是一個(gè)簡(jiǎn)單的錯(cuò)誤，但它可以讓你的設(shè)計(jì)看起來(lái)更拋光且統(tǒng)一。記住，我們不是生活在一個(gè)擁有一千個(gè)太陽(yáng)的國(guó)度里。
使用更好的字體組合，效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候，當(dāng)面對(duì)1000個(gè)字體選擇，只是去尋找對(duì)應(yīng)的自己集合，效率會(huì)快很多。
文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測(cè)試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡(jiǎn)單對(duì)比。為了在你的文本之間形成良好的對(duì)比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對(duì)于幾乎所有其他內(nèi)容，保持文本左對(duì)齊。你的用戶會(huì)感謝你的你。
當(dāng)選擇一個(gè)多用途的文字，盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請(qǐng)嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開(kāi)這些。當(dāng)然也有例外，某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”
更精致的字體，但對(duì)于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計(jì)過(guò)程的后期需要更多的空間。
想要?jiǎng)?chuàng)造更容易理解的界面，對(duì)吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí)，不要讓你的文本太亮。
當(dāng)涉及到長(zhǎng)形式的內(nèi)容時(shí)，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問(wèn)題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫(xiě)，讓眼睛更容易看。
總是通過(guò)icon最突出的內(nèi)容。你認(rèn)為這是常識(shí)，對(duì)嗎？我并不覺(jué)得。通過(guò)使用色彩對(duì)比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時(shí)，請(qǐng)?jiān)黾有懈撸赃_(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡(jiǎn)單地降低行高。
使用x-height來(lái)測(cè)試字體的可讀性?；旧?，x-height是一個(gè)小寫(xiě)字母' x '相對(duì)于大寫(xiě)字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高，通常有助于更好地閱讀，特別是在使用長(zhǎng)形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無(wú)法選擇的字體，可以做這個(gè)測(cè)試，比較來(lái)自特定字體的三個(gè)字符：大寫(xiě)字母I，小寫(xiě)的L和數(shù)字1。
當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí)，確保提供最多經(jīng)常使用的動(dòng)作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會(huì)給你的產(chǎn)品帶來(lái)生命。簡(jiǎn)單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計(jì)具有豐富的視覺(jué)趣味和個(gè)性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測(cè)量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來(lái)實(shí)現(xiàn)。
突出最重要的元素。通過(guò)使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡(jiǎn)單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。
操作錯(cuò)誤的時(shí)候，添加一個(gè)額外的視覺(jué)輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡(jiǎn)單的形式，但很有幫助，當(dāng)他們填寫(xiě)任何形式的表格時(shí)額外的視覺(jué)輔助。
嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對(duì)于只包含文本的按鈕和鏈接來(lái)說(shuō)，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫(xiě)。如果你想在標(biāo)題上使用全大寫(xiě)，請(qǐng)確保它們?cè)谌魏螘r(shí)候都很短。有可能，最好是一行。將它們用于較長(zhǎng)的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺(jué)效果更好。
在輕文本和圖像之間，保持可接受的對(duì)比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡(jiǎn)單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對(duì)比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計(jì)感很強(qiáng)。（我沒(méi)有推廣費(fèi)用，請(qǐng)放心用）
看看這些很棒的字體，用于長(zhǎng)文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒(méi)有任何推廣費(fèi)）。
標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏，以及一個(gè)強(qiáng)大的視覺(jué)之間，需要對(duì)文本元素排版、間距作設(shè)計(jì)。我見(jiàn)過(guò)許多設(shè)計(jì)，最常見(jiàn)的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會(huì)給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺(jué)層次保留在所有的文章之間。
對(duì)于下載指標(biāo)，試著去做盡可能提供信息。對(duì)于用戶，嘗試使具有信息性的下載指示符對(duì)用戶很友好。你可以通過(guò)使用顏色來(lái)實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來(lái)顯示當(dāng)前進(jìn)度，一個(gè)簡(jiǎn)單的圖標(biāo)，讓他們可以在任何地方取消下載時(shí)間。
如果你能保持標(biāo)題簡(jiǎn)短，簡(jiǎn)潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡(jiǎn)短，時(shí)髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡(jiǎn)單地使用像這樣的“你的風(fēng)格。你的方式。”人們會(huì)瀏覽，保持這些標(biāo)題簡(jiǎn)短有力有助于他們更快地消化中的信息。
記住，這種方式可能會(huì)讓人感覺(jué)很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來(lái)決定方法是合適的，相對(duì)于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響就像你說(shuō)話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí)，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長(zhǎng)度可能有點(diǎn)平衡。對(duì)于一個(gè)單獨(dú)的列頁(yè)面，45到75個(gè)字符被普遍認(rèn)為是滿意的行長(zhǎng)度，而行長(zhǎng)度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時(shí)也起著重要作用，但是對(duì)于行長(zhǎng)，保持在45到75個(gè)字符之間，就會(huì)更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問(wèn)題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒(méi)有問(wèn)題的。但有時(shí)，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計(jì)都落入乏味。如果沒(méi)有元素會(huì)以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開(kāi)來(lái)，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對(duì)吧？它們可以作為微妙又很強(qiáng)大的視覺(jué)線索，在您的設(shè)計(jì)中使用要適度?，F(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺(jué)的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫(xiě)？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫(xiě)”是很好的。選擇一個(gè)合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無(wú)處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過(guò)最小的調(diào)整，你可以確保用戶能夠快速定位他們?cè)谝粋€(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過(guò)使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度，這一點(diǎn)尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來(lái)緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來(lái)很棒，但是當(dāng)過(guò)度使用時(shí)，它們會(huì)使使用者的眼睛疲勞，主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時(shí)，可讀性和可訪問(wèn)性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí)，試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過(guò)于叛逆。
在眾多經(jīng)過(guò)嘗試和測(cè)試的設(shè)計(jì)原則中，這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過(guò)程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí)，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線
可以為你的設(shè)計(jì)帶來(lái)更和諧的垂直節(jié)奏。您需要對(duì)齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過(guò)去使用特定的文本大小時(shí)，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長(zhǎng)形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計(jì)劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡(jiǎn)單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí)，可以使用類似的方法。
在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過(guò)最大化信號(hào)來(lái)實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過(guò)確保提供相關(guān)信息(信號(hào))來(lái)實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說(shuō)話。語(yǔ)氣嗎？嘗試所有小寫(xiě)字母。使用較重的字體和大寫(xiě)會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫(xiě)和較輕的字體。在處理特定項(xiàng)目時(shí)，使用類似全小寫(xiě)的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對(duì)比。
當(dāng)使用類型時(shí)，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級(jí)制度。只需通過(guò)重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過(guò)程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個(gè)更輕的粗細(xì)。但是…反過(guò)來(lái)說(shuō):淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對(duì)于長(zhǎng)表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺(jué)，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫(xiě)的短行文本？嗯…這是一個(gè)好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。
打開(kāi)這些錯(cuò)誤消息，您的表格有幫助。在使用表單時(shí)，請(qǐng)嘗試并確保錯(cuò)誤消息得到解釋。出了什么問(wèn)題，如何補(bǔ)救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見(jiàn)的事情的形式。讓這些錯(cuò)誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過(guò)程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見(jiàn)性是一個(gè)重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開(kāi)始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。
參考文獻(xiàn)《UI & UX Micro Tips - The Ultimate Collection》
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
大體上分為兩類：彩蛋流和體驗(yàn)流
搜索的本質(zhì)是什么？無(wú)疑是內(nèi)容的召回和信息的推薦。
可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗(yàn)和彩蛋上也是下了不少功夫，從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶黏性。因此今天就來(lái)盤點(diǎn)一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗(yàn)流
注重提升搜索過(guò)程中的趣味程度，以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說(shuō)是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂(lè)角色：搜索【滅霸】，頁(yè)面右邊會(huì)打響指，相關(guān)字段會(huì)被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點(diǎn)擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。
而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上，谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶參與，可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時(shí)，頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁(yè)面會(huì)左右翻過(guò)來(lái)
搜索【跳躍】，頁(yè)面會(huì)在上下跳動(dòng)
搜索【失重】，頁(yè)面上的字會(huì)飄起來(lái)
而在【活動(dòng)運(yùn)營(yíng)】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì)，力求給用戶一種眼前一亮的感覺(jué)。比如每年的愚人節(jié)，搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計(jì)，各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶帶來(lái)了新鮮感和趣味性。
還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間，用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」
用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動(dòng)。另外，百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
注重提升搜索過(guò)程中的交互體驗(yàn)，以增加用戶的操作效率與產(chǎn)品易用性。
代表：蘋果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機(jī)上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶額外打開(kāi)計(jì)算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼：當(dāng)你輸入 【打+我或通訊錄好友+電話】時(shí)，鍵盤上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼，點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。
用戶無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話號(hào)碼，大大提升操作體驗(yàn)與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時(shí)，系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí)，該入口的聚光燈會(huì)更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。
降低「需要往上手指移動(dòng)，才能點(diǎn)擊搜索框」的操作成本，讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時(shí)，搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
讓用戶更方便地將光標(biāo)快速移動(dòng)到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢的信息。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
精準(zhǔn)的分析了UX設(shè)計(jì)師的技能定位。其實(shí)不光是作為一些交互設(shè)計(jì)師自己不太清楚，領(lǐng)導(dǎo)和客戶往往也會(huì)忽略這一重要的步驟...
交互設(shè)計(jì)：我們是不是要把“用戶體驗(yàn)”中的“用戶”拿掉了？
前言：這篇文章寫(xiě)得特別好，很精準(zhǔn)的分析了UX設(shè)計(jì)師的技能定位。其實(shí)不光是作為一些交互設(shè)計(jì)師自己不太清楚，領(lǐng)導(dǎo)和客戶往往也會(huì)忽略這一重要的步驟。文章篇幅有點(diǎn)長(zhǎng)希望大家能靜下心看完，會(huì)幫助自己了解更多哦~
什么是用戶體驗(yàn)設(shè)計(jì)師？
我最近從一位來(lái)自MathWorks（世界領(lǐng)先的技術(shù)計(jì)算和基于模型的設(shè)計(jì)的軟件開(kāi)發(fā)商和供應(yīng)商）的高級(jí)用戶體驗(yàn)專家那兒看到了一個(gè)很棒的廣告，這是其中一些節(jié)選：
與開(kāi)發(fā)團(tuán)隊(duì)合作，遵循以用戶為中心的設(shè)計(jì)方法，協(xié)同工作，對(duì)復(fù)雜的問(wèn)題進(jìn)行頭腦風(fēng)暴和設(shè)計(jì)創(chuàng)新的解決方案
向團(tuán)隊(duì)成員建議使用哪些可行的方法來(lái)回答他們關(guān)于用戶的問(wèn)題，并根據(jù)項(xiàng)目的需求、目標(biāo)和約束來(lái)設(shè)計(jì)方向
與團(tuán)隊(duì)成員密切合作，進(jìn)行用戶研究，發(fā)現(xiàn)痛點(diǎn)，開(kāi)發(fā)用戶配置文件，并創(chuàng)建任務(wù)列表
在紙上畫(huà)出功能原型
進(jìn)行可用性測(cè)試，進(jìn)行用戶交流和網(wǎng)上調(diào)研，組織調(diào)查，并進(jìn)行你認(rèn)為合適的其他可行性評(píng)估
它準(zhǔn)確地描述了我在對(duì)于用戶體驗(yàn)工作的期望。我們從目標(biāo)人群和競(jìng)品那里學(xué)習(xí)有關(guān)項(xiàng)目的一切知識(shí)，找到方法來(lái)研究用戶的需求和目標(biāo)，與目標(biāo)人群一起評(píng)估這些需求，修改項(xiàng)目計(jì)劃，并在最終確定產(chǎn)品之前創(chuàng)造出經(jīng)過(guò)用戶驗(yàn)證的解決方案。
但當(dāng)我換一份新的工作時(shí)（當(dāng)然那是個(gè)例外），我看到許多職位描述都要求具備廣泛的用戶體驗(yàn)技能，有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個(gè)能進(jìn)行原型設(shè)計(jì)的視覺(jué)設(shè)計(jì)師。
來(lái)自高級(jí)UI/UX設(shè)計(jì)師的廣告：
有測(cè)試和可用性實(shí)驗(yàn)的經(jīng)驗(yàn)和熟練的交互原型的經(jīng)驗(yàn)
創(chuàng)造清晰和具有視覺(jué)沖擊畫(huà)面的能力
深入了解用戶的興趣和需求
聽(tīng)起來(lái)他們?cè)趯ふ乙粋€(gè)精通調(diào)研、可用性測(cè)試和交互原型的人。但更迫切的需要反映在以下關(guān)于"附加"的要求中：
項(xiàng)目工作能展示強(qiáng)大的用戶體驗(yàn)過(guò)程和完美的細(xì)節(jié)視覺(jué)和交互設(shè)計(jì)原則（IA，IxD，排版，布局，層次結(jié)構(gòu)，顏色，組成）
你認(rèn)為他們只會(huì)招聘一個(gè)可以進(jìn)行用戶調(diào)研，畫(huà)線框圖和測(cè)試的人嗎？或是視覺(jué)設(shè)計(jì)做的很出眾的人？也許這反映了“UI”這部分的職位描述。讓我們來(lái)看看一個(gè)純粹的UX設(shè)計(jì)師的職位，它要求：
優(yōu)秀的分析能力
在實(shí)際用戶研究、信息架構(gòu)、交互設(shè)計(jì)、以用戶為中心的設(shè)計(jì)過(guò)程以及用。戶體驗(yàn)原則和技術(shù)等方面有豐富的經(jīng)驗(yàn)
聽(tīng)起來(lái)不錯(cuò)！但其真面目會(huì)在下一個(gè)要求中顯示：
把想法/概念轉(zhuǎn)化為優(yōu)質(zhì)的視覺(jué)設(shè)計(jì)
如今，用戶體驗(yàn)已成為熱門詞匯。盡管看起來(lái)不言自明，但一些公司并沒(méi)有明白這一點(diǎn)——他們?nèi)匀缓鲆暳诵袨榻?jīng)驗(yàn)，而不是外表和感覺(jué)。我看到的許多廣告都是在視覺(jué)設(shè)計(jì)上表達(dá)了最具體和生動(dòng)的語(yǔ)言。這讓我撓頭，懷疑是否只有最成熟、規(guī)模最大的公司才真正需要用戶體驗(yàn)，并有足夠的預(yù)算來(lái)支持它。難道其他公司只是通過(guò)招聘視覺(jué)設(shè)計(jì)師并給他們貼上“UX”的標(biāo)簽，來(lái)追個(gè)市場(chǎng)熱點(diǎn)而已嗎？
遠(yuǎn)離調(diào)研？
用戶研究員Alan最近離開(kāi)了一家總部位于亞特蘭大的公司，那里擁有大量的用戶體驗(yàn)員工。他在公司的頭兩年里，參加了全國(guó)各地許多不同類型的用戶調(diào)研。然而，在最后一年，他發(fā)現(xiàn)他的調(diào)研被拋到一邊了。
"我的新老板不關(guān)心做調(diào)研。似乎整個(gè)公司都在降低它的重要性。相反，他們會(huì)開(kāi)辦設(shè)計(jì)思維講習(xí)班，直接進(jìn)入開(kāi)發(fā)階段。“任何研究或可用性測(cè)試都被留到最后，只是為了驗(yàn)證解決方案。”
由于該公司以嚴(yán)厲對(duì)待用戶體驗(yàn)而聞名，這一點(diǎn)尤其令人不快。
像用戶體驗(yàn)（ux）這樣流行的詞匯會(huì)突然變得受人追捧，我想不出在這個(gè)行業(yè)還有什么比“設(shè)計(jì)思維”更重要的了。根據(jù)谷歌在過(guò)去的五年中的數(shù)據(jù)，對(duì)設(shè)計(jì)思維的網(wǎng)頁(yè)搜索翻了兩倍。
顯示從2012年12月到2017年6月設(shè)計(jì)思維搜索增加的圖表。
搜索“設(shè)計(jì)思維”，2012年12月-2017年6月（資料來(lái)源：Google Trends）
設(shè)計(jì)思維過(guò)程的第一步是移情化，就是讓用戶參與并觀察他們?nèi)绾握務(wù)摰模瑫r(shí)觀察他們?nèi)绾握嬲瓿扇蝿?wù)。換句話說(shuō)，這就是用戶調(diào)研。誰(shuí)做調(diào)研？做用戶體驗(yàn)的諸位！不難想象互聯(lián)網(wǎng)項(xiàng)目負(fù)責(zé)人和利益相關(guān)者繞過(guò)這個(gè)步驟，直接進(jìn)入步驟2和3，開(kāi)始定義問(wèn)題和開(kāi)展頭腦風(fēng)暴去解決方案。爽死他們了。
在“設(shè)計(jì)思考家最初犯的五個(gè)錯(cuò)誤，”Dana Mitroff Silvers，一個(gè)設(shè)計(jì)思維驅(qū)動(dòng)者和數(shù)據(jù)戰(zhàn)略家寫(xiě)道，“我經(jīng)常被客戶要求跳過(guò)這個(gè)階段，直接進(jìn)入解決問(wèn)題的階段。”
她還描述了我有過(guò)很多次的經(jīng)歷，公司禁止接近用戶！很多時(shí)候，silvers的客戶都會(huì)問(wèn)他們是否可以跳過(guò)這個(gè)階段，因?yàn)樗麄?ldquo;已經(jīng)知道他們的受眾需要什么，可以為他們代言。”
這就說(shuō)的通了。團(tuán)隊(duì)繞過(guò)不熟悉的移情階段，直接進(jìn)入定義問(wèn)題及其解決方案，過(guò)去一直都是這么做的。而且如果沒(méi)有在移情方面的訓(xùn)練和指導(dǎo)，或者充分了解，很容易跳過(guò)這個(gè)階段。在我接下來(lái)的交談中可以看到，一個(gè)公司告訴我他們需要一個(gè)兼并的ux/視覺(jué)設(shè)計(jì)師。我問(wèn)他們是否需要設(shè)計(jì)思維，產(chǎn)品總監(jiān)回答：“是的。”他們跳過(guò)移情步驟了嗎？他同樣回答道：“是的。”
如果一家公司僅僅遵循設(shè)計(jì)思維的最后四個(gè)階段——設(shè)計(jì)、構(gòu)思、原型和測(cè)試——那么一個(gè)用戶體驗(yàn)設(shè)計(jì)師是什么樣的呢？是一個(gè)可以做原型開(kāi)發(fā)的視覺(jué)設(shè)計(jì)師。
分離調(diào)研和設(shè)計(jì)
用戶體驗(yàn)架構(gòu)師Alyssa最近與一家大型電信公司簽訂了用戶調(diào)研合同。讓人失望的是，設(shè)計(jì)師似乎沒(méi)有責(zé)任跟蹤調(diào)研結(jié)果。調(diào)研人員每一到兩周進(jìn)行一次新的可用性測(cè)試，然后將測(cè)試結(jié)果提交給設(shè)計(jì)師，也不知道設(shè)計(jì)師是否會(huì)遵循建議
這似乎不對(duì)。
我已經(jīng)注意到越來(lái)越多的公司在調(diào)研和設(shè)計(jì)師之間拆分他們的用戶體驗(yàn)實(shí)踐。問(wèn)題是，“用戶體驗(yàn)設(shè)計(jì)師”通常不僅要處理交互設(shè)計(jì)，還要處理視覺(jué)設(shè)計(jì)。盡管易于使用的工具的出現(xiàn)使得創(chuàng)建可點(diǎn)擊的原型變得容易，但這是兩個(gè)不同的技能。我期望交互設(shè)計(jì)師分析行為和工作流程，并充當(dāng)用戶的擁護(hù)者；視覺(jué)設(shè)計(jì)師則負(fù)責(zé)推廣品牌。
將設(shè)計(jì)團(tuán)隊(duì)分成調(diào)研人員和設(shè)計(jì)師可能會(huì)阻礙有效的軟件開(kāi)發(fā)。為了真正了解用戶，設(shè)計(jì)師需要培養(yǎng)共情心。他們和其他團(tuán)隊(duì)成員可以通過(guò)進(jìn)行用戶調(diào)研或可用性研究——或者參與調(diào)研過(guò)程來(lái)實(shí)現(xiàn)這一點(diǎn)。這就鎖定了用戶的目標(biāo)和痛點(diǎn)，并讓設(shè)計(jì)師了解到什么是最重要的點(diǎn)，這將有效幫助如何更有針對(duì)性的設(shè)計(jì)。除了對(duì)設(shè)計(jì)人員有好處之外，定期的用戶調(diào)研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解，那公司一定會(huì)對(duì)共情心和用戶調(diào)研付出比口頭更多的心思了。
功能原型和測(cè)試不足
Alan Cooper是視覺(jué)基礎(chǔ)的創(chuàng)造者和用戶體驗(yàn)的領(lǐng)袖，也是《囚犯?jìng)児芾硎杖菟芬粫?shū)的作者，他在Twitter上抨擊了“原型和測(cè)試”的思維模式并表示：“原型和測(cè)試不是交互設(shè)計(jì)”。 Cooper寫(xiě)道交互和測(cè)試能讓領(lǐng)導(dǎo)感到高興，但它只是蚍蜉撼大樹(shù)。盡管它創(chuàng)造了微小的改進(jìn)，讓設(shè)計(jì)師和他們的領(lǐng)導(dǎo)們充滿希望和快樂(lè)，但它從來(lái)沒(méi)有真正從大的程度上理解用戶或者產(chǎn)品。
我們都搞錯(cuò)了
我們已經(jīng)看到，在設(shè)計(jì)思維的大旗下，公司可能會(huì)跳過(guò)移情階段，回歸到一個(gè)舒適、獨(dú)立的設(shè)計(jì)過(guò)程。設(shè)計(jì)思維確實(shí)帶來(lái)了一個(gè)有價(jià)值的原型/測(cè)試階段，但在用戶研究上的偷工減料卻使本末倒置，并錯(cuò)過(guò)了一個(gè)時(shí)機(jī)，去進(jìn)行具體的見(jiàn)解和創(chuàng)新，從而可以將產(chǎn)品推向頂峰。而斷斷續(xù)續(xù)的研究只會(huì)拖延我們“想要知道我們的用戶想要什么”的心態(tài)。
雖然強(qiáng)調(diào)視覺(jué)設(shè)計(jì)的技巧，但分離研究和設(shè)計(jì)，可能消耗掉那些面向認(rèn)知將用戶體驗(yàn)放在首位的設(shè)計(jì)師。視覺(jué)設(shè)計(jì)提供了一個(gè)重要的初步印象，許多研究表明，人們對(duì)第一眼有吸引力的網(wǎng)站的評(píng)價(jià)通常比較高。但視覺(jué)只是用戶體驗(yàn)中的一部分。一個(gè)經(jīng)常使用你的產(chǎn)品的用戶到底是如何評(píng)價(jià)的？視覺(jué)效果將發(fā)揮一定作用，但我認(rèn)為它更有可能依賴于一個(gè)偉大的工作流程——需要反復(fù)跟進(jìn)用戶體驗(yàn)的流程。
我們到底要什么？
我不知道出了什么問(wèn)題，但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗(yàn)過(guò)程的價(jià)值，但開(kāi)發(fā)或市場(chǎng)主管是否也是如此？
可能是我們自己被自己的完美所欺騙了。我們已經(jīng)大幅改善了用戶體驗(yàn)的程度，現(xiàn)在在任何手機(jī)上都可以找到偉大設(shè)計(jì)的例子。改進(jìn)后的開(kāi)發(fā)工具利用了我們創(chuàng)新的交互模式，小工具使平面設(shè)計(jì)看起來(lái)很棒。也許開(kāi)發(fā)領(lǐng)導(dǎo)者覺(jué)得他們已經(jīng)看到了足夠好的設(shè)計(jì)，他們相信他們也可以做到這一點(diǎn)。
作者：March1996
鏈接：https://www.zcool.com.cn/article/ZNzYyNDU2.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
按鈕這個(gè)組件，在我們UI設(shè)計(jì)中出現(xiàn)頻率最高，交互使用最重要，確在用戶體驗(yàn)上最容易被忽略的一個(gè)組件元素因此我們要對(duì)按鈕做一個(gè)重新認(rèn)識(shí)在沒(méi)有互聯(lián)網(wǎng)的時(shí)代，按鈕就已經(jīng)被人們廣泛使用了，例如：電燈的開(kāi)關(guān)、電視機(jī)的遙控器、最早的固定電話等等，在物理形態(tài)下的按鈕也將是互聯(lián)網(wǎng)時(shí)代出現(xiàn)后UI按鈕組件的前身，目前物理按鈕仍在被廣泛沿用，作為UI設(shè)計(jì)中的按鈕組件，不管如何演變，萬(wàn)變不離其宗，依然需要參考現(xiàn)實(shí)環(huán)境物理按鈕，按鈕的交互就是通過(guò)觸摸能夠完成用戶的行為需求，所以按鈕的設(shè)計(jì)理念一定是直觀性和易用性優(yōu)先，從而指引用戶完成輕松無(wú)障礙的完成任務(wù)。
我們?cè)赨I設(shè)計(jì)環(huán)節(jié)如何將按鈕完美呈現(xiàn)，是我們將要深入研究一個(gè)課題，按鈕的交互體驗(yàn)、視覺(jué)體驗(yàn)會(huì)影響到產(chǎn)品的轉(zhuǎn)化、引流、行動(dòng)觸發(fā)等。
按鈕是一個(gè)帶有明確指示性的交互提示組件，它指引用戶準(zhǔn)確的完成下一步的操作，UI設(shè)計(jì)中一項(xiàng)任務(wù)的關(guān)鍵節(jié)點(diǎn)與轉(zhuǎn)折點(diǎn)的操作步驟，都是通過(guò)按鈕來(lái)完成的。
我們平時(shí)見(jiàn)到UI設(shè)計(jì)中的按鈕，第一眼看上去很簡(jiǎn)單，大多是由一個(gè)底色塊或一個(gè)帶描邊框加上文字注釋組合構(gòu)成的，其實(shí)真正的按鈕是由其大小尺寸、擺放位置、顏色、文案、圓角的大小…等細(xì)節(jié)元素組成，對(duì)細(xì)節(jié)的運(yùn)用和把控，直接關(guān)系到用戶的使用體驗(yàn)。
我們?cè)赨I設(shè)計(jì)中，設(shè)計(jì)按鈕時(shí)，會(huì)深度探究按鈕在當(dāng)前環(huán)境下的意義，出現(xiàn)在哪里？是否需要增加按鈕？為何增加按鈕？
按鈕功能：
展開(kāi)、收起、下拉、加減等功能，重點(diǎn)強(qiáng)調(diào)的是功能，在操作之后會(huì)發(fā)生一些交互形態(tài)的化這種按鈕主要起到通過(guò)功能形態(tài)的變化來(lái)告知用戶操作的信息與結(jié)果。
引導(dǎo)用戶接下來(lái)的操作：
我們完成一項(xiàng)內(nèi)容編輯或信息的確認(rèn)后，就會(huì)對(duì)當(dāng)前環(huán)節(jié)的頁(yè)面失焦（視覺(jué)焦點(diǎn)），而引導(dǎo)型按鈕（如：下一步保存、支付、確定）就會(huì)重新聚焦視覺(jué)重點(diǎn)，通過(guò)按鈕功能的文案描述告知用戶下一步該怎么辦。
行為習(xí)慣養(yǎng)成：
培養(yǎng)用戶的點(diǎn)擊習(xí)慣，當(dāng)我們?cè)谝粋€(gè)操作按鈕之后會(huì)得到相對(duì)應(yīng)的信息反饋，并且可以持續(xù)的給用戶帶來(lái)價(jià)值那么我們?cè)O(shè)計(jì)這個(gè)按鈕時(shí)可以重點(diǎn)突出這個(gè)按鈕的視覺(jué)表現(xiàn)力，在同維度不同的區(qū)域保持這個(gè)按鈕視覺(jué)上的統(tǒng)一持續(xù)培養(yǎng)用戶的點(diǎn)擊習(xí)慣，以后在遇到類似的按鈕時(shí)思維的慣性就會(huì)引導(dǎo)這個(gè)行為完成點(diǎn)擊操作。
按鈕需要經(jīng)過(guò)很多細(xì)節(jié)的設(shè)計(jì)，才能發(fā)揮出按鈕的最大作用例如，內(nèi)容的長(zhǎng)短/邊距；容器的大小、圓角；填充色的主/次之分…等，讓我們來(lái)了解按鈕到底是由哪些屬性、元素構(gòu)成。
圓角：通過(guò)視覺(jué)上給用戶的感受，圓角的大小決定按鈕的氣質(zhì)，小圓角是按鈕經(jīng)常使用的如：4PX圓角，也有比較嚴(yán)謹(jǐn)?shù)摹⒘α啃偷娜苯且灿腥岷偷綐O致的全圓角等等。
圖標(biāo)：可視信息抽象化表達(dá)，通過(guò)圖形直觀表達(dá)文字的含義，例如：加載中編輯等。
容器：是按鈕上所有信息的載體，包含顏色、紋理、文案、圖標(biāo)等元素。
邊框：確定按鈕的邊界，常用于次級(jí)按鈕描邊。
文案：用文字表達(dá)按鈕的含義，文案要精煉簡(jiǎn)要。
背景：表達(dá)按鈕的狀態(tài)，形象氣質(zhì)，品牌氣質(zhì)。
投影：投影主要運(yùn)用于凸顯層級(jí)關(guān)系，讓按鈕在原有維度提升，達(dá)到視覺(jué)聚焦的作用，往往配合紋理與漸變色可以打造更好的視覺(jué)體驗(yàn)。
按照功能屬性分類，可以將按鈕分為流程控制和功能選項(xiàng)兩大類別
流程控制：常見(jiàn)的傳統(tǒng)按鈕，如支付、確定、下一步、確定、保存等，容器承載著圖標(biāo)、圖標(biāo)加文案、文案等形式。
功能選項(xiàng)：開(kāi)關(guān)、加減控件、標(biāo)簽欄、分類、狀態(tài)切換等，操作之后只針對(duì)當(dāng)前頁(yè)面做出屬性上的的調(diào)整，不涉及流程的變化。
視覺(jué)呈現(xiàn)上有所區(qū)分，在不同的頁(yè)面可能存在同等級(jí)的權(quán)重
常規(guī)型按鈕：常見(jiàn)的按鈕，在同一個(gè)頁(yè)面出現(xiàn)多個(gè)常規(guī)型按鈕時(shí)，有主次之分。
虛線型按鈕：常用于添加、上傳等操作。
文本按鈕：僅用文字作為觸發(fā)點(diǎn)，部分會(huì)用主色、右側(cè)箭頭、下劃線等方式。
高權(quán)重：帶有填充色的主功能操作按鈕，當(dāng)同一個(gè)頁(yè)面存在多個(gè)按鈕，只允許存在一個(gè)高權(quán)重（主操作）按鈕。
中權(quán)重：帶邊框輪廓的按鈕，同一頁(yè)面可存在多個(gè)中權(quán)重的按鈕。
低權(quán)重：文本按鈕，圖文按鈕、圖標(biāo)按鈕，同一頁(yè)面可存在多個(gè)低權(quán)重按鈕。
是設(shè)計(jì)過(guò)程的重要組成部分，在不干擾界面視覺(jué)的前提下，對(duì)每個(gè)按鈕的樣式、狀態(tài)有清晰的定義，與其他元素布局區(qū)分開(kāi)來(lái)。
待激活狀態(tài)：需要完成規(guī)定業(yè)務(wù)流程的操作、或滿足一個(gè)以上必要的前置條件后才允許交互。
正常狀態(tài)：按鈕的正常狀態(tài)，可正常進(jìn)行交互操作。
點(diǎn)擊狀態(tài)：按壓效果，表示按鈕正在進(jìn)行交互還未結(jié)束，交互完成后，即會(huì)引發(fā)此按鈕的真實(shí)事件。
加載狀態(tài)：產(chǎn)生交互后沒(méi)有立即執(zhí)行、或系統(tǒng)需要一定的時(shí)間才能執(zhí)行完成。
禁用狀態(tài)：暫不允許操作、或需要用戶離開(kāi)此頁(yè)面去完成一定的前置條件才能操作此按鈕 。
PC端設(shè)計(jì)按鈕時(shí)，注意到鼠標(biāo)的點(diǎn)擊精確度高一些，通常我們會(huì)將按鈕設(shè)計(jì)的小一些同時(shí)也能讓整個(gè)界面看起來(lái)更加細(xì)膩，只要不影響操作，36px~48px 范圍內(nèi)的按鈕是比較常見(jiàn)的。
移動(dòng)端的按鈕設(shè)計(jì)，我們要更多的考慮到物理尺寸，即手指（指尖）在操作的時(shí)候需要占用的實(shí)際范圍。
標(biāo)準(zhǔn)參考：設(shè)計(jì)規(guī)范中，將按鈕的最小點(diǎn)擊區(qū)域規(guī)定為 42pt/84PX，一旦小于這個(gè)數(shù)值，操作時(shí)就會(huì)出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無(wú)效。
文字按鈕：文字按鈕，自身可視化面積較小，所以我們要在操作熱區(qū)上做規(guī)劃，熱區(qū)大于文字按鈕可視化范圍，方便用戶操控。
「費(fèi)茨定律」告訴我們「目標(biāo)尺寸越大，移動(dòng)至目標(biāo)所花費(fèi)的時(shí)間就越短」，所以在滿足手指觸控范圍的同時(shí)，還要根據(jù)所對(duì)應(yīng)功能的權(quán)重占比來(lái)適當(dāng)調(diào)節(jié)按鈕的大小，當(dāng)某個(gè)元素的尺寸越大就越吸引眼球，就更容易被視覺(jué)捕捉到，也更容易被「點(diǎn)擊」，精準(zhǔn)度被降低的同時(shí)，也減少了用戶的操作成本。
我們以8像素柵格系統(tǒng)、iOS的2倍圖為例，較為常見(jiàn)的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。
設(shè)計(jì)風(fēng)格常見(jiàn)，例如扁平化、微質(zhì)感、擬物化、新擬態(tài)（概念）...
扁平化按鈕：填充色平鋪風(fēng)格，沒(méi)有多余的視覺(jué)干擾，這種類型的按鈕一般在應(yīng)用中用的最多，例如：工具型應(yīng)用、B端應(yīng)用等。
微質(zhì)感按鈕：填充漸變色基礎(chǔ)上加入淺淺的投影效果，保持了信息內(nèi)容的簡(jiǎn)潔、同時(shí)讓用戶產(chǎn)生更強(qiáng)的點(diǎn)擊欲望更加耐看。
擬物化按鈕：設(shè)計(jì)的很立體，3D效果、屬性樣式豐富多彩，參考現(xiàn)實(shí)世界中的事務(wù)或攝取應(yīng)用場(chǎng)景中的某些元素，使其更加逼真，有較強(qiáng)的代入感。例如：游戲類應(yīng)用、H5專題、運(yùn)營(yíng)banner等。
新擬態(tài)按鈕：風(fēng)靡一時(shí)的風(fēng)格，目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài)，例如：計(jì)算器、AI設(shè)備控制、有道云筆記等。
頁(yè)面出現(xiàn)多個(gè)按鈕時(shí)，只允許存在一個(gè)主操作按鈕，其他不做特別設(shè)定如果次要按鈕/操作較多，也不益過(guò)多的出現(xiàn)次級(jí)按鈕，可根據(jù)權(quán)重降級(jí)處理，以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。
主/次操作按鈕要統(tǒng)一樣式，用戶需操作時(shí)，盡可能的減少其思考及選擇時(shí)間按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維，節(jié)省時(shí)間成本，提高操作效率。
常見(jiàn)的按鈕還是以「小圓角」和「全圓角」居多，也有部分按鈕「直角」需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來(lái)選擇最合適的圓角類型，盡量避免大圓角（卡片圓角除外），按鈕外形要規(guī)整統(tǒng)一不可以出現(xiàn)不方不圓的奇怪樣式。
小圓角：小圓角按鈕的圓角值通常控制在高度的1/5、1/6，根據(jù)按鈕的尺寸大小，直接將圓角值固定在 4px（目前使用）能減少設(shè)計(jì)組件的數(shù)量也利于開(kāi)發(fā)做組件封裝后續(xù)調(diào)用。
全圓角：全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。
直角：不設(shè)圓角值，在PC端較為常見(jiàn)，也有部分較為嚴(yán)謹(jǐn)?shù)囊苿?dòng)端應(yīng)用使用直角按鈕。
按鈕中的文字要便于用戶理解，不能過(guò)于陌生或繞口，用戶碰到不易理解的信息會(huì)產(chǎn)生困惑甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失，文字還需要言簡(jiǎn)意賅，不能過(guò)多或折行且能合理的引導(dǎo)用戶完成操作。
如圖：
文案歧義就很明顯，想要挽留用戶，刻意將主次按鈕樣式對(duì)換，希望用戶操作不成功，那么用戶在需要取消訂單時(shí)就疑惑了，到底是點(diǎn)擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應(yīng)過(guò)來(lái)但無(wú)疑增加了選擇難度、思考時(shí)間及操作成本。
按鈕中的文字太大或太小都會(huì)影響用戶對(duì)信息接收的效率，比例需要適中文字太大會(huì)感覺(jué)很擁擠，沒(méi)有呼吸感，要給文字四周留下足夠的空間，同時(shí)文字太小會(huì)顯得小氣，看起來(lái)也會(huì)比較吃力，不利于信息接收。
按設(shè)計(jì)好按鈕組件之后，頁(yè)面中的其他組件或元素要與按鈕有很明顯的區(qū)別避免讓用戶產(chǎn)生不必要的誤解。
在彈窗中，主按鈕是在左？還是在右？這是一個(gè)爭(zhēng)論不休的問(wèn)題，在移動(dòng)端的彈窗設(shè)計(jì)中，主按鈕靠右就行了，不一定絕對(duì)正確，但絕對(duì)不是錯(cuò)的，根據(jù)調(diào)查數(shù)據(jù)顯示，單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高且用戶也有一定的意識(shí)，左側(cè)為上一步、右側(cè)為下一步，頂部左側(cè)為返回右側(cè)為保存或確定。
可操控性是按鈕設(shè)計(jì)最重要目標(biāo)之一，不僅要樣式統(tǒng)一，還應(yīng)符合用戶的認(rèn)知讓用戶能快速知曉這個(gè)元素能否點(diǎn)擊？如果將按鈕樣式設(shè)計(jì)的與用戶認(rèn)知有較大的偏差，不易于用戶理解。
按鈕設(shè)計(jì)中，大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態(tài)」，即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。
通常系統(tǒng)默認(rèn)不允許操作或存在時(shí)間限制會(huì)用到「填充為灰色的禁用按鈕」即便如此，也要盡量讓系統(tǒng)將其隱藏萬(wàn)不得已的情況下需要在按鈕附近說(shuō)明情況，以免使用不當(dāng)引起用戶的負(fù)面情緒。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，按鈕作為設(shè)計(jì)組件之一，有很多細(xì)節(jié)容易被忽略，我們需要對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考無(wú)論任何大小組件，都需要做到精益求精，才能給用戶帶來(lái)更好的使用體驗(yàn)，那我們?cè)撊绾螌?shí)現(xiàn)按鈕的正確使用方法？我們總結(jié)了20條把按鈕設(shè)計(jì)到最好的建議，我們一起來(lái)看。
按鈕在產(chǎn)品界面中是非常重要的元件之一，按鈕作為用戶引流和行動(dòng)觸發(fā)來(lái)說(shuō)都是至關(guān)重要的，如何把按鈕設(shè)計(jì)做到最好，是設(shè)計(jì)師需要不斷探索的問(wèn)題，把控好每一個(gè)細(xì)節(jié)才能讓每一個(gè)元件更精致，我們梳理總結(jié)了 20 條在設(shè)計(jì)按鈕時(shí)需要避免的問(wèn)題，把按鈕設(shè)計(jì)做到最好。
在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異按鈕設(shè)計(jì)可以通過(guò)大小、填充、描邊、色相、飽和度等的不同來(lái)進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí)：行動(dòng)觸發(fā)主要、次要、輔助、禁用等。
對(duì)于按鈕邊框來(lái)說(shuō)，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對(duì)較少，會(huì)顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟，全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內(nèi)。
給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無(wú)彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺(jué)效果，提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來(lái)確定投影顏色，這樣得到的效果會(huì)顯得更加干凈清爽。
雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用，比如對(duì)于一些淺色按鈕來(lái)說(shuō)也許投影反而會(huì)降低按鈕的識(shí)別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺(jué)很擁擠，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系，找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，可以給按鈕賦予生命具有呼吸感。
按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作，而不是讓用戶對(duì)其產(chǎn)生困惑，按鈕設(shè)計(jì)別讓用戶思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引，用戶已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會(huì)產(chǎn)生疑惑，影響使用體驗(yàn)。
當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶操作過(guò)程中的理解成本最低，一致性也因此成為最有力的可用性原則之一，我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。
直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些，箭頭要當(dāng)成圖標(biāo)來(lái)進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫(huà)的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。
通過(guò)信息對(duì)比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺(jué)提示，主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺(jué)效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。
在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判，在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運(yùn)用其樣式特征或者類似的風(fēng)格特征，這樣會(huì)讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無(wú)用的操作。
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡(jiǎn)意賅，只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可，有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少也許可以讓界面的呼吸感更強(qiáng)。
單行文字的可讀性更高，如果出現(xiàn)換行就會(huì)降低可讀性，我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。
底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變，比如 iPhone X 等類型的機(jī)型，由于底部需要預(yù)留主頁(yè)控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過(guò)渡銜接，這樣才能帶給用戶更好的感官體驗(yàn)。
按鈕需要方便用戶進(jìn)行點(diǎn)擊操作，如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來(lái)的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求，如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。
在同屬板塊內(nèi)的按鈕設(shè)計(jì)，我們可以通過(guò)按鈕的強(qiáng)弱來(lái)體現(xiàn)層級(jí)關(guān)系，不要讓按鈕大小不一致這樣視覺(jué)平衡會(huì)受到影響。
稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過(guò)按鈕寬度，這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見(jiàn)過(guò)的，幾個(gè)字即可表達(dá)的意思卻使用了過(guò)多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候，要根據(jù)最佳的視覺(jué)效果設(shè)定一個(gè)最大值，不要任其無(wú)限制發(fā)揮，這樣會(huì)使得最終的視覺(jué)效果大打折扣，甚至影響用戶感官體驗(yàn)。
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它，現(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用，需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候始終保持按鈕與背景的高對(duì)比度和可讀性。
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義，不會(huì)讓用戶出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以，按鈕去文本需要根據(jù)文案代表的含義來(lái)判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。
色彩在設(shè)計(jì)中是最直觀的體現(xiàn)，不同的顏色會(huì)傳遞不同的性格，帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會(huì)選擇輔助色來(lái)表達(dá)，紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用失效等屬性，需要酌情選擇。
引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過(guò)要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊，更有利于用戶點(diǎn)擊。
有時(shí)候?yàn)榱朔乐褂脩粽`操作，我們會(huì)將確認(rèn)操作的按鈕放在左邊，通過(guò)助力設(shè)計(jì)讓用戶再次確認(rèn)。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶習(xí)慣，將按鈕放在最合適的位置，便于用戶操作。
作者：CC小酷
鏈接：https://www.zcool.com.cn/article/ZMTUxNTI4MA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
在我們使用的產(chǎn)品中，多多少少都會(huì)有一些微交互的穿插，但由于微交互性能的不搶眼也不明顯的條件下，所以往往會(huì)被很多設(shè)計(jì)和開(kāi)發(fā)人員所忽略。
但在一個(gè)優(yōu)秀的產(chǎn)品中，微交互卻是必不可少的重要關(guān)口，它直接承載著用戶在使用產(chǎn)品時(shí)對(duì)產(chǎn)品細(xì)節(jié)的細(xì)微體驗(yàn)。雖然在互聯(lián)網(wǎng)產(chǎn)品早期，微交互曾被人稱之為是“很炫酷的特性象征”，但時(shí)隔今日，在這百花齊放的產(chǎn)品大環(huán)境中，其實(shí)微交互已經(jīng)慢慢從膚淺的炫酷轉(zhuǎn)型為附有內(nèi)涵的用戶體驗(yàn)關(guān)鍵要素了。
作為產(chǎn)品細(xì)節(jié)體驗(yàn)的重要承載，微交互的價(jià)值與地位逐漸提升，在用戶使用產(chǎn)品過(guò)程中，它不僅僅能促進(jìn)產(chǎn)品與用戶的互動(dòng)性，而且還能激發(fā)用戶對(duì)產(chǎn)品的積極感覺(jué)，并且最終影響用戶的整體行為。
微交互的基本概念就是指：關(guān)注一項(xiàng)主要任務(wù)、一個(gè)目的得事件過(guò)程。通常情況下，微交互需要關(guān)注得是這個(gè)事件的整體交互過(guò)程，并且它存在的目的也是為了讓用戶在使用產(chǎn)品時(shí)能感覺(jué)到順暢性、一致性，并產(chǎn)生心理的愉悅感，從而讓用戶喜歡產(chǎn)品，愛(ài)上產(chǎn)品，從而留住用戶。
如果籠統(tǒng)概括的話，可以說(shuō)微交互幾乎會(huì)遍布任何設(shè)備、任何應(yīng)用程序中。并且他們存在的價(jià)值就是讓用戶高興。就單純從產(chǎn)品說(shuō)起，如果說(shuō)在產(chǎn)品設(shè)計(jì)中，在大多數(shù)用戶與產(chǎn)品接觸時(shí)都能發(fā)現(xiàn)微交互的存在與應(yīng)用。
1、你在Web看一段話時(shí)結(jié)尾展示是“…”時(shí)，那么通過(guò)你的心智程序，你就會(huì)下意識(shí)的將光標(biāo)停留在這段話上，在這樣的情況下，微交互就會(huì)出現(xiàn)了，則在這段話的周圍就會(huì)出現(xiàn)這句話完整的展示從而被你瀏覽。
2、還有一種常見(jiàn)的就是在你輸入錯(cuò)誤的信息時(shí)系統(tǒng)會(huì)自動(dòng)識(shí)別，并在末尾彈出消息提示，提示你需要從新輸入，更有優(yōu)秀的系統(tǒng)會(huì)從你開(kāi)始輸入時(shí)就跟進(jìn)你的輸入狀態(tài)，時(shí)刻提醒你輸入的結(jié)果是否正確。
其實(shí)這些小的視覺(jué)暗示和微妙的指示就是所謂的為微交互，也有人稱之為“圍觀互動(dòng)”。雖然這些微交互平日不太容易能被用戶所直觀的發(fā)現(xiàn)，但也就是這些微小的交互，才能提升一個(gè)產(chǎn)品的整體用戶體驗(yàn)。所以說(shuō)，無(wú)論他們是多么的微妙，你都需要重視起來(lái)，并嘗試著將一般的設(shè)計(jì)方案和這些結(jié)合起來(lái)使用，并提供一些有效的信息，這樣才能讓你的用戶在瀏覽產(chǎn)品界面和執(zhí)行操作時(shí)有基本的保障。
知道了什么是微交互后，你還需要吃透微交互它到底是怎么工作的，只有這樣才能確保你靈活的使用微交互…
微交互的工作一般要分為四個(gè)基本要素：觸發(fā)、規(guī)則、反饋、循環(huán)。
觸發(fā)簡(jiǎn)單講就是“啟動(dòng)微交互”，例如：點(diǎn)擊按鈕或點(diǎn)擊鼠標(biāo)。這里需要注意的是，觸發(fā)并不單純是人為操作的開(kāi)始，它也同樣包含系統(tǒng)自動(dòng)啟動(dòng)的操作，比如說(shuō)在你設(shè)備上收到一份郵件或短信時(shí)，這時(shí)的你其實(shí)并沒(méi)有任何操作，但系統(tǒng)就會(huì)有一個(gè)微交互啟動(dòng)為你提示，這時(shí)的微交互就是被動(dòng)的。
這些所謂的啟動(dòng)微交互，需要注意的是必須與一組已經(jīng)擬定好的操作規(guī)則一起工作，這些規(guī)則里包含了什么能做，什么不能做的內(nèi)容。
微交互的規(guī)則就是表明用戶在操作后產(chǎn)品該如何按照用戶正確的心智程序進(jìn)行微交互，它決定了觸發(fā)之后會(huì)發(fā)生什么事情。因此，當(dāng)你在拉下界面時(shí)，產(chǎn)品的規(guī)則就應(yīng)該包含下滑的規(guī)則，這同時(shí)也能表明用戶當(dāng)時(shí)的心理是希望看到界面以上的結(jié)果或者下拉刷新看到更多新的結(jié)果。同樣，規(guī)則就是規(guī)則，在你沒(méi)有進(jìn)行操作時(shí)，規(guī)則時(shí)而也在生效，例如：微信里對(duì)方并未添加你為好友，但依然和你說(shuō)了句話，規(guī)則就是生效的，這里的規(guī)則就是阻止了信息的傳入。
顧名思義反饋在現(xiàn)實(shí)中就是你與人對(duì)話交流，對(duì)方饋贈(zèng)你的信息，在產(chǎn)品中這個(gè)環(huán)節(jié)也同樣必不可少，它的存在可以讓用戶明確知道在用戶操作后產(chǎn)品發(fā)生了什么，出現(xiàn)什么結(jié)果的回饋信息。在微交互中，用戶看到的、聽(tīng)到的、操作的、甚至包含感覺(jué)到的，都是可以反饋的。
例如：
1、看到的：希望打車，看到的反饋就是地圖和輸入起始地/目的地的界面，這就符合了用戶心理；
2、聽(tīng)到的：在與人聊天時(shí)，其他人也和你說(shuō)了句話，就聽(tīng)到手機(jī)“蜂”一聲，這樣的反饋就是提醒用戶聽(tīng)到有新消息；
3、操作的：在任何產(chǎn)品中都需要用戶操作，那么然后反饋用戶操作結(jié)果；
4、感覺(jué)到的：這包含界面樣式、產(chǎn)品交互是否符合用戶心理預(yù)期，并通過(guò)預(yù)期實(shí)現(xiàn)操作后得到想要結(jié)果，這里面就包含感覺(jué)到的反饋；
循環(huán)在微交互里屬于次數(shù)的說(shuō)明，在我們手機(jī)設(shè)置鬧鈴時(shí)就經(jīng)?？吹接刑嵝岩淮巍⒁恢芴嵝训日f(shuō)明，這就是循環(huán)的微交互，循環(huán)的微交互基本上定義了交互的某種性質(zhì)，它會(huì)告訴你隨著時(shí)間的推移發(fā)生了幾次，發(fā)生了多少。
例如：在你去銀行自動(dòng)取款機(jī)取錢時(shí)輸入的密碼，如果輸入錯(cuò)誤，就會(huì)提示你還有幾次輸入，這樣的就是循環(huán)的過(guò)程，等于是在原地打轉(zhuǎn)，但當(dāng)你成功進(jìn)入后就會(huì)從這個(gè)環(huán)節(jié)進(jìn)入到下一個(gè)環(huán)節(jié)繼續(xù)循環(huán)。
說(shuō)了這么多，我想你應(yīng)該知道了微交互的工作方式以及流程，那么接下來(lái)要說(shuō)的就是微交互需要在何時(shí)、何地以及如何才能正確使用了。
現(xiàn)如今產(chǎn)品幾乎都帶有滑動(dòng)的交互，之所以滑動(dòng)越來(lái)越多，是因?yàn)榛瑒?dòng)交互可以清楚的展示給用戶行為操作路徑，而點(diǎn)擊確實(shí)短期記憶性的，當(dāng)用戶想要開(kāi)始滑動(dòng)時(shí)，這是用戶操作前的準(zhǔn)備，而當(dāng)用戶正在滑動(dòng)時(shí)，這是操作中的節(jié)點(diǎn)，這時(shí)滑動(dòng)的界面就會(huì)隨著手勢(shì)的方向進(jìn)行移動(dòng)并告訴用戶界面即將去往哪里，下次想要找到該從哪里找的路徑，在操作結(jié)束后，微交互完成，這時(shí)操作后的結(jié)果，這一整套流程下來(lái)，通過(guò)短小的微交互，就能很清晰的告知用戶他在做什么以及他做了什么。
下拉/側(cè)拉菜單就像產(chǎn)品某個(gè)界面內(nèi)的一個(gè)抽屜，它里面包含了當(dāng)前界面賦予的更多選擇，并且還能占據(jù)極小的空間，根據(jù)用戶的心智程序來(lái)講，竟然是抽屜就應(yīng)該拉取，這才符合環(huán)境映射的條件。當(dāng)前在產(chǎn)品設(shè)計(jì)內(nèi)，幾何都包含了下拉/側(cè)拉菜單的微交互，例如淘寶的側(cè)拉菜單、美團(tuán)的下拉菜單都是微交互的展示，在輕松點(diǎn)擊后，界面tab則下拉或側(cè)拉出一個(gè)抽屜，里面就包含了N多個(gè)附加選擇或者篩選器。
對(duì)于產(chǎn)品的不斷迭代與改版，其界面一定會(huì)發(fā)生一些細(xì)微的變化，更有時(shí)功能會(huì)作為轉(zhuǎn)移，那么為了能更好的引導(dǎo)用戶的操作路徑，就需要用到一些引導(dǎo)頁(yè)，我這里說(shuō)的引導(dǎo)頁(yè)并不是啟動(dòng)頁(yè)后的大篇章引導(dǎo)，而是在半黑透明遮罩的同時(shí)，流出需要用戶操作的功能引導(dǎo)，在聚焦了操作功能上，賦予一些微交互，會(huì)加大用戶對(duì)產(chǎn)品的認(rèn)可，包括喜歡新產(chǎn)品。
在用戶正在輸入一個(gè)列表菜單時(shí)，最需要的微交互就是即使反饋，作為產(chǎn)品首先應(yīng)該賦予用戶的就是安全與人性，安全是指產(chǎn)品在用戶心理的懷疑指數(shù)多少，指數(shù)越低安全度越高，而人性就需要操作的了路徑與展示是符合用戶的心理預(yù)期的。安全與人性都可以通過(guò)微交互來(lái)實(shí)現(xiàn)，例如在建設(shè)銀行APP登陸前會(huì)出現(xiàn)安全掃描，在支付寶輸入了支付密碼后出現(xiàn)的結(jié)果符合了人性思維。
有些app會(huì)出現(xiàn)卡片類樣式的界面，并通過(guò)用戶的操作實(shí)現(xiàn)卡片淡化和卡片丟棄等微交互，這樣的微交互則更加具象了用戶的真實(shí)空間感受，通過(guò)與真實(shí)環(huán)境的結(jié)合，將用戶帶入產(chǎn)品，使用戶在使用產(chǎn)品時(shí)會(huì)有現(xiàn)實(shí)版的感覺(jué)。例如：陌陌的附近人卡片丟棄，網(wǎng)易音樂(lè)的音樂(lè)專輯封面淡化。
微交互在產(chǎn)品內(nèi)可以說(shuō)是無(wú)處不在，雖然這些都是一些很小的細(xì)節(jié)，如果只是靜態(tài)展示可能并沒(méi)有太大作用，但通過(guò)產(chǎn)品與用戶的這種互動(dòng)，變相交流，微交互在產(chǎn)品的整體體驗(yàn)上就可以增加巨大的價(jià)值，這也可能是所謂的“宜家效應(yīng)”吧，用戶在自己親手制作或行動(dòng)時(shí)，才能賦予產(chǎn)品更大的價(jià)值感。
好的產(chǎn)品必須擁有這種精心設(shè)計(jì)的標(biāo)志，它不僅包含了對(duì)用戶的心智理解，更多的，是對(duì)用戶的一種尊重與情感抒發(fā)。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
情感是我們生活中不可割舍的元素，UI設(shè)計(jì)師也開(kāi)始在設(shè)計(jì)時(shí)添加「情感化元素」
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
ui設(shè)計(jì)分享達(dá)人 交互設(shè)計(jì)及用戶體驗(yàn)
ui設(shè)計(jì)分享達(dá)人 交互設(shè)計(jì)及用戶體驗(yàn)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com