完美，不是因?yàn)闆](méi)有什么可以增加，而是沒(méi)有什么可以減少。

創(chuàng)建美觀(guān)、可用和的UI界面需要花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)細(xì)節(jié)的打磨，本文從視覺(jué)和情感化設(shè)計(jì)兩個(gè)方面來(lái)說(shuō)說(shuō)如何提升UI設(shè)計(jì)的高級(jí)感。 

1、視覺(jué)元素

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來(lái)越像，似乎是同一套模版設(shè)計(jì)出來(lái)的產(chǎn)品。而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒(méi)有氣質(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)單直觀(guān)的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來(lái)學(xué)習(xí)。

1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴(lài)字體大小差異來(lái)營(yíng)造對(duì)比。單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺(jué)權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過(guò)使用顏色的深淺，為元素賦予不同的重要性。如果可以的話(huà)，你甚至可以采用兩到三種顏色：

• 主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）
• 次要內(nèi)容使用灰色（比如商品介紹）
• 輔助性?xún)?nèi)容采用淺灰色（比如發(fā)布日期）

類(lèi)似的，在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ì)較小的字體。

灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺(jué)效果的做法。

但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍。通過(guò)選擇類(lèi)似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問(wèn)題，使文字更容易被識(shí)別。

1.2 統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡。設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。

1.3 干凈的陰影

陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶(hù)的注意力，同時(shí)也能增強(qiáng)畫(huà)面的視覺(jué)層次感。相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見(jiàn)的光源特征，光線(xiàn)從上往下照下來(lái)所營(yíng)造的陰影效果。

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫(huà)面的精致。如果陰影的范圍太小或顏色太深，位置也沒(méi)有偏移，而是聚集在元素的四周，就會(huì)讓畫(huà)面更加扁平，讓視覺(jué)變得厚重，呈現(xiàn)出不精致的畫(huà)面感。

還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫(huà)面感。在UI設(shè)計(jì)中，這種手法不宜過(guò)多使用，否則呈現(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)。我們能否在追求大小一致，圓角一致，線(xiàn)寬一致和配色一致的同時(shí)，為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無(wú)論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見(jiàn)了。要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶(hù)的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶(hù)的認(rèn)知成本。一般在外賣(mài)美食類(lèi)應(yīng)用中比較常見(jiàn)。

1.5 Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范?，F(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。

在視覺(jué)表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)。因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線(xiàn)，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶(hù)熟知的形象是個(gè)絕佳的來(lái)源。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為T(mén)ab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺(jué)上的聯(lián)系，讓用戶(hù)產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺(jué)，又進(jìn)一步強(qiáng)化了用戶(hù)對(duì)品牌形象的認(rèn)知。

1.6 無(wú)框設(shè)計(jì) 去繁從簡(jiǎn)

在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線(xiàn)等，雖然邊框，分割線(xiàn)是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法，使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶(hù)瀏覽的視線(xiàn)，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次，讓畫(huà)面變得干凈，整齊：

使用陰影

陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線(xiàn)更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶(hù)的注意力。

使用不同的背景色來(lái)區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分。所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線(xiàn)，因?yàn)槟愀静恍枰?

增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過(guò)線(xiàn)框來(lái)表現(xiàn)，只要增加留白，讓它們分隔開(kāi)就行了。通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

1.7 統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類(lèi)的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶(hù)，因此可以在展示用戶(hù)頭像和用戶(hù)形象的界面中延續(xù)使用。如果圖形擁有獨(dú)特的外觀(guān)，如橢圓矩形，也可以作為視覺(jué)符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀(guān)。這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了，給用戶(hù)始終如一的一致感。

1.8 符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶(hù)正確的情感意識(shí)。雖然默認(rèn)字體可以滿(mǎn)足大多數(shù)App 的設(shè)計(jì)需求。但會(huì)出現(xiàn)一個(gè)問(wèn)題就是，系統(tǒng)字體的普適性并沒(méi)有什么特色，在一些特定的情境下就顯得收效甚微。例如在運(yùn)動(dòng)類(lèi)App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力、速度的感覺(jué)，換成系統(tǒng)字體后，整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?

1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶(hù)注冊(cè)的時(shí)間成本。通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

1.10 圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶(hù)如沐春風(fēng)的視覺(jué)享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式，為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見(jiàn)，但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫(huà)面變得高級(jí)和富有設(shè)計(jì)感。

1.11 提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶(hù)的情緒，高品質(zhì)的圖片給人愉悅的視覺(jué)享受，產(chǎn)生美好的聯(lián)想。而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線(xiàn)，需要經(jīng)過(guò)裁剪，調(diào)色等過(guò)程才能被使用。即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺(jué)也會(huì)變得美觀(guān)、整潔。

1.12 卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率。同時(shí)卡片式設(shè)計(jì)通常很依賴(lài)視覺(jué)元素，很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。

2、情感化設(shè)計(jì)

心理學(xué)認(rèn)為，情感是人對(duì)客觀(guān)事物是否滿(mǎn)足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶(hù)的內(nèi)心時(shí)，使他產(chǎn)生情感的變化，那么產(chǎn)品便不再冷冰冰，他透過(guò)眼前的東西，看到的是設(shè)計(jì)師為了他的使用體驗(yàn)，對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨，人們會(huì)產(chǎn)生愉快、喜愛(ài)和幸福的情感。情感化設(shè)計(jì)并不是轟轟烈烈，有時(shí)候僅僅一句文案、一幅插圖、一個(gè)動(dòng)畫(huà)就能打動(dòng)人心，使用戶(hù)獲得愉悅的使用體驗(yàn)。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺(jué)層面，這些簡(jiǎn)單而美好的設(shè)計(jì)細(xì)節(jié)充滿(mǎn)了積極情緒，它是滿(mǎn)足產(chǎn)品的功能性和易用性之后，追求更高層次的目標(biāo)。

2.1 提示性文字

語(yǔ)言是情感化設(shè)計(jì)最直接的利器，擬人化的對(duì)白相比冰冷的話(huà)語(yǔ)更能獲得用戶(hù)的好感，賦予產(chǎn)品的新的生命力。例如App那些push推送通知，因?yàn)橛脩?hù)每天收到的PUSH實(shí)在是太多了，早已心如止水！這個(gè)時(shí)候，你就需要一條成本低、效率高的PUSH文案，去撩動(dòng)用戶(hù)主子們的心。將原本對(duì)用戶(hù)的打擾變成一種逗趣，讓人看到會(huì)心一笑。

2.2 下拉刷新

下拉刷新是用戶(hù)在App使用中經(jīng)常進(jìn)行的操作，常見(jiàn)的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式，這種設(shè)計(jì)簡(jiǎn)單、直觀(guān)，但毫無(wú)設(shè)計(jì)感，不能引發(fā)用戶(hù)任何的情緒。

下拉刷新是一種臨時(shí)狀態(tài)，豐富它的設(shè)計(jì)細(xì)節(jié)不會(huì)造成與產(chǎn)品界面的格格不入，相反，一個(gè)富有設(shè)計(jì)感的下拉刷新設(shè)計(jì)能讓產(chǎn)品獲得用戶(hù)的好感。例如uc頭條在下拉刷新時(shí)會(huì)蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內(nèi)容，小鹿形象延續(xù)了品牌logo。作為資訊類(lèi)產(chǎn)品，內(nèi)容更新速度至關(guān)重要，奔跑的小鹿正好隱喻了這一點(diǎn)。用戶(hù)也在這種快樂(lè)的情緒中對(duì)產(chǎn)品產(chǎn)生好感，瞬間就讓下拉刷新變得生動(dòng)有趣。

2.3 頭像設(shè)計(jì)

個(gè)人中心頁(yè)與用戶(hù)信息密切相關(guān)，用戶(hù)的虛擬形象在這里得以展現(xiàn)，常見(jiàn)的設(shè)計(jì)是一個(gè)用戶(hù)頭像加登陸文字的形式，這種默認(rèn)的頭像設(shè)計(jì)無(wú)法得到用戶(hù)的認(rèn)同感。

現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像，給用戶(hù)更多的選擇。賦予產(chǎn)品一些人格魅力，可以讓產(chǎn)品富有生命力，消除人機(jī)界面的冰冷交互，幫助用戶(hù)和產(chǎn)品建立友好的聯(lián)系。例如美團(tuán)外賣(mài)和躺平，它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶(hù)的屬性，讓用戶(hù)產(chǎn)生一種身份的認(rèn)同感。

2.4 缺省頁(yè)化解負(fù)面情緒

通常狀態(tài)是，當(dāng)前頁(yè)面沒(méi)有內(nèi)容或無(wú)網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面。常見(jiàn)的設(shè)計(jì)是圖標(biāo)加提示文字的形式，這種簡(jiǎn)陋的設(shè)計(jì)會(huì)給用戶(hù)心理造成很大的落差，陷入負(fù)面情緒中。情感化設(shè)計(jì)在此時(shí)就可發(fā)揮巨大的作用，它通過(guò)設(shè)計(jì)手段來(lái)減輕用戶(hù)在看到一個(gè)毫無(wú)內(nèi)容的界面時(shí)所產(chǎn)生的挫敗感。 設(shè)計(jì)師可發(fā)揮的空間很大，根據(jù)產(chǎn)品屬性和品牌延展圖形，結(jié)合動(dòng)效或插畫(huà)等情感化設(shè)計(jì)，可以很好的豐富頁(yè)面內(nèi)容。例如躺平的空白頁(yè)呈現(xiàn)出一種賤萌的場(chǎng)景，讓用戶(hù)會(huì)心一笑，使產(chǎn)品充滿(mǎn)了趣味性。

2.5 標(biāo)簽欄微動(dòng)效

情感化設(shè)計(jì)變得越來(lái)越豐富，圖標(biāo)設(shè)計(jì)上升至可以展示動(dòng)畫(huà)效果。通過(guò)動(dòng)效的使用，標(biāo)簽欄切換變得不再死板。用戶(hù)在頻繁切換頁(yè)面時(shí)，不再覺(jué)得單調(diào)。精心設(shè)計(jì)的動(dòng)態(tài)效果，能夠緩解用戶(hù)等待時(shí)焦躁的心情，從心理上縮短用戶(hù)等待時(shí)長(zhǎng)，讓品牌更加深入人心。

2.6 模擬用戶(hù)行為

如果一個(gè)產(chǎn)品可以模擬用戶(hù)的行為，將用戶(hù)代入真實(shí)的情境中，用戶(hù)就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會(huì)根據(jù)時(shí)間場(chǎng)景和季節(jié)變化，播放不同的背景音樂(lè)來(lái)營(yíng)造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時(shí)刻感受到身臨其境的情境。

情感化設(shè)計(jì)可以拉近用戶(hù)與產(chǎn)品之間的距離，在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷，為人們帶去情感上的愉悅和感動(dòng)。洞悉用戶(hù)的行為，換位思考去滿(mǎn)足用戶(hù)的需求，情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片，打開(kāi)微信對(duì)話(huà)框時(shí)就會(huì)自動(dòng)顯示這張圖片，提前預(yù)知了你發(fā)截圖的需求。

再例如很多觀(guān)眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣，因?yàn)楹芏鄷r(shí)候坐在影院等彩蛋卻等來(lái)沒(méi)有彩蛋的結(jié)果只能白白浪費(fèi)了時(shí)間。在「淘票票」上購(gòu)買(mǎi)電影票時(shí)，你會(huì)發(fā)現(xiàn)影片詳情頁(yè)會(huì)有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會(huì)出現(xiàn)在影片的什么位置。有了這個(gè)提示信息，就不必再為了不確定的彩蛋期待浪費(fèi)時(shí)間啦。

2.7 有趣的細(xì)節(jié)設(shè)計(jì)

俗話(huà)說(shuō)：有趣的靈魂萬(wàn)里挑一，可見(jiàn)有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒。 在UI設(shè)計(jì)中，有些有趣的設(shè)計(jì)是隱形的，需要用戶(hù)自己去發(fā)現(xiàn)，當(dāng)用戶(hù)找到這顆彩蛋時(shí)，就會(huì)獲得一份喜悅和樂(lè)趣，增強(qiáng)用戶(hù)對(duì)產(chǎn)品的探知欲。例如在電腦端打開(kāi)B站的鬼畜區(qū)長(zhǎng)按這個(gè)返回圖標(biāo)10秒左右，你會(huì)打開(kāi)鬼畜區(qū)的新世界(⊙o⊙)（友情提示：記得戴上耳機(jī)或調(diào)小音量）其實(shí)長(zhǎng)按「返回」10秒后網(wǎng)頁(yè)下方會(huì)出現(xiàn)一條黑框提示「嘗試輸入字母，發(fā)現(xiàn)鬼畜秘密」。按照提示乖乖輸入字母就會(huì)出現(xiàn)鬼畜明星劃過(guò)你的屏幕！

有些有趣的設(shè)計(jì)又是顯性的，目的是讓用戶(hù)與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒。例如成為優(yōu)酷視頻會(huì)員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發(fā)彈幕時(shí)使用劇集相關(guān)角色的頭像。帶角色扮演頭像的彈幕，讓發(fā)言更有劇集代入感。這個(gè)彩蛋的設(shè)置一方面強(qiáng)化了會(huì)員身份的尊貴感與特權(quán)性，一方面也豐富了彈幕區(qū)的多樣化，可謂一舉兩得了。

文章來(lái)源：UI中國(guó)  作者：漂浮檸檬核Fyin印跡

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在做設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)遇到一個(gè)問(wèn)題，就是一個(gè)按鈕，在同一頁(yè)面的不同情況下，有時(shí)可用，有時(shí)不可用，我們到底是顯示不可用時(shí)的禁用狀態(tài)呢？還是直接隱藏這個(gè)按鈕呢？

大家還是喜歡提這種通用性問(wèn)題，希望有一個(gè)說(shuō)法，可以概括所有情況。但我多次說(shuō)過(guò)，不存在這樣的好事，一定是具體問(wèn)題具體分析的。

尤其是這個(gè)問(wèn)題，想要聊透徹，得用不少例子來(lái)舉證說(shuō)明，不過(guò)也可以通過(guò)總結(jié)的方式長(zhǎng)話(huà)短說(shuō)了。

禁用按鈕的使用，可以從兩個(gè)維度來(lái)分析，分別是：「無(wú)效的禁用狀態(tài)」和「有效的禁用狀態(tài)」。

無(wú)效的禁用狀態(tài)

有一種情況是，在一個(gè)頁(yè)面里，一個(gè)按鈕，可能會(huì)有幾種不同的情況存在。那人要問(wèn)了，既然是一個(gè)頁(yè)面，為什么會(huì)有多種狀態(tài)同時(shí)存在的情況呢？

比如，在出行場(chǎng)景中，普通乘客發(fā)起訂單，司機(jī)接單后是可以發(fā)送消息的（左圖）。但是從第三方渠道來(lái)的乘客，司機(jī)是無(wú)法發(fā)送站內(nèi)消息的，只能通過(guò)電話(huà)聯(lián)系乘客（右圖）。

不同渠道來(lái)的用戶(hù)，司機(jī)端的頁(yè)面會(huì)呈現(xiàn)不同的按鈕狀態(tài)。相同的頁(yè)面，第三方渠道來(lái)的乘客，在司機(jī)端就不需要露出消息按鈕了，這樣可以減少無(wú)效信息對(duì)司機(jī)的干擾，還可以避免司機(jī)習(xí)慣性操作帶來(lái)的無(wú)效反饋，比如點(diǎn)擊消息，顯示「無(wú)法發(fā)送消息」?；蛘唢@示禁用，也會(huì)影響司機(jī)的操作判斷。

從這個(gè)案例中我們可以看出，當(dāng)一個(gè)按鈕在某種情況下始終無(wú)法被觸發(fā)時(shí)，就會(huì)選擇讓它直接消失，而不是呈現(xiàn)禁用狀態(tài)。

很多人在這類(lèi)設(shè)計(jì)里會(huì)給按鈕提供一個(gè)禁用狀態(tài)，以免按鈕消失而打亂頁(yè)面布局。但是要知道，在某種情況下，按鈕無(wú)用時(shí)，無(wú)意義的展示反而會(huì)產(chǎn)生干擾信息，就像上面說(shuō)到的那樣。

所以這里有一個(gè)結(jié)論是：禁用按鈕需要可觸發(fā)的時(shí)機(jī)，如果沒(méi)有這個(gè)時(shí)機(jī)，禁用狀態(tài)就沒(méi)有存在的必要。如果存在，那它也是一個(gè)無(wú)效的狀態(tài)。

既然是無(wú)效的，最好就不要出現(xiàn)了。

有效的禁用狀態(tài)

在上面的例子里，有一個(gè)前提不可忽略，那就是司機(jī)是否可以理解我們不顯示的原因。當(dāng)然，司機(jī)會(huì)接受相關(guān)培訓(xùn)，產(chǎn)品中也會(huì)有渠道標(biāo)識(shí)，所以司機(jī)能夠明白頁(yè)面中存在的差異。

但在其他產(chǎn)品中，當(dāng)狀態(tài)不同，按鈕變化無(wú)法自洽的時(shí)候，又怎么去處理呢？我們就需要通過(guò)合理的解釋來(lái)消除用戶(hù)潛在的困惑。

對(duì)于這點(diǎn)，比較典型的案例是在線(xiàn)上購(gòu)物時(shí)，一件商品會(huì)有多個(gè)類(lèi)型供消費(fèi)者選擇，比如不同的尺寸、型號(hào)等，當(dāng)其中一種類(lèi)型被搶光時(shí)，這個(gè)商品依然是可見(jiàn)的，只是無(wú)法選擇，展示出了禁用狀態(tài)。

在這種場(chǎng)景中，我們不能一下子把其他無(wú)法購(gòu)買(mǎi)的類(lèi)型隱藏，因?yàn)橛脩?hù)需要知道我們所有的商品類(lèi)別，了解商品的全部屬性，盡管當(dāng)下無(wú)法購(gòu)買(mǎi)，但有上新的可能，用戶(hù)依然可以選擇等待，并將其加入收藏，還是會(huì)有機(jī)會(huì)促成這筆交易。而且當(dāng)可選類(lèi)型變多的時(shí)候，只是禁用沒(méi)有庫(kù)存的類(lèi)型，可以使其他可選項(xiàng)保持固定的位置，有利于我們二次搜索和加購(gòu)。這種場(chǎng)景的禁用也是暫時(shí)的，直到商品下架或者上新。

但就像我以前說(shuō)過(guò)的，常常我們見(jiàn)多了的東西，就認(rèn)為是正常的，但它并不一定好的。禁用也是這種情況。

雖然我們現(xiàn)在還是會(huì)在各個(gè)地方看到禁用操作，但是禁用的原由始終沒(méi)有給到用戶(hù)合理的解釋?zhuān)灾劣谠S多人見(jiàn)到類(lèi)似的操作都是一頭霧水。所以在設(shè)計(jì)過(guò)程中，尤其要謹(jǐn)慎對(duì)待，盡可能的避免出現(xiàn)無(wú)法解釋的禁用操作。

好比淘寶的商品選擇頁(yè)面，如今也將原來(lái)的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會(huì)變成「提醒掌柜補(bǔ)貨」。

從原來(lái)的用戶(hù)單方面接收無(wú)法點(diǎn)擊的按鈕，到現(xiàn)在直觀(guān)顯示缺貨，點(diǎn)擊后同時(shí)提醒到商家，這樣的操作從功能角度來(lái)說(shuō)是一個(gè)升級(jí)。

這就是我說(shuō)的，有效與無(wú)效的禁用按鈕之間的區(qū)別。禁用不該是真的禁止使用，而是告知用戶(hù)，它如何可被使用。

小結(jié)

如果一個(gè)按鈕在不同的階段有禁用和可用的狀態(tài)顯示，那么意圖是很明顯的。比如一些活動(dòng)頁(yè)面，某個(gè)按鈕的禁用狀態(tài)是倒計(jì)時(shí)，就像電影的前期宣傳，為電影的上線(xiàn)制造話(huà)題和熱度，來(lái)鼓勵(lì)更多人的觀(guān)看一樣。

對(duì)于按鈕來(lái)說(shuō)，顯示禁用則代表它在滿(mǎn)足一定條件后即可擁有可點(diǎn)擊性，讓我們明確地了解它就在這里，未來(lái)是可操作的。按鈕也有很多的設(shè)計(jì)空間來(lái)為未來(lái)的使用做好鋪墊，特別是營(yíng)銷(xiāo)類(lèi)的活動(dòng)，像是「明日 8 點(diǎn)可搶」、「提醒商家補(bǔ)貨」的按鈕文案，無(wú)一不在傳達(dá)「可用性」的信息，引導(dǎo)用戶(hù)持續(xù)性的關(guān)注。

但是還有一類(lèi)禁用狀態(tài)只是靜默地提示，多出現(xiàn)在表單中，當(dāng)用戶(hù)沒(méi)有完成輸入的時(shí)候則無(wú)法點(diǎn)擊，因?yàn)榭吹亩嗔耍覀兙鸵詾檫@是正常的。但我們都知道它仍可優(yōu)化，比如，在它以禁用狀態(tài)出現(xiàn)時(shí)，用更為友好的方式去提醒用戶(hù)應(yīng)如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。

我們要知道的是，禁用按鈕本身不是一個(gè)特殊的對(duì)象，只是禁用狀態(tài)在頁(yè)面中是一個(gè)特殊的存在，它是產(chǎn)品設(shè)計(jì)中的一種規(guī)則。為什么按鈕不可用，或者說(shuō)一定場(chǎng)景下為什么功能不可用，當(dāng)無(wú)法依靠用戶(hù)直覺(jué)理解的時(shí)候，是需要作出解釋的，也就是怎么禁的問(wèn)題。

但是最開(kāi)始設(shè)計(jì)時(shí)就應(yīng)該去想的是，禁用狀態(tài)對(duì)用戶(hù)和產(chǎn)品的意義在哪里，這和我們設(shè)計(jì)方案時(shí)腦海中涌出的無(wú)數(shù)目標(biāo)一樣，是一個(gè)基礎(chǔ)的出發(fā)點(diǎn)。而后，一切迎刃而解。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

轉(zhuǎn)自：站酷

作者：社田

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

收藏

收藏

收藏

收藏

收藏

轉(zhuǎn)自：站酷

作者：憨寶鴨

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

轉(zhuǎn)自：站酷

作者：是穗啊

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

生意越來(lái)越不好做，是大家目前的普遍狀況，大多數(shù)做生意的手里都有一批貨，急著處理回籠資金卻又賣(mài)不出去，所以我們的愛(ài)航信息平臺(tái)應(yīng)運(yùn)而生。

如果你告訴企業(yè)或者商家出售他的產(chǎn)品或服務(wù)需要支付一部分現(xiàn)金，他肯定會(huì)皺眉，或者選擇放棄。但是，如果你告訴他，他可以使用一些自己的產(chǎn)品或者服務(wù)來(lái)置換廣告位，而不需要花錢(qián)，他肯定會(huì)欣然接受?！皩?shí)際上，仔細(xì)考慮這件事的原因可能是許多人在觀(guān)念中往往都堅(jiān)持“現(xiàn)金為王”的心理。

所謂易貨廣告，就是在企業(yè)或者商家無(wú)法以資金支付廣告位的時(shí)候，可以采用以商品或者服務(wù)來(lái)置換廣告服務(wù)，廣告交易可以不通過(guò)資金的形式，該種廣告置換的方式可在多個(gè)企業(yè)或者商家中進(jìn)行，易貨廣告，是企業(yè)或者商家在不用現(xiàn)金的情況下進(jìn)行置換廣告服務(wù)的有效方式。

互聯(lián)網(wǎng)是提供貨物與廣告置換交易的絕佳平臺(tái)，可以大大提升以物易物的可行性。以物易物這種遠(yuǎn)古時(shí)代的交易方法讓其出現(xiàn)在互聯(lián)網(wǎng)上，其共同點(diǎn)和成功之處就在于，商戶(hù)或企業(yè)總能尋找到自己需要的，而當(dāng)交易物品的價(jià)值相差不是太遠(yuǎn)時(shí)，商戶(hù)或企業(yè)總會(huì)選擇自己需要的。

此外，通過(guò)提供易貨廣告服務(wù)的平臺(tái)，還可幫助企業(yè)或商家有效解決銷(xiāo)售不暢、資金短缺、產(chǎn)能過(guò)剩和庫(kù)存積壓的難題?，F(xiàn)代易貨廣告之所以快速發(fā)展，除了電子商務(wù)的催化作用，還有一個(gè)重要推動(dòng)力就是現(xiàn)代企業(yè)經(jīng)營(yíng)思想的轉(zhuǎn)變，“愛(ài)航信息不僅是一種廣告模式，更會(huì)是一種經(jīng)營(yíng)思想”。

轉(zhuǎn)自：站酷

作者：愛(ài)航信息

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

編輯導(dǎo)讀：產(chǎn)品經(jīng)理在進(jìn)行產(chǎn)品功能規(guī)劃時(shí)，會(huì)遇到來(lái)自各方的需求。這些需求有大有小，有迫在眉睫的也有無(wú)關(guān)緊要的，應(yīng)該如何規(guī)劃產(chǎn)品功能呢？本文將從四個(gè)方面展開(kāi)分析，希望對(duì)你有幫助。

產(chǎn)品功能如何定義？

一款產(chǎn)品一般會(huì)具備一定的盈利點(diǎn)（商業(yè)變現(xiàn)能力）、其獨(dú)特的使用價(jià)值，偶爾還會(huì)摻雜個(gè)人創(chuàng)作時(shí)的產(chǎn)品情懷（初心），像錘子科技入場(chǎng)手機(jī)行業(yè)的時(shí)候，是定位于年輕小眾的用戶(hù)群體，為他們提供個(gè)性觀(guān)感的用戶(hù)體驗(yàn)，雖說(shuō)后來(lái)敗北了，但也曾收獲了一批用戶(hù)的喜愛(ài)，也有因?yàn)檫@個(gè)領(lǐng)域始終存在著它的壁壘，所以不是簡(jiǎn)單的情懷就能做成一款好的產(chǎn)品。

當(dāng)然，如果不是創(chuàng)始人，創(chuàng)作的情懷可能會(huì)體現(xiàn)的沒(méi)那么深刻，但是產(chǎn)品早期的定位在一定程度上已經(jīng)確定了基礎(chǔ)的業(yè)務(wù)方向和發(fā)展的基調(diào)。

很多企業(yè)可以靠一款核心產(chǎn)品，進(jìn)而延伸到其他的產(chǎn)品創(chuàng)造，基礎(chǔ)產(chǎn)品實(shí)現(xiàn)了賺錢(qián)能力后，從而支撐其他的產(chǎn)品的試水，即使失敗，也不至于“關(guān)門(mén)大吉”。

而當(dāng)產(chǎn)品經(jīng)理切入產(chǎn)品設(shè)計(jì)時(shí)，一般有我們常用的兩種產(chǎn)品類(lèi)型，一種是基于基礎(chǔ)核心業(yè)務(wù)延伸的從0到1的項(xiàng)目設(shè)計(jì)，一種是處于生命周期-成長(zhǎng)期中從1到N的產(chǎn)品迭代。

而這2種規(guī)劃產(chǎn)品的功能的方式也是不一樣的。

01 從需求出發(fā)

不管是哪類(lèi)產(chǎn)品，立足點(diǎn)都是基于需求，而需求池也分2種，一種是源源不斷的需求池，一種是寥寥無(wú)幾的需求收集；前者更為切合從1到N的產(chǎn)品，上線(xiàn)后的需求或反饋都是來(lái)自真實(shí)用戶(hù)的聲音，包括主動(dòng)的從現(xiàn)有的產(chǎn)品進(jìn)行回訪(fǎng)、用戶(hù)調(diào)研以及通過(guò)用戶(hù)的反饋和建議收集有效需求。

有了需求，那是最直觀(guān)的，對(duì)應(yīng)的產(chǎn)品功能可以根據(jù)此展開(kāi)進(jìn)行規(guī)劃。

而第2需求類(lèi)型，常常是因?yàn)榫窒抻跊](méi)有經(jīng)驗(yàn)，不熟悉不了解所以需求的聲音很少，這時(shí)候，產(chǎn)品經(jīng)理就需要主動(dòng)的去對(duì)比競(jìng)品，去分析競(jìng)品，解析出產(chǎn)品的核心需求，并且去了解這個(gè)產(chǎn)品的一個(gè)市場(chǎng)背景、規(guī)模和場(chǎng)景范圍了。

當(dāng)然，競(jìng)品分析不是讓你全部照搬抄寫(xiě)別人的產(chǎn)品，這是沒(méi)有靈魂的，作為一個(gè)產(chǎn)品人，是需要有自己的想法的。B端產(chǎn)品的分析，更加傾向于功能模塊及邏輯設(shè)計(jì)，而非用戶(hù)體驗(yàn)或界面的細(xì)致優(yōu)化。

從0到1的產(chǎn)品功能規(guī)劃時(shí)，要明白企業(yè)是屬于某個(gè)行業(yè)的，而行業(yè)的范圍比較廣泛，比如做教育的，器材可以屬于教育裝備的一種，教務(wù)管理系統(tǒng)也可以屬于教育裝備的一種。另外，書(shū)籍、校服、桌椅等面對(duì)的對(duì)象是學(xué)校的，他們也可以說(shuō)自己業(yè)務(wù)涵蓋了教育領(lǐng)域。

所以，我們?cè)O(shè)定或規(guī)劃一種產(chǎn)品時(shí)，往往都是有關(guān)聯(lián)性的，而不是完全切入一個(gè)新興的領(lǐng)域，擼起袖子就干。

當(dāng)然，有能力的并且有錢(qián)的企業(yè)是可以這么做的，但是對(duì)于門(mén)檻較高或需要積淀的領(lǐng)域，他們也不會(huì)貿(mào)然動(dòng)手，起碼會(huì)先觀(guān)望一下，然后找一找這個(gè)領(lǐng)域內(nèi)的老玩家，通過(guò)合作的方式獲得了經(jīng)驗(yàn)值再自己獨(dú)立做，但是做肯定是不會(huì)做相同的事情，老的市場(chǎng)被吃透了，這時(shí)候只有把新的東西注入，才能獲得一些收益，比如把自己獨(dú)特的優(yōu)勢(shì)、互聯(lián)網(wǎng)觀(guān)念或用戶(hù)個(gè)性化體感的設(shè)計(jì)再應(yīng)用到傳統(tǒng)的制造業(yè)中，摸清了其壁壘及門(mén)道，才能走出自己的道路。

02 定義場(chǎng)景

場(chǎng)景是功能使用的具象化，主場(chǎng)景作為該功能的一個(gè)核心定位。如做一款訪(fǎng)客產(chǎn)品，定位于通用性產(chǎn)品，你將考慮到其面對(duì)的對(duì)象，包括：

• 購(gòu)買(mǎi)者：政府單位、企事業(yè)單位、寫(xiě)字樓物業(yè)、小區(qū)物業(yè)、學(xué)校等（看重外觀(guān)、整體系統(tǒng)的業(yè)務(wù)流程及效率、來(lái)訪(fǎng)者的用戶(hù)體驗(yàn)）安全需求較高的場(chǎng)景
• 使用者：公司前臺(tái)、門(mén)衛(wèi)保安（看重產(chǎn)品易用性，且門(mén)衛(wèi)保安等存在學(xué)歷較低、年齡較高等普遍情況）
• 受訪(fǎng)者類(lèi)型：集團(tuán)大廈管理、公司部門(mén)、物業(yè)園區(qū)、政府機(jī)關(guān)、信訪(fǎng)單位，政府機(jī)關(guān)、部隊(duì)、學(xué)校、住宅小區(qū)、寫(xiě)字樓、會(huì)議展會(huì)

用戶(hù)群體則可以細(xì)分：

• 訪(fǎng)客：商務(wù)洽談、應(yīng)聘者、辦理業(yè)務(wù)、長(zhǎng)期駐場(chǎng)員工、后勤（物料配送、維修）、參觀(guān)、臨時(shí)出差人員、外賣(mài)/快遞配送
• 受訪(fǎng)者：企業(yè)高管、接待員/招聘者、業(yè)務(wù)辦理人員、后勤管理人員
• 未知人員：廣告人員/推銷(xiāo)、系統(tǒng)故障、人工登記后等遺漏登記的人員

03 思維導(dǎo)圖羅列大體功能

調(diào)研競(jìng)品后，也分析了產(chǎn)品的使用對(duì)象及場(chǎng)景，這時(shí)候可以提煉和列舉出核心且必要的功能，分析并討論，這個(gè)時(shí)候一般是產(chǎn)品經(jīng)理之間的相互討論及推敲，可以先個(gè)人提出自己的方案進(jìn)行比對(duì)，再去重?fù)駜?yōu)，一個(gè)個(gè)將一級(jí)和二級(jí)的功能模塊確認(rèn)下來(lái)（也可以是3級(jí)，視具體情況而定），將整一個(gè)產(chǎn)品框架定下來(lái)。

思維導(dǎo)圖的使用和場(chǎng)景使用也是相輔相成的，此類(lèi)場(chǎng)景是基于主場(chǎng)景下的細(xì)化。如，對(duì)于訪(fǎng)客來(lái)說(shuō)，他去拜訪(fǎng)用戶(hù)，是否需要提前預(yù)約，如果沒(méi)有提前預(yù)約，現(xiàn)場(chǎng)登記的方式和提前預(yù)約的方式有什么不一樣，這樣就可以確定下來(lái)，兩種方式：預(yù)約和現(xiàn)場(chǎng)登記。那預(yù)約又可以包括訪(fǎng)客H5掃碼主動(dòng)登記或者企業(yè)邀約申請(qǐng)等等。

04 整理流程

功能模塊確定后不要急于去畫(huà)原型圖，因?yàn)楦匾囊徊竭€是整理整個(gè)產(chǎn)品功能之間的關(guān)聯(lián)性，即產(chǎn)品數(shù)據(jù)的來(lái)龍去脈。

流程可包括業(yè)務(wù)流程、限制流程、前后端交互流程圖等。以下圖進(jìn)行例舉：

1. 業(yè)務(wù)流程圖

為業(yè)務(wù)模塊核心的工作流程，數(shù)據(jù)流向及基礎(chǔ)判斷，及業(yè)務(wù)的幾種模式都可歸屬為業(yè)務(wù)流程，涉及的模塊和功能一般是自己的模塊屬內(nèi)。

2. 限制流程圖

如在增刪改查的過(guò)程中，對(duì)數(shù)據(jù)的一些限制和參數(shù)判斷后的不同流向，往往是由多個(gè)模塊之間的規(guī)則限定的，涉及到不同模塊之間的關(guān)聯(lián)性較強(qiáng)的說(shuō)明。

3. 數(shù)據(jù)流程圖

數(shù)據(jù)傳輸?shù)钠瘘c(diǎn)和終點(diǎn)。一般軟件包括前端和后臺(tái)服務(wù)器，后臺(tái)主控?cái)?shù)據(jù)的管理和分析，通過(guò)后臺(tái)對(duì)前端應(yīng)用進(jìn)行管理，常見(jiàn)的為數(shù)據(jù)的上傳下發(fā)和命令的順序的判斷。此流程圖著重對(duì)數(shù)據(jù)前后端的交互及整體流程的繪制。

基于以上都整理清楚之后，就可以開(kāi)始進(jìn)行原型設(shè)計(jì)了，原型的布局和風(fēng)格可以根據(jù)現(xiàn)有軟件或UI專(zhuān)業(yè)的建議進(jìn)行設(shè)定，對(duì)于B端產(chǎn)品來(lái)說(shuō)，布局和排版對(duì)功能影響不是很大，即使從0到1，也可參照市場(chǎng)常見(jiàn)的布局或根據(jù)公司規(guī)定的統(tǒng)一。而風(fēng)格和產(chǎn)品定位盡量貼合，假如你做一款小清新的APP，就不要使用暗黑風(fēng)格的調(diào)調(diào)了。

這就是今天篇文章講的，之后會(huì)分享一些關(guān)于功能規(guī)劃時(shí)的一些細(xì)節(jié)點(diǎn)。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

元旦過(guò)后，新的一波工作又要開(kāi)始了，我在開(kāi)始準(zhǔn)備新一輪匯報(bào)材料的時(shí)候突然想到了一個(gè)問(wèn)題，不知道鐵子們?cè)谕陞⒓釉O(shè)計(jì)評(píng)審的時(shí)候，有沒(méi)有總被老板 diss 設(shè)計(jì)稿里“太空了” “不夠飽滿(mǎn)” 這些個(gè)問(wèn)題呢？

我猜測(cè)應(yīng)該99%的鐵子經(jīng)歷過(guò)，我也不例外，從校招進(jìn)到第一家公司就開(kāi)始被植入頁(yè)面需要利用好每一像素的理念，搞得像北京房?jī)r(jià)一樣寸土寸金，生怕被浪費(fèi)了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來(lái)聊聊排版的問(wèn)題：

NO.1

如果你看過(guò)我過(guò)往的文章，也許會(huì)對(duì)我的排版多少有點(diǎn)印象，夸張的大字，極強(qiáng)的對(duì)比，還有一些微妙的層級(jí)關(guān)系；坦誠(chéng)的講，我的風(fēng)格揉雜了 2 種設(shè)計(jì)體系 —— 瑞士風(fēng)格 / 擬物風(fēng)格；

1.瑞士風(fēng)格

整潔、嚴(yán)謹(jǐn)、工整、理性化、實(shí)用的特征是瑞士平面設(shè)計(jì)的精神所在；這種一絲不茍，傳達(dá)準(zhǔn)確的風(fēng)格，即所謂瑞士國(guó)際主義風(fēng)格。簡(jiǎn)單的說(shuō)，由于 Swiss Design 這種風(fēng)格簡(jiǎn)單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格，也是國(guó)際最流行的風(fēng)格，因此，又被稱(chēng)為國(guó)際主義平面設(shè)計(jì)風(fēng)格；

簡(jiǎn)單的說(shuō)，瑞士的這種設(shè)計(jì)風(fēng)格典型的代表就是我們看到的雜志，其中有 3 個(gè)特點(diǎn)：講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級(jí)關(guān)系；有趣的是，審美和潮流是循環(huán)的，隨著時(shí)代的發(fā)展，越來(lái)越多的app開(kāi)始重新挖掘出來(lái)瑞士風(fēng)格并加以使用，比如我們iOS系統(tǒng)自帶的應(yīng)用們，Spotify：

年少的時(shí)候，我經(jīng)常看著這些個(gè)app會(huì)不禁的問(wèn)，為什么在沒(méi)有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內(nèi)容，同樣也是構(gòu)成；是信息，同樣也是裝飾；簡(jiǎn)單可以理解為，不管在平面還是網(wǎng)頁(yè)亦或者是UI界面，在沒(méi)有可用的裝飾下，信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能，這就是瑞士風(fēng)格的核心本質(zhì)。

2.擬物風(fēng)格

iOS是擬物的典型代表，網(wǎng)上對(duì)于這塊的講解已經(jīng)過(guò)于飽和了，我也沒(méi)必要贅述；那么這一趴，來(lái)聊聊對(duì)我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒(méi)有覺(jué)著多么驚艷，潛意識(shí)里只不過(guò)是覺(jué)著把 iOS 的圖標(biāo)畫(huà)的更漂亮了一點(diǎn)而已…

但當(dāng)我打開(kāi)下圖這個(gè)頁(yè)面的時(shí)候，我意識(shí)到我對(duì)擬物的理解還是淺薄了，第一次被光影的層次震撼到：

通過(guò)光影塑造了一個(gè)三維空間，讓整個(gè)畫(huà)面豐富飽滿(mǎn)，也打破了我幼稚的設(shè)計(jì)觀(guān)，PS.不管錘子科技現(xiàn)在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設(shè)計(jì)團(tuán)隊(duì)為這個(gè)行業(yè)做出的貢獻(xiàn)，respect！

毫無(wú)保留的說(shuō)，我的設(shè)計(jì)就是二者的融合，以 層次對(duì)比 作為核心理念。

NO.2

啰嗦了半天，趕緊進(jìn)入正題；如果你是一名產(chǎn)品體驗(yàn)設(shè)計(jì)師，一定聽(tīng)說(shuō)過(guò) “奧卡姆剃刀” ，這個(gè)定律通常用在交互鏈路的設(shè)計(jì)上（意思就是在用戶(hù)路徑中沒(méi)必要的步驟，省了就完事了），“如無(wú)必要，勿增實(shí)體” 即簡(jiǎn)單有效原理；

通常來(lái)講，如果想要不平，把二維空間轉(zhuǎn)化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛(ài)好者，可以想象下照相機(jī)的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個(gè)層次；當(dāng)然，虛實(shí)的對(duì)比對(duì)信息的呈現(xiàn)和層次的拉開(kāi)是極其重要的，這里需要通過(guò)景深來(lái)控制效果，你可以通過(guò) photoshop 濾鏡-模糊畫(huà)廊的“場(chǎng)景模糊”來(lái)做到：

另外，空間的感覺(jué)想要被突顯，那么“光影和空氣”的價(jià)值就可以無(wú)限放大了，按照如上所說(shuō)的結(jié)構(gòu)，把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開(kāi)了）：

整個(gè)case下來(lái)，你會(huì)發(fā)現(xiàn)用光來(lái)聚焦在信息上，自然而然就形成了我們說(shuō)所得 “信息優(yōu)先級(jí)”；有點(diǎn)時(shí)候空氣和光影的飽滿(mǎn)程度超乎你的想象，這種自然存在的物質(zhì)可以很好的幫助畫(huà)面分層，以達(dá)到填充的效果，并不是一定要依賴(lài)于實(shí)體化的裝飾。

NO.3

本來(lái)不打算再開(kāi)一個(gè)章節(jié)說(shuō)這個(gè)，但還是覺(jué)著很有必要再說(shuō)下（我好糾結(jié)），作為PPT來(lái)講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡(jiǎn)化文字，是對(duì)輸入者關(guān)愛(ài)；

以上圖為例（實(shí)名diss自己的作品），坦誠(chéng)的講左邊的部分大多數(shù)觀(guān)者是不會(huì)有心思來(lái)看的，按照視覺(jué)系統(tǒng)的處理，這部分就會(huì)被當(dāng)成一個(gè)“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀(guān)者聚焦信息，所以還是那句話(huà)，能不寫(xiě)的就別寫(xiě)，能少些的別多寫(xiě)，保持信息的密度也是設(shè)計(jì)師必要的職責(zé)之一。

收藏

收藏

收藏

收藏

轉(zhuǎn)自：站酷

作者：故事從未開(kāi)始

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)