2021-4-9 ui設(shè)計(jì)分享達(dá)人
我們今天主要來講4個(gè)主題：
1.顏色使用的誤區(qū)-紅色的警示含義
2.功能即按鈕？-兩者的區(qū)別與設(shè)計(jì)思路
3.設(shè)計(jì)中的樣式-情理之中，意料之外
4.產(chǎn)品體驗(yàn)案例收集-寧缺毋濫
5.減少步驟就能提高轉(zhuǎn)化？-少即是多，多即是少
所以，這篇文章還挺有意思的，大伙讀讀看
最近有多個(gè)小伙伴來問問題，老師， 我的產(chǎn)品色是紅色，那我用紅色的按鈕會(huì)不會(huì)給人傳達(dá)很強(qiáng)烈的警告？還有我們的產(chǎn)品色是冷色，如果不用暖色按鈕會(huì)不會(huì)沒有強(qiáng)烈的引導(dǎo)感，我好糾結(jié)??！
大家瞅瞅，他像一個(gè)好人還是壞人？
吶，顏色情緒表達(dá)不在于本身，而是其使用場(chǎng)景。大家都知道顏色都有其兩面性，比如這樣，同樣是黑色系，但是左邊看上去是潮流、硬朗的感覺而右邊則有一些憂郁、沉重的感覺。
所以顏色怎么使用要看用在什么場(chǎng)景，特別是主色的使用，如果本身是紅色或者暖色的主色，那么可以在以下地方使用：
1.希望引起用戶強(qiáng)烈注意的地方（正向/警示）
2.核心轉(zhuǎn)化按鈕（幾個(gè)不同層級(jí)）
3.正在激活的板塊（標(biāo)簽、分段）
但是暖色為主色的產(chǎn)品核心轉(zhuǎn)化按鈕一定不會(huì)是冷色調(diào)
所以不用在意主色是紅色而帶來的正負(fù)向情緒，因?yàn)榈搅瞬煌瑘?chǎng)景它的含義自然會(huì)變化，如果本身主色為冷色調(diào)，那么主色和輔助暖色都可以用在核心轉(zhuǎn)化的按鈕上或者用其主色，我見過冷色為主色但是核心轉(zhuǎn)化按鈕是輔助色的情況，我總結(jié)了一下，大家可以看以下兩個(gè)產(chǎn)品的截圖，如果本身產(chǎn)品的輔助色使用場(chǎng)景和頻率很多，那么在核心轉(zhuǎn)化和重要按鈕上我們要使用品牌主色，但是如果在工具類型的產(chǎn)品中，輔助色的場(chǎng)景和出現(xiàn)頻率很少，那么核心按鈕和一些關(guān)鍵引導(dǎo)信息可以用輔助色。
如果讓你在原有的界面中設(shè)計(jì)某個(gè)功能，你會(huì)如何設(shè)計(jì)？可能我們第一反應(yīng)就是先給他設(shè)計(jì)一個(gè)按鈕。
按鈕很好理解，我們先看看功能在釋義上怎么說：事物或方法所發(fā)揮的有力作用，
阿喲，這一聽，簡(jiǎn)直太抽象了！這就好比讓媒婆描述你的相親對(duì)象長(zhǎng)的怎么樣：小伙子看起來挺老實(shí)的，抽象但又很清晰！大家看下面兩個(gè)例子：
第一個(gè)-刷新，無(wú)論是圖標(biāo)還是文字，我們的預(yù)期是點(diǎn)擊之后就會(huì)實(shí)現(xiàn)在當(dāng)前狀態(tài)/頁(yè)面的數(shù)據(jù)重新獲取
第二個(gè)-支付。支付也是一個(gè)功能，相比較刷新而言是一個(gè)復(fù)雜的系統(tǒng)的功能，但是它無(wú)法通過一個(gè)按鈕來實(shí)現(xiàn)功能的全部作用。
很多同學(xué)在做信息架構(gòu)的時(shí)候就很懵逼，那我要梳理的是按鈕呢還是這樣的功能呢？我好亂啊。當(dāng)然，信息架構(gòu)肯定不是功能的樹狀圖堆砌那么簡(jiǎn)單啦，那個(gè)頂多叫做功能分類，信息架構(gòu)需要包含更多的業(yè)務(wù)邏輯和狀態(tài)邏輯。
所以在這里就有三個(gè)結(jié)論：
有簡(jiǎn)單有復(fù)雜，但他們都需要通過外部的、具象的元素來實(shí)現(xiàn)其作用。
還有滑動(dòng)、長(zhǎng)按、甚至神經(jīng)控制等等，如果大家玩過賽博朋克2077這個(gè)游戲就知道，義體的控制很多來自于大腦和神經(jīng)，那么這些功能肯定不需要點(diǎn)擊這樣的操作行為啦，所以也不存在按鈕。
我們?cè)谧鲈O(shè)計(jì)的同時(shí)要思考，一個(gè)功能可以以什么樣的形式存在，要滿足高效、簡(jiǎn)約、符合心智模型等約束條件，比如做一個(gè)翻頁(yè)，沒有人會(huì)在app界面中設(shè)計(jì)一個(gè)下一頁(yè)的按鈕，抖音切換視頻也不會(huì)出現(xiàn)一個(gè)按鈕用來切換到下一個(gè)視頻，再比如公眾號(hào)文章收起需要通過滑動(dòng)到指定位置，而非設(shè)置一個(gè)按鈕。
以后再讓你設(shè)計(jì)一個(gè)功能就不要直接做出一個(gè)按鈕喔
想把設(shè)計(jì)做的出彩一定要滿足兩個(gè)條件：1.符合常規(guī)認(rèn)知 2.超出常規(guī)認(rèn)知
聽起來有點(diǎn)玄乎啊，第一眼看心知肚明，第二眼看我x，這個(gè)牛逼啊。
那其實(shí)我們?cè)谧鯱I設(shè)計(jì)的同時(shí)也可以多些創(chuàng)意和想法，不要被慣性思維和熟悉的手法所困擾。有時(shí)候你想做一些創(chuàng)意設(shè)計(jì)但總是被“不統(tǒng)一”這樣的理由所駁回，麻煩把這篇文章轉(zhuǎn)發(fā)給駁回你的人，很多有意思的設(shè)計(jì)都被淹沒在這些“風(fēng)險(xiǎn)”提示里了。
比如網(wǎng)易云音樂這里的tab，大家都知道tab的樣式和其交互方式，還有和segment的區(qū)別，那么如果既不想用segment樣式又不想讓用戶進(jìn)行所有滑動(dòng)怎么辦？
沒錯(cuò)，他們?cè)谶@個(gè)地方用了豎線隔開了，重新感受一下，是不是可滑動(dòng)的感覺變?nèi)趿四兀?
還有卡片設(shè)計(jì)中如何添加標(biāo)簽可以更順滑，如何讓一個(gè)按鈕自然的融合到另一個(gè)模塊里。
排版是否可以用異形設(shè)計(jì)，例如個(gè)人中心
我看到很多同學(xué)正在體驗(yàn)各種各樣的產(chǎn)品，然后把一些不錯(cuò)的案例摘錄下來進(jìn)行分析，我覺得這是一件很好的事，我在2年前就鼓勵(lì)大家這么做，因?yàn)檫@個(gè)也是作為一個(gè)UI設(shè)計(jì)師的基本功，除了視覺創(chuàng)意的積累以外也要有交互案例的積累。
但是我發(fā)現(xiàn)很多同學(xué)有點(diǎn)南轅北轍了，我們需要收錄的是一些優(yōu)秀的案例，何謂優(yōu)秀呢，指的就是令人驚喜的功能，而非本該具有的或者無(wú)差別的功能（可以了解一下kano模型，這里不細(xì)說）。另外就是需要有分析的能力，不是什么案例都是優(yōu)秀的，有些可能存在著不好的體驗(yàn)。俞軍在其產(chǎn)品方法論中提到：用戶價(jià)值=新體驗(yàn)-舊體驗(yàn)-切換成本，所以價(jià)值大不大取決于新體驗(yàn)是不是足夠好。
現(xiàn)在看到的就是可能這個(gè)產(chǎn)品把字加粗了，也能寫出一大堆分析這個(gè)加粗的好處，或者一個(gè)卡片設(shè)計(jì)就能寫出非常有親和力，信息更聚焦這樣空洞的詞匯，這對(duì)于我們積累案例沒有任何的幫助。
例如以下的案例，在編輯狀態(tài)返回系統(tǒng)會(huì)提示，從而滑出Actionsheet。如果不做用戶體驗(yàn)會(huì)很差，但是做了，用戶并沒有很驚喜，這就是一個(gè)必備的功能而已，所以對(duì)于一個(gè)案例到底是否優(yōu)秀我們需要盡量客觀的看待。
所以很多交互案例并不是不好，而是還沒有達(dá)到能夠被我們收藏的地步，如果沒有撩到你的心，那我覺得咱們就矜持一些。
那什么是一個(gè)比較好的交互案例呢？好的交互案例一定是更近一步解決問題和深入場(chǎng)景的，比如我們?cè)趫?chǎng)景分析過程中對(duì)于預(yù)判這個(gè)概念的理解，例如行動(dòng)按鈕前置、替換、引導(dǎo)等等，例如像電影app在近電影放映前彈出取票碼一樣，這個(gè)功能如果不做，用戶體驗(yàn)不會(huì)很差，因?yàn)橐廊豢梢哉业竭@個(gè)二維碼，只是用戶想不到居然還可以這樣做，但是一旦研發(fā)出來，用戶會(huì)覺得非常驚喜，這種就是優(yōu)秀的體驗(yàn)設(shè)計(jì)。
再比如有些你可能覺得體驗(yàn)好的案例其實(shí)還沒分析到位，就像高德地圖在到達(dá)目的地時(shí)會(huì)給你很多場(chǎng)景的補(bǔ)全和選擇，你肯定認(rèn)為這很人性化啊，但是我在有一次使用“原路返回”功能的時(shí)候猶豫了。高德確實(shí)在幫助用戶解決問題，但是在這里顯然細(xì)節(jié)有待商榷。
很多用過這個(gè)功能的同學(xué)會(huì)發(fā)現(xiàn)“原路返回”的文案是有歧義的，功能是好功能，正不正緊就看文案了。來，我們解析一下場(chǎng)景：用戶a通過高德地圖導(dǎo)航到地點(diǎn)x，路上非常擁堵，好不容易到達(dá)目的地后需要返回起始地，這時(shí)高德提供了一個(gè)“原路返回”的按鈕，他要不要點(diǎn)？
為什么說這里有歧義呢？
1.如果用戶開始的行駛過程很擁堵，你告訴他原路返回，他的潛意識(shí)會(huì)覺得原路返回是不是也很擁堵。
2.原路返回到底是不是最佳路線，因?yàn)橛袝r(shí)候來回路線的最優(yōu)解并不是同一條馬路的左右兩側(cè)。
所以，人是好人，正不正緊俺們也不知道。總之，這個(gè)文案讓我不得不重新導(dǎo)航。
小結(jié)一下，優(yōu)秀與否需要親自深入的體驗(yàn)，并且結(jié)合上下文、用戶、業(yè)務(wù)多角度的考慮，并非自己沒見過的就是優(yōu)秀的設(shè)計(jì)，咱們寧缺毋濫，提高自己的標(biāo)準(zhǔn)。
很多人一聽到轉(zhuǎn)化率就會(huì)把它和操作步驟關(guān)聯(lián)起來，只要能減少用戶的操作步驟和縮短任務(wù)路徑就可以提升轉(zhuǎn)化率。這個(gè)想法不能說全錯(cuò)，但也不能直接運(yùn)用減法去當(dāng)作提高轉(zhuǎn)化的手段。
不用管這人是誰(shuí)，大家可以理解為能量守恒定律，也就是說在所有內(nèi)容（功能、信息、元素）不變的情況下，步驟越少，單個(gè)步驟所承載的內(nèi)容也就越多。比如你有100個(gè)球，給你5個(gè)盒子，平均每個(gè)盒子放20個(gè)球，但是如果拿走一個(gè)盒子，平均每個(gè)盒子就要放25個(gè)。
表面上盒子少了，但是每個(gè)盒子多出了5個(gè)球，這就意味著原來簡(jiǎn)潔的界面包含了更多的信息內(nèi)容需要用戶去理解、操作、判斷。那我們可以說減少步驟就是提高轉(zhuǎn)化率嗎？顯然不行。
比如我們看到馬蜂窩和12306在購(gòu)買車票流程中的表現(xiàn)：
馬蜂窩
1.輸入起始地目的地
2.選擇出發(fā)時(shí)間
3.查看車次列表并選擇
4.查看車次詳情
5.選擇座位類型、添加乘客信息、選擇座位
6.確認(rèn)訂單
7.支付
12306
1.輸入起始地目的地
2.選擇出發(fā)時(shí)間
3.查看車次列表并選擇
4.查看車次詳情、選擇座位類型、添加乘客信息、選擇座位
5.確認(rèn)訂單
6.支付
大家可以看到馬蜂窩比12306多了一個(gè)界面，他們把查看車次詳情單獨(dú)用一個(gè)界面設(shè)計(jì)了，而12306則是座位類型、詳情、乘客信息、座位選擇都放在了一個(gè)界面，表面上看好像步驟確實(shí)少了，但我們能看到像第三方的購(gòu)票軟件還有其他購(gòu)票的選項(xiàng)，例如極速訂座、車票+酒店等，所以在這個(gè)場(chǎng)景中需要展開展示給用戶，那么如果把這些都放在12306的確認(rèn)訂單界面就會(huì)非常擁擠，而且選中狀態(tài)也很不直觀。所以最好的解決方法就是拆成兩步。
再來看個(gè)例子，在某個(gè)產(chǎn)品的1級(jí)界面中，有一個(gè)添加訓(xùn)練計(jì)劃的功能。左邊是在1級(jí)界面中露出直接添加的按鈕，并且添加成功后在1級(jí)界面直接展示。右側(cè)則是進(jìn)入二級(jí)界面進(jìn)行添加。在步驟上來說顯然左側(cè)案例的步驟更短，那我們可以說左側(cè)的用戶體驗(yàn)、任務(wù)效率就更高嗎？
對(duì)嗎？大家可以思考一下。
顯然不能直接說正確與否，因?yàn)槲覀內(nèi)鄙僭u(píng)判的標(biāo)準(zhǔn)和案例的背景對(duì)吧。首先左側(cè)案例在添加任務(wù)流程中確實(shí)占優(yōu)，但是對(duì)于需要頻繁增刪改查的用戶而言就很不方便了，而且一直添加就會(huì)使首頁(yè)下方內(nèi)容推到很底部大大降低了曝光。而右側(cè)的案例則更適合用戶進(jìn)行批量操作。
所以路徑的長(zhǎng)短并不能直接表示轉(zhuǎn)化率的高低，那么有哪些情況可以縮短路徑達(dá)到提高任務(wù)完成效率的目標(biāo)呢？
1.減少步驟后不影響用戶對(duì)界面和內(nèi)容的理解
2.減少步驟后內(nèi)容信息依然符合場(chǎng)景，不沖突
3.需要實(shí)時(shí)檢查任務(wù)結(jié)果
4.有足夠的版面可以進(jìn)行內(nèi)容合并
5.合并后對(duì)任務(wù)目標(biāo)不會(huì)造成歧義
比如下面這個(gè)案例，一個(gè)書籍分類搜索原本的2個(gè)步驟是可以合并的，因?yàn)樵谠瓉淼陌姹局?，用戶如果想切換更高級(jí)別的分類需要退出再選擇，而一個(gè)界面其實(shí)就可以實(shí)現(xiàn)3級(jí)聯(lián)動(dòng)的效果，當(dāng)然僅限于這個(gè)案例，根據(jù)業(yè)務(wù)不同我們需要對(duì)這些多層級(jí)、多類目的分類做更多的考量。
再來看一個(gè)案例，下面是一個(gè)預(yù)定籃球場(chǎng)地的流程，在這個(gè)流程中有幾個(gè)關(guān)鍵的節(jié)點(diǎn)：場(chǎng)地類型、日期和時(shí)間，因?yàn)榛@球場(chǎng)地和老板需求的特殊性，所以我們不橫向去比較，我們可以來看看下面這個(gè)小程序的流程，預(yù)定步驟一共5步
1.時(shí)間和場(chǎng)地的選擇
2.查看場(chǎng)地詳情和說明
3.選擇具體時(shí)間
4.確認(rèn)訂單詳情
5.支付
我們先不討論里面信息字段是否合理（最后確認(rèn)訂單還要填寫性別和名字是什么鬼，打個(gè)球還要查家底嗎），我們先來看這5個(gè)步驟是否可以簡(jiǎn)化。
一定是可以的，首先，日期和時(shí)間是屬于同一緯度同一場(chǎng)景的信息，我在幾月幾號(hào)幾點(diǎn)預(yù)約一個(gè)場(chǎng)地，這和看電影就完全不同了，每個(gè)電影院排期不同所以不能先把日期和時(shí)間都選了，但這里是可以一起選擇完成的。那么第三個(gè)步驟完全沒有必要，直接和第一個(gè)界面結(jié)合即可。
另外，不要被先入為主的樣式給蒙蔽了，場(chǎng)地一定要做成列表嗎？除非特殊場(chǎng)地，每一個(gè)半場(chǎng)其實(shí)都是一樣的，可能在光線和設(shè)施上有些區(qū)別，但是對(duì)于經(jīng)常打球和第一次預(yù)約的用戶來說其實(shí)沒有實(shí)質(zhì)的區(qū)別，所以這里可以用宮格形式替代。
然后查看詳情和說明個(gè)人覺得也比較多余，經(jīng)常預(yù)約打球的用戶已經(jīng)非常熟悉場(chǎng)地了，對(duì)于新用戶來說也只是看一下場(chǎng)地的環(huán)境，所以這個(gè)頁(yè)面本身內(nèi)容就不多，所以可以直接和確認(rèn)訂單詳情結(jié)合，將確認(rèn)訂單頁(yè)的內(nèi)容做減法。這樣是不是整個(gè)流程減少了兩步，大大的提升了任務(wù)完成的效率呢？
每個(gè)人都有自己的慣性思維和刻板印象，有時(shí)候能幫助我們更高效的完成任務(wù)，但有時(shí)候這些潛意識(shí)的反應(yīng)也會(huì)讓我們深陷泥潭而不自知。只有當(dāng)我們深入剖析一個(gè)問題時(shí)，才能發(fā)現(xiàn)其本質(zhì)，適當(dāng)讓自己保持批判性思維是有幫助的。
文章來源：站酷 作者：應(yīng)駿
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com