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