創(chuàng)建美觀、可用和高效的UI界面需要花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)細(xì)節(jié)的打磨，本文從視覺和情感化設(shè)計(jì)兩個(gè)方面來說說如何提升UI設(shè)計(jì)的高級(jí)感。
在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計(jì)出來的產(chǎn)品。而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒有氣質(zhì)和品牌感。一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。本節(jié)總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。
1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)
在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營(yíng)造對(duì)比。單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來營(yíng)造更好的對(duì)比效果。
每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）
次要內(nèi)容使用灰色（比如商品介紹）
輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）
類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：
大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）
對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）
▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400
應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識(shí)別。
1.2 統(tǒng)一色調(diào)
選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡。設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。
1.3 干凈的陰影
陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營(yíng)造的陰影效果。
這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。
陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。
1.4 個(gè)性的圖標(biāo)設(shè)計(jì)
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。
標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了。要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本。一般在外賣美食類應(yīng)用中比較常見。
1.5 Tab的設(shè)計(jì)感
Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范。現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。
在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長(zhǎng)條來區(qū)分兩者的狀態(tài)。因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來源。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。
1.6 無框設(shè)計(jì) 去繁從簡(jiǎn)
在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法，使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。
使用不同的背景色來區(qū)分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分。所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?
增加額外的留白
創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了。通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。
1.7 統(tǒng)一設(shè)計(jì)元素
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀。這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。
1.8 符合產(chǎn)品氣質(zhì)的字體
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求。但會(huì)出現(xiàn)一個(gè)問題就是，系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢(shì)上就變?nèi)趿撕芏唷?
1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一
大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
1.10 圖片中尋找色彩
App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式，為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。
1.11 提高圖片質(zhì)量
圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想。而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會(huì)變得美觀、整潔。
1.12 卡片式設(shè)計(jì)
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率。同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。
心理學(xué)認(rèn)為，情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時(shí)，使他產(chǎn)生情感的變化，那么產(chǎn)品便不再冷冰冰，他透過眼前的東西，看到的是設(shè)計(jì)師為了他的使用體驗(yàn)，對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨，人們會(huì)產(chǎn)生愉快、喜愛和幸福的情感。情感化設(shè)計(jì)并不是轟轟烈烈，有時(shí)候僅僅一句文案、一幅插圖、一個(gè)動(dòng)畫就能打動(dòng)人心，使用戶獲得愉悅的使用體驗(yàn)。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺層面，這些簡(jiǎn)單而美好的設(shè)計(jì)細(xì)節(jié)充滿了積極情緒，它是滿足產(chǎn)品的功能性和易用性之后，追求更高層次的目標(biāo)。
2.1 提示性文字
語言是情感化設(shè)計(jì)最直接的利器，擬人化的對(duì)白相比冰冷的話語更能獲得用戶的好感，賦予產(chǎn)品的新的生命力。例如App那些push推送通知，因?yàn)橛脩裘刻焓盏降腜USH實(shí)在是太多了，早已心如止水！這個(gè)時(shí)候，你就需要一條成本低、效率高的PUSH文案，去撩動(dòng)用戶主子們的心。將原本對(duì)用戶的打擾變成一種逗趣，讓人看到會(huì)心一笑。
2.2 下拉刷新
下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作，常見的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式，這種設(shè)計(jì)簡(jiǎn)單、直觀，但毫無設(shè)計(jì)感，不能引發(fā)用戶任何的情緒。
下拉刷新是一種臨時(shí)狀態(tài)，豐富它的設(shè)計(jì)細(xì)節(jié)不會(huì)造成與產(chǎn)品界面的格格不入，相反，一個(gè)富有設(shè)計(jì)感的下拉刷新設(shè)計(jì)能讓產(chǎn)品獲得用戶的好感。例如uc頭條在下拉刷新時(shí)會(huì)蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內(nèi)容，小鹿形象延續(xù)了品牌logo。作為資訊類產(chǎn)品，內(nèi)容更新速度至關(guān)重要，奔跑的小鹿正好隱喻了這一點(diǎn)。用戶也在這種快樂的情緒中對(duì)產(chǎn)品產(chǎn)生好感，瞬間就讓下拉刷新變得生動(dòng)有趣。
2.3 頭像設(shè)計(jì)
個(gè)人中心頁(yè)與用戶信息密切相關(guān)，用戶的虛擬形象在這里得以展現(xiàn)，常見的設(shè)計(jì)是一個(gè)用戶頭像加登陸文字的形式，這種默認(rèn)的頭像設(shè)計(jì)無法得到用戶的認(rèn)同感。
現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像，給用戶更多的選擇。賦予產(chǎn)品一些人格魅力，可以讓產(chǎn)品富有生命力，消除人機(jī)界面的冰冷交互，幫助用戶和產(chǎn)品建立友好的聯(lián)系。例如美團(tuán)外賣和躺平，它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶的屬性，讓用戶產(chǎn)生一種身份的認(rèn)同感。
2.4 缺省頁(yè)化解負(fù)面情緒
通常狀態(tài)是，當(dāng)前頁(yè)面沒有內(nèi)容或無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面。常見的設(shè)計(jì)是圖標(biāo)加提示文字的形式，這種簡(jiǎn)陋的設(shè)計(jì)會(huì)給用戶心理造成很大的落差，陷入負(fù)面情緒中。情感化設(shè)計(jì)在此時(shí)就可發(fā)揮巨大的作用，它通過設(shè)計(jì)手段來減輕用戶在看到一個(gè)毫無內(nèi)容的界面時(shí)所產(chǎn)生的挫敗感。 設(shè)計(jì)師可發(fā)揮的空間很大，根據(jù)產(chǎn)品屬性和品牌延展圖形，結(jié)合動(dòng)效或插畫等情感化設(shè)計(jì)，可以很好的豐富頁(yè)面內(nèi)容。例如躺平的空白頁(yè)呈現(xiàn)出一種賤萌的場(chǎng)景，讓用戶會(huì)心一笑，使產(chǎn)品充滿了趣味性。
2.5 標(biāo)簽欄微動(dòng)效
情感化設(shè)計(jì)變得越來越豐富，圖標(biāo)設(shè)計(jì)上升至可以展示動(dòng)畫效果。通過動(dòng)效的使用，標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁(yè)面時(shí)，不再覺得單調(diào)。精心設(shè)計(jì)的動(dòng)態(tài)效果，能夠緩解用戶等待時(shí)焦躁的心情，從心理上縮短用戶等待時(shí)長(zhǎng)，讓品牌更加深入人心。
2.6 模擬用戶行為
如果一個(gè)產(chǎn)品可以模擬用戶的行為，將用戶代入真實(shí)的情境中，用戶就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會(huì)根據(jù)時(shí)間場(chǎng)景和季節(jié)變化，播放不同的背景音樂來營(yíng)造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時(shí)刻感受到身臨其境的情境。
情感化設(shè)計(jì)可以拉近用戶與產(chǎn)品之間的距離，在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷，為人們帶去情感上的愉悅和感動(dòng)。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片，打開微信對(duì)話框時(shí)就會(huì)自動(dòng)顯示這張圖片，提前預(yù)知了你發(fā)截圖的需求。
再例如很多觀眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣，因?yàn)楹芏鄷r(shí)候坐在影院等彩蛋卻等來沒有彩蛋的結(jié)果只能白白浪費(fèi)了時(shí)間。在「淘票票」上購(gòu)買電影票時(shí)，你會(huì)發(fā)現(xiàn)影片詳情頁(yè)會(huì)有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會(huì)出現(xiàn)在影片的什么位置。有了這個(gè)提示信息，就不必再為了不確定的彩蛋期待浪費(fèi)時(shí)間啦。
2.7 有趣的細(xì)節(jié)設(shè)計(jì)
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒。 在UI設(shè)計(jì)中，有些有趣的設(shè)計(jì)是隱形的，需要用戶自己去發(fā)現(xiàn)，當(dāng)用戶找到這顆彩蛋時(shí)，就會(huì)獲得一份喜悅和樂趣，增強(qiáng)用戶對(duì)產(chǎn)品的探知欲。例如在電腦端打開B站的鬼畜區(qū)長(zhǎng)按這個(gè)返回圖標(biāo)10秒左右，你會(huì)打開鬼畜區(qū)的新世界(⊙o⊙)（友情提示：記得戴上耳機(jī)或調(diào)小音量）其實(shí)長(zhǎng)按「返回」10秒后網(wǎng)頁(yè)下方會(huì)出現(xiàn)一條黑框提示「嘗試輸入字母，發(fā)現(xiàn)鬼畜秘密」。按照提示乖乖輸入字母就會(huì)出現(xiàn)鬼畜明星劃過你的屏幕！
有些有趣的設(shè)計(jì)又是顯性的，目的是讓用戶與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒。例如成為優(yōu)酷視頻會(huì)員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發(fā)彈幕時(shí)使用劇集相關(guān)角色的頭像。帶角色扮演頭像的彈幕，讓發(fā)言更有劇集代入感。這個(gè)彩蛋的設(shè)置一方面強(qiáng)化了會(huì)員身份的尊貴感與特權(quán)性，一方面也豐富了彈幕區(qū)的多樣化，可謂一舉兩得了。
總的來說：UI設(shè)計(jì)的“高級(jí)感”意味著在視覺層面要從細(xì)微之處著手，創(chuàng)造出精致富有設(shè)計(jì)感的畫面；另一方面要從情感化設(shè)計(jì)出發(fā)，使用戶與產(chǎn)品產(chǎn)生情感上的共鳴，獲得更高層次的使用體驗(yàn)。
作者：印跡_ 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
隨著互聯(lián)網(wǎng)的發(fā)展與深化，很多服務(wù)早已從線上滲透到了線下，騰訊CDC在服務(wù)設(shè)計(jì)課題上都做了哪些探索？
從互聯(lián)網(wǎng)走向傳統(tǒng)行業(yè)，互聯(lián)網(wǎng)金融與保險(xiǎn)的線上和線下的探索，是相對(duì)來說比較典型的嘗試，讓我們感受到從互聯(lián)網(wǎng)到傳統(tǒng)行業(yè)的融合，這個(gè)過程也可用過往積累的互聯(lián)網(wǎng)理念完成。只不過從做線上線下相結(jié)合，到向其他領(lǐng)域擴(kuò)展，工作環(huán)節(jié)和內(nèi)容越來越復(fù)雜。
我們有十幾年互聯(lián)網(wǎng)用戶體驗(yàn)設(shè)計(jì)的經(jīng)驗(yàn)積累，并以此做出了工具和平臺(tái)，比如一直在對(duì)外推廣的騰訊設(shè)計(jì)云服務(wù)——騰訊設(shè)計(jì)體系TDesign、內(nèi)部設(shè)計(jì)協(xié)同和設(shè)計(jì)管理工具 CoDesign和ProWork。用戶研究也是我們多年專注的領(lǐng)域，2022年騰訊調(diào)研云將正式對(duì)外發(fā)布，當(dāng)前已上線的工具是騰訊問卷、騰訊兔小巢、卷叔填填圈已經(jīng)在互聯(lián)網(wǎng)及傳統(tǒng)行業(yè)中被廣泛應(yīng)用。
騰訊在產(chǎn)業(yè)互聯(lián)網(wǎng)領(lǐng)域始終在做著前沿領(lǐng)先的服務(wù)。國(guó)家政務(wù)項(xiàng)目“數(shù)字廣東”的集成民生服務(wù)小程序——粵省事，“一站式更省事”的指尖辦事模式已成為全國(guó)在線政務(wù)服務(wù)的標(biāo)桿工程。
互聯(lián)網(wǎng)公益方面，在環(huán)保領(lǐng)域的動(dòng)物保護(hù)上，使用騰訊AI技術(shù)結(jié)合服務(wù)設(shè)計(jì)，做了“雪豹保護(hù)”項(xiàng)目，為動(dòng)物保護(hù)專家、守護(hù)員，提供一套線上動(dòng)物識(shí)別的服務(wù)，幫助他們?cè)谄D難的戶外環(huán)境中提高工作效率。
我們通過技術(shù)工具平臺(tái)，聯(lián)動(dòng)社會(huì)公益機(jī)構(gòu)與志愿者解決問題，正在研發(fā)的長(zhǎng)城保護(hù)的服務(wù)設(shè)計(jì)項(xiàng)目，引入專家復(fù)原長(zhǎng)城，希望公眾能了解更多長(zhǎng)城的知識(shí)，是繼“云游敦煌”項(xiàng)目之后又一個(gè)廣受人們關(guān)注的世界文化遺產(chǎn)保護(hù)工作。
近兩年我們也在公共服務(wù)領(lǐng)域有很大的投入，比如社會(huì)應(yīng)急服務(wù)升級(jí)，包括急救與突發(fā)社會(huì)事件的響應(yīng)該如何更好去應(yīng)對(duì)？2021年下半年開始又在全面關(guān)愛大眾人群，包括兒童與老年人心理健康的社會(huì)服務(wù)上。比如，通過網(wǎng)絡(luò)實(shí)現(xiàn)心理健康方面知識(shí)的傳播、讓社會(huì)機(jī)構(gòu)與志愿者能及時(shí)對(duì)接上需求，形成心理專家與社會(huì)機(jī)構(gòu)之間形成服務(wù)閉環(huán)，為社會(huì)建立起民眾身心健康的防線。
從用戶體驗(yàn)到服務(wù)設(shè)計(jì)，它們之間有著怎樣的關(guān)系？
用戶體驗(yàn)的關(guān)注點(diǎn)更多在用戶使用服務(wù)時(shí)的感受如何，而發(fā)展到服務(wù)設(shè)計(jì)層面時(shí)，我們除了關(guān)注用戶體驗(yàn)外，也會(huì)關(guān)注服務(wù)提供者這一側(cè)的需求。
服務(wù)設(shè)計(jì)與用戶體驗(yàn)設(shè)計(jì)的理念和工作方法一致，但服務(wù)設(shè)計(jì)體系更復(fù)雜。做互聯(lián)網(wǎng)產(chǎn)品時(shí)，人機(jī)交互的設(shè)計(jì)流程相對(duì)更容易固化，只要程序的交互設(shè)計(jì)過程沒有大偏差，用戶的使用體驗(yàn)就不會(huì)太差。
服務(wù)設(shè)計(jì)的工作往往同時(shí)涉及線上和線下。線下服務(wù)場(chǎng)景中，不但要考慮多設(shè)備聯(lián)動(dòng)，還有人對(duì)人的一整套服務(wù)流程。比如做金融、做政務(wù)的項(xiàng)目，它們的服務(wù)會(huì)涉及到政策、法律法規(guī)和各種標(biāo)準(zhǔn)，都是我們做服務(wù)設(shè)計(jì)時(shí)的思考點(diǎn)。這些標(biāo)準(zhǔn)制定方，有很多不同的崗位角色為公眾提供多樣化服務(wù)。
與做產(chǎn)品不同在于，產(chǎn)品設(shè)計(jì)往往面向特定的服務(wù)對(duì)象，而政務(wù)類的服務(wù)設(shè)計(jì)，面向的是所有人，每一位公民都享有平等被服務(wù)的待遇，于是復(fù)雜程度是幾何級(jí)數(shù)提升，但其中一脈相承的原則是以人為本。騰訊的經(jīng)營(yíng)理念始終是一切以用戶價(jià)值為歸依，從人機(jī)交互的用戶體驗(yàn)設(shè)計(jì)，到服務(wù)設(shè)計(jì)，以用戶為本的核心前提不變，只是復(fù)雜程度的增加。
粵省事小程序是一個(gè)基于移動(dòng)端的聚合式政務(wù)服務(wù)平臺(tái)。以這個(gè)項(xiàng)目為例，設(shè)計(jì)團(tuán)隊(duì)探討了基于互聯(lián)網(wǎng)的設(shè)計(jì)理念與傳統(tǒng)政務(wù)服務(wù)相結(jié)合的模式，來推進(jìn)產(chǎn)品體系中各模塊的設(shè)計(jì)工作，為整體重塑廣東電子政務(wù)服務(wù)的遠(yuǎn)期目標(biāo)積累了重要經(jīng)驗(yàn)。
過去是群眾在一個(gè)個(gè)政府部門面前排隊(duì)辦事；現(xiàn)在是我坐在這里，一個(gè)個(gè)政府部門在我面前一起辦事。小程序是一個(gè)開放接入平臺(tái)，政府各部門愿意接入哪些移動(dòng)端的業(yè)務(wù)能力，就接入哪些業(yè)務(wù)，是自下而上的設(shè)計(jì)。▼
在解決方案上采取以辦事為中心的信息架構(gòu)。 ▼
我們希望用戶一進(jìn)入粵省事小程序，有一種“這就是我的”那種感覺。他們可以直接打開自己的電子身份證、電子護(hù)照、電子駕照等等，就像打開自己的錢包那樣。小程序采用了以證件為中心的主程序設(shè)計(jì)。 ▼
以我能辦什么事為中心的二級(jí)頁(yè)設(shè)計(jì)。 ▼
設(shè)計(jì)帶來的一個(gè)突出的變化是，從“羅列服務(wù)內(nèi)容讓用戶來找”轉(zhuǎn)變?yōu)椤吧钊肓私庑枨?，把服?wù)打包好送到用戶面前”。在實(shí)際設(shè)計(jì)過程中，我們重點(diǎn)重建了服務(wù)的使用場(chǎng)景。把可以分角色分階段展示的功能拆分開，根據(jù)具體服務(wù)場(chǎng)景更聚焦的去展示內(nèi)容。▼
為了更高效接入100多項(xiàng)服務(wù)，采用了模塊化的設(shè)計(jì)方法。將業(yè)務(wù)整理分類、抽象出最基礎(chǔ)的業(yè)務(wù)模型，得出辦事模型。以下模型可以涵蓋小程序現(xiàn)在接入的70%的辦理業(yè)務(wù)。再針對(duì)單個(gè)模塊進(jìn)行細(xì)化設(shè)計(jì)，讓不同的過程以拼積木的形式組裝完成，從而實(shí)現(xiàn)符合規(guī)范的個(gè)性化接入。▼
對(duì)于騰訊CDC來說，做公益項(xiàng)目與商業(yè)項(xiàng)目間最大區(qū)別在哪里？
自從有設(shè)計(jì)以來，一切就是在以用戶價(jià)值來考量，核心的經(jīng)營(yíng)理念是用戶價(jià)值與商業(yè)價(jià)值之間的博弈。在設(shè)計(jì)決策上，此前更多是在兩者間取得平衡，但近幾年想法有了升級(jí)，在我們看來，僅是用戶價(jià)值與商業(yè)價(jià)值之間的關(guān)系已經(jīng)不夠了，要能站在產(chǎn)業(yè)層面去看用戶和商業(yè)，如何能通過提升產(chǎn)業(yè)環(huán)境，來實(shí)現(xiàn)社會(huì)服務(wù)的提升。
團(tuán)隊(duì)做B端服務(wù)，希望能通過挖掘過往經(jīng)驗(yàn)，做更多社會(huì)創(chuàng)新探索，與整個(gè)社會(huì)大環(huán)境提升有更好的結(jié)合點(diǎn)。這時(shí)用戶的概念就延伸了，用戶不僅指接受服務(wù)的人，也包含了服務(wù)的提供者——產(chǎn)業(yè)涉及到的每一個(gè)環(huán)節(jié)中的每一個(gè)角色，每一個(gè)具體的人。
比如互聯(lián)網(wǎng)應(yīng)用適老化改造項(xiàng)目開始推進(jìn)時(shí)，通過優(yōu)化界面、簡(jiǎn)化程序、增加功能等方式，來適應(yīng)老年人的手機(jī)使用需求，然而用研的同學(xué)發(fā)現(xiàn)，改大字號(hào)，或者是語音交互等，僅僅是讓長(zhǎng)輩用手機(jī)購(gòu)物更方便，解決的是“更好用”，卻依然沒有解決“不會(huì)用”的問題。銀發(fā)青松助手作為線上版本的教程，對(duì)所有參與項(xiàng)目的同學(xué)來說，都是全新又極富挑戰(zhàn)的領(lǐng)域，一邊結(jié)合現(xiàn)有適老化改造經(jīng)驗(yàn)，一邊通過可用性測(cè)試不停地發(fā)現(xiàn)和解決問題，然后把解決方案體現(xiàn)在這個(gè)小程序里。
又比如騰訊首個(gè)雪豹保護(hù)數(shù)字化平臺(tái)，用AI技術(shù)識(shí)別雪豹，優(yōu)化雪豹的數(shù)據(jù)錄入、處理、分析流程，解決一直以來動(dòng)物巡護(hù)員主要靠紅外相機(jī)、傳統(tǒng)表格記錄、人工審核照片等耗時(shí)費(fèi)力的雪豹保護(hù)中等困難。▼
創(chuàng)新是每一個(gè)設(shè)計(jì)領(lǐng)域中的關(guān)鍵點(diǎn)和難點(diǎn)，服務(wù)設(shè)計(jì)中的創(chuàng)新點(diǎn)和基礎(chǔ)是什么？
創(chuàng)新的基礎(chǔ)是挖掘社會(huì)價(jià)值。以團(tuán)隊(duì)提供的設(shè)計(jì)云服務(wù)舉例，如果我們看重商業(yè)價(jià)值，就會(huì)從產(chǎn)品設(shè)計(jì)與產(chǎn)品運(yùn)營(yíng)角度出發(fā)，看它能夠覆蓋多少設(shè)計(jì)師、多少B端企業(yè)購(gòu)買我們的服務(wù)、營(yíng)業(yè)額等等，這種邏輯是商業(yè)價(jià)值所尋求的。但是當(dāng)我們?nèi)で笊鐣?huì)價(jià)值時(shí)，這些商業(yè)邏輯中的問題，至少就不會(huì)放在首要問題的列表中了。
我2003年入職，是騰訊的第一位專職交互設(shè)計(jì)師，當(dāng)時(shí)對(duì)設(shè)計(jì)的認(rèn)知很淺，幸運(yùn)地進(jìn)入互聯(lián)網(wǎng)交互設(shè)計(jì)領(lǐng)域，入行不久就意識(shí)到這是一個(gè)有前景的領(lǐng)域，然而成長(zhǎng)過程中有很多迷茫困惑與困難，我認(rèn)為僅憑個(gè)人力量很難做好工作，每個(gè)人都生活、工作在一個(gè)個(gè)環(huán)境中，需要小環(huán)境、大環(huán)境與自身的配合；只有當(dāng)環(huán)境變好時(shí)，自己才會(huì)更好。我們本著這樣的思考和理念，首先努力打造公司、專業(yè)領(lǐng)域的小環(huán)境，同時(shí)也不斷影響行業(yè)、產(chǎn)業(yè)大環(huán)境，每一位設(shè)計(jì)師才會(huì)有更好發(fā)展。
作為交互設(shè)計(jì)師，過去聽得最多的詞是“人機(jī)交互”，但我常對(duì)別人說，交互的最高境界是人與人的交互，因?yàn)闄C(jī)器是人設(shè)計(jì)的，機(jī)器的另一端也是人。而服務(wù)設(shè)計(jì)就是“人人交互”。
在做互聯(lián)網(wǎng)金融行業(yè)的服務(wù)設(shè)計(jì)的時(shí)候，我們陸續(xù)與許多金融界同行交流，他們對(duì)用戶體驗(yàn)設(shè)計(jì)的方法與工具抱有極大興趣，希望我們能對(duì)外提供服務(wù)，我們也認(rèn)為更多人變好才是真的好。這是社會(huì)價(jià)值的體現(xiàn)，是我們做設(shè)計(jì)云服務(wù)的出發(fā)點(diǎn)與創(chuàng)新點(diǎn)。
除了做工具外，我們會(huì)不斷輸出理念，做一些行業(yè)觀察，比如每年發(fā)布的互聯(lián)網(wǎng)新興設(shè)計(jì)人才白皮書。
團(tuán)隊(duì)也一直沉淀工作經(jīng)驗(yàn)，陸續(xù)出版成書，希望能從產(chǎn)業(yè)一線的需求與視角出發(fā)，去幫助想要從事這個(gè)領(lǐng)域的其他團(tuán)隊(duì)和個(gè)人。
在人才培育上，都在講產(chǎn)學(xué)研一體，我們?cè)谂c高校在招聘、實(shí)習(xí)生培養(yǎng)上的合作基礎(chǔ)上，2021年CDC與南方科技大學(xué)、深圳大學(xué)等高校進(jìn)行超越以往的深度合作。過往與高校的合作模式是課題式，只讓老師帶學(xué)生做課題，以此幫他們感受來自產(chǎn)業(yè)一線需求的探索，從而了解真實(shí)的用戶、團(tuán)隊(duì)的工作方法，我們也會(huì)將學(xué)生的創(chuàng)意轉(zhuǎn)化成產(chǎn)品、服務(wù)和工具。在這種合作模式下，學(xué)生們的基礎(chǔ)還是由學(xué)校自己去培養(yǎng)，課題只是實(shí)踐。
2021年我們與深圳大學(xué)開展的是微專業(yè)合作，與學(xué)校一起跨專業(yè)、跨領(lǐng)域招生，將團(tuán)隊(duì)的工作方法和理念，形成一套1-2年的課程，從更基礎(chǔ)的層面去告訴學(xué)生們學(xué)什么？怎么學(xué)？學(xué)成之后怎么用？同時(shí)我們也為同學(xué)們提供職場(chǎng)實(shí)習(xí)機(jī)會(huì)，讓他們更早了解實(shí)際工作與產(chǎn)業(yè)的需求，他們才會(huì)更明白自己在學(xué)校里的學(xué)習(xí)目標(biāo)。
與南方科技大學(xué)的合作是探索共建無障礙實(shí)驗(yàn)室。我們提供更多真實(shí)用戶的樣本、數(shù)據(jù)和訴求，讓學(xué)生們了解用戶，去探索可能性，也會(huì)將這些創(chuàng)新點(diǎn)回歸到產(chǎn)品上，以驗(yàn)證這些研究是否卓有成效。
讓產(chǎn)學(xué)研有更好結(jié)合，是CDC尋求社會(huì)價(jià)值的新方式。希望能從學(xué)生抓起，從學(xué)術(shù)與研究的結(jié)合處做起，讓社會(huì)里更多相關(guān)領(lǐng)域的人一起探索和進(jìn)步。騰訊CDC只是其中的一環(huán)，通過服務(wù)設(shè)計(jì)提供更好的觸點(diǎn)和界面、更好的工具與環(huán)境，將產(chǎn)業(yè)中的每一個(gè)角色卷入進(jìn)來，大家在其中都能迸發(fā)出新想法。環(huán)境培育起來后，慢慢將會(huì)誕生新產(chǎn)品、新物種、新理念，這與我們過往做任何一個(gè)界面設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)都不同。
云游敦煌，是由敦煌研究院、人民日?qǐng)?bào)新媒體、騰訊聯(lián)合推出的，首個(gè)擁有豐富的敦煌石窟藝術(shù)欣賞體驗(yàn)的微信、QQ小程序。▼
在后疫情時(shí)代，人們的需求，以及你們?cè)谧鲈O(shè)計(jì)項(xiàng)目時(shí)思考的方面有變化嗎？
疫情之后大家都在面臨很多變化，不論工作、生活還是大環(huán)境。我們會(huì)思考如何才能更好去體會(huì)人們新的難處，幫助他們解決問題。
2015年9月，騰訊公益慈善基金會(huì)發(fā)起人兼榮譽(yù)理事長(zhǎng)陳一丹先生，在第一屆騰訊99公益日上說：“社會(huì)的痛點(diǎn)，就是公益的起點(diǎn)?！睂?duì)于我們?cè)O(shè)計(jì)師來說也是一樣的，思考出發(fā)點(diǎn)不再只是從用戶體驗(yàn)的角度，不僅僅去做錦上添花的事，而是思考真正的痛點(diǎn)在哪里，落到以人為本的根源去做事。
“微光行動(dòng)“是騰訊聯(lián)合深圳網(wǎng)警、專業(yè)心理輔導(dǎo)團(tuán)隊(duì)共同發(fā)起的網(wǎng)絡(luò)抑郁癥群體的關(guān)愛活動(dòng)，期望幫助大眾更好了解抑郁、正視情緒，并通過微光小程序等渠道，為用戶提供線上情緒出口，進(jìn)行心理健康的正向引導(dǎo)。
抑郁癥已成為人類第二大殺手。國(guó)家衛(wèi)健委去年發(fā)布的《探索抑郁癥防治特色服務(wù)工作方案》中，將老年人、青少年、孕產(chǎn)婦、高壓職業(yè)從業(yè)者都列入抑郁癥高發(fā)的重點(diǎn)人群。大眾對(duì)抑郁癥等心理疾病科學(xué)認(rèn)知不夠，甚至存在偏見和病人的病恥感，加上專業(yè)醫(yī)學(xué)、心理學(xué)領(lǐng)域?qū)I(yè)門檻高，讓抑郁癥救助難度增加。在這樣背景下，微光行動(dòng)小程序，我們?cè)诋a(chǎn)品上增設(shè)專業(yè)科普資訊、暖心電臺(tái)、書單、音樂等治愈系功能和內(nèi)容，并計(jì)劃去連接用戶與專業(yè)心理咨詢師，針對(duì)線上線下兩種就診模式提供了相應(yīng)心理援助和醫(yī)療幫助。
完成一個(gè)典型的服務(wù)設(shè)計(jì)項(xiàng)目，通常需要哪些人員參與？
我們理念一直都是除了設(shè)計(jì)師、研究員外，盡可能多卷入不同角色的人員參與項(xiàng)目。
過往大家對(duì)CDC的認(rèn)知是設(shè)計(jì)團(tuán)隊(duì)，但現(xiàn)在我們已不再只是設(shè)計(jì)團(tuán)隊(duì)，設(shè)計(jì)師也不是團(tuán)隊(duì)中人數(shù)最多的職能?，F(xiàn)在團(tuán)隊(duì)人員包含研發(fā)、產(chǎn)品經(jīng)理和產(chǎn)品設(shè)計(jì)的全流程崗位，還包括產(chǎn)品運(yùn)營(yíng)與市場(chǎng)營(yíng)銷。
除了團(tuán)隊(duì)成員外，項(xiàng)目中還會(huì)卷入不同的外部角色，比如將客戶、社會(huì)上的服務(wù)對(duì)象，卷進(jìn)項(xiàng)目中。為此，我們做了用研工具卷叔填填圈，適老化的項(xiàng)目中，為了更好更快完成改造工作，我們就在填填圈中沉淀老年人樣本，讓大家能更容易觸達(dá)到服務(wù)對(duì)象。
卷叔填填圈小程序 ▼
在2016年之前你們就開發(fā)出了對(duì)設(shè)計(jì)師及項(xiàng)目管理效能幫助很大的平臺(tái)工具設(shè)計(jì)云，這幾年團(tuán)隊(duì)有沒有新的挑戰(zhàn)？
設(shè)計(jì)行業(yè)對(duì)效率的追求永無止境，然而挑戰(zhàn)一直都存在。一個(gè)核心問題是如何才能不再做重復(fù)性工作？除了項(xiàng)目管理平臺(tái)以外，我們還做了提效工具，盡可能不去浪費(fèi)設(shè)計(jì)師的時(shí)間。它們集中解決兩個(gè)方面的問題——生產(chǎn)怎么做才能更快？有更多人協(xié)作項(xiàng)目，不同職能角色間工作流程如何縮短？
ProWork 是 CDC 在騰訊內(nèi)部沉淀多年的便捷高效的協(xié)同平臺(tái)，為團(tuán)隊(duì)中的不同角色提供支持。團(tuán)隊(duì)成員可以通過日歷、清單來規(guī)劃每?的工作，同時(shí)管理者也可以通過統(tǒng)計(jì)報(bào)表隨時(shí)掌握?qǐng)F(tuán)隊(duì)狀況。通過簡(jiǎn)單靈活、多角色統(tǒng)籌、任務(wù)量化統(tǒng)計(jì)的產(chǎn)品特性，實(shí)現(xiàn)日程管理、項(xiàng)目追蹤、人力統(tǒng)籌。▼
另一個(gè)方面的挑戰(zhàn)是對(duì)新方向的探索和嘗試。在這個(gè)層面上不是工具做好了就能解決的，為什么說我們的很多項(xiàng)目叫社會(huì)創(chuàng)新？因?yàn)槲覀儽厝粫?huì)嘗試未曾接觸和了解過的服務(wù)。它們可能成功也可能失敗，如何才能縮短從失敗到成功之間的距離？如何降低試錯(cuò)成本？這些都是CDC面對(duì)的新挑戰(zhàn)。
工具智能化以及“設(shè)計(jì)師如何才能不被AI替代”是近年來被廣泛討論的話題，基于數(shù)據(jù)的設(shè)計(jì)、智能化的邊界在哪里？設(shè)計(jì)師的核心價(jià)值隨著時(shí)間是否有些改變？
照相機(jī)出現(xiàn)后畫家還有生存空間嗎？我覺得大家應(yīng)該開心擁抱AI，因?yàn)锳I永遠(yuǎn)不可能替代人類，但可以幫我們節(jié)省很多工作時(shí)間。
回顧工業(yè)設(shè)計(jì)發(fā)展史，從手工到工業(yè)時(shí)代，再到大生產(chǎn)時(shí)代，一直分兩派，一派做工具，一派做設(shè)計(jì)，有人做組件、模塊和結(jié)構(gòu)，有人使用它們?nèi)プ霎a(chǎn)品。只有組件和工具在持續(xù)創(chuàng)新的基礎(chǔ)上創(chuàng)新才能更快。
用戶體驗(yàn)設(shè)計(jì)如今正踏上這條自動(dòng)化道路，我們?nèi)绾尾拍芨米呦氯ィ慷颊f現(xiàn)在是工業(yè)4.0時(shí)代，大家已經(jīng)在用數(shù)字工具做設(shè)計(jì)了，但和許多工程領(lǐng)域相比，我們依然落后，還有很多設(shè)計(jì)師在做重復(fù)性的投入，其實(shí)一些設(shè)計(jì)工作是可以用智能化工具去“拼裝組件”的。這就像手工業(yè)時(shí)代，每一個(gè)組件都靠手工打磨，而大工業(yè)時(shí)代只需到市場(chǎng)上采購(gòu)零部件，產(chǎn)品就可以組裝出來。
AI幫助我們做設(shè)計(jì)，而不是替代我們做設(shè)計(jì)。設(shè)計(jì)師的關(guān)注點(diǎn)應(yīng)是如何更好利用工具提升設(shè)計(jì)產(chǎn)出。自動(dòng)化生產(chǎn)能讓設(shè)計(jì)師更好地釋放勞動(dòng)力，才能孕育出更多可能性。讓重復(fù)勞動(dòng)交給機(jī)器，當(dāng)你的時(shí)間和雙手被解放之后，頭腦更活躍，創(chuàng)新也就更活躍了。
大設(shè)計(jì)獎(jiǎng)的主旨是“發(fā)現(xiàn)與提升設(shè)計(jì)的價(jià)值”，設(shè)計(jì)團(tuán)隊(duì)從哪些方面建設(shè)和提升，才可能成為公司的戰(zhàn)略核心組成部分？
很多設(shè)計(jì)團(tuán)隊(duì)往往是“一只手”，需求方要什么，設(shè)計(jì)師就呈現(xiàn)出來，但設(shè)計(jì)還可以成為公司的大腦。進(jìn)一步提升設(shè)計(jì)的價(jià)值，意味著設(shè)計(jì)需要從技藝上升到設(shè)計(jì)思維，不僅探討如何使用工具、做好圖形圖像、界面和各種效果圖等工作，還要思考如何讓設(shè)計(jì)思維成為促進(jìn)經(jīng)營(yíng)的工具，去挖掘商業(yè)模式、社會(huì)創(chuàng)新，探索新型社會(huì)服務(wù)的可能性。
作者：大設(shè)計(jì)獎(jiǎ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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
隨著互聯(lián)網(wǎng)產(chǎn)品的不斷向前發(fā)展，“產(chǎn)品設(shè)計(jì)導(dǎo)向”一類的概念已經(jīng)不僅僅限于大公司中，在往日越來越注重“短期效率”的小公司也都紛紛開始注重產(chǎn)品設(shè)計(jì)方面的建設(shè)。
所謂的“產(chǎn)品設(shè)計(jì)導(dǎo)向”指的是產(chǎn)品建設(shè)之前要圍繞著產(chǎn)品的立項(xiàng)、目標(biāo)用戶等等去規(guī)劃產(chǎn)品的功能點(diǎn)，明確產(chǎn)品核心價(jià)值；在產(chǎn)品上線之后，通過數(shù)據(jù)分析和功能反饋，發(fā)掘更多的需求，去規(guī)劃下一步的”功能增刪改“，將產(chǎn)品的設(shè)計(jì)方向引導(dǎo)到更正確的位置，提升用戶留存率，延伸挖掘出產(chǎn)品更多的可能。
另一方面，從現(xiàn)在的設(shè)計(jì)環(huán)境而言，對(duì)所有的設(shè)計(jì)師既是機(jī)遇，又是挑戰(zhàn)。大量的UI專用工具（Sketch、Principle、Flinto、Origami等）的出現(xiàn)，大大提升了產(chǎn)品前期的UI設(shè)計(jì)師的工作效率，所以現(xiàn)在“全鏈路思維”已經(jīng)從剛出現(xiàn)時(shí)的“概念化思維”變成了“主流化趨勢(shì)”。所以現(xiàn)在很多的UI設(shè)計(jì)師在站酷發(fā)布自己的作品的時(shí)候大部分都喜歡加入一些產(chǎn)品前期分析（功能設(shè)計(jì)、用戶畫像等）內(nèi)容。
但是很多設(shè)計(jì)師的分析環(huán)節(jié)明顯就是為了證明“有”而去“做”，缺少了真正的分析部分。給我印象很深刻的就是之前看到的一個(gè)二手房買賣的UI設(shè)計(jì)作品，典型用戶畫像里主流用戶是：“男、七十歲、目標(biāo)是給自己的兒子購(gòu)買婚房”。實(shí)際上這種所謂的產(chǎn)品分析流程對(duì)于設(shè)計(jì)師而言是沒有任何幫助的，只是從形式上走個(gè)過場(chǎng)罷了。
本篇主要講述產(chǎn)品設(shè)計(jì)中的一些分析方法，范圍從“個(gè)人練習(xí)式設(shè)計(jì)”到“團(tuán)隊(duì)合作式運(yùn)作”，知識(shí)點(diǎn)大概有：空雨傘思維、文章大概六千字左右，建議閱讀時(shí)間：15分鐘。適讀人群：初級(jí)產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、在工作中職能范圍與產(chǎn)品規(guī)劃有關(guān)的UI設(shè)計(jì)師、想要學(xué)習(xí)產(chǎn)品設(shè)計(jì)的新人（文中含有大量配圖用來輔助觀點(diǎn)，因此建議PC端閱讀）。
產(chǎn)品運(yùn)作流程概覽
我遇到的比較普遍的問題是：很多設(shè)計(jì)師對(duì)于自己所在公司產(chǎn)品的運(yùn)作流程并不是十分了解。這樣會(huì)在你實(shí)際配合工作的時(shí)候感到無從下手。有的甚至于同一家公司的不同設(shè)計(jì)師對(duì)于產(chǎn)品設(shè)計(jì)方面的理解也不盡然相同。所以說要從淺到深的學(xué)習(xí)產(chǎn)品功能設(shè)計(jì)，就必須先理清當(dāng)前工作的常規(guī)流程，例如常見的產(chǎn)品運(yùn)作流程（如下圖）
上面是一個(gè)相對(duì)規(guī)范的產(chǎn)品開發(fā)流程，實(shí)際上你在看到上述流程圖后，對(duì)照自己公司的情況，會(huì)發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是因?yàn)楹芏喙緯?huì)把一些職能進(jìn)行合并用來節(jié)省成本，現(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計(jì)師的崗位，但是交互設(shè)計(jì)的職能不代表沒有，而是被產(chǎn)品經(jīng)理或者視覺設(shè)計(jì)師兼任了。你需要明確團(tuán)隊(duì)中各個(gè)人負(fù)責(zé)的職能部分，才能更好地提升溝通效率。
個(gè)人思考方法（一）：空·雨·傘
上面講到了設(shè)計(jì)師的“全鏈路思維”現(xiàn)在已經(jīng)成為了一種主流的觀點(diǎn)，將來的前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。所以現(xiàn)在很多的設(shè)計(jì)師開始嘗試自己去DIY一個(gè)需求或者做ReDesign這樣的設(shè)計(jì)，希望可以通過這樣的方式完成自己跨領(lǐng)域能力的一個(gè)積累。但是當(dāng)他們打開電腦的時(shí)候，大部分人會(huì)發(fā)現(xiàn)自己突然變得沒有思路，從產(chǎn)品方向點(diǎn)確定到產(chǎn)品視覺產(chǎn)出之間出現(xiàn)了斷層。
其實(shí)做過設(shè)計(jì)練習(xí)的人都知道，由于一些現(xiàn)實(shí)場(chǎng)景的不同，一些人在做設(shè)計(jì)練習(xí)的過程中會(huì)受到很多條件的局限，尤其是在孤立無援的情況下，你面對(duì)自己的練習(xí)作品往往會(huì)無從下手。當(dāng)然，不同的場(chǎng)景下有不同的分析方法。
在團(tuán)隊(duì)協(xié)作的時(shí)候，分析方法要全面、嚴(yán)謹(jǐn)、反復(fù)推敲。
在個(gè)人練習(xí)的時(shí)候，分析方法要高效、直接、簡(jiǎn)化不必要的流程，以培養(yǎng)自己的分析能力為主，在這種場(chǎng)景下，空·雨·傘就是一個(gè)非常好的思考提升方法（如下圖）
簡(jiǎn)單概述“空雨傘”思考方式：觀察（事實(shí)） → 思考（內(nèi)在） → 產(chǎn)出（解決方案）
運(yùn)用在設(shè)計(jì)上就是：發(fā)現(xiàn)痛點(diǎn) → 思考原因 → 提出解決方案?！翱铡び辍恪币?yàn)楹?jiǎn)單、成本低、易上手，可以作為設(shè)計(jì)入門培養(yǎng)思考能力的一種方法，但是在使用空·雨·傘的分析方法時(shí)需要結(jié)合一定的具體調(diào)研（或者輕量級(jí)的用戶研究）相配合，不然又會(huì)變成一味的“拍腦門兒”式的主觀臆測(cè)，對(duì)于分析能力提升沒有絲毫幫助。
個(gè)人思考方法（二）：邏輯樹
邏輯樹又稱問題樹、演繹樹或分解樹等。很多咨詢公司分析問題最常使用的工具就是“邏輯樹”。邏輯樹是將問題的所有子問題分層羅列，從最高層開始，并逐步向下擴(kuò)展。
簡(jiǎn)單來形容一下邏輯樹：把一個(gè)已知問題當(dāng)成樹干，然后開始考慮這個(gè)問題和哪些相關(guān)問題或者子任務(wù)有關(guān)。每想到一點(diǎn)，就給這個(gè)問題（也就是樹干）加一個(gè)“樹枝”，并標(biāo)明這個(gè)“樹枝”代表什么問題。一個(gè)大的“樹枝”上還可以有小的“樹枝”，如此類推，找出問題的所有相關(guān)聯(lián)項(xiàng)目。邏輯樹主要是幫助你理清自己的思路，不進(jìn)行重復(fù)和無關(guān)的思考。
如果你要運(yùn)用邏輯樹方法去分析產(chǎn)品，主要的一點(diǎn)在于學(xué)會(huì)細(xì)化拆解目標(biāo)。
舉個(gè)例子：
在2017年我創(chuàng)建了自己的個(gè)人站酷號(hào)，但在發(fā)布了一部分的文章之后，我開始意識(shí)到文章的可讀性始終不高。在這個(gè)時(shí)候我們就可以按照邏輯樹的分析方法去進(jìn)行拆解分析，去發(fā)現(xiàn)自己提升的空間。
如上圖，就是邏輯樹最簡(jiǎn)單的一種場(chǎng)景應(yīng)用。確定目標(biāo)后向下進(jìn)行拆分，拆分出三級(jí)邏輯樹是比較容易的，甚至你可以沿著已經(jīng)列出來的大綱繼續(xù)深入細(xì)化，再拆分出更細(xì)更深層的各種提升點(diǎn)。
邏輯樹分析法在個(gè)人作品中的主要作用是發(fā)散思維；在實(shí)際工作中的作用則是針對(duì)特定問題進(jìn)行分析，理清思路?？偠灾?，是讓你在分析的過程中更加有條理，避免重復(fù)思考。但是邏輯樹分析也有一個(gè)缺陷，就是在邏輯樹分析的過程中，根據(jù)現(xiàn)象分裂出子層級(jí)的步驟十分依賴你的認(rèn)知能力，就如同做設(shè)計(jì)一樣，當(dāng)你感覺界面的視覺出現(xiàn)出題的時(shí)候，需要利用你學(xué)出來的知識(shí)去進(jìn)行視覺優(yōu)化，如果你對(duì)設(shè)計(jì)理論知識(shí)掌握程度并不是很強(qiáng)，那就不能采用邏輯樹分析法解決問題。
總而言之，邏輯樹分析法適用于對(duì)問題研究十分深入的情況下，如果你對(duì)當(dāng)前的環(huán)境認(rèn)知并不充足，那么就很容易走入歪路，跑偏主題。
實(shí)際項(xiàng)目：用戶調(diào)研訪談
在一些實(shí)際項(xiàng)目中，用戶調(diào)研是需求來源的主要渠道。提起用戶調(diào)研，很多人會(huì)覺得這不屬于UI設(shè)計(jì)師應(yīng)該做的事情。其實(shí)行業(yè)逐漸規(guī)范的現(xiàn)在，用戶調(diào)研、分析需求的能力也成為了衡量UI設(shè)計(jì)師能力的一個(gè)標(biāo)準(zhǔn)。現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品種類繁多，從早期只做主流行業(yè)，到現(xiàn)在基本所有的冷門行業(yè)都有涉及；作為設(shè)計(jì)者而言，大多數(shù)設(shè)計(jì)師已經(jīng)開始在設(shè)計(jì)的過程中心有余而力不足。
造成這種現(xiàn)象的主要原因?yàn)槭且驗(yàn)殡S著行業(yè)的細(xì)分以及范圍的擴(kuò)大，我們距離用戶的真實(shí)場(chǎng)景偏離太遠(yuǎn)，導(dǎo)致我們?cè)谠O(shè)計(jì)中很容易理所當(dāng)然的賦予給用戶大量無用的東西。偏離了用戶所需要的主要軌道。因此對(duì)于很多的設(shè)計(jì)師來說，學(xué)會(huì)了解用戶以及分析需求成為了十分重要的事情。
然后整理了一下我在用戶調(diào)研過程中的幾點(diǎn)認(rèn)知：
第一，保證調(diào)研的目標(biāo)的準(zhǔn)確性
我們需要明確，我們希望通過調(diào)研達(dá)到怎樣的目的？（例如：提升部分頁(yè)面轉(zhuǎn)化率、收集用戶對(duì)于產(chǎn)品不滿意的地方、通過用戶使用產(chǎn)品發(fā)現(xiàn)用戶潛在的痛點(diǎn)）
第二，有目標(biāo)的選擇用戶
一般來講互聯(lián)網(wǎng)公司都有收集客戶反饋的部門，他們掌握著所有客戶的反饋意見。我們?cè)谶x擇調(diào)研用戶的時(shí)候，最好可以根據(jù)我們?cè)谡{(diào)研行動(dòng)確立初期擬定的目標(biāo)去選擇調(diào)研目標(biāo)
第三，適當(dāng)?shù)臏?zhǔn)備調(diào)研內(nèi)容
當(dāng)我們確定了調(diào)研目標(biāo)和調(diào)研用戶之后，就可以根據(jù)現(xiàn)有狀況去準(zhǔn)備調(diào)研內(nèi)容。調(diào)研內(nèi)容一定是要在事先擬定好（開始調(diào)研之后根據(jù)實(shí)際情況進(jìn)行改動(dòng)）
一般市場(chǎng)調(diào)研細(xì)分的維度通常有四種，分別是：地理、人口統(tǒng)計(jì)、行為、心理統(tǒng)計(jì)。運(yùn)用在互聯(lián)網(wǎng)產(chǎn)品里面就更加的復(fù)雜。以B端產(chǎn)品為例：我們?cè)谡{(diào)研中可能要把調(diào)研對(duì)象分為客戶（老板）和用戶（業(yè)務(wù)員）去進(jìn)行不同情況的信息跟蹤，而且根據(jù)產(chǎn)品的屬性不同，需要提前預(yù)設(shè)好調(diào)研內(nèi)容的側(cè)重
第四，調(diào)研過程中
在調(diào)研過程中，我們可以適當(dāng)結(jié)合上文講述到的“空雨傘”方式去進(jìn)行調(diào)研觀察，收集用戶需求（如下圖）
在調(diào)研過程中，除了思考之外更多需要注意的是對(duì)用戶洞察的記錄與剖析，在記錄用戶行為的過程中，需要遵循“不干擾”、“不引導(dǎo)”、“記錄客觀”等原則，這樣可以才可以保持用戶行為記錄的準(zhǔn)確性。
第五，獲取反饋整理結(jié)果
在調(diào)研結(jié)束后，我們應(yīng)該產(chǎn)出一份完整的調(diào)查報(bào)告，按照本次調(diào)研預(yù)設(shè)目標(biāo)進(jìn)行整理，規(guī)劃出合適的大綱，把調(diào)研收獲轉(zhuǎn)化為明確的產(chǎn)出，產(chǎn)出形式最好以報(bào)告（PPT、PDF），而不是口述或者微信消息，這兩者之間差別很大~
需求歸類：KANO模型
雖然說現(xiàn)在很多的公司都開始建立了用戶體驗(yàn)類的部門，但是因?yàn)橛脩粽{(diào)研或者體驗(yàn)類的工作很難去量化產(chǎn)出。而且在大部分情況下當(dāng)產(chǎn)品按照用戶調(diào)研反饋的結(jié)果進(jìn)行調(diào)整后，往往很少會(huì)出現(xiàn)我們幻想中的“逆襲”、“口碑急劇上升”，有時(shí)還會(huì)因?yàn)槭艿揭徊糠钟脩粲^點(diǎn)的帶偏導(dǎo)致產(chǎn)品口碑下降，用戶表示不滿；又或者會(huì)出現(xiàn)需求級(jí)規(guī)劃混亂，重要功能反而后上線這種尷尬的情況。
所以這驅(qū)使著團(tuán)隊(duì)中負(fù)擔(dān)“用研用體”職能的角色對(duì)用戶需求進(jìn)行正確的分類和排序
這個(gè)時(shí)候就可以運(yùn)用到卡諾模型（KANO模型）。
KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對(duì)用戶需求分類和優(yōu)先排序的有用工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。根據(jù)不同類型的質(zhì)量特性與用戶滿意度之間的關(guān)系，狩野教授將產(chǎn)品服務(wù)的質(zhì)量特性分為五類：
1.基本型需求
用戶對(duì)企業(yè)提供的產(chǎn)品或服務(wù)因素的基本要求。是用戶認(rèn)為產(chǎn)品“必須有”的屬性或功能。當(dāng)其特性不充足(不滿足顧客需求)時(shí)，用戶很不滿意；當(dāng)其特性充足(滿足用戶需求)時(shí)，用戶也可能不會(huì)因而表現(xiàn)出滿意。對(duì)于基本型需求，即使超過了用戶的期望，但用戶充其量達(dá)到滿意，不會(huì)對(duì)此表現(xiàn)出更多的好感。
例如對(duì)于網(wǎng)盤類產(chǎn)品來說，用戶的基本需求是有快速的上傳和下載。如果下載速度達(dá)不到用戶的期望，則用戶滿意度將一落千丈。對(duì)于顧客而言，這些需求是必須滿足的，理所當(dāng)然的。對(duì)于這類需求，企業(yè)的做法應(yīng)該是注重不要在這方面失分，需要企業(yè)不斷地調(diào)查和了解顧客需求，并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。
2.期望型需求
提供該功能，用戶滿意度提高，如果不提供該功能，用戶會(huì)感覺到不滿。當(dāng)然在這里要補(bǔ)充一句，這里的需求并不都是我們整理出的主觀需求，也有可能是用戶在使用的過程中產(chǎn)生的客觀類需求，例如遇到不會(huì)的體驗(yàn)，需求得到響應(yīng)時(shí)我們給的反饋
例如對(duì)于一些O2O類的產(chǎn)品，雖然做的都比較成熟，但是由于體量龐大的原因，偶爾也會(huì)受到糟糕體驗(yàn)，用戶在受到糟糕的體驗(yàn)之后往往會(huì)期望能通過反饋得到心理上的安慰。例如攜程（旅程預(yù)計(jì)時(shí)間偏差）、美團(tuán)（酒店體驗(yàn)差）、餓了么（用餐體驗(yàn)差）等。在用戶遇到這種糟糕體驗(yàn)之后，期望能通過投訴建議獲得官方的反饋，那么官方把這種問題解決的越圓滿，用戶的滿意度也會(huì)隨之提高。
3.興奮型需求
又稱魅力型需求。指不會(huì)被用戶過分期望的需求。對(duì)于興奮型需求，隨著滿足用戶期望程度的增加，用戶滿意度也會(huì)急劇上升，但一旦得到滿足，即使表現(xiàn)并不完善，用戶表現(xiàn)出的滿意狀況則也是非常高的。反之，即使在期望不滿足時(shí)，用戶也不會(huì)因而表現(xiàn)出明顯的不滿意。
4.無差異型需求
不論提供與否，對(duì)用戶體驗(yàn)無影響。是質(zhì)量中既不好也不壞的方面，它們不會(huì)導(dǎo)致顧客滿意或不滿意。
5.反向型需求
用戶沒有這個(gè)需求，提供后用戶滿意度反而會(huì)下降。
按照kano模型分析可以對(duì)收集到的產(chǎn)品需求進(jìn)行分類，篩選掉一些不合理的需求。更好更有目的性的完成產(chǎn)品待辦清單的記錄。
后
對(duì)于設(shè)計(jì)師來講，不管是個(gè)人設(shè)計(jì)練習(xí)還是團(tuán)隊(duì)項(xiàng)目，都應(yīng)該掌握一定的產(chǎn)品需求收集和分析的方法。如果你真的下定決心要向交互設(shè)計(jì)、用戶體驗(yàn)方向發(fā)展，那就更需要下定一些功夫去學(xué)習(xí)相關(guān)的知識(shí)，學(xué)會(huì)形成自己的思考方法。一開始可能會(huì)很痛苦很累，但是如果一味的試圖走捷徑，最后只會(huì)得不償失。
作者： 千夜Ryan_Vision 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
對(duì)于很多設(shè)計(jì)師來說，遇上B端產(chǎn)品都是一件讓人感覺頭痛的事情。我從16年開始進(jìn)入現(xiàn)在的公司，到現(xiàn)在做了很多的后臺(tái)產(chǎn)品(ERP，CRM，SAAS，OA等等)，有的產(chǎn)品是從無到有，有的產(chǎn)品是在原有的基礎(chǔ)上更新，相對(duì)于C端產(chǎn)品，我在過程中深刻的體會(huì)到了視覺設(shè)計(jì)在后臺(tái)產(chǎn)品中作用的有限性。
當(dāng)然從一個(gè)設(shè)計(jì)參與者的角度來看，B端后臺(tái)的產(chǎn)品并沒有直接面向消費(fèi)者的ToC產(chǎn)品那么的“火光四射”，但是B端產(chǎn)品對(duì)于設(shè)計(jì)師＆產(chǎn)品經(jīng)理都有更高的能力要求，能夠從容的在各種B端產(chǎn)品中來回穿梭的人必須要有更強(qiáng)的業(yè)務(wù)邏輯理解和規(guī)劃能力，后臺(tái)類產(chǎn)品設(shè)計(jì)過程中的大方向是可以借鑒并復(fù)制的，但是對(duì)于細(xì)節(jié)的拆分、功能的規(guī)劃，卻又截然不同。所以我把從16年到19年的感悟?qū)懴聛?，希望能?duì)一些面向后臺(tái)產(chǎn)品頭痛的設(shè)計(jì)師和產(chǎn)品經(jīng)理們有一些幫助。
本篇主要講述B端產(chǎn)品的一些經(jīng)驗(yàn)，建議閱讀時(shí)間：30分鐘。適讀人群：初級(jí)產(chǎn)品經(jīng)理、在工作中職能范圍與后臺(tái)產(chǎn)品有關(guān)的UI設(shè)計(jì)師和交互設(shè)計(jì)師（文中含有大量配圖用來輔助觀點(diǎn)，因此建議PC端閱讀）。
什么是B端產(chǎn)品？
其實(shí)后臺(tái)產(chǎn)品更嚴(yán)格的意義講也是B端產(chǎn)品類型中的一種，當(dāng)然細(xì)分的領(lǐng)域類型有很多，也分針對(duì)性。針對(duì)個(gè)人（小型團(tuán)隊(duì)）的后臺(tái)產(chǎn)品比較容易在大眾的視線里被看到，這一類中最常見的后臺(tái)產(chǎn)品就是微信公眾平臺(tái)了。
（微信公眾平臺(tái)通過管理、分析、運(yùn)營(yíng)，讓企業(yè)＆個(gè)人能夠更好的提高服務(wù)意識(shí)）
而另一類B端的產(chǎn)品則是面向企業(yè)客戶以及內(nèi)部員工使用，一般除了被針對(duì)到的目標(biāo)用戶，其他的用戶很難接觸到。比如OA、ERP、CRM、SAAS等。跟微信公眾平臺(tái)不同，這些名詞對(duì)于很多不處于行業(yè)中的人而言都顯得比較陌生，所以我大概解釋一下幾種我做過的平臺(tái)。
OA系統(tǒng)
辦公自動(dòng)化(OA: OFFICE AUTOMATION)是采用Internet/Intranet技術(shù)，基于工作流概念，使企業(yè)內(nèi)部人員方便快捷地共享信息，高效協(xié)同工作；改變過去復(fù)雜、低效的手工辦公方式，實(shí)現(xiàn)迅速、全方位的信息采集、處理，為企業(yè)管理和決策提供科學(xué)依據(jù)。企業(yè)實(shí)現(xiàn)辦公自動(dòng)化程度也是衡量其實(shí)現(xiàn)現(xiàn)代化管理的標(biāo)準(zhǔn)。辦公自動(dòng)化不僅兼顧個(gè)人辦公效率提高，更重要的是可實(shí)現(xiàn)群體協(xié)同工作。憑借網(wǎng)絡(luò)，這種交流與協(xié)調(diào)幾乎可以在瞬間完成。這里所說的群體工作，可以包括在地理上分布很廣，甚至在全球上各個(gè)地方，以至于工作時(shí)間都不一樣的一群工作人員。
ERP系統(tǒng)
ERP是Enterprise Resource Planning（企業(yè)資源計(jì)劃）的簡(jiǎn)稱，是上個(gè)世紀(jì)90年代美國(guó)一家IT公司根據(jù)當(dāng)時(shí)計(jì)算機(jī)信息、IT技術(shù)發(fā)展及企業(yè)對(duì)供應(yīng)鏈管理的需求，預(yù)測(cè)在今后信息時(shí)代企業(yè)管理信息系統(tǒng)的發(fā)展趨勢(shì)和即將發(fā)生變革，而提出了這個(gè)概念。 ERP是針對(duì)物資資源管理（物流）、人力資源管理（人流）、財(cái)務(wù)資源管理（財(cái)流）、信息資源管理（信息流）集成一體化的企業(yè)管理軟件。它將包含客戶/服務(wù)架構(gòu)，使用圖形用戶接口，應(yīng)用開放系統(tǒng)制作。除了已有的標(biāo)準(zhǔn)功能，它還包括其它特性，如品質(zhì)、過程運(yùn)作管理、以及調(diào)整報(bào)告等。
CRM系統(tǒng)
客戶關(guān)系管理系統(tǒng)（CRM）是以客戶數(shù)據(jù)的管理為核心，利用信息科學(xué)技術(shù)，實(shí)現(xiàn)市場(chǎng)營(yíng)銷、銷售、服務(wù)等活動(dòng)自動(dòng)化，并建立一個(gè)客戶信息的收集、管理、分析、利用的系統(tǒng)，幫助企業(yè)實(shí)現(xiàn)以客戶為中心的管理模式?？蛻絷P(guān)系管理既是一種管理理念，又是一種軟件技術(shù)。
SAAS系統(tǒng)
SAAS系統(tǒng)是一種通過Internet提供軟件的模式，廠商將應(yīng)用軟件統(tǒng)一部署在自己的服務(wù)器上，客戶可以根據(jù)自己實(shí)際需求，通過互聯(lián)網(wǎng)向廠商定購(gòu)所需的應(yīng)用軟件服務(wù)，按定購(gòu)的服務(wù)多少和時(shí)間長(zhǎng)短向廠商支付費(fèi)用，并通過互聯(lián)網(wǎng)獲得廠商提供的服務(wù)。用戶不用再購(gòu)買軟件，而改用向提供商租用基于Web的軟件，來管理企業(yè)經(jīng)營(yíng)活動(dòng)，且無需對(duì)軟件進(jìn)行維護(hù)。
B端產(chǎn)品和C端產(chǎn)品的差異？
近兩年來，B端產(chǎn)品慢慢的成為了互聯(lián)網(wǎng)市場(chǎng)上的熱門。而且隨著現(xiàn)在互聯(lián)網(wǎng)市場(chǎng)的多樣性，C端產(chǎn)品有著充足的競(jìng)品可以進(jìn)行對(duì)比分析，前行的相對(duì)平順；而B端的產(chǎn)品則因?yàn)閷?duì)于特有業(yè)務(wù)場(chǎng)景的不同、業(yè)務(wù)邏輯的復(fù)雜、數(shù)據(jù)系統(tǒng)的串接等等，顯得十分復(fù)雜。那二者之間都有哪些差異呢？
B端產(chǎn)品具有更強(qiáng)的銜接性
相對(duì)于C端產(chǎn)品用戶群體的龐大和多種類，B端產(chǎn)品顯得要相對(duì)專注。從16年到現(xiàn)在，至少我經(jīng)歷的B端產(chǎn)品有近十種之多，每一類后臺(tái)產(chǎn)品都會(huì)有相對(duì)聚焦的用戶群體以及產(chǎn)品目標(biāo)。在做B端產(chǎn)品之前，我對(duì)B端產(chǎn)品的初步理解是大而廣泛的功能集成類產(chǎn)品，有點(diǎn)類似于一個(gè)超級(jí)后臺(tái)的概念。但是實(shí)際進(jìn)入到行業(yè)中接觸之后，才發(fā)現(xiàn)實(shí)際上對(duì)于B端產(chǎn)品而言，每個(gè)產(chǎn)品都是針對(duì)行業(yè)鏈內(nèi)的某一個(gè)節(jié)點(diǎn)而做。
做一個(gè)比較簡(jiǎn)單的類比：如同產(chǎn)品設(shè)計(jì)開發(fā)的過程中，產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師、前后端開發(fā)、測(cè)試等，大家所需要功能都非常的多，但是使用的工具都截然不同。但是每一個(gè)工具對(duì)于產(chǎn)品設(shè)計(jì)開發(fā)過程中的推動(dòng)意義都是關(guān)鍵的。
功能核心點(diǎn)的不同
實(shí)際上在2018年我做了一個(gè)很難實(shí)現(xiàn)的事兒，我會(huì)在每個(gè)月堅(jiān)持跟行業(yè)內(nèi)的兩名設(shè)計(jì)師一對(duì)一的溝通，聊一聊對(duì)于各自行業(yè)的認(rèn)識(shí)。通過這個(gè)舉措我大概了解了很多中高級(jí)UI設(shè)計(jì)師們的想法。其實(shí)大部分的UI設(shè)計(jì)師對(duì)于未來的規(guī)劃都是比較有野心的，不管是未來想到專注視覺亦或者想要跨向交互的設(shè)計(jì)師，對(duì)于產(chǎn)品的業(yè)務(wù)邏輯都希望可以進(jìn)一步的了解，參與到產(chǎn)品的前期規(guī)劃討論中。
但是，在談?wù)摰紹端產(chǎn)品的時(shí)候，大部分的人又會(huì)覺得如果是B端產(chǎn)品還是算了吧。有一個(gè)設(shè)計(jì)師跟我說B端產(chǎn)品的理解成本太高了，又沒有辦法做到像C端產(chǎn)品那樣有具體功能的側(cè)重取舍，想要玩轉(zhuǎn)B端產(chǎn)品之前首先要講整個(gè)行業(yè)鏈路里的內(nèi)容都走一遍，對(duì)于很多設(shè)計(jì)師來講太痛苦了。
舉一個(gè)例子好了。
例如微信閱讀，產(chǎn)品的核心側(cè)重在于”閱讀功能“，而”想法管理、閱讀標(biāo)注、社交分析、讀書排名“這一些功能都屬于Kano模型中的“興奮型需求---即使在期望不滿足時(shí)，用戶也不會(huì)因而表現(xiàn)出明顯的不滿意”。
但是同樣的情況出自于B端產(chǎn)品，可能就截然不同了，對(duì)于B端產(chǎn)品而言，功能是多而必要的。例如OA辦公系統(tǒng)中的“申請(qǐng)?zhí)釄?bào)功能”，這個(gè)功能針對(duì)的根本不是針對(duì)于單一類型的用戶、單一類型的場(chǎng)景。而是針對(duì)很多不同崗位的用戶以及不同的提報(bào)需求場(chǎng)景。所以很多初入B端產(chǎn)品的UI設(shè)計(jì)師而言，他們認(rèn)為“申請(qǐng)?zhí)釄?bào)功能”只是一個(gè)信息輸入頁(yè)面，但是實(shí)際工作的時(shí)候卻要按照七十多種不同的提報(bào)方式去設(shè)計(jì)內(nèi)容，并且根據(jù)提報(bào)需求的不同，后續(xù)還會(huì)有更多的差異化設(shè)計(jì)（附件上傳、日?qǐng)?bào)提交、訂單流審批等等）
B端產(chǎn)品的客戶也許不是你的用戶
這也是B端產(chǎn)品和C端產(chǎn)品的一個(gè)不同。首先B端產(chǎn)品面向的是企業(yè)老板，滿足企業(yè)老板的需求，讓這一類用戶滿意才是關(guān)鍵；而C端產(chǎn)品面向的是個(gè)人用戶，只要做到用戶體驗(yàn)十分良好并且給予一些增進(jìn)用戶留存的機(jī)制就可以運(yùn)營(yíng)的很好。
兩者之間的差異性在于B端產(chǎn)品在滿足客戶的需求后，間接服務(wù)于用戶；而C端產(chǎn)品直面用戶。這其實(shí)就造成了B端產(chǎn)品在設(shè)計(jì)的過程中需要平衡“客戶”與“用戶”之間的關(guān)系，個(gè)人認(rèn)為一個(gè)健康的B端產(chǎn)品應(yīng)該是既滿足“客戶”的需求，又提升“用戶”的體驗(yàn)，不然很可能會(huì)出現(xiàn)“客戶好評(píng) and 用戶差評(píng)”的情況。
但是對(duì)于很多老板而言，在同樣的產(chǎn)品服務(wù)之間，他們往往會(huì)傾向于付款使用服務(wù)，這其實(shí)也是B端產(chǎn)品設(shè)計(jì)中一個(gè)比較有趣的點(diǎn)。
面對(duì)B端產(chǎn)品應(yīng)該如何入手？
很多人在設(shè)計(jì)B端產(chǎn)品的時(shí)候總是覺得很難受，感覺可延伸的方向有很多，卻又沒有一個(gè)十分合適的切入點(diǎn)。引用我之前在《設(shè)計(jì)師應(yīng)該掌握的需求分析方法》文章中的一句話，這是因?yàn)?我們距離用戶的真實(shí)場(chǎng)景偏離太遠(yuǎn)，導(dǎo)致我們?cè)谠O(shè)計(jì)中很容易理所當(dāng)然的賦予給用戶大量無用的東西。偏離了用戶所需要的主要軌道。"
（很多人把B端產(chǎn)品設(shè)計(jì)看作在迷霧中搭建橋梁）
在我看來B端產(chǎn)品的設(shè)計(jì)沒有固定的功能模式，而一味的照抄競(jìng)品在這一行業(yè)中其實(shí)也是非常危險(xiǎn)的行為。大部分B端產(chǎn)品設(shè)計(jì)的本質(zhì)其實(shí)是解決客戶在真實(shí)場(chǎng)景下遇到的問題，給予用戶更便捷的管理方式和更多的利益價(jià)值。
但是所謂知易行難，從一個(gè)產(chǎn)品的設(shè)計(jì)者（產(chǎn)品經(jīng)理＆設(shè)計(jì)師）在產(chǎn)品的規(guī)劃過程中要做到以下幾點(diǎn)：
了解基礎(chǔ)業(yè)務(wù)流程
在這里講的業(yè)務(wù)流程并非是單一產(chǎn)品的業(yè)務(wù)，而是從行業(yè)鏈路的角度上講，要真實(shí)的理解行業(yè)過程中每一個(gè)環(huán)節(jié)的過程。例如最近幾年專注的快銷行業(yè)，最起碼我們要知道從品牌商、供應(yīng)商、經(jīng)銷商、二批商以及門店終端以及其他各個(gè)渠道的最基礎(chǔ)的業(yè)務(wù)運(yùn)作方式。這樣其實(shí)會(huì)讓我們?cè)诠δ艿乃伎歼^程中避免很多低級(jí)的錯(cuò)誤。
寫到這里其實(shí)可能有的朋友看不懂這一步的作用，例如可能會(huì)覺得，我做一個(gè)數(shù)據(jù)分析后臺(tái)，為什么要懂全部環(huán)節(jié)的基礎(chǔ)業(yè)務(wù)流程呢？那我繼續(xù)做一個(gè)最簡(jiǎn)單的類比：就如同我們對(duì)于互聯(lián)網(wǎng)有了初步了解之后，就會(huì)自然而然的明白騰訊系的產(chǎn)品基本不會(huì)對(duì)接支付寶，而支付寶的錢無法通過微信去支付。
功能流程歸類
這個(gè)應(yīng)該不需要再多解釋了，完美的流程歸類會(huì)讓產(chǎn)品的需求方、設(shè)計(jì)和開發(fā)的對(duì)接方以及用戶都非常滿意。
價(jià)值體系搭建
價(jià)值體系的搭建是整個(gè)產(chǎn)品中最核心的點(diǎn)。何謂價(jià)值體系？對(duì)于B端的產(chǎn)品而言，客戶最關(guān)心它能為實(shí)際的工作帶來哪些便利而并非這個(gè)界面做的多么的好看以及用戶體驗(yàn)多么棒。所以對(duì)于一個(gè)B端產(chǎn)品，解決問題的價(jià)值就是最好的推廣。按照實(shí)話講，從這個(gè)角度來看，B端產(chǎn)品的設(shè)計(jì)需要對(duì)用戶更深層次的了解和判斷，了解用戶的核心價(jià)值，圍繞核心價(jià)值搭建產(chǎn)品的功能以及任務(wù)優(yōu)先級(jí)。
整合設(shè)計(jì)＆持續(xù)迭代＆調(diào)整方向
在設(shè)計(jì)的過程中我們是十分痛苦的。因?yàn)锽端產(chǎn)品面向的客戶大部分都是在行業(yè)中沉浸了很多年的老板或者相關(guān)業(yè)務(wù)部門。這種特殊的情況對(duì)我們有利有弊。好處是我們的客戶對(duì)于業(yè)務(wù)相關(guān)的藍(lán)圖十分的清晰；壞處是每一個(gè)人對(duì)于自己的業(yè)務(wù)都有更美妙的“憧憬”。
例如我們?cè)谙略L調(diào)研的過程中跟經(jīng)銷商聊了一下（快消行業(yè)），不同的經(jīng)銷商對(duì)于自己生意管理的方法不同，人員組成（業(yè)代、庫(kù)管、內(nèi)勤）也完全不同。所以有的老板會(huì)跟我聊一聊，有沒有什么更新鮮或者更有挑戰(zhàn)性的玩法兒，能讓下面的業(yè)代收集到更多有價(jià)值的數(shù)據(jù)；有的老板會(huì)跟我聊產(chǎn)品的功能太多了，手下的業(yè)代使用起來不方便，意見很大。
（門店拜訪是經(jīng)銷商業(yè)代的日常工作，有的業(yè)代熱衷抄單，有的業(yè)代喜歡用APP錄入，各有不同）
所以對(duì)于我們而言，面對(duì)這種在宏觀角度上大方向一致而微觀角度各有不同的用戶群體，要學(xué)會(huì)整合和克制。如果有了一些比較亮眼的功能或者想法，盡可能要做到小幅度快節(jié)奏的持續(xù)迭代，在迭代的過程中逐漸收集用戶的想法。
對(duì)于設(shè)計(jì)部門，在設(shè)計(jì)B端產(chǎn)品的過程中需要進(jìn)行更嚴(yán)格的內(nèi)外部評(píng)審。從功能規(guī)劃＆交互設(shè)計(jì)這一步就應(yīng)該開始評(píng)審，評(píng)審交互設(shè)計(jì)的功能點(diǎn)有沒有遺漏？交互框架搭建的過程中是否考慮到了隨著產(chǎn)品發(fā)展帶來的更多功能的擴(kuò)展性？修改某個(gè)功能是否會(huì)導(dǎo)致其他的功能出現(xiàn)問題？在修改交易（促銷）規(guī)則的時(shí)候是否會(huì)對(duì)現(xiàn)在的產(chǎn)品造成風(fēng)險(xiǎn)？這些都是需要進(jìn)行不斷的評(píng)審、磨合、測(cè)試才能逐漸完成上線的。在這中間我們要不斷的調(diào)整B端產(chǎn)品設(shè)計(jì)的方向（包括產(chǎn)品功能的優(yōu)先級(jí)排序）。
B端產(chǎn)品的功能設(shè)計(jì)也許并不在于亮眼，而是在于均衡和穩(wěn)定。C端產(chǎn)品的每一個(gè)用戶都是單一的個(gè)體，通過C端產(chǎn)品帶來某種生活中的便捷與享受，功能規(guī)劃失敗，很可能會(huì)失去某些群體的用戶，但是可以通過迅速的功能迭代在下一輪贏回來；而B端產(chǎn)品上的每一個(gè)客戶(用戶)，每一個(gè)后面都有一張龐大的關(guān)系網(wǎng)，對(duì)于他們而言，這是生意(工作)的重要組成部分，是沒有辦法拿來冒險(xiǎn)的。如果因?yàn)楫a(chǎn)品的問題導(dǎo)致客戶(用戶)出現(xiàn)了損失，這種客情關(guān)系是很難挽回的。
如何提升B端產(chǎn)品的品質(zhì)？
學(xué)習(xí)成本＆感知成本
對(duì)B端產(chǎn)品來講，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候是不需要耗費(fèi)太多的思考的，只是去按照交互設(shè)計(jì)師的規(guī)劃堆砌圖表和列表。但是對(duì)于使用者來講，但是其中縱橫交錯(cuò)的商業(yè)邏輯和業(yè)務(wù)邏輯卻是給用戶搭建了一個(gè)十分高的門檻。
賦予價(jià)值
賦予價(jià)值是常見的提升B端產(chǎn)品品質(zhì)的一種方式，這里說的賦予價(jià)值跟上文所述的“價(jià)值體系搭建”并不相同。
其實(shí)作為B端產(chǎn)品的設(shè)計(jì)者，我們期望通過自己的努力讓產(chǎn)品有更多的玩法兒、讓視覺有更多的花樣，我們期待以此來獲得用戶的認(rèn)同。但是從B端產(chǎn)品用戶的角度來說，這些并非是他們重點(diǎn)關(guān)注的點(diǎn)。例如我們將一個(gè)進(jìn)銷存軟件所有的功能都考慮清楚、所有的使用場(chǎng)景下都可以得到滿足，都不如通過優(yōu)化流程、提升產(chǎn)品使用效率去將使用者給解放出來。
其實(shí)在這里可以大膽預(yù)測(cè)一下，在未來所有B端產(chǎn)品的設(shè)計(jì)者都會(huì)想辦法降低用戶的使用時(shí)長(zhǎng)，“用完即走”可能會(huì)成為未來工具類B端產(chǎn)品設(shè)計(jì)的一個(gè)設(shè)計(jì)原則。
降低妨礙＆功能引導(dǎo)
B端產(chǎn)品因?yàn)榧闪撕芏嗟墓δ芎托畔?，所以在設(shè)計(jì)的過程中盡可能合理的安排信息的布局是非常的重要的。常見的方法是優(yōu)化字段以及頁(yè)面元素，讓用戶看起來更直接，并且加入一些功能引導(dǎo)部分，讓用戶對(duì)于一些功能有很快的認(rèn)知（這個(gè)功能是什么＆我能用這個(gè)功能做什么）
用戶體驗(yàn)要素上說過“不管用戶訪問的是什么類型的網(wǎng)站，它都是一個(gè)‘自助式’的產(chǎn)品。沒有可以事先閱讀的說明書、沒有任何操作培訓(xùn)或討論會(huì)、沒有客戶服務(wù)代表來幫助用戶了解這個(gè)網(wǎng)站。用戶所能依靠的只有自己的智慧和經(jīng)驗(yàn)，來獨(dú)自面對(duì)這個(gè)網(wǎng)站?！?
頁(yè)面清晰簡(jiǎn)潔＆場(chǎng)景下保持高效
B端產(chǎn)品的用戶一般比C端產(chǎn)品的用戶要更有專業(yè)性，同時(shí)也更有耐心。但是如果我們的頁(yè)面設(shè)計(jì)的功能過于復(fù)雜或者為了豐富頁(yè)面加入很多的冗雜字段，會(huì)對(duì)用戶造成不必要的影響。
而高效則是另一個(gè)在交互設(shè)計(jì)中需要注意到的問題，高效從一個(gè)角度上講，是減少用戶不必要的操作＆頁(yè)面的跳轉(zhuǎn)，例如ERP系統(tǒng)中的客戶管理，在客戶列表頁(yè)修改客戶資料的時(shí)候，盡可能使用彈窗，這樣會(huì)大大減少頁(yè)面跳轉(zhuǎn)的頻率；
但是與此同時(shí)，減少頁(yè)面跳轉(zhuǎn)并不代表真正的高效，再次舉例ERP系統(tǒng)，所有的訂單需要按照指定的流程一步步進(jìn)行操作而并非一步到位，這樣雖然頁(yè)面的跳轉(zhuǎn)增加，但是可以避免操作出錯(cuò)給用戶帶來更大的困擾。
設(shè)計(jì)的一致性
當(dāng)然看到這一點(diǎn)很多成熟的設(shè)計(jì)師可能會(huì)表面毫無波瀾，內(nèi)心甚至想笑。但是實(shí)際上對(duì)于B端產(chǎn)品而言，需求、開發(fā)、上線，這會(huì)是一條漫長(zhǎng)的戰(zhàn)線。除非是一些大公司，否則很少有設(shè)計(jì)師能只跟隨一個(gè)產(chǎn)品走到最后。當(dāng)你兩個(gè)月之后再入手參與這個(gè)項(xiàng)目，你會(huì)發(fā)現(xiàn)你對(duì)這個(gè)產(chǎn)品開始陌生了。往往就會(huì)產(chǎn)生同一個(gè)設(shè)計(jì)師做出來的設(shè)計(jì)圖像是兩個(gè)設(shè)計(jì)師做的一樣。
堅(jiān)持設(shè)計(jì)的一致性是很重要的：例如產(chǎn)品的交互操作（彈窗的樣式、列表頁(yè)左右功能布局）、按鈕的不同狀態(tài)、字體大小的規(guī)范、系統(tǒng)導(dǎo)航條的樣式及位置、切換頁(yè)面的觸發(fā)等等，都屬于一致性中必不可少的因素，當(dāng)產(chǎn)品的一致性程度較高，就可以降低用戶的學(xué)習(xí)成本、提高用戶的使用效率。
作者： 千夜Ryan_Vision 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
有效的顏色應(yīng)用技巧是每個(gè)從事視覺合成相關(guān)工作的，包括插畫家和UI設(shè)計(jì)師，都必須具備的。隨著扁平化設(shè)計(jì)和material design的普及，具備色彩理論知識(shí)變得更加重要。
目前鮮艷的顏色和漸變出現(xiàn)在不同數(shù)字產(chǎn)品的用戶界面上：從好玩和有趣的到商業(yè)應(yīng)用和網(wǎng)站。然而，關(guān)于明亮的顏色對(duì)用戶體驗(yàn)的影響還有很多討論。本文對(duì)豐富多彩的用戶界面設(shè)計(jì)的優(yōu)缺點(diǎn)進(jìn)行了深入的分析。
增加可讀性和易讀性
我們之前的一篇文章中，介紹了影響配色方案選擇的因素?？勺x性和易讀性是設(shè)計(jì)師考慮色彩運(yùn)用的基本因素。提醒一下，可讀性是指人們閱讀文本內(nèi)容的容易程度，而易讀性則定義了用戶在特定字體中區(qū)分字母的速度。
鮮明的顏色足夠的對(duì)比度有助于增加可讀性和易讀性。有對(duì)比的布局元素會(huì)變得可區(qū)分和引人注目。然而，高色彩對(duì)比可能并不總是有效。如果文本內(nèi)容和背景顏色對(duì)比度太大，將很難閱讀或掃描文本。這就是為什么推薦設(shè)計(jì)師創(chuàng)建一個(gè)溫和的對(duì)比度，只用高對(duì)比度顏色突出元素的原因。
對(duì)任何數(shù)字產(chǎn)品來說，視覺層次是打造清晰導(dǎo)航和直觀交互的核心要素。UI組件就是這樣被組織起來的，這樣大腦就可以通過這種包括顏色在內(nèi)的物理差異來區(qū)分物體。
顏色有自己的層次結(jié)構(gòu)，這是受用戶思維的影響所決定的。有大膽的顏色，如紅色和橙色，以及弱的白色和奶油色。明亮的顏色很容易被注意到，所以設(shè)計(jì)師經(jīng)常用它們來突出或設(shè)置對(duì)比度。此外，將一種顏色應(yīng)用到幾個(gè)元素上，表示它們?cè)谀撤N程度上是有相關(guān)性的。例如，您可以為購(gòu)買按鈕選擇紅色，以便人們?cè)谛枰獣r(shí)直觀地找到它們。
大腦對(duì)大膽的顏色反應(yīng)強(qiáng)烈，這就是為什么明亮的顏色組合很容易被注意和記住的原因。色彩豐富的用戶界面設(shè)計(jì)，在眾多顏色較輕的產(chǎn)品中容易脫穎而出。顏色的選擇需要基于目標(biāo)受眾的喜好和市場(chǎng)調(diào)查。
此外，如果一個(gè)公司擁有明亮的企業(yè)顏色應(yīng)用于商標(biāo)和品牌項(xiàng)目，那使用同樣顏色在其網(wǎng)站或移動(dòng)應(yīng)用上也是一個(gè)好方法。這種方式連接公司所有的溝通渠道，創(chuàng)造了一致性的視覺解決方案，并且提高了品牌知名度。
為了傳達(dá)正確的語氣、信息和號(hào)召用戶做出預(yù)期的行動(dòng)，設(shè)計(jì)師需要知道顏色會(huì)影響我們的情緒和行為。我們的大腦會(huì)對(duì)顏色做出反應(yīng)，而我們通常不會(huì)注意這點(diǎn)。這項(xiàng)名為“顏色心理學(xué)”的研究表明，當(dāng)我們的眼睛感知到一種顏色時(shí)，大腦就會(huì)向內(nèi)分泌系統(tǒng)發(fā)出信號(hào)，釋放負(fù)責(zé)情緒變化的荷爾蒙。
適當(dāng)選擇顏色有助于讓用戶處于一種促使他們采取行動(dòng)的心理狀態(tài)，并設(shè)置合適的氛圍將正確的信息傳遞給用戶。比如，如果設(shè)計(jì)師設(shè)計(jì)了一個(gè)與自然或園藝相關(guān)的產(chǎn)品的UI，很有可能會(huì)選擇用綠色和藍(lán)色。通過這種方式，設(shè)計(jì)將從一開始就與一種產(chǎn)品或服務(wù)類型相關(guān)聯(lián)。您可以在我們的文章《顏色對(duì)用戶行為的影響》中找到對(duì)顏色含義的具體描述。
明亮的顏色和漸變，是UI設(shè)計(jì)中的最流行的趨勢(shì)。如今，可以在不同類型的數(shù)字產(chǎn)品中看到這種運(yùn)用，而嚴(yán)格的商業(yè)風(fēng)格的限制似乎被拋在了一邊。
明亮的漸變色彩在用戶界面上可以帶來一種現(xiàn)代化感和新鮮的想法。結(jié)合最新趨勢(shì)設(shè)計(jì)的APP或網(wǎng)站往往引人注目，盡管競(jìng)爭(zhēng)激烈，仍能吸引用戶的注意力。
那些認(rèn)為顏色能靠直覺和審美隨意混合的觀念是錯(cuò)誤的。如果你想要?jiǎng)?chuàng)造和諧的視覺構(gòu)圖，那么關(guān)于顏色如何起作用以及它們?nèi)绾螀f(xié)作的基本知識(shí)是必不可少的。
在UI中應(yīng)用的顏色越鮮艷，搭配就越困難。為了讓用戶感到愉悅和舒適，設(shè)計(jì)師努力將平衡和和諧融入到用戶界面設(shè)計(jì)中。色彩協(xié)調(diào)是指在設(shè)計(jì)中以最吸引人、最有效的方式來安排色彩，以供用戶感知。和諧的顏色組合有助于對(duì)網(wǎng)站或APP獲得一個(gè)不錯(cuò)的第一印象。顏色理論定義了一些基本的顏色方案，下面這些配色方案被證明是有效的。
單色，色彩和諧是基于一種顏色和它的各種色調(diào)。
類似色，該方案適用于顏色輪上相鄰的顏色。
互補(bǔ)色，它是在色輪上相互放置的顏色的混合，目的是產(chǎn)生高對(duì)比度。
多色互補(bǔ)，這個(gè)方案與前一個(gè)方案相似，但是它使用了更多的顏色。例如，如果你選擇藍(lán)色，你需要取另外兩個(gè)相鄰的顏色，表示黃色和紅色。
三元色，它是基于三個(gè)獨(dú)立的顏色，在色輪上是等距的。專業(yè)人士建議使用一種顏色作為主調(diào)，其他顏色作為輔助。
四色，tetradic配色方案使用四個(gè)顏色從車輪是互補(bǔ)的。如果你把選中顏色上的點(diǎn)連起來，它們就形成了矩形。
大膽的顏色可以作為在UI中進(jìn)行重音的工具，但它也可能成為重音消失的原因。許多鮮明的顏色在一個(gè)單一的視覺組成會(huì)帶來了失去突出元素的風(fēng)險(xiǎn)，因?yàn)樗麄兂蔀橐粋€(gè)色彩種制造混亂的一部分。
這就是為什么推薦設(shè)計(jì)師使用60%-30%-10%的比例。最重要的部分應(yīng)該是主色調(diào)，三分之一的構(gòu)圖采用第二色，10%的部分應(yīng)該選擇有助于形成重音的顏色。這樣的比例被認(rèn)為是令人愉快的，因?yàn)樗试S逐漸感知所有的視覺元素。
創(chuàng)造數(shù)字產(chǎn)品的核心階段之一是用戶研究。定義和分析目標(biāo)受眾，使設(shè)計(jì)師了解他們對(duì)網(wǎng)站或應(yīng)用程序的期望。年齡、性別和文化會(huì)影響潛在用戶的喜好。例如，孩子們很喜歡黃色，但當(dāng)我們長(zhǎng)大后，黃色通?？雌饋聿荒敲从形?。男人和女人通常喜歡冷酷的顏色，如藍(lán)色，綠色。不像女人，男人通常喜歡白色、黑色和灰色。
明亮的顏色也是如此。即使您是設(shè)計(jì)一個(gè)有趣的APP，也需要考慮目標(biāo)受眾的具體情況。中年人通常更喜歡輕松的用戶界面，他們可能不喜歡屏幕上很重的顏色去分散注意力。
正如我們上面所說，明亮的顏色可以產(chǎn)生大量的對(duì)比度，幫助突出重要的UI元素，并提供良好的易讀性和可讀性。然而，過多的對(duì)比度可能會(huì)起到不好的效果，尤其是在移動(dòng)界面上，因?yàn)樗鼈兊目臻g有限，可以在不同的環(huán)境下使用。
小屏幕、環(huán)境光和明亮的字體使對(duì)比度高的圖像在用戶眼中顯得很難看。這就是為什么在移動(dòng)UI設(shè)計(jì)中使用明亮的顏色需要注意顏色之間的對(duì)比度，這樣人們?cè)陂喿x文字時(shí)會(huì)感到舒服。
顏色是大師手中的一件偉大的工具，和其他任何工具一樣，它也有它的優(yōu)點(diǎn)和缺點(diǎn)。為了有效地使用它，需要考慮它的所有方面，以便能夠找到適合設(shè)計(jì)任務(wù)和目標(biāo)的解決方案。
歡迎在文章評(píng)論區(qū)留言，讓我們一起成長(zhǎng)。
作者： 愛設(shè)計(jì)的狐貍 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
你是否有在聽別人說某某原理法則時(shí)一臉懵B的時(shí)候？明明知道這個(gè)原理卻說不出它的名字？不要緊，本文就來介紹與人機(jī)交互設(shè)計(jì)相關(guān)的15個(gè)常見的設(shè)計(jì)心理學(xué)原理，約13000字，幫助你了解產(chǎn)品的定位，需求目的和交互邏輯，洞悉用戶的各種行為，也為自己的設(shè)計(jì)予以理論支撐。
1956年美國(guó)科學(xué)家米勒對(duì)人類短時(shí)間記憶能力進(jìn)行了研究，他注意到年輕人的記憶廣度為5-9個(gè)單位，就是7±2法則。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。
因?yàn)槿四X處理信息的能力有限，所以它通過把信息分成塊和單元來處理復(fù)雜問題。7±2法則應(yīng)用很廣泛，例如iPhone通訊錄中的手機(jī)號(hào)碼被分割成”xxx-xxxx-xxxx“的形式，還有銀行卡號(hào)、身份證號(hào)，我們總是喜歡把一長(zhǎng)串?dāng)?shù)字拆分開來讀寫，目的就是降低記憶成本，提高信息的易讀性，從而達(dá)到視覺防錯(cuò)的作用。
Web導(dǎo)航欄選項(xiàng)卡數(shù)量不超過9個(gè)
在設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航時(shí)，如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序，那么數(shù)量應(yīng)該控制在7個(gè)左右（不超過9個(gè)），如蘋果、Dribbble、behance等網(wǎng)站的導(dǎo)航分類。
Web導(dǎo)航欄選項(xiàng)卡數(shù)量過多時(shí)
如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)樹狀層級(jí)結(jié)構(gòu)來展示各級(jí)別關(guān)系，但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和Dribbble，把更多子類別收在二級(jí)目錄里。
移動(dòng)端選項(xiàng)卡導(dǎo)航
在移動(dòng)端應(yīng)用設(shè)計(jì)中，常見的電商app例如奈雪和樂凱撒分類模塊，兩個(gè)產(chǎn)品的商品分類布局形式很相似，都是用了選項(xiàng)卡的方式來分類商品，層級(jí)明確，相應(yīng)的提升了用戶找尋單品的效率。
Tabbar區(qū)標(biāo)簽最多不超過5個(gè)
在移動(dòng)應(yīng)用設(shè)計(jì)中，底部Tabbar最少3個(gè)，最多為5個(gè)（幾乎沒幾個(gè)超過5個(gè)），這樣做除了減輕用戶記憶負(fù)擔(dān)，超過5個(gè)會(huì)降低視覺和操作上的體驗(yàn)。事實(shí)上就算只有4個(gè)，我們也經(jīng)常想不起微信底部的4個(gè)Tab分別是啥。
頂部導(dǎo)航欄頁(yè)簽
我們看到的大部分app頂部導(dǎo)航欄的頁(yè)簽數(shù)量都嚴(yán)格遵循了7±2法則，雖然在橫軸可無限滑動(dòng)，
但在顯示區(qū)域只保持7±2法則的顯示數(shù)量，例如馬蜂窩、飛豬旅行等。
金剛區(qū)圖標(biāo)不超過8個(gè)
我們常說的“八大金剛”就是一屏顯示8個(gè)圖標(biāo)，超過的則放在第二屏。如果兩行10個(gè)，往往第十個(gè)是“更多”入口，總的來說也沒超過9個(gè)。
banner文案不超過9個(gè)字
產(chǎn)品運(yùn)營(yíng)banner主文案字?jǐn)?shù)通?？刂圃?個(gè)字以內(nèi)，在設(shè)計(jì)時(shí)也通常把長(zhǎng)標(biāo)題一分為二排兩行，便于用戶快速閱讀，提升點(diǎn)擊率。
在交互設(shè)計(jì)中，7±2法則是減少用戶認(rèn)知負(fù)荷，提升用戶體驗(yàn)的重要環(huán)節(jié)。同時(shí)還強(qiáng)調(diào)了在設(shè)計(jì)過程中對(duì)產(chǎn)品的預(yù)見性，避免在不斷為產(chǎn)品添加功能時(shí)，破壞原有的視覺基礎(chǔ)。
0無需說明書
喬布斯曾說過：“蘋果應(yīng)該創(chuàng)造所有人都可以使用的產(chǎn)品，即使沒有用戶指南”。
1 一看就會(huì)
簡(jiǎn)單易懂，看一眼就明白你想說什么，不用教學(xué)就知道怎么用。
2秒法則
所謂“2秒法則”，是指用戶在使用某類系統(tǒng)時(shí)的等待時(shí)長(zhǎng)不超過2秒。在極短的時(shí)間內(nèi)展示重要信息，給用戶留下深刻的第一印象。這里的2秒只是一個(gè)象征意義上的表達(dá)，也許有一點(diǎn)隨意，但是這卻是一個(gè)合理的數(shù)量級(jí)。我們熟知的“F”瀏覽模式其實(shí)就是間接縮短用戶看到重要信息的時(shí)長(zhǎng)，達(dá)到快速瀏覽的目的。
進(jìn)入App的首頁(yè)加載時(shí)間如果過長(zhǎng)就會(huì)導(dǎo)致用戶產(chǎn)生厭煩情緒，很容易退出甚至卸載App的行為。因此我們看到許多應(yīng)用將首頁(yè)加載時(shí)的空白頁(yè)進(jìn)行占位圖設(shè)計(jì)。
下拉刷新也是一個(gè)設(shè)計(jì)點(diǎn)，為避免刷新時(shí)間過長(zhǎng)，設(shè)計(jì)師通常會(huì)在加載動(dòng)畫上做文章。充滿趣味性的動(dòng)效能安撫用戶焦躁不安的心情，無形中降低了用戶對(duì)等待時(shí)間的感知。
APP里面的banner設(shè)計(jì)要有視覺沖擊力，如果兩秒之內(nèi)沒有抓住用戶的眼球，可能就被用戶忽略了。
因此，在設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面時(shí)，用戶等待的時(shí)間越短，用戶體驗(yàn)越佳。反之，就會(huì)讓用戶產(chǎn)生焦慮的情緒。
3次點(diǎn)擊法則
用戶在3次點(diǎn)擊之內(nèi)如果還沒有找到他們想要的信息或了解網(wǎng)站特色，他們就會(huì)離開該網(wǎng)站。這條原則突出了清晰的導(dǎo)航，符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級(jí)的重要性。(來自《眾妙之門》P133)
其實(shí)在交互體驗(yàn)中，點(diǎn)擊的次數(shù)往往是無關(guān)緊要的。只要每次點(diǎn)擊都是無需思考的，毫不費(fèi)力地順勢(shì)進(jìn)行，那么用戶的挫敗感就會(huì)大大降低。如果你的網(wǎng)站能夠讓用戶知道他在哪里，從哪里來，要到哪里去，并且能夠讓用戶了解如何完成目標(biāo)，這樣的點(diǎn)擊即使有10次也是沒有問題的。例如，在京東購(gòu)買一件商品需要經(jīng)過“立即購(gòu)買>確定>提交訂單>選擇支付方式”4次點(diǎn)擊才能到訂單支付頁(yè)面完成購(gòu)買，這過程中可能還穿插其他的點(diǎn)擊行為（比如選擇地址、優(yōu)惠券），用戶并沒有感受到不方便，使用過程流暢而自然。
在可用性測(cè)試領(lǐng)域，“三次點(diǎn)擊”定律一直是一個(gè)很具爭(zhēng)議內(nèi)容。體現(xiàn)在以下幾點(diǎn)：
·研究表明，用戶在超過3次點(diǎn)擊還沒到達(dá)想去的頁(yè)面時(shí)，往往并沒有退出網(wǎng)站，而是會(huì)繼續(xù)多點(diǎn)幾次；
·當(dāng)把一個(gè)3次點(diǎn)擊就能到達(dá)的流程改為4次點(diǎn)擊的時(shí)候，用戶發(fā)現(xiàn)目標(biāo)頁(yè)面的能力反而提升了600%；
·合理的導(dǎo)航系統(tǒng)比點(diǎn)擊次數(shù)更重要；
·比起“3次點(diǎn)擊”，有人提出了“1次點(diǎn)擊”定律，即用戶的每一次點(diǎn)擊都應(yīng)該讓他們更接近目標(biāo)，同時(shí)盡量減少能干擾實(shí)現(xiàn)這一目標(biāo)的因素；
·用戶抱怨要花很長(zhǎng)時(shí)間才能找到某個(gè)產(chǎn)品，實(shí)際上他們是在抱怨無法找到想要的東西，如果用戶找到了想要的東西，他們就不會(huì)抱怨點(diǎn)擊的次數(shù)了；
英國(guó)心理學(xué)家William Edmund Hick認(rèn)為，在簡(jiǎn)單的判斷場(chǎng)景中：一個(gè)人所面臨的選擇越多，做出決定所花的時(shí)間就越長(zhǎng)。有時(shí)候在選擇中花費(fèi)太長(zhǎng)時(shí)間從而導(dǎo)致決策失敗。
生活中我們也經(jīng)常會(huì)面臨選擇困難癥，比如早上起床就糾結(jié)今天穿什么？中午去食堂就會(huì)糾結(jié)吃什么？造成我們?nèi)绱思m結(jié)的原因就是因?yàn)檫x擇太多了（遠(yuǎn)古人就沒這些煩惱，尋找食物時(shí)逮著什么就吃什么）。
在設(shè)計(jì)中的應(yīng)用
應(yīng)用到界面設(shè)計(jì)中也是如此，選項(xiàng)越多，意味著用戶做出決策的時(shí)間越長(zhǎng)。
例如APP Store首頁(yè)，改版前的首頁(yè)把眾多app平鋪出來，對(duì)目的不明確的用戶來說選擇有點(diǎn)多。改版后的首頁(yè)大幅減少了App的數(shù)量，卡片的設(shè)計(jì)方式簡(jiǎn)潔且目標(biāo)清晰。
不得不面對(duì)較多選項(xiàng)時(shí)， 對(duì)主要和次要的選項(xiàng)做視覺權(quán)重區(qū)分，做好設(shè)計(jì)上的歸類，提升用戶做決定的效率。例如美團(tuán)外賣金剛區(qū)第一行5個(gè)入口的圖標(biāo)在尺寸和表現(xiàn)手法上都比下面的入口圖標(biāo)要大更醒目?！拔业摹表?yè)面把一些低頻率功能或不太重要的功能收納到“設(shè)置”里，此外還可以通過置灰、鎖定等方法間接減少選項(xiàng)，降低干擾。
對(duì)于多流程的任務(wù)進(jìn)行分步操作，讓用戶專注眼前任務(wù)。 例如Clubhouse注冊(cè)時(shí)，把需要用戶選擇的選項(xiàng)分步引導(dǎo)完成，讓用戶能專注當(dāng)前行為。
對(duì)于多種類別的選項(xiàng)應(yīng)當(dāng)做二次分類的區(qū)分，我們都知道電商平臺(tái)的品類繁多，僅通過單一分類是不夠的，比如數(shù)碼頻道下面還分相機(jī)、影音娛樂、數(shù)碼配件、智能設(shè)備、電子教育等大的分類。商品詳情頁(yè)的篩選功能也是貼合使用場(chǎng)景來設(shè)計(jì)的，所以分類不怕多，就怕混亂。
適用邊界
雖然選擇越少，用戶做決策的時(shí)間越短，但這并不是提高用戶體驗(yàn)的唯一標(biāo)準(zhǔn)，過度的減少選項(xiàng)，可能導(dǎo)致負(fù)面效果。
如上圖右，如果在刪除App的彈窗中只有一個(gè)“刪除”選項(xiàng)，沒有明顯的取消之類的途徑，那么用戶會(huì)覺得特別難受，感覺被強(qiáng)迫去刪除。如果當(dāng)下有急需使用手機(jī)處理一些事情，那么這樣會(huì)把這種負(fù)面情緒給無限放大，讓用戶抓狂。
?？硕芍饕苡绊懹谶x項(xiàng)的多少，但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個(gè)選項(xiàng)（學(xué)渣竊喜），那也太容易蒙了，這就是希克定律在答案試題中的局限性。
?？硕墒且粋€(gè)可以適用于設(shè)計(jì)的指南，記住要盡量減少用戶在一次決策中要做的選項(xiàng)，因?yàn)闆Q策效率是一個(gè)產(chǎn)品導(dǎo)致用戶流失的重要原因之一。引導(dǎo)用戶在明確的選項(xiàng)之間進(jìn)行選擇，以便快速將他們送到某個(gè)地方（例如賬單支付），這將大大提升用戶體驗(yàn)并達(dá)到你的目標(biāo)。
費(fèi)茨定律由心理學(xué)家Paul Fitts提出，用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長(zhǎng)，目標(biāo)越大時(shí)間越短。舉例來說，你伸手去拿桌子上的咖啡杯，開始你的手臂迅速地往杯子位置移動(dòng)，接著你會(huì)放慢速度直至找到杯子把手，這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。
如上圖所示，如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo)target，最短路徑一定是D，最短路徑上容錯(cuò)的最長(zhǎng)路徑是D+W，只要水平上移動(dòng)超過了D+W你就點(diǎn)不到了，而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以D為正比W為反比的函數(shù)的和。
詳細(xì)解釋如下，圖中紅色方塊代表點(diǎn)擊目標(biāo)，虛線代表移動(dòng)路徑，此時(shí)因?yàn)榧t色方塊目標(biāo)較大，所以用戶從任何一處點(diǎn)擊都很容易（可以用鼠標(biāo)在屏幕任意點(diǎn)移至紅色方塊試試）。
相反，紅色方塊目標(biāo)變小，快速點(diǎn)擊就會(huì)困難很多，很難一次到位。
但如果紅色方塊目標(biāo)很小距離很近的話，因?yàn)橐苿?dòng)范圍小，也能準(zhǔn)確的點(diǎn)擊到。
按鈕越大越容易點(diǎn)擊
在頁(yè)面中，大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的觸達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。
將按鈕放置在離開始點(diǎn)較近的地方
夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域，相比常見頂部搜索欄更方便操作，效率更高。
相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊
注冊(cè)登錄界面，通常將「注冊(cè)」和「登錄」放到一起，不僅可以在視覺上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知，還可以減少在他們之間的距離 。
適用邊界
費(fèi)茨定律鼓勵(lì)減少距離，增加目標(biāo)大小以提升用戶效率，但反過來亦適用。比如iPhone關(guān)機(jī)按鈕，沒有使用點(diǎn)擊關(guān)閉，而采用滑動(dòng)操作，還把按鈕放在屏幕頂部，這樣明顯增加了操作難度，進(jìn)而避免了用戶誤操作。
App彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方，希望用戶先完成彈窗提示的任務(wù)。還有啟動(dòng)頁(yè)廣告，喜歡把“跳過”按鈕放在難以點(diǎn)擊的右上角（恰飯重要），以提高用戶的誤觸機(jī)率提高轉(zhuǎn)化。
思考小結(jié)
按鈕越大越容易點(diǎn)擊，因此在程序開發(fā)中，會(huì)增加按鈕點(diǎn)擊的熱區(qū)范圍，減輕用戶精準(zhǔn)點(diǎn)擊的壓力。但也不能過分的大，容易引起誤觸；
讓相關(guān)聯(lián)的內(nèi)容更靠近彼此，用視覺手法增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知。距離產(chǎn)生美，注意不要靠的太近，會(huì)出事；
將按鈕放置在離出發(fā)點(diǎn)較近的地方，比如頁(yè)面主按鈕一般會(huì)放在屏幕底部易操作區(qū)域；
屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)樵谄聊贿吘壓徒锹湮恢糜?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">“無限可選中”的屬性，可以大膽操作而無需“微調(diào)”，參見macOS底部dock欄；
定律的反向使用可以適用一些特殊場(chǎng)景，比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能；
“任何事物都具有其固有的復(fù)雜性，無法簡(jiǎn)化”。
泰斯勒定律（Tesler’s Law）由Larry Tesler于1984年提出，也稱「復(fù)雜度守恒定律」。
該定律認(rèn)為：每一個(gè)過程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。
生活中很多我們習(xí)以為常，感覺便捷方便的生活方式，是無數(shù)卓越的數(shù)學(xué)家、工程師、設(shè)計(jì)師等無數(shù)的時(shí)間投入，才實(shí)現(xiàn)的某個(gè)小功能，是他們把這些復(fù)雜性轉(zhuǎn)移到自己身上替我們簡(jiǎn)化了。
說回移動(dòng)端，每個(gè)應(yīng)用中都有其無法簡(jiǎn)化的復(fù)雜度，也不能按照我們個(gè)人意愿去除這些功能。這就是為什么飛機(jī)稿都簡(jiǎn)潔好看，而一搬到線上就面目全非。常見的復(fù)雜性轉(zhuǎn)移有：“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉(zhuǎn)移跳轉(zhuǎn)，比如：頂部導(dǎo)航欄的更多圖標(biāo)，就是將常用的功能整合并隱藏在首頁(yè)設(shè)計(jì)的更多功能模塊中，把用戶的操作范圍轉(zhuǎn)移到另一個(gè)地方。
除此之外，還有一些降低操作復(fù)雜度的方法：
刪除、組織、隱藏
視覺層面的“降噪”方法，刪除會(huì)干擾用戶操作的選項(xiàng)；功能分類明確，圍繞用戶行為組織信息內(nèi)容；隱藏那些不常用而又不能少的功能，延遲及階段性展示?？偟膩碚f就是將復(fù)雜的信息收起來，展示重要且簡(jiǎn)潔的界面。
簡(jiǎn)化交互設(shè)計(jì)
可以用代碼節(jié)省用戶操作時(shí)間的地方，是互聯(lián)網(wǎng)人一致的追求。例如，B站的一鍵三連，用戶長(zhǎng)按點(diǎn)贊按鈕，會(huì)同時(shí)觸發(fā)點(diǎn)贊、投幣和收藏，省時(shí)省力。
算法解放“生產(chǎn)力”
個(gè)性化算法就是通過技術(shù)手段，將用戶復(fù)雜度降低，而轉(zhuǎn)移到開發(fā)者身上。抖音為什么會(huì)讓人上癮？是算法知道了你的喜好，專推給你喜歡的內(nèi)容而不用自己去找，誰都喜歡私人定制。這對(duì)用戶來說是一件好事，但就像魯迅說的：“你覺得好，一定是有人在負(fù)重前行”，這里的簡(jiǎn)化復(fù)雜的難度就轉(zhuǎn)移到設(shè)計(jì)和開發(fā)身上了，還逼得機(jī)器去學(xué)習(xí)。例如抖音、淘寶、知乎首頁(yè)推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。
我們常說以用戶為中心去設(shè)計(jì)，就需要從用戶角度出發(fā)，在交互設(shè)計(jì)中盡量簡(jiǎn)化操作的復(fù)雜度，降低學(xué)習(xí)成本。但如“復(fù)制粘貼之父” Larry Tesler (1945-2020) 所說：“任何事物都具有其固有的復(fù)雜性，無法簡(jiǎn)化”。因此，如何取得復(fù)雜度的“平衡點(diǎn)”就是重要的部分，是讓工程師及設(shè)計(jì)師花費(fèi)大量時(shí)間去降低產(chǎn)品的使用難度，還是在設(shè)計(jì)中保留一定的復(fù)雜度是我們需要思考的事。
該原理是由麥肯錫國(guó)際管理咨詢公司顧問Barbara Minto提出的理論，她強(qiáng)調(diào)結(jié)論先行，論點(diǎn)自上而下。
你是否遇到過這樣的場(chǎng)景，部門開會(huì)時(shí)有人口若懸河的講了半天，到最后你都不知道他想說什么。所以如果開會(huì)時(shí)你會(huì)走神，這不怪你，只怪講演者說話沒有邏輯，沒有重點(diǎn)。
金字塔原理指示結(jié)構(gòu)化表達(dá)遵循結(jié)論先行的原則，即任何問題都能歸納出一個(gè)中心點(diǎn)，讓受眾能夠第一時(shí)間清楚你想談?wù)摰闹黝}。然后由數(shù)個(gè)論據(jù)作支撐，而這些一級(jí)論據(jù)可以繼續(xù)由數(shù)個(gè)二級(jí)論據(jù)支撐，如此延伸，狀如金字塔。自上而下，上層影響下層。
應(yīng)用到交互設(shè)計(jì)上，即將信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示，再根據(jù)用戶在這個(gè)界面上所愿意停留時(shí)間逐級(jí)給予更多細(xì)節(jié)補(bǔ)充。以京東的商品詳情頁(yè)為例，首先金字塔的最上層是用戶目標(biāo)明確直接進(jìn)行“立即購(gòu)買”的底部全局按鈕，其次是商品的頭圖和用戶評(píng)價(jià)這些，讓用戶了解更多信息，進(jìn)一步促成購(gòu)買，最后一層是提供商品相關(guān)的全部信息、參數(shù)、評(píng)分等，確保交易的最終完成。在這個(gè)過程中，用戶在每一層花的時(shí)間也在逐級(jí)增加，呈金字塔狀。
映射到設(shè)計(jì)師身上也是如此，從設(shè)計(jì)新人到設(shè)計(jì)總監(jiān)，中間差的就是一個(gè)完整的設(shè)計(jì)技能金字塔。就像升級(jí)打怪，每完成一項(xiàng)任務(wù)獲得相應(yīng)的經(jīng)驗(yàn)值，累積的經(jīng)驗(yàn)值幫助我們更快的升到下一級(jí)。當(dāng)把工作中的需要攻克的難題一一解決之后，你的設(shè)計(jì)水平會(huì)在不知不覺中更加精進(jìn)，形成一套自己的設(shè)計(jì)風(fēng)格，成為一名優(yōu)秀的設(shè)計(jì)師。
有趣的是，把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下，激勵(lì)用戶成長(zhǎng)。它告訴我們：
用戶的需求是永遠(yuǎn)滿足不完的，所以什么值得做，什么是可分階段去實(shí)現(xiàn)的是決策人需要明白的。如喬布斯所說：“消費(fèi)者并不知道自己需要什么，直到我們拿出自己的產(chǎn)品，他們就發(fā)現(xiàn)，這是我要的東西”；
不斷完善主要功能，以滿足金字塔頂?shù)暮诵挠脩羧?。決策者常常添加一些自己想要的而不是用戶想要的需求，比如在信息流中添加一個(gè)廣告位；
如何優(yōu)化完善產(chǎn)品架構(gòu)，檢驗(yàn)產(chǎn)品策略的合理性和完整性；
防錯(cuò)原則由世界著名的品質(zhì)管理專家新鄉(xiāng)重夫提出，即在過程失誤發(fā)生之前加以防止，是一種在作業(yè)過程中采用自動(dòng)作用、報(bào)警、標(biāo)識(shí)等手段。使操作人員不用特別注意也不會(huì)失誤的方法。
防錯(cuò)原則認(rèn)為大部分的意外都是由于設(shè)計(jì)的疏忽，而不是人為操作失誤，可以通過優(yōu)化設(shè)計(jì)把過失降到最低。該原則最初用于工業(yè)管理，后來應(yīng)用于界面交互設(shè)計(jì)中，當(dāng)使用條件沒有滿足時(shí)，常常通過功能失效來表示。
自動(dòng)檢測(cè)提示
bilibili在登錄時(shí)輸入框沒有內(nèi)容或沒有輸密碼時(shí)，登錄按鈕處于禁用的置灰狀態(tài)，只有兩者都滿足了才可以正常點(diǎn)擊。此外登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、郵箱錯(cuò)誤等不同的錯(cuò)誤。通常必須賬號(hào)和密碼同時(shí)滿足且匹配才能成功。
Twitter發(fā)帖時(shí)只允許用戶輸入140個(gè)字，為了提醒用戶，其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個(gè)字符，超過會(huì)以負(fù)數(shù)警示。知乎發(fā)布文章標(biāo)題過長(zhǎng)時(shí)也會(huì)提示錯(cuò)誤預(yù)警。
消除可能的失誤
防錯(cuò)法則認(rèn)為大部分的出錯(cuò)都是產(chǎn)品設(shè)計(jì)的不夠優(yōu)秀，而不該責(zé)怪用戶操作疏忽，通過設(shè)計(jì)手法可以把出錯(cuò)率降到最低。防錯(cuò)法則的核心觀點(diǎn)是，如何有效的在用戶出錯(cuò)之前就盡量避免錯(cuò)誤的發(fā)生。比如，美團(tuán)外賣在接受短信驗(yàn)證碼時(shí)，系統(tǒng)會(huì)自動(dòng)提取驗(yàn)證碼在鍵盤上方顯示，用戶點(diǎn)一下就可以自動(dòng)填寫，省去了跳出應(yīng)用——打開短信——記住驗(yàn)證碼——再輸入的繁瑣過程，有效預(yù)防了出錯(cuò)的機(jī)率。還有微信在綁定銀行卡時(shí)也是通過掃描銀行卡自動(dòng)提取賬號(hào)，避免手動(dòng)輸入的出錯(cuò)率。
將失誤降至最低
二次確認(rèn)，在一些比較重要的場(chǎng)景讓用戶二次確認(rèn)，通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結(jié)果，進(jìn)一步降低出錯(cuò)率。例如，最近大家都在用的報(bào)稅App，會(huì)在提交信息前再次確認(rèn)。
視覺暗示
可在視覺（置灰或隱藏）上屏蔽那些不能選的選項(xiàng)，避免用戶點(diǎn)擊后才報(bào)錯(cuò)或點(diǎn)擊沒反應(yīng)。
其次，一些不可恢復(fù)的操作，視覺上通常會(huì)給強(qiáng)標(biāo)識(shí)。例如，刪除短信時(shí)的文字顏色“變紅”。
為用戶犯的錯(cuò)買單
當(dāng)用戶輸入錯(cuò)誤信息時(shí)，比如打錯(cuò)字，系統(tǒng)應(yīng)該給予用戶想要的信息，而不是無動(dòng)于衷，冷漠視之。
范圍限制
其實(shí)限制用戶的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個(gè)很好的策略。例如，Airbnb訂房可選日期和設(shè)置鬧鐘時(shí)的時(shí)間范圍。
研究得出，使用產(chǎn)品時(shí)有77.7%的錯(cuò)誤都是人為的，防錯(cuò)法則可以幫助設(shè)計(jì)師站在用戶體驗(yàn)的角度考慮設(shè)計(jì)方案，做到操作前、中、后都有及時(shí)的反饋，預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài)，讓用戶更快完成目標(biāo)，幫助用戶減少出錯(cuò)率。
每次拿起U盤插入電腦時(shí)，我就呆住了，到底朝那個(gè)方向才是對(duì)的？
防呆（Fool-proofing）是一種預(yù)防矯正的行為約束手段，運(yùn)用避免產(chǎn)生錯(cuò)誤的限制方法，使出錯(cuò)的機(jī)會(huì)降至最低，進(jìn)而達(dá)到“第一次就把工作做對(duì)”之境界。
設(shè)計(jì)師應(yīng)謹(jǐn)記：不要認(rèn)為用戶是專家。比如，我們都知道“漢堡”圖標(biāo)就是菜單，點(diǎn)擊這個(gè)按鈕就會(huì)調(diào)出某些功能。但是設(shè)計(jì)師忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是面包屑、什么是抽屜式導(dǎo)航、什么是3Dtouch、怎樣雙指滑動(dòng)。更何況普通用戶并不會(huì)研究App，在他們眼中產(chǎn)品只是眾多工具中的一個(gè)。因此，一定要把交互和設(shè)計(jì)做的簡(jiǎn)單，通用的圖標(biāo)、功能和交互方式最好保持用戶熟悉的樣子，減輕用戶重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁(yè)面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶做選擇題，這些都是有效防呆的好方法。
△頁(yè)面的中主按鈕更突出
防呆設(shè)計(jì)是預(yù)防錯(cuò)誤發(fā)生的方法，讓非專業(yè)、無經(jīng)驗(yàn)的用戶可以高效完成正確操作，不要讓用戶去思考，而是我們時(shí)時(shí)為用戶思考。
又被稱作“簡(jiǎn)單有效原理”：“如無必要，勿增實(shí)體?！?
通俗點(diǎn)去理解“如無必要，勿增實(shí)體”可以理解為“不要浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下，要求得越少的那個(gè)就越好，越有價(jià)值”。
應(yīng)用到設(shè)計(jì)學(xué)領(lǐng)域，該法則認(rèn)為做產(chǎn)品時(shí)功能上不可過于繁瑣，應(yīng)該保證簡(jiǎn)潔和工具化。例如，產(chǎn)品中為用戶提供了收藏功能是否就不再需要喜歡？提供了喜歡是不是不再需要收藏？一定要保證功能上的克制。不必要的設(shè)計(jì)元素會(huì)導(dǎo)致使用效率降低，還會(huì)增加不可預(yù)知的后果。建議在不損及功能的前提下，干掉多余的元素，當(dāng)兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的時(shí)，選擇較為簡(jiǎn)單的那一個(gè)有利于更好地傳達(dá)內(nèi)容更好地用戶體驗(yàn)。
總的來說，我們可以結(jié)合《簡(jiǎn)約至上》一書中提到的刪除、組織、隱藏、轉(zhuǎn)移四個(gè)策略來將復(fù)雜的設(shè)計(jì)和體驗(yàn)變得更加簡(jiǎn)單。
刪除：關(guān)注核心，讓用戶注意力集中在自己要完成的目標(biāo)上，刪除不必要的功能、流程和造成視覺混亂的元素等；
組織：繁瑣的功能通過分塊，被組織成清晰的層次結(jié)構(gòu)。還記得我們前面說到的“7±2法則”嗎，把項(xiàng)組織到7加減2個(gè)塊中；分塊越少，選擇越少，用戶負(fù)擔(dān)約輕；
隱藏：隱藏那些主流用戶很少使用，但自身更新需要但功能。通過漸進(jìn)展示和適時(shí)出現(xiàn)的方法減少干擾；
轉(zhuǎn)移：把合適的功能轉(zhuǎn)移到合適的設(shè)備上去。讓用戶感覺簡(jiǎn)單的一個(gè)重要前提，就是先搞清楚把什么工作交給計(jì)算機(jī)，把什么工作留給用戶。
小測(cè)試，下列飲料中哪一種給你印象最深刻呢？文末揭曉。
可口可樂、雪碧、芬達(dá)、嶗山可樂、7喜、美年達(dá)
雷斯托夫效應(yīng)又稱隔離效應(yīng)（isolation effect），以及新奇效應(yīng)（novelty effect），前蘇聯(lián)心理學(xué)家馮·雷斯托夫認(rèn)為，某個(gè)元素越是違反常理，就越引人注意，收到更多的關(guān)注。
一樣?xùn)|西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。比如人生中的很多第一次，第一次高考、大學(xué)的第一天、初戀、第一份工作等等。該差異也會(huì)出現(xiàn)在新奇面孔、電話號(hào)碼記憶中。奇特的面孔和特殊的電話號(hào)碼更能被人記住。
該理論以多種不同的方式應(yīng)用到設(shè)計(jì)中，最明顯的就是如果想要突出某個(gè)重點(diǎn)內(nèi)容，就要使它特殊化，通過色彩、尺寸、留白、字體粗細(xì)等設(shè)計(jì)手段。利用對(duì)比來凸顯想要表達(dá)的重要信息。例如金剛區(qū)、tab欄的運(yùn)營(yíng)活動(dòng)廣告，特殊化的設(shè)計(jì)讓它們?cè)诒尘爸忻摲f而出。
個(gè)人中心的會(huì)員卡為了吸引用戶注意，增加開通率，都成了重點(diǎn)設(shè)計(jì)對(duì)象。
與以往不同的界面設(shè)計(jì)可以更加的吸引用戶，加深用戶的記憶，同時(shí)擴(kuò)大了活動(dòng)對(duì)用戶的影響力。例如每年淘寶的雙11首頁(yè)設(shè)計(jì)都與往常不同。
Google doodle 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì)，把logo設(shè)計(jì)成與這個(gè)日子相關(guān)的插畫或涂鴉，與平時(shí)的 logo 形成差異化，幫助人們更好地記住這個(gè)日子。
因此我們?cè)诮缑嬖O(shè)計(jì)中，若想讓用戶對(duì)哪個(gè)模塊或者是元素引起注意或點(diǎn)擊，就可以打破常規(guī)對(duì)該元素進(jìn)行強(qiáng)調(diào)設(shè)計(jì)，使他在背景中脫穎而出。但是不要任何元素都強(qiáng)調(diào)，因?yàn)槭裁炊紡?qiáng)調(diào)就等于什么都沒強(qiáng)調(diào)，就沒有重點(diǎn)，所以要謹(jǐn)慎使用這個(gè)方法。
回到開篇的題目，答案是「嶗山可樂」。相比其他飲料，嶗山可樂遇到的少，反而成了最特別的一個(gè)了。你的答案是什么？歡迎在下方留言探討。
食之無味，棄之可惜
損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí)，認(rèn)為損失更加令他們難以忍受。 同量的損失帶來的負(fù)效用為同量收益的正效用的2.5倍。比如，丟100塊錢的痛苦感要遠(yuǎn)高于你撿到100塊錢帶來的幸福感，也就是說要至少撿到300塊才能平復(fù)之前的心情。
生活中類似的栗子還有很多，比如旅游時(shí)，雖然這個(gè)景點(diǎn)很爛，人們依然覺得來都來了，還是要看完再走才“不虧”；吃自助餐時(shí)，明明吃不下那么多，可想到花了那么多錢，就要盡可能的多吃才算“回本”，真是應(yīng)了那句話：“食之無味，棄之可惜”；花了50塊買了張電影票，過了10分鐘發(fā)現(xiàn)是部爛片，就算在電影院睡覺也不愿提前走，覺得這50塊錢不能白花...
那么，該如何將“損失厭惡”賦能給產(chǎn)品設(shè)計(jì)呢？
最典型的莫過于電商App中的各類券滿天飛，比如：買二送一、3件7折、倒計(jì)時(shí)xx小時(shí)后恢復(fù)原價(jià)等等。商家就是為了營(yíng)造現(xiàn)在不買就會(huì)錯(cuò)過的套路，用戶也會(huì)覺得失之可惜。一年一度的天貓雙11，京東618，還有情人節(jié)、中秋節(jié)等各種有的沒的節(jié)日都是商家利用“損失厭惡”心理為基礎(chǔ)刺激消費(fèi)。
我們App的用戶粘性不太理想，增加一個(gè)“簽到”功能吧，產(chǎn)品經(jīng)理如是說。如是我們看到各種簽到得禮品，贏紅包等活動(dòng)。中間還不能中斷，要連續(xù)簽到多少天才能得到獎(jiǎng)勵(lì)，用戶也擔(dān)心中斷的損失。
某網(wǎng)盤下載文件時(shí)，會(huì)給你一個(gè)10秒VIP高速下載的體驗(yàn)，計(jì)時(shí)過后又恢復(fù)到龜速，讓你恨的牙癢癢。雖然這招有點(diǎn)損，但用戶體驗(yàn)到了VIP的快感，很多人還是會(huì)乖乖成為付費(fèi)會(huì)員。
產(chǎn)品運(yùn)營(yíng)中會(huì)經(jīng)常發(fā)一些優(yōu)惠券，雖然知道自己不會(huì)用，也要先領(lǐng)了再說。這些券也都有時(shí)間限制，快過期的提醒也會(huì)加快用戶決策。還有0元開通會(huì)員，套路是第一個(gè)月免費(fèi)，次月開始按正常價(jià)自動(dòng)續(xù)費(fèi)，典型的“騙”進(jìn)來養(yǎng)肥了再“殺”。
人天生會(huì)對(duì)危險(xiǎn)的，不好的東西避而遠(yuǎn)之。如是我們就看到保險(xiǎn)行業(yè)，他們會(huì)用一些負(fù)面信息（空難、車禍）刺激你，用戶就會(huì)產(chǎn)生焦慮，自然就想規(guī)避掉這些概率小的風(fēng)險(xiǎn)。例如購(gòu)買機(jī)票時(shí)的意外險(xiǎn)，QQ退出登錄時(shí)的提示。
還有就是有用戶自己的內(nèi)容的東西，一般不會(huì)輕易舍去。拿我個(gè)人來說，飛書一直是我的寫作工具，后來看到幾個(gè)更好用的軟件，但要想到把原來的這么多東西全部轉(zhuǎn)移過去也是件很心累的事，太麻煩，還是繼續(xù)用飛書好了。QQ這個(gè)“古老”的軟件，估計(jì)很多人好久都沒打開過了吧，但是讓你刪了它，你還是不愿意的，因?yàn)槟巧厦嬗泻芏嗲啻旱幕貞洝?
用戶會(huì)將大部分時(shí)間花在其它網(wǎng)站上，因此他們會(huì)希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣，擁有相同的使用模式和習(xí)慣。
Jakob定律是由Jakob Nielsen提出的，他認(rèn)為用戶在其他網(wǎng)站所積累的經(jīng)驗(yàn)教會(huì)了他們?nèi)绾问褂镁W(wǎng)站，所以他們會(huì)希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣，相似的使用方式，在使用你的產(chǎn)品、服務(wù)、內(nèi)容和信息的時(shí)候，他們不會(huì)感到恐慌，而是輕車熟路。該原則鼓勵(lì)設(shè)計(jì)師遵循常見的設(shè)計(jì)模式，以避免混淆用戶或?qū)е赂叩恼J(rèn)知成本。
例如YouTube2017年改版前后的對(duì)比，在新版中，網(wǎng)站框架和功能上幾乎沒動(dòng)，只是在UI上做了順應(yīng)新的設(shè)計(jì)準(zhǔn)則，比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒太大區(qū)別，而且還給用戶提供了舊版的選擇。
在移動(dòng)端App中也應(yīng)如此，在具有相同功能的頁(yè)面，盡量保持一致。大到頁(yè)面底層框架（比如電商應(yīng)用中的購(gòu)物流程），小到UI設(shè)計(jì)中的一個(gè)按鈕，一個(gè)圖標(biāo)，甚至一句微文案。
在設(shè)計(jì)產(chǎn)品時(shí)，要先延續(xù)大眾早已習(xí)慣的概念模型。然后再?gòu)淖约旱漠a(chǎn)品出發(fā)，對(duì)其進(jìn)行改善。而不是從零開始制定自以為是的流程。
日常使用的各類修圖軟件，版式都高度相似，中間是圖片，各種濾鏡、貼紙、調(diào)整等功能都放在底部操作區(qū)域，很多相同功能的名稱都一樣。這是用戶最熟悉的布局，可降低用戶在同類軟件使用的學(xué)習(xí)成本提升使用效率。
也許你會(huì)質(zhì)疑當(dāng)所有產(chǎn)品都遵循相同都設(shè)計(jì)模式，會(huì)讓產(chǎn)品同質(zhì)化嚴(yán)重，答案是必然的。此時(shí)需要深入了解用戶的目標(biāo)和心智模型（用戶訪談、用戶畫像、用戶體驗(yàn)地圖等），并將其應(yīng)用到我們的產(chǎn)品設(shè)計(jì)中去，縮小我們與用戶心智模型之間的差距，從而獲得良好的用戶體驗(yàn)。上文YouTube例子中，就是通過簡(jiǎn)單的用戶授權(quán)（新舊版本選擇），避免了心智模型的不一致會(huì)帶來的問題，當(dāng)用戶準(zhǔn)備好隨時(shí)可以切換到新的版本。相反的案例Snapchat在18年設(shè)計(jì)改版時(shí)，因?yàn)樾碌牟季治茨艽_保改版前后用戶心智模型的一致性，導(dǎo)致大量用戶流向競(jìng)爭(zhēng)對(duì)手Instagram那里了。
但是也要注意設(shè)備之間的差異，比如在移動(dòng)端“漢堡包”式菜單是個(gè)不錯(cuò)的方案，可是放到桌面端可能并不太友好，因?yàn)榇笃聊豢梢暦秶?，小小的漢堡包圖標(biāo)很容易被忽略，這時(shí)候平鋪出來可能會(huì)更好。
思考總結(jié)
1、用戶會(huì)把在其他產(chǎn)品使用中已熟悉的操作習(xí)慣轉(zhuǎn)移到另一個(gè)看起來相似的產(chǎn)品上；
2、利用現(xiàn)有的思維模型，使用戶可以專注于自己的目標(biāo)上，而不是學(xué)習(xí)新的操作方式；
3、在進(jìn)行必要的改版時(shí)，請(qǐng)給用戶過渡到新版本的機(jī)會(huì)，即可以選擇短時(shí)間內(nèi)繼續(xù)使用舊版本；
看名稱挺拗口，另一種翻譯叫做“對(duì)角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁(yè)面是由左上至右下的視線流，左上角是視覺第一落點(diǎn)區(qū)，右下角是視覺最終落點(diǎn)區(qū)，因此右上角和左下角都是一個(gè)強(qiáng)烈的視覺盲點(diǎn)區(qū)，大多數(shù)時(shí)容易被忽略。
在進(jìn)行信息排布時(shí)，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個(gè)視覺落點(diǎn)可以展示重要操作。運(yùn)用視覺元素來創(chuàng)建一條虛擬的“線”，讓用戶的視線跟隨左上到右下這條對(duì)角線移動(dòng)，符合用戶習(xí)慣性的眼動(dòng)規(guī)律。
古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁(yè)，在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購(gòu)買按鈕。
我們都知道一般頁(yè)面按鈕都在界面底部是因?yàn)殡x手近，方便操作，但不僅僅如此。還因?yàn)闉g覽是用戶的第一行為，他們的視線會(huì)根據(jù)頁(yè)面元素進(jìn)行移動(dòng)，最終停留在底部結(jié)尾的地方。
看各種社交產(chǎn)品評(píng)論、點(diǎn)贊的位置，就知道產(chǎn)品希望用戶先干什么的想法。
彈窗的按鈕擺放一般都是左「取消」右「確認(rèn)」，目的是讓用戶最快地看到主要操作內(nèi)容。
余額寶的「轉(zhuǎn)出」在左，「轉(zhuǎn)入」在右，畢竟誰也不想財(cái)往外流是吧。
既然如此，為什么“發(fā)布”頁(yè)面的按鈕都在右上角呢？因?yàn)榘l(fā)布頁(yè)是屬于“編輯頁(yè)面”，需要用戶謹(jǐn)慎操作，這里關(guān)注的核心應(yīng)該是可編輯內(nèi)容區(qū)域，而不是按鈕本身。
類似的例子還有很多，設(shè)計(jì)中與此視覺流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局，合理運(yùn)用這些節(jié)奏模式，使用者會(huì)跟隨你“設(shè)計(jì)”的視覺流和運(yùn)動(dòng)規(guī)律來瀏覽頁(yè)面，有效提高用戶閱讀的節(jié)奏和理解能力。
美國(guó)心理學(xué)家亞伯拉罕·馬斯洛（Maslow.A.H.）從人類動(dòng)機(jī)的角度提出需求層次理論，該理論強(qiáng)調(diào)人的動(dòng)機(jī)是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求，依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于，它告訴了我們，人在滿足了基本的需求之后，就要去實(shí)現(xiàn)更高的需求和目標(biāo)。
馬斯洛需求層次理論有兩個(gè)基本出發(fā)點(diǎn)，一是人人都有需求，某層需求滿足后，另一層需求才出現(xiàn)；二是在上層需求未獲滿足前，首先滿足迫切需求，該需求滿足后，后面的需要才顯示出其激勵(lì)作用。例如，在能感受到愛之前，他們的生理和安全需求一定要得到滿足。
回歸到產(chǎn)品，一款產(chǎn)品，最核心的是解決用戶的需求。馬斯洛需求層次理論，為產(chǎn)品的需求分析指明了方向。
生理需求：滿足人的最基本需求，如衣、食、住、行、生理方面的需求。諸如美團(tuán)外賣、淘寶、馬蜂窩等為日常生活提供方便的應(yīng)用；
安全需求：人生安全、財(cái)產(chǎn)保險(xiǎn)，也是強(qiáng)需求。如是各類投資理財(cái)軟件層出不窮。
社交需求：包括友情、親情、愛情多個(gè)層次，滿足人類社會(huì)關(guān)系，讓每個(gè)人不再是孤單的個(gè)體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛；
尊重需求：每個(gè)人都有被尊重的需求，都希望展現(xiàn)自己，獲得人們認(rèn)可。此需求可以深度結(jié)合在社交需求中。
自我實(shí)現(xiàn)：最高層級(jí)的需求，完成與自己的能力相稱的一切事情，實(shí)現(xiàn)自己理想的需要。結(jié)合到產(chǎn)品可以理解為能滿足自己外在展示（炫耀）的需求，如各類美顏軟件，美化后的照片曬到朋友圈，給人看到最好的一面。
由此規(guī)律可以看出，越靠近底層需求越是剛需，越往上，就變得越來越不必要，如自我實(shí)現(xiàn)，變得可有可無，不再是所有人的剛需。一個(gè)優(yōu)秀的產(chǎn)品，深諳人性滿足用戶核心需求，才能形成持續(xù)穩(wěn)定高用戶粘性的產(chǎn)品。
序列效應(yīng)法則又叫系列位置效應(yīng)，是指一種記憶現(xiàn)象： 在列舉項(xiàng)目時(shí),排在最前面與最后面的元素，要比排在中間的更容易讓人記住。
因?yàn)槿藗儗?duì)排在頭、尾的項(xiàng)目，要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗，卻很少人知道第二位奧爾德林；班級(jí)里我們一般都知道成績(jī)最好的第一名和倒數(shù)第一名，至于排在中間的很難記住。因此對(duì)排在開頭的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果，稱為“首位效應(yīng)”( primacy effect)。對(duì)排在結(jié)尾的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果，稱為“近因效應(yīng)”( recency effect )。
分類頁(yè)簽中，我們通常都會(huì)記得“精選”、“熱門”這類標(biāo)簽，是希望給用戶進(jìn)入App后看到的主要內(nèi)容。這就是“首位效應(yīng)”，把重要性高的內(nèi)容放在首要位置。
我們都知道界面中“返回”按鈕放在左上角，除了操作習(xí)慣和防誤觸外，還因?yàn)樗霈F(xiàn)在頁(yè)面左上角最開始的地方，更長(zhǎng)久地儲(chǔ)存在長(zhǎng)期記憶之中，需要“返回”時(shí)能夠快速回憶出來。
tabbar數(shù)量不管是3個(gè)還是5個(gè)，用戶通常都會(huì)記得第一個(gè)“首頁(yè)”和最后一個(gè)“我的”，對(duì)排在中間的都會(huì)選擇性的忽略掉。
有時(shí)候新上一個(gè)功能，產(chǎn)品想提高它的位置引起用戶注意，會(huì)和“我的”互換位置。例如網(wǎng)易云音樂，新版本中把“我的”放在第三個(gè)tab，為了提升“云村”重要性，把它放置最后一個(gè)tab，正是利用了“近因效應(yīng)”。
近因效應(yīng)常用于及時(shí)進(jìn)行反饋的設(shè)計(jì)界面中，比如點(diǎn)贊、評(píng)論、分享等功能置于底部不僅可加深印象，同時(shí)用戶在看到有趣的內(nèi)容，想要評(píng)論或分享時(shí)，不用等到文章看完即可操作。從而增強(qiáng)內(nèi)容粘性，提高互動(dòng)率。
用戶的記憶具有系列位置效應(yīng)，而且人的短期記憶非常有限，通過序列效應(yīng)法則的應(yīng)用，我們可以幫助用戶減輕記憶負(fù)擔(dān)。在排列項(xiàng)目時(shí)，把重要的放在首位或末尾，以達(dá)到最好的記憶效果。
作者： 印跡_ 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在筆者剛學(xué)習(xí)動(dòng)效那會(huì)兒，因?yàn)閳?zhí)著于鉆研軟件技法，而忽略了動(dòng)效的基本原理，導(dǎo)致作出了很多生硬的動(dòng)效設(shè)計(jì)。和很多事情一樣，動(dòng)效設(shè)計(jì)如果違背了自然規(guī)律，必定會(huì)損害產(chǎn)品的可用性。
在用戶界面中，動(dòng)效不僅僅是一種視覺裝飾，而是一種強(qiáng)大的力量，它可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。
本文給大家介紹了十二項(xiàng)最基本的動(dòng)效設(shè)計(jì)原理，這些都適合用于UX/UI設(shè)計(jì)項(xiàng)目中，是非常有用的運(yùn)動(dòng)原理，建議收藏反復(fù)食用。
緩動(dòng)效果模擬了現(xiàn)實(shí)世界中對(duì)象隨時(shí)間加速或減速的方式，它適用于所有運(yùn)動(dòng)的元素。自然界中沒有東西是從一點(diǎn)呈線性地移動(dòng)到另一點(diǎn)。現(xiàn)實(shí)中，物體在移動(dòng)時(shí)往往會(huì)加速或減速。我們的大腦習(xí)慣于期待這種運(yùn)動(dòng)，因此在做動(dòng)畫時(shí)，應(yīng)利用此規(guī)律。自然的運(yùn)動(dòng)會(huì)讓用戶對(duì)你的應(yīng)用感覺更舒適，從而產(chǎn)生更好的總體體驗(yàn)。
線性動(dòng)畫
沒有任何速度上的變化的的動(dòng)畫稱為線性動(dòng)畫，如坐標(biāo)圖所示，運(yùn)動(dòng)的曲線成直線狀態(tài)。這種動(dòng)畫效果往往顯得很僵硬，不自然，讓用戶覺得不協(xié)調(diào)。一般來說，應(yīng)避免線性運(yùn)動(dòng)。
緩出動(dòng)畫
運(yùn)動(dòng)的開頭速度很快，結(jié)尾處逐漸減速的動(dòng)畫稱為緩出動(dòng)畫。運(yùn)動(dòng)曲線呈拋物線狀態(tài)，緩出動(dòng)畫最適合界面里面的動(dòng)效，快速的入場(chǎng)給人反應(yīng)很快的感覺。
緩入動(dòng)畫
和緩出相反，緩入動(dòng)畫是開頭慢結(jié)尾快，這就像自然落下的球體一樣，速度越來越快。但是，從交互的角度來看，緩入可能讓人感覺有點(diǎn)不自然，因?yàn)榻Y(jié)尾很突然；在現(xiàn)實(shí)中移動(dòng)的物體往往是減速，而不是突然停止。緩入還有讓人感覺行動(dòng)遲緩的不利效果，這會(huì)對(duì)網(wǎng)站或應(yīng)用的響應(yīng)速度給人的感覺產(chǎn)生負(fù)面影響。
緩入緩出動(dòng)畫
把緩入和緩出曲線連接在一起，就是完整的緩入緩出動(dòng)畫，它的運(yùn)動(dòng)過程可以想象一輛汽車從起步到停車的動(dòng)作，可以實(shí)現(xiàn)比單純緩出更生動(dòng)的效果。由于開頭慢、中間快和結(jié)尾慢，動(dòng)畫將有更強(qiáng)的對(duì)比，會(huì)讓用戶感到愉悅。
因此，緩動(dòng)原理實(shí)際上是使動(dòng)畫不再那么尖銳或生硬的過程。
變形是由一個(gè)形態(tài)變成另一個(gè)形態(tài)，這種形變是動(dòng)畫里最引人注目的。通過元素形態(tài)的轉(zhuǎn)變，告知用戶元素的狀態(tài)或作用發(fā)生了改變。
例如這個(gè)下載動(dòng)畫，下載完成后變形為按鈕，其實(shí)是符合用戶預(yù)期的。這種無縫轉(zhuǎn)換，可以提高用戶的認(rèn)知度，提
升了動(dòng)畫的連貫性。
在動(dòng)效中，利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的，通過物體運(yùn)動(dòng)的變形狀態(tài)就能很好的體現(xiàn)出來。
當(dāng)元素被克隆時(shí)，可表達(dá)出元素與元素之間的某種連續(xù)性。在此原理中，如何讓物體的出現(xiàn)和離開具有連續(xù)性、關(guān)系和過渡，是信息準(zhǔn)確傳遞的關(guān)鍵。
例如這個(gè)發(fā)布按鈕，點(diǎn)擊它會(huì)創(chuàng)建多個(gè)新對(duì)象，引導(dǎo)注意力，非常清晰的表達(dá)了他們之間的關(guān)系。
還有這個(gè)運(yùn)動(dòng)健康頁(yè)面，在添加練習(xí)項(xiàng)目時(shí)，從主按鈕克隆生成一系列練習(xí)項(xiàng)目，選擇完成后原路返回。
利用覆蓋原理能讓原本有限的空間得以延伸，用以顯示額外的可見元素，補(bǔ)償了用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。覆蓋原理在UI設(shè)計(jì)中常用于列表橫滑，通過覆蓋，隱藏相關(guān)操作，以減少視覺上的干擾。
在某種程度上，作為設(shè)計(jì)師，“層”的概念是顯而易見的，不言而喻。我們用層來設(shè)計(jì)，層的概念被深深地內(nèi)化了。但是，我們必須小心區(qū)分“制作”和“使用”的過程。
作為不斷參與“制作”過程的設(shè)計(jì)師，我們要非常熟悉我們正在設(shè)計(jì)的物體的所有部分（包括隱藏部分）。然而，作為用戶，那些不可見的部分是根據(jù)定義和實(shí)踐，在視覺和認(rèn)知上隱藏的。
偏移和延遲原理是表明元素之間的層級(jí)與關(guān)系，在新元素入場(chǎng)時(shí)利用偏移和延遲讓信息或界面元素按照秩序進(jìn)退場(chǎng)，定義對(duì)象關(guān)系和層次結(jié)構(gòu)。
在上面的示例中，浮動(dòng)操作按鈕 (FAB) 轉(zhuǎn)換為頭部背景。數(shù)據(jù)圖表在時(shí)間的延遲下依次出現(xiàn)，暗示用戶這里的信息與其他元素之間的區(qū)別，吸引用戶注意力。
遮罩是決定元素變化的結(jié)果是什么，通過暫時(shí)使對(duì)象顯示和隱藏，以連續(xù)無縫的方式轉(zhuǎn)換，保持了敘事流程的效果。雖然對(duì)象本身保持不變，但因?yàn)樗辛诉吔绾臀恢?，這兩個(gè)因素決定了對(duì)象是什么。
例如這個(gè)轉(zhuǎn)動(dòng)的咖啡杯，借助遮罩，通過改變logo的位置和吸管的朝向，造成杯子在自轉(zhuǎn)的假象。
在上面的例子中，音樂封面改變了邊界形狀和位置，但沒有改變內(nèi)容。轉(zhuǎn)換發(fā)生在用戶執(zhí)行操作后激活，是相當(dāng)巧妙的技巧。
父子關(guān)系是將界面元素關(guān)聯(lián)起來的重要原則，創(chuàng)建出空間和時(shí)間層次關(guān)系。它最適合作為“實(shí)時(shí)”互動(dòng)，例如拖動(dòng)列表順序時(shí)，其他信息會(huì)同步跟上。
回想一下，很多元素屬性都可以創(chuàng)造這種聯(lián)動(dòng)的繼承關(guān)系，例如不透明度、位置、旋轉(zhuǎn)、縮放、形狀、顏色等。
文本和數(shù)字的變化是如此普遍，以至于我們忽略了它們，而我們卻沒有給它們帶來區(qū)別和嚴(yán)謹(jǐn)來評(píng)估它們?cè)谥С挚捎眯苑矫娴淖饔谩?
數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情，既可以發(fā)生在實(shí)時(shí)活動(dòng)中，也可以發(fā)生在非實(shí)時(shí)活動(dòng)中。它可能是時(shí)間、收入、速度、游戲得分等。當(dāng)我們使用動(dòng)態(tài)的數(shù)值變化時(shí)，它激活了一種“神經(jīng)反饋”，用戶會(huì)覺得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的，就感覺與現(xiàn)實(shí)的聯(lián)系會(huì)減少。
數(shù)值的變化在各類金融理財(cái)和日歷APP中經(jīng)常出現(xiàn)，數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對(duì)數(shù)據(jù)的價(jià)值產(chǎn)生影響；如上圖中的數(shù)值的動(dòng)態(tài)變化，讓用戶感知到自己可能有能力影響到數(shù)據(jù)，提升了參與活動(dòng)的意愿。
蒙層與原理四的覆蓋類似，只不過蒙層帶有透明屬性，它擋住了后面的信息，但又沒有全擋住。iOS中常見的毛玻璃效果就是如此，它讓用戶意識(shí)到正在操作的對(duì)象，還有另一個(gè)世界。拓展了Z軸的層次結(jié)構(gòu)，補(bǔ)償用戶體驗(yàn)中的單一視野。
當(dāng)用戶滾動(dòng)時(shí)，在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。其目的是為了建立各元素的層級(jí)關(guān)系，移動(dòng)速度更快的交互式元。對(duì)用戶來說顯得更接近，較慢的非交互式元素，會(huì)退回到背景顯得更遠(yuǎn)，從而更好把內(nèi)容和環(huán)境區(qū)分開來 。
設(shè)計(jì)師可以利用時(shí)間本身來創(chuàng)建這些關(guān)系，告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。用戶不僅認(rèn)為界面對(duì)象現(xiàn)在具有超出視覺設(shè)計(jì)中確定的層次結(jié)構(gòu)，而且現(xiàn)在可以利用這種層次結(jié)構(gòu)，讓用戶意識(shí)到設(shè)計(jì)之前掌握用戶體驗(yàn)內(nèi)容。
維度是將界面的元素多維化，使元素看起來像可翻轉(zhuǎn)的，可折疊的，浮動(dòng)的?？梢允共煌腢I元素實(shí)現(xiàn)無縫的過渡銜接，它通常以折紙維度、浮動(dòng)維度和對(duì)象維度這三種方式來呈現(xiàn)。
此外，維度原理克服了視覺平面中的分層悖論，其中缺乏深度的物體存在于同一平面上，但出現(xiàn)在其他物體的“前面”或“后面”。
折紙維度可以被認(rèn)為是“折疊”或“鉸鏈”的三維界面對(duì)象，它由多個(gè)元素組合成“折紙”結(jié)構(gòu)，隱藏的物體在空間上仍然可以說是“存在”的，即使它們不可見。
浮動(dòng)維度為界面對(duì)象提供了空間起源和離開，使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實(shí)現(xiàn)的。
對(duì)象維度會(huì)產(chǎn)生具有真實(shí)深度和形式的維度對(duì)象，可以看到，雖然在2D層，元素卻可以3D視角呈現(xiàn)真實(shí)的維度。
平移與縮放是電影概念，指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng)，以及畫面中圖像本身的大小從遠(yuǎn)景平滑變化到特寫鏡頭（反之亦然）。
在某些情況下，無法判斷對(duì)象是否正在縮放。可能是在在 3D 空間中向著相機(jī)移動(dòng)，也許是相機(jī)在向?qū)ο笠苿?dòng)，又或者是對(duì)象自身在放大縮小。以下三個(gè)示例說明了可能的情況。
鏡頭平移：被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止，而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。
鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進(jìn)行縮放。
縮放：是指視角和對(duì)象都沒有在空間上移動(dòng)，而是物體本身在縮放（或者我們的視野正在縮小，從而導(dǎo)致圖像放大），這向觀看者傳達(dá)了附加界面對(duì)象在其他對(duì)象或場(chǎng)景“內(nèi)部”的信息。
移動(dòng)還可以結(jié)合維度原則，從而產(chǎn)生更多空間和深度體驗(yàn)，并向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他區(qū)域或內(nèi)容?？s放允許無縫轉(zhuǎn)換 - 實(shí)時(shí)和非實(shí)時(shí) - 支持可用性。在創(chuàng)建空間心智模型時(shí)，Dolly & Zoom Principle 中采用的這種無縫性非常強(qiá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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
創(chuàng)建美觀、可用和高效的UI界面需要花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)細(xì)節(jié)的打磨，本文從視覺和情感化設(shè)計(jì)兩個(gè)方面來說說如何提升UI設(shè)計(jì)的高級(jí)感。
在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計(jì)出來的產(chǎn)品。而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒有氣質(zhì)和品牌感。一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。本節(jié)總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。
1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)
在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營(yíng)造對(duì)比。單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來營(yíng)造更好的對(duì)比效果。
每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）
次要內(nèi)容使用灰色（比如商品介紹）
輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）
類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：
大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）
對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）
▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400
應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識(shí)別。
1.2 統(tǒng)一色調(diào)
選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡。設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。
1.3 干凈的陰影
陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營(yíng)造的陰影效果。
這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。
陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。
1.4 個(gè)性的圖標(biāo)設(shè)計(jì)
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。
標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了。要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本。一般在外賣美食類應(yīng)用中比較常見。
1.5 Tab的設(shè)計(jì)感
Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范。現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。
在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長(zhǎng)條來區(qū)分兩者的狀態(tài)。因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來源。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。
1.6 無框設(shè)計(jì) 去繁從簡(jiǎn)
在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法，使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。
使用不同的背景色來區(qū)分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分。所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?
增加額外的留白
創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了。通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。
1.7 統(tǒng)一設(shè)計(jì)元素
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀。這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。
1.8 符合產(chǎn)品氣質(zhì)的字體
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求。但會(huì)出現(xiàn)一個(gè)問題就是，系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢(shì)上就變?nèi)趿撕芏唷?
1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一
大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
1.10 圖片中尋找色彩
App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式，為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。
1.11 提高圖片質(zhì)量
圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想。而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會(huì)變得美觀、整潔。
1.12 卡片式設(shè)計(jì)
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率。同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。
心理學(xué)認(rèn)為，情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時(shí)，使他產(chǎn)生情感的變化，那么產(chǎn)品便不再冷冰冰，他透過眼前的東西，看到的是設(shè)計(jì)師為了他的使用體驗(yàn)，對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨，人們會(huì)產(chǎn)生愉快、喜愛和幸福的情感。情感化設(shè)計(jì)并不是轟轟烈烈，有時(shí)候僅僅一句文案、一幅插圖、一個(gè)動(dòng)畫就能打動(dòng)人心，使用戶獲得愉悅的使用體驗(yàn)。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺層面，這些簡(jiǎn)單而美好的設(shè)計(jì)細(xì)節(jié)充滿了積極情緒，它是滿足產(chǎn)品的功能性和易用性之后，追求更高層次的目標(biāo)。
2.1 提示性文字
語言是情感化設(shè)計(jì)最直接的利器，擬人化的對(duì)白相比冰冷的話語更能獲得用戶的好感，賦予產(chǎn)品的新的生命力。例如App那些push推送通知，因?yàn)橛脩裘刻焓盏降腜USH實(shí)在是太多了，早已心如止水！這個(gè)時(shí)候，你就需要一條成本低、效率高的PUSH文案，去撩動(dòng)用戶主子們的心。將原本對(duì)用戶的打擾變成一種逗趣，讓人看到會(huì)心一笑。
2.2 下拉刷新
下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作，常見的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式，這種設(shè)計(jì)簡(jiǎn)單、直觀，但毫無設(shè)計(jì)感，不能引發(fā)用戶任何的情緒。
下拉刷新是一種臨時(shí)狀態(tài)，豐富它的設(shè)計(jì)細(xì)節(jié)不會(huì)造成與產(chǎn)品界面的格格不入，相反，一個(gè)富有設(shè)計(jì)感的下拉刷新設(shè)計(jì)能讓產(chǎn)品獲得用戶的好感。例如uc頭條在下拉刷新時(shí)會(huì)蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內(nèi)容，小鹿形象延續(xù)了品牌logo。作為資訊類產(chǎn)品，內(nèi)容更新速度至關(guān)重要，奔跑的小鹿正好隱喻了這一點(diǎn)。用戶也在這種快樂的情緒中對(duì)產(chǎn)品產(chǎn)生好感，瞬間就讓下拉刷新變得生動(dòng)有趣。
2.3 頭像設(shè)計(jì)
個(gè)人中心頁(yè)與用戶信息密切相關(guān)，用戶的虛擬形象在這里得以展現(xiàn)，常見的設(shè)計(jì)是一個(gè)用戶頭像加登陸文字的形式，這種默認(rèn)的頭像設(shè)計(jì)無法得到用戶的認(rèn)同感。
現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像，給用戶更多的選擇。賦予產(chǎn)品一些人格魅力，可以讓產(chǎn)品富有生命力，消除人機(jī)界面的冰冷交互，幫助用戶和產(chǎn)品建立友好的聯(lián)系。例如美團(tuán)外賣和躺平，它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶的屬性，讓用戶產(chǎn)生一種身份的認(rèn)同感。
2.4 缺省頁(yè)化解負(fù)面情緒
通常狀態(tài)是，當(dāng)前頁(yè)面沒有內(nèi)容或無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面。常見的設(shè)計(jì)是圖標(biāo)加提示文字的形式，這種簡(jiǎn)陋的設(shè)計(jì)會(huì)給用戶心理造成很大的落差，陷入負(fù)面情緒中。情感化設(shè)計(jì)在此時(shí)就可發(fā)揮巨大的作用，它通過設(shè)計(jì)手段來減輕用戶在看到一個(gè)毫無內(nèi)容的界面時(shí)所產(chǎn)生的挫敗感。 設(shè)計(jì)師可發(fā)揮的空間很大，根據(jù)產(chǎn)品屬性和品牌延展圖形，結(jié)合動(dòng)效或插畫等情感化設(shè)計(jì)，可以很好的豐富頁(yè)面內(nèi)容。例如躺平的空白頁(yè)呈現(xiàn)出一種賤萌的場(chǎng)景，讓用戶會(huì)心一笑，使產(chǎn)品充滿了趣味性。
2.5 標(biāo)簽欄微動(dòng)效
情感化設(shè)計(jì)變得越來越豐富，圖標(biāo)設(shè)計(jì)上升至可以展示動(dòng)畫效果。通過動(dòng)效的使用，標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁(yè)面時(shí)，不再覺得單調(diào)。精心設(shè)計(jì)的動(dòng)態(tài)效果，能夠緩解用戶等待時(shí)焦躁的心情，從心理上縮短用戶等待時(shí)長(zhǎng)，讓品牌更加深入人心。
2.6 模擬用戶行為
如果一個(gè)產(chǎn)品可以模擬用戶的行為，將用戶代入真實(shí)的情境中，用戶就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會(huì)根據(jù)時(shí)間場(chǎng)景和季節(jié)變化，播放不同的背景音樂來營(yíng)造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時(shí)刻感受到身臨其境的情境。
情感化設(shè)計(jì)可以拉近用戶與產(chǎn)品之間的距離，在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷，為人們帶去情感上的愉悅和感動(dòng)。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片，打開微信對(duì)話框時(shí)就會(huì)自動(dòng)顯示這張圖片，提前預(yù)知了你發(fā)截圖的需求。
再例如很多觀眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣，因?yàn)楹芏鄷r(shí)候坐在影院等彩蛋卻等來沒有彩蛋的結(jié)果只能白白浪費(fèi)了時(shí)間。在「淘票票」上購(gòu)買電影票時(shí)，你會(huì)發(fā)現(xiàn)影片詳情頁(yè)會(huì)有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會(huì)出現(xiàn)在影片的什么位置。有了這個(gè)提示信息，就不必再為了不確定的彩蛋期待浪費(fèi)時(shí)間啦。
2.7 有趣的細(xì)節(jié)設(shè)計(jì)
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒。 在UI設(shè)計(jì)中，有些有趣的設(shè)計(jì)是隱形的，需要用戶自己去發(fā)現(xiàn)，當(dāng)用戶找到這顆彩蛋時(shí)，就會(huì)獲得一份喜悅和樂趣，增強(qiáng)用戶對(duì)產(chǎn)品的探知欲。例如在電腦端打開B站的鬼畜區(qū)長(zhǎng)按這個(gè)返回圖標(biāo)10秒左右，你會(huì)打開鬼畜區(qū)的新世界(⊙o⊙)（友情提示：記得戴上耳機(jī)或調(diào)小音量）其實(shí)長(zhǎng)按「返回」10秒后網(wǎng)頁(yè)下方會(huì)出現(xiàn)一條黑框提示「嘗試輸入字母，發(fā)現(xiàn)鬼畜秘密」。按照提示乖乖輸入字母就會(huì)出現(xiàn)鬼畜明星劃過你的屏幕！
有些有趣的設(shè)計(jì)又是顯性的，目的是讓用戶與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒。例如成為優(yōu)酷視頻會(huì)員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發(fā)彈幕時(shí)使用劇集相關(guān)角色的頭像。帶角色扮演頭像的彈幕，讓發(fā)言更有劇集代入感。這個(gè)彩蛋的設(shè)置一方面強(qiáng)化了會(huì)員身份的尊貴感與特權(quán)性，一方面也豐富了彈幕區(qū)的多樣化，可謂一舉兩得了。
總的來說：UI設(shè)計(jì)的“高級(jí)感”意味著在視覺層面要從細(xì)微之處著手，創(chuàng)造出精致富有設(shè)計(jì)感的畫面；另一方面要從情感化設(shè)計(jì)出發(fā)，使用戶與產(chǎn)品產(chǎn)生情感上的共鳴，獲得更高層次的使用體驗(yàn)。
作者： 印跡_ 來源：站酷
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
設(shè)想一下這樣的畫面，如果在你的Feeds列表里面推薦的是一些機(jī)械鍵盤和游戲裝備，那作為用戶，會(huì)心想“暈，這些東西又不能讓我變瘦變美，跟我啥關(guān)系？往下翻翻再看看有沒有什么可買的東西”。
2. 商戶信息：品牌標(biāo)簽（比方說品牌、優(yōu)質(zhì)商家等）。商戶信息的透出，對(duì)追求品牌的用戶來說是個(gè)有利的促進(jìn)因素。如下圖中商戶的“品牌”標(biāo)簽。
光有這樣的利益點(diǎn)也還不夠，設(shè)計(jì)師需要做的就是將這些信息進(jìn)行表達(dá)，怎樣表達(dá)？設(shè)計(jì)方案將卡片進(jìn)行結(jié)構(gòu)化和組件化。什么是結(jié)構(gòu)化和組件化？如之前的圖（某平臺(tái)的商品卡片結(jié)構(gòu)）
三、興趣點(diǎn)的試探
作者：Sophia的玲瓏閣 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
考拉海購(gòu)，前2屏表達(dá)內(nèi)容，2屏之后全是feeds；
小紅書更不用說了，第一屏就直接開始種草了；
②巧用折疊與展開，進(jìn)行非重點(diǎn)內(nèi)容的隱藏；
③內(nèi)容區(qū)域進(jìn)行多層信息疊加，比方說Instagram的發(fā)布
④利用轉(zhuǎn)移的手法，將復(fù)雜的內(nèi)容用新頁(yè)面進(jìn)行承載，如下圖豆瓣
3.利用好導(dǎo)航結(jié)構(gòu)，同樣的屏幕可以表達(dá)相同等級(jí)的多種內(nèi)容；
4.做模式區(qū)分，在任務(wù)模式下隱藏不必要的信息。如美團(tuán)外賣在滑動(dòng)過程中會(huì)隱藏購(gòu)物車。因?yàn)橛脩舢?dāng)前聚焦的是瀏覽內(nèi)容
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：Sophia的玲瓏閣 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com
<i id="goo6r"></i>