如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作者： John Saito | 翻譯： 正_青_春 審校： 凌藝蜻

我從設計中學到的一件事是你無法取悅所有人。你可以嘗試，但你最終會得到一個大打折扣的設計，而且無法讓任何人滿意。

當你試圖讓所有人滿意時，你會失去你的重點，你會開發一些人們不需要的功能，你所寫的用戶也根本不會去讀。

好的設計就是完全圍繞一個清晰的目標。這一點非常重要！

過去的一個月里，我一直在和在設計中有明確清晰目標的設計師交流，他們來自Google，Airbnb，Slack, Dropbox等等, 我想窺視他們的內心，看看是什么驅動他們做出決定以及是什么在指引他們的設計，以下是我學到的一些內容。

UXRen

1、從問題開始，而不是答案

 你是否注冊了新產品，然后第二天就忘記密碼？這已經無數次地發生在我身上。如果我向你求助，你會建議我做什么？

 有些人可能會建議我直接寫下密碼，輕松，問題解決了。但是安全專家不會推薦寫下密碼，因為那并不安全。

好的設計師不會直接跳到解決方案，他們會花時間去理解問題。

 那么，好的設計師會怎么做？好的設計師不會直接跳到解決方案。他們會花時間去了解問題。他們提出問題并找出原因、背景和限制：你一般怎么記錄你的密碼？你總是隨身攜帶手機嗎？你有多少密碼？

你越了解問題，你越能找到解決問題的切入點。深入理解給你自信，深入理解就是把你的初步想法轉化為實際深入的觀點。

我詢問了Google 智能助理的產品設計師Adriana Olmos關于她解決問題的方法。當她的利益相關者提出需求時，他們經常根據解決方案而不是問題來定位他們的想法?！拔以噲D去了解他們解決問題的理論基礎是什么”她說，從那時起，我與他們一起去了解用戶最底層的需求，并了解背后的原因，然后來做優化迭代。了解了原因，如何去做就順理成章了。

了解了問題的來龍去脈，你就可以找到解決問題的方法了。 評論(0) 瀏覽(2750)

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

身為設計師，你是否遇到過以下情況：

你花費了大量時間來構思與設計，卻得到需求方一句“這畫面根本沒有沖擊力！”遇到這種情況我們常會把問題拋向運營同學，但定神反思一下：為什么我們會被帶偏？畫面如何才能具備強烈的視覺沖擊力以說服他人？

什么樣的畫面，會讓你覺得很有沖擊力？想必影響因素眾多，而今天我們就跟大家聊聊故事性、可讀性、空間感這三個維度。

故事性

故事性主要從情緒、氛圍和趣味性三個方面來表現。

• 情緒

先從情緒開始聊，你的畫面是想表現出積極上進、歡樂還是憤怒？

畫面整體的情緒需要依靠主體情緒都深入刻畫，情緒能帶動用戶的視覺感受，幫助用戶更好的從圖案中獲取與主題相關聯的信息，從而引起讀者的共鳴，最終達到推廣的目的。

 

• 氛圍

其次，就是氛圍的把控。除了畫面主體的刻畫，氛圍的把控至關重要。

氛圍把控的好壞，直接影響到畫面的統一性，這也是為什么很多同學一碰到復雜構圖就逃避的原因。只要我們把握住一點，“一切的氛圍只為突出主體！” 掌握這一點，相信很多同學都駕馭復雜的構圖！

• 趣味性

與前兩者不同，畫面的趣味性并非一種技能項，而源于你內心有多有趣！

職業化的人大多都是有職業病的，設計師的職業病應該是對視覺的敏銳度！我做廣告那幾年，路過地鐵站或者公交站臺，經常會被好的海報所吸引，也常會駐足研究海報設計者背后的思考。他是如何進行版式編排，如何對畫面進行構圖，如何做創意推導……如果是我，好的地方我要怎么學，壞的地方我會怎么做！

 

之所舉我過去生活的這一例子，其實是想說：每個設計師身上的DNA不一樣，感興趣的事情也各自不同，所做的設計也不一樣，這些都取決于你是一個怎樣有趣的靈魂！

趣味性在你的畫面里，大部分來源于你生活中的積累！設計源于生活，趣味源于有趣的靈魂！

但是，在商業項目中僅僅有故事性還遠遠不夠！商業設計創作中，需要更深挖項目背景，要知道項目所面對的人群、品牌調性、推廣目的、投放時間及媒介等。

以這次我們接到的新年運營活動為例，需求面向企業內部，需求方想要體現在春節來臨之際對公司內部員工的關懷，目的為增強員工歸屬感，傳達新春關懷。

我們通過對信息的梳理，腦暴得到上圖的內容，推導出所需元素，接著繪制草圖。

 

Tips：足夠完善的草圖＝節約時間

這里提一個項目實施中的小Tips：我們在很多項目實踐中總結出并反復驗證過：草圖越詳細，后續就越能快速地完成項目，甚至能騰出更多的思考時間！ 繪制中一旦靜下心來，你就可以好好享受源源不斷的靈感。只要軟件不生疏，繪制起來其實是很快！切記勿要邊做邊想，這樣只會徒勞！

 

我們通過對情緒、氛圍、趣味性三個維度進行結合，畫面以小哥做舞龍狀態，周圍圍繞著祥云、錦鯉、紅包、以及順豐的元素，整個畫面氛圍營造一種新年的喜慶！讓畫面自己講故事！

 

可讀性

 

• 構圖與板式

為保證畫面信息的可讀性，可運用版心理論、三分線構圖法、黃金分割比例等規則來驗證自己在構圖上的嚴謹性，這些規則可有效的規避主體不夠突出、重心不穩等常見的版式問題。

01. 版心理論

以常見的矩形版面來說，其版心為四邊形，具有四個角。我們可以把角理解成點，而版心就是通過四個點連線建立起來的。改變任何一個點的位置，版心的輪廓都會發生變化。

所以，四個點也直接影響了畫面的張力，角越多張力越大，元素覆蓋兩個點會顯得張力不足，四個點又會顯得過于飽滿。因此我們推薦三個點，最后一個點做弱化處理，整體就會顯得透氣！

02. 三分線構圖

三分線構圖被廣泛運用，攝影、設計、繪畫等藝術創作。指把畫面橫分三分，每一分中心都可放置主體，這種構圖會使得主體和裝飾元素更顯得緊湊有力。它也是最基礎的構圖技巧，相信大家經常運用，就不贅述。

03. 黃金分割比例

黃金分割比例是現今公認的美學定律，蘊含豐富的審美價值，是視覺上最舒服的比例，與三分線構圖法異曲同工。

• 節奏

畫面節奏可以使畫面錯位布局，營造空間，增強畫面的節奏感。

如下圖所示，“S型“構圖是非常常見的一種構圖方式，形式靈活多變，往往S型構圖有著明顯的層次關系，元素在空間上可以分為前、中、后景；其次，S型構圖可以有效的引導讀者的閱讀順序，達到視覺引導閱讀的作用，從主體作為出發點，保證畫面的閱讀井井有條。

 

空間感

  

最后就是畫面的空間感，但相信設計師在漫長的藝考生涯中，早已學會如何去運用虛實、肌理、色彩去區分主體與裝飾元素之間的關系，還沒掌握的小伙伴趕緊去溫習你的舊課本吧！

 

 結語

 

Anyway, 以上就是有關新春運營活動的設計總結，從案例中我們習得如何通過故事性、可讀性和空間感三維來增強畫面的沖擊力。這一方法也可以應用在項目設計完畢后，通過以上三點內容去驗證設計的合理性和有效性。最后來復習下：

• 故事性 - 你的畫面能自己講故事、表達情緒，當然趣味性也必不可少；

• 可讀性 - 在保證圖文條理清晰、信息層級表達準確的前提下----，對版式、構圖以及畫面節奏的把控十分必要；

• 空間感 - 增加畫面的色彩層次、肌理、光影的表現，這樣能更好地表現畫面層級間的空間感。

每個設計師都是獨立、富有創意又有趣的個體，希望這一分享可以為大家打開一些新的思路！

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

從不同維度對Icon設計進行解析，整理一整套Icon設計的法則

網絡上有很多關于Icon設計的文章，一些文章從部分維度切入講述Icon的設計理念，但大部分缺乏整體性。

所以我嘗試把自己的思考方式結合其他人的設計理念整理了一個完整的Icon設計法則，通過簡單易懂的描述語言，并且結合設計案例呈現出來，希望能夠對大家有所幫助。文章使用的案例只代表個人觀點，并不代表相關產品。

本文重點講述Icon設計思維，關于Icon的具體定義以及具體的制作過程就不再贅述，網絡上有很多相關文章都有講述。

從不同維度對Icon設計進行解析，整理一整套Icon的設計法則。每一個產品中都有不同類型的Icon，產品通過Icon可以快速的向用戶傳遞語意，通過獨特的設計語言讓用戶形成對于產品的認知心智。Icon的重要性就不言而喻了。

ICON的設計法則-菱形設計法則，主要包括語意、層級、設計形式、風格、一致性、范圍。而其他的設計思考也是這個設計法則的變體，中心思想沒有發生變化。通過對以上設計思考點的聚合，來設計能夠傳遞Icon語意，并且能夠清晰展現產品結構和信息層級的Icon系統，通過差異化的設計形式展現產品設計的獨特風格，讓具有一致性的設計語言傳遞信息，和用戶形成共鳴。

層級

第一層級Icon

第二級別Icon

第三層級Icon

第一層級的Icon一般指首頁的井字入口Icon，讓用戶快速獲取入口信息，完成對產品流量的分流，讓用戶快速完成自己的任務。這種類型的Icon是級別最高的，無論是面積、形式感、視覺沖擊力都應該是最突出的，這種高層級的Icon可以簡單通過一下三種方法表現，1、擬物化的設計方式增加視覺重心和吸引力。2、通過細節的增加呈現Icon設計的復雜形式感。3、采用沖擊力強的色彩對比，抓住用戶的關注點。除此之外具體的思考過程，后文也會詳細講述。

下圖分別是“自如” “每日優鮮” “大眾點評”的首頁入口Icon，分別采用了擬物化設計，細節添加，色彩對比的設計方法。

第二級Icon歸納為導航類型的Icon，引導用戶操作產品，完成用戶的任務，同時傳遞品牌特色。這種Icon類似真實街道中的指向標。第二層級的Icon不需要做的視覺重點非常重，能夠讓用戶認知到，并且了解Icon傳遞的信息，在操作行為上產生預期就可以。通常的設計樣式是線型Icon或者是面型Icon。

下圖分別是“自如” “每日優鮮” “大眾點評”的二級Icon系統

第三類Icon是語意型Icon，主要是向用戶傳遞信息，烘托信息氛圍，并且引導用戶瀏覽信息。這種類型的Icon視覺相對較輕，且不可點擊，具體的設計思考在后續的內容展開。

下圖分別是“自如” “每日優鮮” “大眾點評”的三級Icon系統

以上三級的劃分并不是說Icon只有這幾種類型，這樣劃分是從功能和視覺上進行區分便于設計同學理解，當然在具體的設計過程中也可以對Icon進行更細化的區分，最主要根據具體的需求去定義Icon的層級，然后再采用對應層級的設計語言。

語意    

1）、Icon背后的語意(Icon的特性歸納）

2）、Icon的可識別性(Icon的特點表現)

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產品信息。所以在Icon的設計之前，需要思考Icon背后傳遞的文字語意，理解語意，構建對于語意的多維拆解（比如沙發是由靠背、兩個扶手、四條腿構成，重心要穩，和床有哪些區別等等）。同時還需要思考Icon圖形化之后的可識別性，基于對用戶認知的了解，歸納Icon設計中需要具體表達的幾個關鍵特點，迎合用戶的認知心里。幫助用戶快速的獲取Icon想要傳遞的信息，如果不能快速的獲取，反而增加了用戶獲取信息的成本，那就本末倒置，削弱了用戶的使用體驗。

例：下圖是“大眾點評”二級Icon設計的語意表現思考方法

設計形式

1）、外形

2）、表達方式

3）、色彩組合

4）、Icon特色

外形是Icon 的基本形態，不同的形態傳遞不同的視覺感受，構建不同的心智。同時Icon的外形決定了內部元素的設計。

Icon的表達方式主要兩種，分別是線型Icon，面型Icon。線型Icon形式抽象、簡潔，便于用戶識別，用戶認知成本較低，缺點是Icon容易極簡，造成了似是而非，可識別性降低。面性Icon相對線型Icon視覺重心更突出，便于用戶聚焦，設計表現形式會更豐富，缺點是可能會過于復雜，造成信息層級混亂，增加了用戶的認知成本。

色彩組合，就是Icon中的色彩語言，在設計Icon的過程中通常包括單色系的Icon和色彩組合系列的Icon。通過不同顏色的組合傳遞產品的品牌形象和產品特質，在設計Icon的過程中，尤其是導航Icon的過程中不建議使用超過兩種顏色的Icon，這樣容易使用戶視覺疲勞。

Icon特色是Icon在設計過程中的細節，這些細節是體現Icon自身精致的部分，同時也會影響用戶對于產品和品牌的認知聯系。影響產品的感性認知觸達用戶內心。

例：下圖以“大眾點評”中的“拍視頻”icon做舉例說明

風格

1）、品牌理念

2）、產品特色

3）、視覺特色

品牌理念是是指產品背后的定義和想要傳遞的價值。通過簡介的符號、文字傳遞給用戶的認知、理解、印象、感受。通過塑造品牌理念的塑造，和用戶在感性層面形成共鳴。融入品牌基因的Icon系統具有更好的辨識性和認同感。這需要設計師和業務團隊一起溝通產品，深入理解業務，總結出關鍵詞語表達品牌，最終和業務團隊達成統一共識。

產品特色指產品在同行業中的定位差異，核型競爭力。通過簡潔的視覺語言進行表現。通常的產品特色體現在業務范圍、用戶群體，使用場景，產品功能等。在這四個維度中總結歸納成可落地的具體的表達關鍵詞，進一步具象化。

視覺特色指在競品分析中，總結得到在視覺層面其他產品中可以借鑒的感性共性和自己產品定位差異性的結合。通過可借鑒的共性傳遞行業的特點，而差異化的視覺表現可突出自己產品的特色和競爭力。

例：繼續以“拍視頻”Icon為例子進一步解釋說明

一致性

一致性的綜合表現在圓角、透明度、線條粗細 、間距、顏色、層級、漸變、特色細節。

Icon的一致性有利于降低用戶的認知成本，便于品牌傳遞，而Icon的非一致性會增加用戶的跳出感，降低用戶對于產品專業度的認可。通常情況下可以通過以上8個維度進行分析和提煉。前七個維度大家比較好理解。重點解釋一下第八個維度“特色細節”，特色細節是設計師通過對于產品和業務的理解主觀加入的一些關鍵性視覺表現的點，增加產品一致性的基因，可能是斷線，尖角，原點等等標志性元素。

例：下圖通過對“大眾點評”Icon做拆解進一步從六個維度說明Icon系統的一致性（并不是說每一個icon的設計必須包含八個維度）

范圍

視覺范圍和熱區范圍

隨著Sketch的普及，更多的設計師開始采用一倍的設計畫布輸出設計方案，但在設計的過程中需要注意視覺面積和物理面積，兩個Icon的物理尺寸大小是一樣的，視覺感性的面積偶爾會變化。所以需要在設計完Icon之后，對Icon進行排列，進行視覺對比，發現視覺的不一致性。

熱區范圍是代碼定義的用戶可操作的交互面積，視覺是感知不到的。熱區范圍的確定有利于開發工程師和設計師達成視覺方案的一致。避免后期由于大家對于方案設計、開發理解的不同，增加后續溝通的成本。通常情況下會出現的問題就是

1、界面開發的還原度低

2、熱區范圍過小，用戶無法點擊

3、Icon的熱區范圍不一致。

總結

在設計的過程中，Icon的樣式可以借鑒，但要根據自己的產品做形式上的調整，具體可以通過上述談到的幾個維度作為切入點調整Icon。同時在設計的過程中避免無窮的細化，因為有些細節用戶根本不會觀察到，這樣做只能是設計師的自嗨。設計師容易漏掉的是熱區范圍的確定，盡管Ios平臺和Android平臺都有對于Icon范圍的定義，但針對產品的icon熱區范圍調整還是要有設計師自己的想法。這樣才能增加Icon設計的思考價值，也更符合產品自身的特色。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里 

 

科技不僅改變生活，而且正在改變著我們的生活習慣！不管哪行哪業，不去了解的科技，就面臨著被淘汰的危險！電商作為離互聯網最近的行業，或許能從這些高科技里找到一些方向和啟發！

 

NO.10 踩不濕的鞋子

Vessi鞋，號稱世界上第一個100%防水針織鞋

它看起來跟普通的鞋子無異，

但是它具有超強的防水性能，

100%防水能力

并且360°無死角

小水坑我們不放在眼里

甚至可以

直！接！踩！

Vessi鞋的秘密在于它的針織面料專利，

這個稱為 Flash Knit 的面料一共有 3 層，

分為不同的功能面料，

這使得它比簡單的防水涂層強得多。

第一層也是最外面一層是彈力編織層，由聚酯纖維和尼龍混紡而成，起到防水、拒水、防風的效果；

第二層是納米過濾層，能進一步起到防水、吸濕作用，最里面一層是透氣內層，幫助腳部排汗。

NO.9 材料界的“變形金剛”

下面這些彩色的小卡片—— Formcard

是由英國設計師PeterMarigold

所研發的一種神奇的修補塑料卡，

它可謂是材料中的百變星君，

想變啥就變啥

將原本硬邦邦的卡片放到熱水中，

就會變軟，

然后就可以捏成各種形狀啦！

比如~

手機支架

高級一點的車載支架也是可以滴~

修補雨傘，哪里壞了補哪里

so easy~

雖然看起來軟，

但是硬度堪比尼龍。

它的材料是一種

基于生物塑料而

完全無毒的淀粉材料

表面著色的顏料也是安全的。

值得一提的是——

這種修補塑料可以重復使用無數次，

只需要用熱水泡一下，就能重新使用。

NO.8 一種“分裂”的材料

杜邦? Tyvek® 特衛強®

有這樣一種材料

防水的同時還透氣

是一種會呼吸的材料

硬的跟紙一樣

軟的像布一樣

明明脆弱的跟紙一樣，

2個200斤的胖子都未必能把它撕破！

還能用于各種酷炫的手工藝品

既可以當作女生喜歡的包包

還可以變身為時尚的服飾！

杜邦? Tyvek® 特衛強®

特別的材料特性讓它成為設計師們的寵兒

各種創意設計、產品層出不窮

NO.7能修復的黑科技抹布

XG防水珠劃痕修復布

這一款黑科技“魔術布”

只需3s即可快速修復車劃痕

這塊“魔術布”采用

聚酯纖維以及“氧化鈰”成分打造。

氧化鈰具有特有的切削力，

再加上聚酯纖維布具有摩擦力，

車漆表面的劃痕可以快速被修復。

不僅如此，

修復的同時“魔術布”

中含有的乳化蠟成分，

可迅速附著保護漆面，

相當于再給車車做一個美容~

一塊“魔術布”可使用15次左右

無論新車、舊車、深色車、亮光漆均可適用

綠色制劑成分還可以保護你的雙手

NO.6 擅長堵的材料

FLEX TAPE 防水膠

水流不停

這膠帶一拍就堵住了

網上稱之為世界最強防水膠——

FLEX TAPE

家里水桶破了個大洞？

一拍，搞定！

家里水管爆了？

一拍，搞定！

NO.5 傳說中最變態的黑科技涂料

LINE-X 涂料

據說任何東西涂上他

都刀槍不入堅不可摧，比如

西瓜涂上之后能抵抗錘子的猛擊

雞蛋涂上之后能彈起來了

汽車用鑰匙刮都沒任何損傷了

在活水表面涂上一層涂料

你都可以在水面

走起魔鬼的步伐

FLEX TAPE 材料

已經應用在各個領域，

尤其是軍事、汽車領域

比如美國五角大樓

海軍陸戰隊的悍馬

NO.4 具有“生命力”的水泥

生物混凝土Bio-concerte

它依托于芽孢桿菌的神奇生命力

這種細菌產生的孢子

能在沒有食物和氧氣的情況下

存活200年之久

它將作為細菌營養來源的乳酸鈣

混合攪拌成混凝土

若混凝土開裂

雨水滲透進去

休眠中的細菌通過代謝

把鈣和碳酸離子結合

形成石灰石，逐漸彌合裂縫

建筑物的使用壽命

有望大大延長

實在是太神奇啦！

NO.3 能屈能伸，時軟時硬的材料

P4U

國外有一種材料叫 D3O

在常規狀態下是柔軟的

卻能防住突然的受力撞擊

非常安全

雞蛋摔不碎，防撞防震能力一流

目前已經有上百種產品用到了D3O這種材料

從手機殼到護膝再到芭蕾舞鞋

再也不怕手機碎屏了

中國市場對D3O也有強烈的需求

但 是

前期中國企業從國外采購時遇到不少阻力

難道國內就不能開發出類似的材料嗎？

我們就不能做出“國產版的D3O嗎”？？

可以的！

它就是前面提到的

P4U

NO.2 能吃的塑料袋

這款塑料袋非常環保

由紅薯、玉米、馬鈴薯與植物油

等12種可食用原料做成

100%有機食品

就連印刷字的油墨都是可以吃的

不僅如此

它的韌性和耐用性

不輸普通塑料袋

扛得住重物，挨得過焚燒

更重要的是

它具有生物可降解性

在野外它180天就可自然降解

埋進土里45天，扔進水中1天

沸水中15秒就可以完全溶解

一個塑料袋雖小，卻足以改變世界啊

NO.1 點沙成土，造福人類

可以讓沙漠變成土壤的黏合劑

重慶交通大學力學教授

易志堅帶領研究團隊

經過7年的反復試驗

研發出一種

可以讓沙漠變成土壤的黏合劑

這是一種從植物中提取的

植物纖維黏合劑

它能賦予沙粒一種約束

使得沙粒像土壤一樣能從任何方向結合

具有自修復和自調節的特性

將沙子與黏合劑混合后

把水倒進沙坑里再也不會輕易流失了

這項偉大的發明可以讓沙漠變良田

中國科研團隊已經在內蒙古阿拉善盟的

25畝沙漠里進行了實地實驗，并取得成功

未來，我們將會看到

越來越多的沙漠逐漸變成綠洲

沙漠不再是寸草不生

反而可以種植瓜果蔬菜

造福人類的發明，大贊！

 

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 

一個簡單的按鈕需要經歷無數次推敲，才能整合為設計語言。今天主講設計語言中的基礎部分，組件部分的其中一個部分-按鈕。設計語言從結構上分為：基礎部分、規則規范部分和業務部分，后面我也會把其它部分補全。

基礎部分的畫布大小是250000×56000，共47個組件部分；規格規范部分就很龐大了（工業設計、交互設計、平面設計、設計心理學等）；業務部分是按系列來分的，有主次之分，目前只分了兩個系列（N和S），N系列對應基礎組塊，S系列對應嵌套定制組塊。我把一個系列的主系列稱為主版，把子系列稱為子版。N系列的一個子版大概有50個頁面，每個頁面又包含三種樣式，每個系列中大概有20個子系列。工程量很大，大致算了一下，要做完兩個大系列（N和S）需要做：50（頁面）x3（樣式）x20（系列數）x2（大系列類別）=6000（頁面）。

以上簡單描述的這些工作，目前都是我一個人在做，這東西成型以后，做一套網站（從前期到上線），最快只需要15分鐘。而我做它的目的也很簡單，就是希望幫助企業豎立品牌形象，并用專業知識解決他們所面臨的問題，質量高價格低。我的信仰是幫助企業或個人實現社會價值，賦予企業或個人一定的能力，讓他們為這個社會做一定的貢獻，履行一定的社會責任。先利他再利己，集體利益和集體主義優先。從成本評估到定價，我是不賺錢，但只要我能活著，就一定履行我的社會責任。

說的有點多了，言歸正傳，這章其實不難，但有些基礎知識需要細心講解，對于有些設計師而言廢話較多，但對于新手而言卻有可學之處，多多體諒一下吧。

目錄

1.網格基數的設置

2.按鈕的基礎規范

3.按鈕的字符限制

4.按鈕的交互狀態

1.網格基數的設置

這里的網格不是平面設計中的網格系統，是包含在繪圖工具中的網格功能，雖然它倆在本質上是相同的，但現在先不要給它倆做過多的區分。用繪圖工具繪制網格能幫助我們約束模塊，使模塊的比例存在一定的關系。例如我就拿尺寸大小為137×31的按鈕A，和尺寸大小為128×32的按鈕B舉例，尺寸大小為137×31的按鈕A是不規范的，寬137和高31是不存在比例關系的。而尺寸大小為128×32的按鈕B就是規范的，寬128和高32不僅是倍數關系（128/32=4倍），而且兩個數都可以整除我們在全局中設的基數4（32/4=8，128/4=32，這里的4為基數）。

當我們理解了按鈕的比例關系后，我們就要在繪圖工具中（AI、Ps、Sketch、Affinity Designer）找到我們的網格功能，設一個數為基準，定其為基數，然后按照這個基數來進行按鈕的繪制，按鈕就相對是比較規范的。因為設置完一個基數后，只要你在網格上畫按鈕，都是存在一定的比例關系的。那如何用繪圖工具設置網格基數呢，在Ps繪圖工具中找到：【編輯】-【首選項】-【參考線、網格和切片】- 彈出首選項對話框 -【網格 – 網格線間隔 / 子網格】- 網格線間隔設為【4】- 子網格設為【1】；

在Affinity Designer矢量工具中找到：【視圖】-【網格和軸管理器】- 彈出網格和吸附軸對話框 -【基本】- 間距設為【4】- 分割設為【1】。這里為什么要把網格基數設置為【4】呢。這是谷歌Material Design繪制小組件的規范，而模塊之間定義的基數則為【8】，這里的度量單位是DP，平時繪制網頁的話單位用px像素就可以。

2.按鈕的基礎規范

當我們會運用繪圖工具中的網格功能，設置基數來繪制按鈕，用熟練了就會相當講究，每一個細小的間距都應該符合倍數關系，不僅物理位置上能得到統一，視覺上也能滿足一定的美感，例如下圖所示。

當我們理解了如何用網格功能繪制一個按鈕后，接下來就可以理解按鈕的邊角的曲率設置了。那我把按鈕的邊角分為三種樣式：直角、曲率圓角和圓角。直角就是邊角呈90度的角，曲率圓角和圓角的差別在于，曲率圓角的角弧度沒有那么大，而圓角的角弧度就是一半個圓。我將按鈕的曲率按照不同的樣式分布展示了出來，如下圖所示。

理解了按鈕邊角的三種樣式，要怎么設置他們呢。直角設置無曲率/90度直角。圓角就設置為50%的曲率，剛好就是半個圓。而曲率圓角就稍微有點麻煩，因為曲率圓角是要根據按鈕的大小做相對的變化的。按鈕的尺寸變大曲率就應該也隨之變大，按鈕尺寸越大差異越明顯。另外曲率弧度的值也應該有一定的倍數關系或基數關系，例如：4/8/16, 4/6/8，4/8/12，都是可取的。

理解了如何設置網格基數，如何設置圓角的曲率，就要講到按鈕的常用尺寸了，要注意的是這個常用尺寸是基于Web端的，道理是相同的，就看設計師如何在移動端上進行設置了。常用的按鈕尺寸有：24px、32px、40px、48px，超出48px的按鈕都屬于特殊按鈕，需要進行單獨設置的。

這里的尺寸不是死的，設計師可以根據自己的理解進行尺寸的設置。而采用這幾個尺寸（24px、32px、40px、48px）的目的是更好的統一并規范按鈕，因為24px、32px、40px、48px都是4的倍數，數與數之間也都是±8的關系，另外在繪制按鈕時尺寸也可以平分，留出按鈕上下均等的距離，另外這幾個數值從Web端的體驗上來看，比例也是相對更合適的，所以采用這幾個數較為規范一些。

3.按鈕的字符限制

一個按鈕包含和“無圖標”和“有圖標”兩種形式，無圖標比較好處理，直接把相應文本放在按鈕中水平、垂直居中就可以了，然后再算清文本與邊框之間的距離就可以了。

那設計有圖標的按鈕時，就要考慮把圖標的內邊距算出來，并與圖標到按鈕外邊距的距離算出來。

當我們掌握的以上幾種繪制按鈕的方法，就可以繪制出一整套符合規范的按鈕組件。

英文也一樣，英文與中文的差別在于細微的尺寸差異。英文字體結構要比中文字體結構看上去更小一些，英文的字符長度也要比中文長很多。但問題不大，只要把控好文本/圖標和按鈕邊角的距離，按照基數遞增，就不會有什么問題。

4.按鈕的交互狀態

一個按鈕的交互狀態有四種，分布是：無狀態、hover（觸碰）、點擊后、禁止。采用的配色可以遞增（由淺到深），也可以遞減（由深到淺）。按鈕交互狀態的配色深淺也是根據整體頁面有關的。如果整體的調性偏深，配色可以遞減（由深到淺），如果整體的調性偏淺，配色可以遞增（由淺到深）。

而顏色按鈕的交互狀態是根據配色的色階決定的，同理配色遞增（由淺到深），配色遞減（由深到淺）。

另外附上一張彩色按鈕狀態效果圖，配色為明亮柔和。

這些按鈕的繪制看似簡單的不得了，其實都是些高精度的工作，差一個像素點都不可以，當然更需要具備一定的毅力與耐心。我覺得做設計應該追求，重視體驗和功能，讓形式追隨內容，而不是內容追隨形式，就這樣吧。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在我們的設計工作當中最不可缺乏的就是創意了，那這種創意是從何而來呢？當我們拿到一個項目時最熟悉不過的流程的就是小組討論，那小組討論中占據大部分的就是“頭腦風暴”了，我們先來系統介紹一下頭腦風暴。 

【一】什么是頭腦風暴法？

頭腦風暴法(Brain storming)， 該方法主要由價值工程工作小組人員在正常融洽和不受任何限制的氣氛中以會議形式進行討論、座談，打破常規，積極思考，暢所欲言，充分發表看法。它最早是精神病理學上的用語，指精神病患者的精神錯亂狀態而言的，如今轉而為無限制的自由聯想和討論，其目的在于產生新觀念或激發創新設想。 

 

【二】頭腦風暴法的組織形式

（1）設主持人一名，主持人只主持會議

（2）設置記錄員1-2名，要求認真將與會者每一設想不論好壞都完整記錄下來

（3）小組人數一般為6-10人

（4）最好由不同專業或不同崗位者組成

（5）時間一般為20-60分鐘；（發散/收斂/整理3回合）

主持人和主持的注意事項：

（1）提前了解會議主題及可能的引言內容

（2）控制好自己主持人的氣場

（3）控制好時間

（4）照顧好每一位成員；讓每個人都能發言

（5）引導會議流暢展開

（6）保持團隊積極參與氣氛

（7）適度延伸發展發言者的想法

（8）隨機應變   

【三】頭腦風暴法遵循的主要原則

       （1）自由奔放思考

         

       （2）不批判

         

       （3）以量求質

         

       （4）搭便車，想法無專利

        

焦點時刻： 

      藍藍設計組織部分小組成員以“如何成為一家很牛的UI設計公司？”為主題進行了一次頭腦風暴活動。我們將過程做了一下梳理。 

   （1）主持人引言之后，與會者每個人進行了積極地思考并將想法寫在便利貼上

        

   （2）每人根據自己的想法暢所欲言，并延伸其他人的想法。

   （3）將便利貼適度的分類整理。

        

   （4）最后我們整理出來了結果（wow！/有了更好/基礎的）     

     

             

總結： 

腦力激蕩并不是為了提出主意讓他人去評估和選擇。通常在最后階段，本組成員會自己評估這些主意并從中挑選出解決問題的方法貫徹整個解決方案的每一步都必須對小組成員透明，并有責任分配給每一人以便他們在其中擔任重要的角色。在項目還未明朗時，必須有一個共同的決策過程來推進協作努力的成果并對任務進行重新分配。在重要轉折點上，需要有評判標準來決定小組討論是否朝著最終的答案行進。在整個過程中需要不斷的鼓勵，以便讓參與者保持他們的熱情。

 通過這個過程，員工的親身參與，對“很棒的UI設計公司”的定義，再落實行動，向著WOW的方面努力！

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

什么是阻力？

用戶使用App時需要穿越層層頁面，在穿越這些頁面時需要消耗時間和精力，稱之為阻力。

首先探討一下品類方面的阻力。

如圖，這是幾個電商App界面，一眼望過去并不知道哪個頁面是哪家電商，其實這個并不重要。如果你到一個平臺購物，往往不是因為線上產品用戶體驗不一樣，而是因為賣的商品不一樣，或者商品的價格亦或配送速度不一樣。所以這里它們長的一樣我覺得沒有太大問題，甚至我認為他們之間雷同是一件好事，用戶省去了切換的成本，尤其是新平臺跟老平臺長得像都是沒什么問題的，這樣用戶切換新平臺阻力就小了很多。

但是當我們需要定義一個新品類時，這個思路就會不一樣。

定義新品類

舉個例子，國際化品牌Airbnb，在2014年的改版中做了很大的調整，這次改版后發現，要找房子下單，搜索瀏覽和操作效率并不是很高，但是他們還是做了這種低效高顏值的選擇。

對大多數人來說，私人房屋短租給其他人的這種服務是個新產品，是高端還是低端用戶其實沒有概念。所以在2014年Airbnb重新推廣的時候，他的設計理念是各位房客先別管這個產品是什么樣的模式，先說這個事情是不是看起來很酷。是不是酷這件事對于一個新產品是重要的，如果我用過一個酷的產品，分享給朋友。對方往往也會因為我分享的產品酷而覺得我這個人很酷。有些實用性還不錯但是品牌調性沒那么高的產品，用戶使用完后會覺得“把這個產品分享給別人，并不會給我加分”而止步分享。鑒于此，我認為Airbnb高顏值雖然一定程度上犧牲了效率，但是拔高了品牌調性，也就提高了產品的推薦值，是一個正確的選擇。

那么當我們需要重新定義一個已有品類時，我們的思路是什么呢？

重新定義品類

這是我們2016年發版的首頁設計，自如和跟之前的租房平臺不太一樣，所以我們的首頁設計要重新定義一個品類。以前，尤其是我們80后對于租房會有什么樣的感受都是有一些認知的，比如說黑中介…其實大家都有一些印象，被坑過的80后不在少數。自如出現的時候可能就需要重新整理大家對于這個品類的認知。所以我們在設計首頁的時候，先用一個高顏值大圖展現一下房子是什么樣子（因為我們的房子確實顏值很高品質不錯），搜索按紐也不是很大。所傳達的思路是我們希望用戶在找房子之前對我們的平臺有些認知，或者說對租房這個品類，打破固有的刻板印象，有重新的認知。我把這種重新定義已有品類的設計方法定義為“我們不一樣”。

在今年，自如的影響力大了很多，在這個背景下我們進行了新一輪的改版。雖然從用戶的角度講可能進APP第一件事是要找房子，但是從企業的角度，企業有很多想要傳達給用戶的信息，這個頁面也是讓用戶知曉其他業務的入口（自如給大多數人的印象是一個租房平臺，但是我們也有像保潔，搬家這類的服務）這些入口也許用戶當時不會點擊，可是當他需要用保潔，或者搬家的時候就會想到好像自如有這么一個業務，之后他會去自如的首頁找。所以多條業務線的并列呈現，也有類似廣告曝光的作用。

我用這張圖來代替我們的原型圖，我們要展現多條用戶線的時候很依賴于這個界面上的多個按紐，當時就想能不能順著這個思路在盡可能的情況下做的好看一點。我們之所以覺得這個界面給你的感覺沒那么好，是因為這個界面信息量太大了，還有色彩的沖撞過猛了。 

我覺得色彩的間隙太小了，應該加大，所以加了一些白框，讓這些顏色之間離的更遠，顏色間的沖撞也就比較小。

然后再看這個顏色本身，我們是不是可以選一些相對共性的顏色，比如把標準的紅綠藍改成紅，暖綠，和偏綠的藍（暖藍），然后把選中的顏色找他的擴展色，用擴展色畫出一些按紐。

這就是我們后來首頁的樣子。

低頻應用的阻力設計

作為一個低頻使用的App，跟高頻使用的App阻力設計思路最重要的不同點是什么呢？我從學習成本這點來切入。

學習成本

微信的聊天記錄刪除功能，有一點學習成本。

用戶在使用中偶爾向左滑發現了可以刪除聊天記錄，通過偶爾的觸發，用戶學會了這樣刪除聊天記錄。通過后期每天不斷地使用強化了對這個功能點的記憶。

但是我們的低頻App似乎沒有這個機會，由于使用次數比較少，有些功能隱藏起來的話用戶大概率永遠都不會去用。設計時不但要把點贊的按紐放出來，而且點贊的時候還要告訴用戶，點贊后飄在右上角。

告訴用戶收藏之后，收藏列表可以點擊右上角這個按鈕查看。我們不但要把所有的功能擺出來，而且還要告訴用戶這個功能下一步怎么走。因為他如果這次沒學會，以后可能也不會用這個App了，這點跟高頻的產品不一樣。

點擊數據

我們設計首頁的時候對于點擊數據會有一個預期和目標，但是往往數據反饋會跟設計初衷多少有些不相符。大家可以猜一下哪是點擊率最高的…在這里我只能告訴大家一個大概的排名。我們當初希望是租房的點擊高一些，因為用戶點擊后可以了解我們有多少個租房產品，所以我們把它在視覺上設計的重了一些。但是其實搜索是排在他前面的，用戶對于大面積的區域像banner這類東西是有免疫力的，所以不管做的多花哨其實用戶會習慣性的忽略掉，也就是視覺中心和實際的交互中心不見得一樣。合租在租房的前面，整租都可以在前面，看來用戶還是比較仔細的看了我們的界面，而且可以斷定大家對于合租是什么東西了解的很清晰。

可以看到，“租房”這個按紐我們剛開始設計的時候，感覺應該是高的，因為這個是總集，我們在后期的訪問中發現用戶認為這個是表示分類，所以設計的雖然明顯，但是用戶仍然認為這個不可點。

減少阻力

減少阻力，需要跟用戶的預期相符。

租房按紐怎么做交互才能讓用戶感到順暢？租房的按紐包括右邊的四種，其實是個1.5級（介于一級頁面和二級頁面之間）的界面，所以點擊左側的租房，用戶會進入“租房”頁面。而右邊的這四個Button應該還在，只是這四個按紐變成放大精細版。包括租房Button的底圖，也是放大放在頁面最上面，這跟用戶的預期才比較一致。

從首頁到列表，到詳情再到下單及更深層的頁面，頁面的ICON和精細程度和用力程度都不一樣，層級越深視覺沖擊越輕。

如圖，最右側預約那一列，假設設計師有足夠精力和時間，是否可以把最右側的頁面做的視覺更豐富，甚至跟首頁一樣？然而我們現在的規范里面仍然不允許做的更花哨，原因是我們認為在前半段的時候，用戶需要一些阻力來提升注意力，從首頁先認知這個租房APP跟他平時認知的不一樣，接下來有一些信息的輸入比如圖片，再往后，如果一旦點約看或者是點簽約，這時他的決策做好了，產品要做的事就是一步步往以最快的速度，完成這個事情，不要讓他有任何的猶豫，不要讓他分心，任何的分心都有一定的概率讓這個流程中止甚至是終止。

如圖，我把整個流程的信息阻力畫了一個曲線，首頁阻力是最大的，越往后越小，實質性的信息越多。決策前需要讓用戶提升注意力，所以信息量要大，表達要豐富。一旦決策后，信息的傳達以最簡潔的排他形式存在，讓用戶路徑盡可能的縮短也讓信息阻力盡可能的變小。

以上就是是我對信息阻力設計的整理，希望大家能夠有所收獲。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

設計師經常犯的一個錯誤就是上帝視角，高估了用戶的理解能力。一頓操作猛如虎，結果用戶可能根本沒看懂你的設計。

前段時間個人所得稅app 上線，用戶可以在線辦理個稅專項扣除申報。我自己也嘗試使用了一波，在申請房貸利息抵扣的時候發現了一個問題。

在房貸信息模塊里需要我輸入證書編號，但是我根本不知道到底要哪個證書編號。輸入提示非常的簡潔，就三個字「請輸入」，到底要輸入什么？這樣的表單在很多產品中都可以看到，讓用戶輸入生日，但沒有告知日期的格式。日期格式真的太多了，用戶到底選擇哪種？

設計師經常犯的一個錯誤就是上帝視角，高估了用戶的理解能力。一頓操作猛如虎，結果用戶可能根本沒看懂你的設計。

更快：交互層

有的時候用戶并不是看不懂你的設計，而是沒時間看你的設計。如果我們做了一個抽獎活動，用戶看了一眼主界面沒有弄明白是怎么玩的，那么這個抽獎大概率是失敗的。你或許會不服，我明明把活動規則已經寫在下方了，可是用戶根本不會看。因為他們真的很「懶」。

所以讓「用戶看懂你的設計」，首先我們應該做到「讓用戶更快的看懂」。我們需要提升信息的傳遞效率。

1. 信息可視化

俗話說「字不如表，表不如圖」。用戶對于具象元素（表格、插畫、icon和圖像等）的感知能力更強，具象元素也更能傳遞情緒。例如：道路兩旁的路標多數是以圖形為主體的。這是因為在車子高速行駛的過程中，司機沒有足夠的時間閱讀標示上的文字。

場均122.4分，30.6個助攻，45.0個籃板……這些數據對于我們來說只是冷冰冰的數字，我們很難理解其背后的含義。雷達圖對球隊數據進行了可視化處理，提升了信息的可讀性。因為相較于純文本，大腦處理圖形的速度要快得多。

以谷歌日歷為例，如果我要做瑜伽，那么就會在日程詳情頁配一個瑜伽墊的插畫；如果我要跑步，那么就會配一幅跑鞋插畫。用戶甚至不用看文字，通過插畫上所描繪的場景就可以知道自己接下來的行程。用戶可以更快地看懂。

2. 合適的組件

選擇合適的組件可以降低用戶的學習和操作成本。以上面的生日為例，與其通過輸入提示告訴用戶日期格式，還不如直接給用戶提供一個日期組件。

多數的選擇場景中我們都會使用底部動作欄來承載選項，如選擇優惠券/銀行卡。參考了一些產品，發現他們都在底部加上了關閉/確定按鈕。我們不妨來思考：動作欄界面底部需不需要提供關閉/確定按鈕？

決定一個元素的去留，我們需要明白它的作用是否可以被替代。底部的按鈕是供用戶點擊關閉底部動作欄的，光看「關閉動作欄」這個動作，底部按鈕并不具備不可替代性。因為點擊上方的空白區域或者把關閉按鈕放在右上角都可以關閉動作欄。

這樣一看，底部的按鈕是可以刪除的。那為什么其他的產品都保留了呢？因為我們忽視了組件的信息屬性，我們沒有考慮如果沒有它是否會對用戶了解系統當前的狀態造成影響。

沒有底部的按鈕，用戶無法確定底部動作欄是否正常加載。用戶不知道我是只有一張銀行卡還是只加載出來一張銀行卡。

更準：文案層

前段時間去體檢，發現排隊顯示屏中有的人前面有咖啡圖標，有的人沒有。好奇的我特地找護士問了一下，發現咖啡意味著接下來的體檢項目不需要空腹，你可以去吃早飯了。圖標的確很簡潔，可是有多少人看到這個咖啡圖標會立刻意識到自己可以吃早飯了呢？

過度追求信息傳遞的效率，而忽視了精度，從一個極端走向另一個極端——簡潔易懂的文案是保障信息準確性的重要措施。

前段時間針對報錯文案做了一個梳理，發現了一些文案中的共性問題。

1. 沒有提供解決方案

一個合格的報錯文案應該由：報錯場景、報錯原因和解決方案共同構成。首先告知用戶具體遇到了什么樣的報錯場景并且解釋原因，最后提供解決方案。多數文案都只做到第一步，只描述了報錯場景，這并不能滿足用戶的需要。

• 如果照片上傳失敗，用戶需要知道是因為格式不對還是圖片太大了。
• 如果因為系統升級，導致服務暫停，用戶需要知道什么時候可以再次提供服務。
• 如果把報錯場景看成是一個坑，那么報錯文案應該告訴用戶你掉進了一個什么樣的坑，為什么掉進來以及怎么樣才能爬出去。

2. 擁抱數字

多數的文案都不愛提供數字，用戶能獲取的信息也比較模糊。我們盡量給用戶提供準確的數字，包括時間、金額、次數等，讓用戶對當前的狀態有一個準確的認識。

輸入手勢密碼錯誤是有次數限制的，可是你并沒有告訴用戶今天還剩幾次機會。

我們經常會遇到資料審核的場景，最常見的方法就是告訴用戶「資料審核中」，非常的省事。但是用戶會疑惑到底要審核多久，給用戶提供一個大致的審核時間，讓用戶有目的的去等待。

備胎：在線客服

如果前面兩個方法都不能解決用戶的疑問，那么我們只好給用戶提供在線客服了。

1. 入口的必要性和統一性

客服的入口一般在首頁或者用戶的個人信息頁，除此之外我們需要在用戶有客服訴求的場景中給用戶提供客服入口。如果不提供入口，用戶遇到問題就要返回到首頁或者我的頁會很繁瑣。如果用戶在一個表單頁中錄入信息，突然對某一項內容不確定，返回到首頁找客服咨詢。這樣可能會導致用戶之前填寫的信息丟失，用戶需要重新輸入一遍。

以下圖為例，這是一個借款的表單頁，用戶在這里錄入借款信息。我們會給用戶推薦一款借款人安全險的保險產品，提示文案是「保費60元，貸款利息可節約55.33元」。

但是用戶反饋不知道這個60元的保費是一次性扣除還是每月都會收取，并且這個利息節省是什么意思。因為對收費標準不確定，用戶的購買意愿也會受到影響。這里的文案表述不清楚，我們可以給用戶提供一個客服的入口。

因為在線客服是一個共有的模塊，不同的業務線都可能會調用。那么在入口的設計上，我們需要注意一致性。當然我們也不能過于死板的追求一致性，因為不同場景用戶對于客服的訴求是不一樣的。就以支付寶為例，生活繳費和螞蟻借唄兩者在線客服的入口是不一樣的。

因為相對來說，用戶對借錢的場景更加敏感，有更多的疑問去確認。這筆貸款的利率怎么算的？還款方式是怎么樣的？會不會影響我的個人征信？所以在借唄頁中，用戶對于客服的訴求更高，所以在布局上會放在更加顯眼的位置。

2. 對話式交互

用戶進入客服系統不意味著立馬可以跟客服小姐姐聊天。咨詢問題一般會經歷以下幾個步驟：

• 提供猜你想問的問題；
• 客服機器人；
• 真人客服。

以支付寶為例，首先會根據你的來源給你推薦你可能想問的問題。例如：你從充值中心進入客服，首先會給你推薦充值繳費相關的問題。

如果提供的問題列表里沒有用戶想問的，用戶就需要手動去查找問題。這時客服機器人登場，根據你輸入的關鍵詞，給你提供相應的解決方案。如果客服機器人不能解決你的問題，那么可以召喚真人客服來幫你解答。

京東金融與支付寶的客服流程大同小異，其中的一個區別在于它額外提供搜索框來查找問題，而支付寶是通過對話式交互來查找問題。

對話式交互也是近年來比較熱門的一個話題。對話式交互主要的優點在于學習成本低，我們現有的交互體系都是建立在人工智能不夠智能的基礎上。如果足夠的智能，未來的產品界面可能就是兩個對話框，你只要打出或者說出你的需求就可以了。

年初一下午我要看韓寒的新電影，幫我預定一張票。系統根據你的行程和之前的觀影記錄，猜測出你當天觀影的影院和時間順便根據你的喜好選好座位，生成了一個訂單或者同時生成好幾個訂單供你選擇，你確認一下就可以。

當然這只是一種設想，目前的技術還無法實現，系統無法真正分析出用戶的真實意圖并且做出反饋。例如，在現實人與人的對話中，同樣的一句話，不同的語境下有著不同的意思。

把這個場景帶入客服中，我們輸入「修改」可以發現有這么多相關的問題。如果我從白條頁面中進入客服，我輸入「修改」，那么應該優先從白條相關的問題中篩選出與「修改」相關的問題。而目前來說，不管從哪個模塊進入客服，輸入「修改」給你推薦的問題都是一樣的，沒有考慮語境。在這種不夠智能的情況下，對搜索結果的展示上傳統的搜索框模式更加合適。

總結

以上是我簡單的分析和總結，如果你有不同的看法和建議歡迎留言。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 

2018年已過，轉眼又到了2019，但營銷圈中戰火從未消停過……

2018年各大品牌營銷玩出了新花樣，優秀的營銷案例層出不窮，攬獲了眾人的芳心。

面對2019新的一年到來，各大品牌當然也不會放過一個大好的借勢營銷黃金機會，都爭先恐后搭上了這趟“借勢營銷”的順風車，為打響2019年第一炮，自然是無可厚非的。

然而，迎來2019新年，各品牌紛紛借勢“耍花招”，精彩不輸往年，各種多元化新玩法碰撞在一起產生了巨大的火花，再次燃燒整個營銷界。因此，在這個競爭激烈的營銷戰場上，頻繁出現了眾多品牌活躍的身影，各種刷屏級的案例也相繼誕生。

下面為大家盤點的刷屏案例，看看這些品牌都是如何借助“新年”這個熱點事件的勢能，迅速搶占超級流量，賺足眾人的眼球？

特侖蘇

主題文案：更好的2019，做更好的自己！

點評：往年的特侖蘇代言人只有陳道明、靳東，而今年又有兩位新代言人加入特侖蘇——張鈞甯和鄧倫。特侖蘇邀請了這四大代言人共同拍攝了2019廣告，又以一個全新的面孔面向用戶。

廣告中花式植入產品，將產品巧妙融入到畫面情境中，以達到潛移默化的宣傳效果，順理成章地符合了產品植入講究“隨風潛入夜，潤物細無聲”的最高境界。

四大代言人共同拍攝廣告，無疑是突破了傳統的廣告模式，強大陣容助陣，可大大體現出明星在營銷中的號召力與影響力，明星背后帶著龐大的粉絲群體，推動這次廣告更廣泛地覆蓋目標受眾。加大了此次廣告營銷的宣傳力度，從中也表達了特侖蘇堅持“從更好的開始”的品牌主張。其次，對于用戶而言，特侖蘇這波新年廣告帶給大家更多的是驚喜與新年的美好祝愿：更好的2019，努力做更好的自己。

京東白條

主題文案：“一點當典行”網紅店橫空出世

點評：就在2018年尾聲已敲響時，京東白條又出來“搞事情”了，竟然在京城“四大兇宅之首”—— 朝內81號開了快閃店，使得擁有百年歷史的“京城第一鬼宅”， 搖身一變，成為了一家網紅店，吸引眾多時尚潮人前來打卡，深夜排隊的壯觀場面實在令人驚嘆。

京東白條精準洞察年輕人現實痛點和情感需求，以及抓住了他們的獵奇心理，將無數傳說的冒險勝地——朝內81號，首次改造成京東白條“一點當典行”，為大眾提供了全新的刺激潮玩體驗。讓年輕人通過【當與換】的儀式感，把負能量、情緒、雜念統統“分期”丟掉，切身感受“一點改變，好過一成不變”，告別社畜、廢青的過去，獲得新生，在2019開始更好的人生。

京東白條“一點當典行”網紅店的問世，可謂打破傳統印象中的金融理財玩法和當鋪玩法，從一點事務局到一點當典行，京東金融始終在突破體系和行業的限定，持續打造坐擁“潮人”人設的品牌。同時也彰顯出一個擁有年輕人的潮玩精神、有溫度的品牌，更有效建立了品牌與用戶深度溝通的情感紐帶。不得不說，這一反常態玩起時尚新潮，簡直是顛覆了人們對京東白條的印象，京東白條這波營銷實在是妙！

據悉，2019年將會有5期系列活動陸續落地全國，既佛系又喪的年輕人，不可錯過！

OLAY

主題文案：下一站，無懼年齡

點評：新的一年里，BBDO廣州攜手OLAY，帶來無懼年齡的《下一站》，OLAY這支反逼婚廣告，戳中了多少人的心窩？相信，給了你不少啟發。

廣告中講述的是一個發生在“年齡列車”上的故事，女主手握一張名為“年齡”的車票，正在尋找著自己的位置，突然驚奇發現這里的車廂都是按照年齡劃分的。通過這極為扎心的故事情節激發更多“大齡剩女”的思考，但也引發了更多女性產生堅定的想法，不應該因為年齡而倉促步入婚姻的殿堂。

其實，這一廣告刷屏朋友圈，那是因為這廣告基于對女性的心理洞察，找準眾多女性的痛點，讓人產生強烈的代入感，更能給予女性啟發，正確面對自己的每一個年齡階段。由始至終，OLAY給人傳達了一種“不畏年齡，勇敢做最真實的自己”的精神，無形中體現了OLAY對用戶的最切實的關懷，使得其品牌深得人心。

迪士尼

主題文案：“夢想成真”

點評：迎來新的一年，這支由迪士尼推出的暖心廣告正式上線后，獲得眾多網友的一致好評，都稱這已被故事中的“小白鴨”所吸引。

廣告片講述了一只小白鴨費盡千辛萬苦，終于和偶像唐老鴨見面的故事。以呆萌的“小白鴨”形象，然后制造感人的故事，直擊用戶的內心深處的情感，從而引起用戶的共鳴，加強了用戶對品牌的認同感。

這次廣告貼合了現實生活，從用戶的情感出發，喚醒人們的夢想，不忘初心，勇往直前，因此，迪士尼給人傳遞的不只是對美好生活的向往，更多的是對夢想的追求與執著。還有向用戶表達了：盡管我們都長大了，迪士尼還在守護我們最童真的夢想。所以，迪士尼通過這一波觸動人心的情感營銷，為品牌與用戶之間架起了一座真正的情感橋梁。

榮耀手機

手機性能測試

（掃描二維碼觀看視頻）

點評：說到手機的耐摔性，很多人都會想到諾基亞，但諾基亞在現如今的手機市場普及性明顯不如其他品牌。而在今年，榮耀手機開始耍出了新招——推出一創意廣告，鐵證榮耀手機才是“堅強者”。

這是一支榮耀測試手機性能的宣傳片，讓手機歷經各種考驗，包括油煙考驗、零下40度的超低溫測試、高達55度的超高溫測試、殘酷的刮擦實驗等，最后用結果彰顯：榮耀手機的性能強大。

所以，榮耀手機通過展示這優質的手機性能來加強用戶對其產品的認知，刷新用戶的榮耀手機原有的印象。從用戶的角度考慮，用實驗證明，體現產品的最大價值，從而滿足用戶對手機產品的各種需求，也引導用戶對榮耀手機產生正面的認識。最后也突顯了“生活中1%的可能，也要100%的做到”的品牌理念，然而，既有可看性，又“用實力說話”的產品廣告，自然會把人征服得心服口服。

網易云音樂

主題文案：“遇見你真好”年度聽歌報告

點評：2018年的網易云音樂的年度報告，居然在2019年的第四天才遲到出現，網易云音樂的“遇見你真好”年度聽歌報告，又雙叒叕刷屏了……

眾所周知，網易云音樂于2013年4月23日正式發布，也是國內首個以“歌單”作為核心架構的音樂APP，每次網易云音樂的營銷與“走心”產生了密不可分的關系，大眾千呼萬喚始出來的網易云音樂年度總結報告終于出來了，雖然QQ音樂、酷狗音樂也在年前亮出了年度音樂總結，但偏偏是網易云音樂的年度聽歌報告刷屏了。

這次的年度總結，滿足了用戶對音樂的需求，也滿足了一些有情懷的用戶，而且其歌單給予用戶滿滿的成就感，輕易地完成了一次階段總結。吸引更多用戶參與其中，紛紛曬出自己的年度歌單報告，使得這次網易云的年度聽歌報告，引發了廣泛的傳播。

屈臣氏

主題文案：“做自己，美有道理”

（掃描二維碼觀看視頻）

點評：就在2019年到來的鐘聲一響起，大家便紛紛立了新的flag，而屈臣氏上線的H5，彰顯著“做自己，美有道理”的品牌主張，剛好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

視頻中的“四位小姐姐”show出了“不跟隨、不妥協、不偽裝”的模樣，還有人的語言配合動感的畫面，折射出現實生活中年輕女生渴望表達自我，追求個性與態度。呼喚大家在新的一年，立起了2019新flag。同樣也展現了屈臣氏就是一個有態度的品牌。

只想說，在這2019新年之際，屈臣氏推出了這一波滿滿正能量的廣告，能俘獲用戶的芳心也是毋庸置疑的了。

縱觀以上品牌營銷案例，可謂各有千秋，但共同點旨在使得品牌深入人心。

然而，眾多品牌營銷過程中需要從用戶角度出發，都說，一個成功的營銷，是因為“走心”，在傳達品牌產品信息的同時，也能使得受眾與品牌成功產生情感的共鳴，讓用戶更深刻地記住其品牌。

當然，我們也更期待2019，品牌主們能推出更多刷屏級的好案例。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

隨著互聯網產品的不斷向前發展，「產品設計導向」一類的概念已經不僅限于大公司中，在往日越來越注重「短期效率」的小公司也都紛紛開始注重產品設計方面的建設。

所謂的「產品設計導向」指的是產品建設之前要圍繞著產品的立項、目標用戶等等去規劃產品的功能點，明確產品核心價值；在產品上線之后，通過數據分析和功能反饋，發掘更多的需求，去規劃下一步的「功能增刪改」，將產品的設計方向引導到更正確的位置，提升用戶留存率，延伸挖掘出產品更多的可能。

另一方面，從現在的設計環境而言，對所有的設計師既是機遇，又是挑戰。大量的 UI專用工具（Sketch、Principle、Flinto、Origami等）的出現，大大提升了產品前期 UI設計師的工作效率，所以現在「全鏈路思維」已經從剛出現時的「概念化思維」變成了「主流化趨勢」。所以現在很多的 UI設計師在站酷發布自己的作品的時候大部分都喜歡加入一些產品前期分析（功能設計、用戶畫像等）內容。

但是很多設計師的分析環節明顯就是為了證明「有」而去「做」，缺少了真正的分析部分。給我印象很深刻的就是之前看到的一個二手房買賣的UI設計作品，典型用戶畫像里主流用戶是：「男、七十歲、目標是給自己的兒子購買婚房」。實際上這種所謂的產品分析流程對于設計師而言是沒有任何幫助的，只是從形式上走個過場罷了。

本篇主要講述產品設計中的一些分析方法，范圍從「個人練習式設計」到「團隊合作式運作」，適合初級產品經理、交互設計師，在工作中職能范圍與產品規劃有關的 UI設計師，想要學習產品設計的新人閱讀。

產品運作流程概覽

我遇到的比較普遍的問題是：很多設計師對于自己所在公司產品的運作流程并不是十分了解。這樣會在你實際配合工作的時候感到無從下手。有的甚至于同一家公司的不同設計師對于產品設計方面的理解也不盡相同。所以說要從淺到深的學習產品功能設計，就必須先理清當前工作的常規流程，例如常見的產品運作流程。

上面是一個相對規范的產品開發流程，實際上你在看到上述流程圖后，對照自己公司的情況，會發現有一些崗位上的缺失。出現這種情況最大的原因是因為很多公司會把一些職能進行合并用來節省成本，現在仍然有大多數的公司并沒有交互設計師的崗位，但是交互設計的職能不代表沒有，而是被產品經理或者視覺設計師兼任了。你需要明確團隊中各個人負責的職能部分，才能更好地提升溝通效率。

個人思考方法（一）：空·雨·傘

上面講到了設計師的「全鏈路思維」現在已經成為了一種主流的觀點，將來前期的鐵三角「產品經理、交互設計師、UI設計師」很有可能結合變成是「交互視覺二合一」甚至是「產品交互視覺三合一」的狀態。所以現在很多的設計師開始嘗試自己去 DIY 一個需求或者做ReDesign 這樣的設計，希望可以通過這樣的方式完成自己跨領域能力的一個積累。但是當他們打開電腦的時候，大部分人會發現自己突然變得沒有思路，從產品方向點確定到產品視覺產出之間出現了斷層。

其實做過設計練習的人都知道，由于一些現實場景的不同，一些人在做設計練習的過程中會受到很多條件的局限，尤其是在孤立無援的情況下，你面對自己的練習作品往往會無從下手。當然，不同的場景下有不同的分析方法。

在團隊協作的時候，分析方法要全面、嚴謹、反復推敲。

在個人練習的時候，分析方法要、直接、簡化不必要的流程，以培養自己的分析能力為主。在這種場景下，空·雨·傘就是一個非常好的思考提升方法。

簡單概述「空雨傘」思考方式：觀察（事實） → 思考（內在） → 產出（解決方案）。

運用在設計上就是：發現痛點 → 思考原因 → 提出解決方案?！缚铡び辍恪挂驗楹唵?、成本低、易上手，可以作為設計入門培養思考能力的一種方法，但是在使用空·雨·傘的分析方法時需要結合一定的具體調研（或者輕量級的用戶研究）相配合，不然又會變成一味的「拍腦門兒」式的主觀臆測，對于分析能力提升沒有絲毫幫助。

個人思考方法（二）：邏輯樹

邏輯樹又稱問題樹、演繹樹或分解樹等。很多咨詢公司分析問題最常使用的工具就是「邏輯樹」。邏輯樹是將問題的所有子問題分層羅列，從最高層開始，并逐步向下擴展。

簡單來形容一下邏輯樹：把一個已知問題當成樹干，然后開始考慮這個問題和哪些相關問題或者子任務有關。每想到一點，就給這個問題（也就是樹干）加一個「樹枝」，并標明這個「樹枝」代表什么問題。一個大的「樹枝」上還可以有小的「樹枝」，如此類推，找出問題的所有相關聯項目。邏輯樹主要是幫助你理清自己的思路，不進行重復和無關的思考。

如果你要運用邏輯樹方法去分析產品，主要的一點在于學會細化拆解目標。

舉個例子：在2017年我創建了自己的個人號，但在發布了一部分的文章之后，我開始意識到文章的可讀性始終不高。在這個時候我們就可以按照邏輯樹的分析方法去進行拆解分析，去發現自己提升的空間。

如上圖，就是邏輯樹最簡單的一種場景應用。確定目標后向下進行拆分，拆分出三級邏輯樹是比較容易的，甚至你可以沿著已經列出來的大綱繼續深入細化，再拆分出更細更深層的各種提升點。

邏輯樹分析法在個人作品中的主要作用是發散思維；在實際工作中的作用則是針對特定問題進行分析，理清思路?？偠灾亲屇阍诜治龅倪^程中更加有條理，避免重復思考。但是邏輯樹分析也有一個缺陷，就是在邏輯樹分析的過程中，根據現象分裂出子層級的步驟十分依賴你的認知能力，就如同做設計一樣，當你感覺界面的視覺出現問題的時候，需要利用你學出來的知識去進行視覺優化，如果你對設計理論知識掌握程度并不是很強，那就不能采用邏輯樹分析法解決問題。

總而言之，邏輯樹分析法適用于對問題研究十分深入的情況下，如果你對當前的環境認知并不充足，那么就很容易走入歪路，跑偏主題。

實際項目：用戶調研訪談

在一些實際項目中，用戶調研是需求來源的主要渠道。提起用戶調研，很多人會覺得這不屬于 UI設計師應該做的事情。其實行業逐漸規范的現在，用戶調研、分析需求的能力也成為了衡量 UI設計師能力的一個標準?，F在的互聯網產品種類繁多，從早期只做主流行業，到現在基本所有的冷門行業都有涉及。作為設計者，大多數設計師已經開始在設計的過程中心有余而力不足。

造成這種現象的主要原因是隨著行業的細分以及范圍的擴大，我們距離用戶的真實場景偏離太遠，導致我們在設計中很容易理所當然地賦予給用戶大量無用的東西，偏離了用戶所需要的主要軌道。因此對于很多的設計師來說，學會了解用戶以及分析需求成為了十分重要的事情。

下面是我整理的在用戶調研過程中的幾點認知。

1. 保證調研的目標的準確性

我們需要明確，我們希望通過調研達到怎樣的目的？例如：提升部分頁面轉化率，收集用戶對于產品不滿意的地方，通過用戶使用產品發現用戶潛在的痛點。

2. 有目標的選擇用戶

一般來講互聯網公司都有收集客戶反饋的部門，他們掌握著所有客戶的反饋意見。我們在選擇調研用戶的時候，最好可以根據我們在調研行動確立初期擬定的目標去選擇調研目標。

3. 適當的準備調研內容

當我們確定了調研目標和調研用戶之后，就可以根據現有狀況去準備調研內容。調研內容一定是要在事先擬定好（開始調研之后根據實際情況進行改動）。

一般市場調研細分的維度通常有四種，分別是：地理、人口統計、行為、心理統計。運用在互聯網產品里面就更加的復雜。以B端產品為例：我們在調研中可能要把調研對象分為客戶（老板）和用戶（業務員）去進行不同情況的信息跟蹤，而且根據產品的屬性不同，需要提前預設好調研內容的側重。

4. 調研過程中

在調研過程中，我們可以適當結合上文講述到的「空雨傘」方式去進行調研觀察，收集用戶需求。

在調研過程中，除了思考之外更多需要注意的是對用戶洞察的記錄與剖析，在記錄用戶行為的過程中，需要遵循「不干擾」、「不引導」、「記錄客觀」等原則，這樣才可以保持用戶行為記錄的準確性。

5. 獲取反饋整理結果

在調研結束后，我們應該產出一份完整的調查報告，按照本次調研預設目標進行整理，規劃出合適的大綱，把調研收獲轉化為明確的產出，產出形式最好以報告（PPT、PDF），而不是口述或者微信消息，這兩者之間差別很大。

需求歸類：KANO模型

雖然說現在很多的公司都開始建立了用戶體驗類的部門，但是因為用戶調研或者體驗類的工作很難去量化產出。而且在大部分情況下當產品按照用戶調研反饋的結果進行調整后，往往很少會出現我們幻想中的「逆襲」、「口碑急劇上升」，有時還會因為受到一部分用戶觀點的帶偏導致產品口碑下降，用戶表示不滿；又或者會出現需求級規劃混亂，重要功能反而后上線這種尷尬的情況。

所以這驅使著團隊中負擔「用戶體驗」職能的角色對用戶需求進行正確的分類和排序。

這個時候就可以運用到卡諾模型（KANO模型）。

KANO模型是東京理工大學教授狩野紀昭（Noriaki Kano）發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。根據不同類型的質量特性與用戶滿意度之間的關系，狩野教授將產品服務的質量特性分為五類。

1. 基本型需求

用戶對企業提供的產品或服務因素的基本要求。是用戶認為產品「必須有」的屬性或功能。當其特性不充足（不滿足顧客需求）時，用戶很不滿意；當其特性充足（滿足用戶需求）時，用戶也可能不會因而表現出滿意。對于基本型需求，即使超過了用戶的期望，但用戶充其量達到滿意，不會對此表現出更多的好感。

例如對于網盤類產品來說，用戶的基本需求是能快速地上傳和下載。如果下載速度達不到用戶的期望，則用戶滿意度將一落千丈。對于顧客而言，這些需求是必須滿足的，理所當然的。對于這類需求，企業的做法應該是注意不要在這方面失分，需要企業不斷地調查和了解顧客需求，并通過合適的方法在產品中體現這些要求。

2. 期望型需求

提供該功能，用戶滿意度提高，如果不提供該功能，用戶會感覺到不滿。當然在這里要補充一句，這里的需求并不都是我們整理出的主觀需求，也有可能是用戶在使用的過程中產生的客觀類需求，例如遇到不會的體驗，需求得到響應時我們給的反饋。

例如對于一些 O2O類的產品，雖然做的都比較成熟，但是由于體量龐大的原因，偶爾也會受到糟糕的體驗，用戶在受到糟糕的體驗之后往往會期望能通過反饋得到心理上的安慰。例如攜程（旅程預計時間偏差）、美團（酒店體驗差）、餓了么（用餐體驗差）等。在用戶遇到這種糟糕體驗之后，期望能通過投訴建議獲得官方的反饋，那么官方把這種問題解決的越圓滿，用戶的滿意度也會隨之提高。

3. 興奮型需求

興奮型需求又稱魅力型需求，指的是不會被用戶過分期望的需求。對于興奮型需求，隨著滿足用戶期望程度的增加，用戶滿意度也會急劇上升，但一旦得到滿足，即使表現并不完善，用戶表現出的滿意狀況也是非常高的。反之，即使在期望不滿足時，用戶也不會因而表現出明顯的不滿意。

4. 無差異型需求

不論提供與否，對用戶體驗無影響。是質量中既不好也不壞的方面，它們不會導致顧客滿意或不滿意。

5. 反向型需求

用戶沒有這個需求，提供后用戶滿意度反而會下降。

按照 KANO模型分析可以對收集到的產品需求進行分類，篩選掉一些不合理的需求。更好更有目的性的完成產品待辦清單的記錄。

最后

對于設計師來講，不管是個人設計練習還是團隊項目，都應該掌握一定的產品需求收集和分析的方法。如果你真的下定決心要向交互設計、用戶體驗方向發展，那就更需要下定一些功夫去學習相關的知識，學會形成自己的思考方法。一開始可能會很痛苦很累，但是如果一味的試圖走捷徑，最后只會得不償失。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。