交互設計之設計心境：創造情緒板的7個動機

人人都是產品經理 2018-08-19 14:05:13

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

本文將致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。enjoy~

想象一下你努力工作，花了很多時間來創建一個詳細的原型，然后一個客戶拒絕它甚至不接近他想要的。聽起來很熟悉，不是嗎？至少每一個設計師都經歷過這樣一個不愉快的局面。也許現在每個人都希望得到一些相關的建議，如何避免這種情況，但真正說沒有一個完美的決定。

然而，有幾種方法有助于降低客戶拒絕的風險，并節省設計師的時間和勇氣。今天的文章致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。

什么是情緒板？

情緒板技術不僅在設計領域流行，而且在許多創造性的專業人員中流行。情緒板是確實的板（數字或材料），從照片到各種肌理，人們填充不同種類的東西以至于能將想法和概念形象化。

與線框和原型不同，情緒板不顯示未來項目的詳細圖片。它們意在傳遞正確的情緒，并帶來產品期望的情感。

情緒板是一個有用的工具，幫助設計師有效地與客戶和團隊成員合作。紙板可以在一個緊湊的時間框架內輕松地被創建，并把抽象的想法變成現實。這樣，設計師可以有效地與他人分享他們的想法，因為視覺材料總是比流暢的說法更好。

如何創建情緒板？

情緒板是一個很好的方法來實驗調色板，字體和風格，以及規劃一個項目的視覺層次。每個人都自己決定在情緒板中包含哪些組成部分。UI/UX設計師通常使用各種樣本以至于可以來描述界面元素的特征。讓我們來看看情緒板常見的幾種類型。

自由拼貼

設計師經常收集免費高清的圖片，方便他們在項目或其他地方使用這些素材。這些收集品可能有助于情緒板的創作。將美麗的照片組成的自由拼貼是傳遞設計理念的一種有效方式。此外，拼貼可以用插圖，字體和顏色案例來構成。

創建這種類型的情緒板是最快的，也是最容易的。但是，如果客戶比較關注細節，他們可能并不會對將來項目中的這些拼貼感興趣。

參考收集

靈感來源和想法可視化的另一種方法是找高質量的參考。網上有很多資源，如Behance和Dribble，在那里設計師可以通過免費瀏覽的方式獲取靈感和還有一些實際項目的示例。由一個相同風格或任何其他特性聯合起來的設計作品可以很容易地說明一個新項目的想法。此外，這樣的情緒板可以幫助客戶有效地理解一個概念，因為他們可以看到類似的參考，并能夠大致想象出他們的產品會是什么樣子。

模版畫板

這些情緒畫板更像是原型和線框圖。他們的目標是展示產品的結構和視覺層次。不同之處在于模版畫板上的UI元素沒有線框圖中的原型或示意圖那么詳細。把隨機的插圖和照片來當做界面的構成元素，并以此來展示（數字）產品的布局。此外，可以用這種方式選擇圖像，從而更容易的確認合適的配色。這種方法比原型更快，因為它不需要細節。

為什么UI/ UX設計師應該創建情緒畫板？

我們中的許多人可能注意到，在設計工作流程中，線框和圓形總是被描述為基本階段，而很少人提到情緒畫板。有些人認為他們是在浪費時間，或是認為這只是一種“娛樂”。經管如此，仍然有很多人把畫板作為每個創意過程的一部分。但是他們為什么要選擇這項技術呢？在這里，我們收集了設計師的原因清單。

1.節省時間和精力

情緒畫板的第一個且很大的有點是它不需要花太多的時間就能完成。這意味著，在幾小時或者更少時間內，設計師就可以創建一個視覺指南，為客戶提出一個概念。情緒畫板可以很容易地編輯，這樣既省時又省力。

這樣的視覺指南是一個很好的基礎，可以快速的跳轉到下一個階段——原型階段。此外，如果客戶對結果不滿意且想要一個新方案，設計師也不會變得神經質，因為他們不用花一整天的時間來創建一個詳細的演示。

2. 獲取靈感

當然，設計師不能總是依賴靈感，因為他們有工作要做，然而，如果創造者收到啟發，事情就能更有效的進行。情緒畫板是一個尋找創意和熱情的好方法。美麗的照片和插圖有助于找到正確的情緒和風格。此外，如果可能，你可以試著通過你周圍的東西來創建一個情緒畫板當做素材使用。據說手工對創造性思維有很大的影響。所以為何不試一試呢？

3. 找到一個對的顏色配色板

一個拼貼內可以包含照片、插畫和顏色形成布置引人入勝的樣品。在一個板上混合不同顏色的圖片，即使UI元素還沒有準備好，設計者也可以用調色板進行實驗。

4. 加強與客戶的溝通

當產品處于抽象概念階段時，設計師和客戶有時很難在討論時相互理解。例如，雙方可以以不同的方式看到某種風格，從而引起爭論。這就是為什么使用一些視覺參考如情緒板總是一個好主意

5. 少說話，多展示

繼續上面的觀點，應該說任何長的報告都不能比視覺呈現更好地解釋你的計劃和想法。在客戶的腦海中，文字無法成形，但視覺材料是一個可靠的指導，幫助客戶深入深入細節并正確理解你的想法。

在早期階段說明你的想法，這樣客戶可以看到你的計劃以及他們的產品是如何成形的。

6. 為設計找到一種風格

如果一個創意團隊沒有收到客戶關于設計風格的指示，任務就落在設計師的肩上。要了解一種或另一種樣式如何工作，不必為它們中的每一種構建詳細的原型。添加到情緒板不同的紋理，實驗類型的插圖，測試字體，并改變顏色。用情緒板來嘗試選項比用一個接一個地改變原型更快、更方便。

7. 讓客戶參與流程

獲得客戶信任的方法之一是讓他們覺得自己深入參與了一個項目。因此，在這個階段，如果他們愿意，他們可以積極參與風格和樣本的選擇。在非設計師的情況下，做模型是一種很簡單的技巧。

可以建議客戶對照片和圖片進行拼貼，如果不是新客戶，也可以提供參考。通過這種方式，設計師可以輕松地了解客戶的品味和偏好，并了解他們對項目的期望。

數字設計項目的情緒板的例子

為了更實際地介紹這個問題，我們想向您展示由Tubik設計師Dima Panchenko編寫的用于用戶界面設計項目的擴展情緒板集。他還做了一些常規筆記向客戶展示了情緒板，這對溝通的過程和選擇了項目的概念有積極的影響。

1. 用于設置客戶對屏幕總體風格概念的偏好的情緒板

2. 情緒板呈現出項目需求所對應的風格上的眼光

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

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

為了幫助設計師提升基礎審美。每周我們會挑選全球優秀拔尖的設計，幫你解讀每個設計背后的思考！讓基礎審美養成設計好習慣的第一步。

------------------任何設計問題添加微信：uiskyss---------------------------

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

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

一、項目背景

手機充值作為一個日活數千萬的工具型產品，親密充作為多號碼充值的首要場景，對話費充值的生態與成長起到至關重要的作用。未來，在新用戶增速放緩環境下，發揮親密充功能沉淀的用戶充值關系，將成為我們新的探索方向。

所以此次在父親節進行發力，制作一款可以對手機充值親密充有拉動作用的 H5 品宣。

相對于每年母親節的聲勢浩大，但是一到父親節世界就都安靜了。這是機會也是挑戰，機會在于因為父親節平均聲量較小，所以產出較容易被大家所看到，同時也面臨著關注度不夠的客觀情況的挑戰。

二、創意來源

這個用戶的狀態反映了許多人父親節送禮物的常態，送來送去好像什么都不合適，最終還是充了一筆話費，這恰好也是此次話費充值父親節品宣的落腳點。此次品宣的雛形就初現了，一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子，他們之間發生的火花。

但若單單如此，則略顯單調，如何增加趣味性與可玩性呢？

• 趣味性：配音的趣味性來源于劇本的趣味性與聲音的趣味性，劇本的趣味性可以在劇本中增加各種各樣的梗，聲音的趣味性可以聯想到各地的方言。那么選擇哪些地區的方言顯得尤為重要，為了覆蓋更多的地區，我們選擇了中國較有特色且差異較大的地區的方言，分別是江浙滬、兩廣、陜西、東北、中原、四川，這些地區的方言既有識別性，又有一定的喜劇效果。
• 可玩性：在采用選擇題的互動方式，模擬兒子為父親選擇禮物，讓用戶深度參與其中。

確定了主題后開始具體著手項目具體制作，由于第一次制作劇情動畫、配音與答題三者相結合的故事性交互 H5，下面會每一步說明，我們在這些地方都是怎么做的。

三、劇本編寫

劇本是故事性交互 H5 的重中之重，也是其對用戶是否吸引的關鍵因素，若缺乏吸引力用戶則無法到達最后看到品牌曝光，一個劇本最基本的需要一個通順且合理的劇情，更高的要求是要充分利用用戶好奇心，獲取用戶注意力，完成品牌與功能的曝光。按照寫文章的方法，一個飽滿的劇本需要有三部分組成。

• 虎頭：通過一個最常見也是最能引起共鳴的場景——也就是爸爸給兒子打電話，引出劇情；
• 豬肚：用搞笑與接地氣的父子對話持續吸引用戶，同時選擇題帶給用戶參與感；
• 鳳尾：通過劇情引導出，一個父親的日常狀態，對孩子的要求無非是想要日常的關心已足夠，最后引出品宣 slogan 點題，同時曝光親密充入口，引導綁定與充值。

四、劇本配音

具體的配音工作交給配音外包商就好，我們要做的就是對最后效果的把控。

• 配音劇本：需要提前寫好劇本，方便演員配音，同時增加可控性，六種方言需要找相應的方言同學在普通話劇本的基礎上一一編寫成方言劇本；
• 音效劇本：BGM 風格、按鍵音、鈴聲音效等等，可以用表格列出交予外包商也方便后期核對；
• 挑選演員：有些年輕配音演員可以配出老年音色，但是整體語感不及年齡較大的配音演員來的自然和諧。

五、配音與動畫相匹配

首先要了解匹配原理，為了節省開發時間與資源，六種方言動畫全部采用同一種幀數與時間，所以需要匹配每一句的配音時長。

配音時長可以通過三種方法控制：

• 在劇本階段，控制每句話的內容與字數保持大體一致。
• 在配音階段，備注配音演員進行時長控制。
• 在后期階段，通過后期軟件的加減速對每句話時長進行匹配。

六、人物風格設定

確定好玩法流程后，進入視覺階段，這次整體的設定是不同區域的爸爸形象，要表現出各區域的特色，結合好配音，才會達到比較理想的效果。

在人物的刻畫上，視覺是有很多表現形式的，但會根據整體方案的氣質去選擇合適的視覺呈現。由于這次的方案會有人物配音，為了使整體效果更自然，更接近用戶的想象，加上對產品用戶群的定位，我們摒棄了低齡卡通的設計方向，在人物設計上選擇了寫實的設計風格，更符合用戶心理對父親這個嚴肅、嚴謹的心理印象。

結合對話的內容以及動畫的表現形式，在細節刻畫顏色搭配上增加復古的味道，使人物更活潑不呆板將字體圖形化設計，結合中國元素，提煉各省市的簡稱加上有特點的人物設計，能更快速的幫用戶選擇以及增加親切感，以下就是各區域的爸爸形象設計，有沒有一款打動你呀。

七、主視覺風格設定

人物的設定出來后，主頁面的視覺風格就比較好把控了，復古的老式畫報風格，是一個很好的選擇～既能突出人物形象，又能把內容很好的劃分整合。

板式設定：

主頁面整體視覺風格確立以及版式布局，畫面主體還是以人物形象為主，配合動畫讓整個畫面更有動感，強調打電話的動作，更貼近產品。

在動畫的設計上，也是遇到了很多困難，因為6個區域人物分為獨白、對話、聽電話3個部分的動畫，而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內，又要保證形態的自然有趣，又要能對上字幕配音。

這里的難度非常非常的大，需要每個步驟都配合的剛剛好，非常感謝開發哥哥耐心打磨，最后的呈現還是很滿意的。

動畫效果，頁面過多就選一部分進行展示：

八、活動效果

最后整體數據效果還是比較理想，用戶完成全部選項占比整體 UV 34.89%，說明 H5 內容對用戶吸引度較高，能夠用內容本身吸引用戶到達廣告落地頁，完成運營目標。也帶來較高的親密充數據，相較平時有顯著提升，給親密充帶來綁定與充值。

九、結語

第一次制作配音動畫相關的運營 H5，制作初期既期待又緊張，中間也遇到了幾次看似無法逾越的難題，最終呈現結果也還較為滿意。

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

這段話是我補上的，我是設計師Johnson1949

提到谷歌原生系統UI大家有的人不是很喜歡，有的人可能已接觸到安卓手機系統＝谷歌系統UI其實，有一些偏頗，2014年的谷歌系統UI還是比較難看，不過自從采用material design風格以來，流暢度和色彩搭配，圖標的設計真的不錯了，目前小編用的是motonexus6，旨在體驗谷歌系統UI。有需要的可以試一下。

UI設計閃屏/啟動頁/引導頁制作技巧

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

需要做一個“開屏頁”

“哪個開屏頁”

“帶跳過的哪個”

“帶跳過的。是一頁的那個還是可以滑動的？”

“滑動的”

上面的對話不知道有沒有很熟悉。

我們都知道APP在啟動時會有一些頁面先行展示，例如這樣

通常來說我們會簡單的把它們統稱為“開屏頁”或者“啟動頁”

但實際上,這種統稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴謹。“熊”寶

寶們表示很委屈。

其實這些“開屏頁”的交互方式其實并不是完全一樣的,因此也承載著完全不同的功能,有著不同的名字:閃屏 Splash Screen、啟動頁 Launch Screen、引導頁Onboarding Screen。接下來我們就來走進它們的“內心世界”,了解一下它們的真正用法。

01 閃屏 Splash Screen

定義：閃屏是每次啟動過程中展示給用戶的一個過渡頁面，用于減緩用戶在打開應用時等待的焦慮心情。

交互方式：閃屏通常是一張背景圖片，無法進行交互，無法點擊也無法跳轉

劣勢：無法跳轉，只能進行展示作用，無法很好的承載營銷需求

優勢：展示時間不可控

使用建議：

避免包含太多文字字符（閱讀速度慢的話可能還沒看完就關閉了）

不用過去吸引用戶的注意（干擾用戶的本來目的）

不要做廣告（干擾，且不能點擊）

02 啟動頁Launch Screen

定義：啟動頁形式閃屏但擁有交互功能，常用于展示營銷活動廣告圖片并引導用戶點擊

使用示例：常用與展示營銷活動廣告圖片并引導用戶點擊

交互方式：

1、點擊頁面或按鈕進入活動承載頁

2、點擊跳過，跳過啟動頁，進入首頁，或N秒后自動消失

注：由于加載時間不確定，啟動圖通常會緩存并存在下次啟動時使用

03 引導頁Onboarding Screen

定義：用戶安裝或更新后首次啟動時展示數個頁面，常用于介紹應用的核心概念，功能玩法，使用場景，核心變更

使用示例：

交互方式：

1、左右滑動可以切換

2、最后一頁頁面可點擊進入

注：首次打開才出現，之后就不在出現，清除用戶數據，再次打開應用可以看到

使用建議：

1.輕易不要使用引導頁,以免阻礙用戶快速的使用體驗

2.為了降低用戶反感程度,引導頁數通常越少越好(<5)

3.盡量提供“跳過”按鈕

4.每頁的文案不要超過9個字,如果有更多內容可以用小號文字進行輔助說明

(根據愛爾蘭哲學家漢密爾頓觀察發現的7±2效應,一個人的短時記憶至少能回憶出5個字,最多回憶9個,即7±2個。因此展示的文案要控制在9個字以內,超過后用戶容易遺忘、出現記憶偏差。)

劣勢：

增加了用戶進入產品的時間，用戶翻頁過多，可能會失去耐心，降低好感度

04常規的啟動流程

通常來說：開屏三兄弟順序如下：

流程僅是建議的常規流程,通常來說閃屏是基本都有的,而啟動頁和引導頁,如果產品需要,三個流程都走一遍也不是不可以,不過還是要盡量考慮到用戶的忍耐度,不要讓用戶在漫長的“走流程”中失去了最初的興趣。

小結

Appe曾經在《iOS人機交互手冊》里建議:盡量不要展示閃屏或其它啟動流程,避免干擾用戶注意力然而,在馬桶蓋、地板磚甚至是美女身上都能打廣告的今天,啟動頁/閃屏/引導頁這三兄弟自帶的“廣告位”光環,讓產品、運營們對其欲罷不能,幾乎已經成為APP的啟動標配,一起組成了現在常見的啟動流程。它們共同承擔起展示品牌性格,廣告營銷入口,功能介紹與引導的大任。

這讓我想到最近看的一個段子,放出來給大家看看,僅做娛樂。

不過,正所謂存在即合理,既然市面上的啟動流程都是“全套服務”,說明這么做定是符合特定階段的市場需求的,所以作為產品設計師的我們在調侃過之后,還是要做好我們的本職工作:用專業知識解決實際問題?？催^這篇文章后,相信

你又重新認識了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產品、品牌、運營大佬了~

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

APP中搜索框的樣式以及區別

云和數據西安中心 2018-07-09 13:24:29

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

前言

搜索框是 app 內最常見的控件之一，可以幫助用戶快速又精準找到期望的內容與功能。不同的使用場景下，根據頁面中搜索的重要程度，搜索框也有著不同的樣式。

下面就和大家聊聊常見的四種樣式：一級tab、頂部搜索、搜索 icon 、隱藏式搜索。

01.一級tab

位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。設計的時候通常會使用“放大鏡” icon ，簡單、識辨度高符合用戶已有的認知。

部分 app 會在一級 tab 中設置“發現”入口來承接搜索功能，在“發現”頁面中，由于增加其他運營內容導致流量被分攤，搜索相對就會弱一些。

一級 tab 相比其他方式，搜索過程更方便，點擊操作更容易。

例如在貝殼找房 app 中，“找”作為該 app 的重要功能單獨設立一個入口，用戶搜索時無需進入二級頁面中去完成條件篩選，搜索過程更方便、一目了然。

在篩選中選擇總價、房型、特色、朝向等條件后，點擊“開始找房”按鈕進入搜索結果頁。如果在搜索過程中退出，再次回到該頁面后，仍會保留上一次操作的結果，方便下次修改和查找。

貝殼找房和 App Store 搜索入口在底部導航，這個位置符合拇指熱力區操作，屏幕偏下的位置單手持握手機的時候更容易點擊。

需要注意的是底部導航的數量有限。在底部導航超過5個的時候不建議在底部再增加入口，過于擁擠不適合用戶點擊。

02.頂部搜索

位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。當用戶瀏覽的時候，搜索框也會懸停在頂部，不斷引導用戶進行搜索。

通常以搜索框的形式存在，為了突出搜索框，搜索框會有淺灰色的底/描邊/投影、帶顏色的導航襯底或者有明顯的提示語。

不同類型的 app 搜索功能也不一樣，除了文本搜索，淘寶有圖片搜索功能，方便拍圖找物；蝦米音樂還有語音搜索功能，方便查歌找曲。

頂部搜索相比其他方式，搜索入口更顯眼，為轉化提供更多流量。

例如在天貓 app 中，當用戶進入的時候，部分是帶著明確的購買意圖，這時就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導航欄上，即使是在上滑的時候，也是在頂部。

在頂部搜索框內推薦了客廳地毯，根據用戶的歷史搜索行為觸發的引導，在用戶已經搜索的基礎上，轉化率會大大的提升。 App 運營還會根據熱點、時節更換搜索框的預設關鍵詞，能吸引更多的點擊量。

需要注意的是結合場景去使用搜索功能，例如支付寶，剛進入 app 用戶可能找不到想要的功能在哪里，這時候搜索框置頂讓用戶方便去查找。但是當用戶在向下瀏覽的時候，用戶想要瀏覽推薦內容，搜索功能相對減弱，為了減少空間占用，搜索框變搜索 icon 。

03.搜索icon

使用 icon 作為搜索點擊區域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。設計的時候通常也會使用“放大鏡” icon 。

搜索 icon 相比其他方式，搜索位置更靈活，可以單獨出現，也可以和其他功能組合。

當搜索功能在頁面中不再是高頻使用功能時，僅通過搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區域少，可與其他功能組合出現，例如 in ；也可單獨出現，如貓眼，僅靠圖標標紅來提示用戶此功能。

需要注意的是在同一個 app 的不同頁面中，由于對搜索功能的需求不同，有些頁面會選擇搜索 icon ，有些頁面會選擇頂部導航。例如天貓 app ，在品牌頁面中，對于用戶即將瀏覽的內容都是根據用戶行為產生和運營推薦的，自然搜索功能也會弱一些，采用搜索icon 即可。天貓首頁強調引導用戶去搜索、購買商品，采用頂部搜索框。

04.隱藏式搜索

位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現，平時不會打亂用戶的行為。微信首頁的搜索功能在初始進入時是隱藏的，當用戶下拉頁面時，頂部搜索框才會出現，這就和使用場景密不可分。

微信首頁（iOS端）剛進來的時候主要以處理最近回復為主，搜索功能相對弱化，在用戶瀏覽列表的時候，搜索框也不會懸停在頂部導航。而在第二個 tab 通訊錄列表中，主要以查找聯系人為主，搜索功能一開始進入就顯示在列表頂部。

總結

絕大部分的 app 里帶有搜索功能，搜索功能可以幫助用戶快速找到所需內容，減少時間成本。搜索也是提高流量的重要入口，吸引用戶注意力。

但想要搜索在頁面中恰如其分的應用并不那么容易，需要引導用戶行為和分析使用場景，這就依賴我們前期大量樣式積累，才能輸出合理的設計方式。

我們再來回顧文中提及的四種搜索框樣式：

1.一級 tab ：位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。

2.頂部搜索：位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。

3.搜索 icon ：使用 icon 作為搜索點擊區域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。

4.隱藏式搜索：位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現，平時不會打亂用戶的行為。

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

據悉，Magic Leap近日將公布關于Magic Leap One的2D和3D用戶界面，有關媒體還在該公司的開發人員文件中發現了包括Landscape和Immersive在內的應用程序。

一看就懂！詳解大廠UI設計規范制作步驟

小小設計控 2018-07-30 09:34:38

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

一、提取設計原則關鍵詞

1. 提取一級關鍵詞

第一步，先要去提取出關鍵詞，這個關鍵詞怎么來，有幾種方式獲取，第一個從整個公司戰略出發，任何一個產品一定有他的戰略，品牌戰略，商業戰略。舉個例子，假設我們是 eaby，公司今年戰略是全球化，高品質，正品，那么這個就是一級核心關鍵詞，所有的設計語言一定要和公司戰略結合起來，可以理解為戰略關鍵詞是整個設計語言頂部金字塔。

二、運用情緒版提取二級關鍵詞

有了一級關鍵詞后，需要去思考，那么什么樣的設計能給人全球化的感受呢，什么樣的感覺能有高品質，正品應該傳遞什么樣的感覺呢？此刻需要用到第二個方法就是情緒版，通過情緒版去把符合這些關鍵詞感受的圖形具體化。

三、高品質特征是什么？

下圖是一組日本的花茶設計，那么在這組設計中，設計師是如何體現高品質呢？

△ 首先包裝很精美耐看，設計簡約

△ 做工精量，整個產品包裝，都是在富士山腳下

△ 采摘環境很透明，值得被信任

△ 整個品茶的過程也特別讓人向往，很有儀式感

△ 整個的設計很完整，很有設計感在里面

通過以上案例拆解，我們能對這個高品質的關鍵詞有更加進一步的理解，高品質原來在情感層面是一個這么抽象的感覺，但是很多同學會問，那么這二級詞匯也很抽象，如何靠這個來做設計，很難去理解及表達，別著急，還有下一步。

1. 高品質設計表現形式？

關于高品質在視覺形式上如何來體現了，哪些設計感覺能代表高品質呢，這個時候就需要我們去尋找一些設計參考，這些案例要能代表高品質。

△ 清晰的有品質的圖片

△ 牛皮癬，不精致不可取

△ 優雅的排版和留白，文字清晰，雜志感受

△ 圖文密集，缺少版式不可取

△ 精致的布局，柵格的體系，給人品質感

△ 缺乏版式及設計感

△ 有設計細節的

△ 無細節不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

△ 設計的延續性和完整性

2. GOOD CASE

3. BAD CASE

四、設計分層

以上就是我們從一個戰略關鍵詞逐步推導到一級關鍵詞，到二級關鍵詞，到設計手法，以及對應設計表達，推導的一個全過程。

• 本能層：清晰的，有設計感的，做工精致
• 行為層：完善的，值得信任的，用心的
• 精神層：讓人向往的，值得期待的

五、總結

以上大概為一個設計關鍵詞的全部推導過程及到設計手法的確定，也是設計語言里面最難的部分，后面的關鍵詞也是類似的思考方法和思路，最終通過推導我們需要得出每個關鍵詞的情緒圖，以及對應設計特征，最終需要在界面中展示的形色字構質，一個完整過程。

比如國際化，同樣通過前面思路，我們需要去思考國際化如何在設計中體現，去提煉出代表國際化的象征物，如地標，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節日場景。

結語

希望大家可以通過我這期的分享，能夠詳細理解到如何從公司戰略層提取到核心一級關鍵詞，到二級關鍵詞，以及對應的設計手法，對應到形色字構質，大家可以依據此方法去拿你現在手上的界面去做一次體系化的推導。

最后，依據推導出來的原則，以及對應的設計手法去做概念，去在界面中運用，最終完成設計語言第一步，設計關鍵詞和設計手法定義。

圖片素材作者：Tran Mau Tri Tam ?

安卓手機發展到現在，除了硬件方面受到大家關注之外，很多消費者在選擇手機的時候，都會注重這款手機搭載的系統，也就是手機UI。就目前的情況來看，很多廠商的產品都有自己的特定UI，這些UI都是基于安卓系統深度打造的產品。