UI巴巴 2018-07-05 21:02:31
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
相對于其他類型的APP，商城APP設計難度比較高，因為電商APP業(yè)務比較復雜，既要展示完整的業(yè)務功能，又要保證用戶體驗，非?？简濽I設計師的設計功力。所以小編精心挑選了幾款比較優(yōu)秀的電商APP界面設計作品，希望對設計師有借鑒意義，里面的一些精髓還是值得一“抄”。
1、極簡的設計，適用安卓平臺，跟其它設計不一樣的是篩選按鈕放在底部。
2，商城的登錄頁和產(chǎn)品信息流頁面。
3，安卓平臺的商城app首頁。
4，極簡設計的商城app。
5，卡片式的產(chǎn)品翻頁設計。
6，漸變色的運用，不對稱的排版。
7，商城產(chǎn)品列表頁設計。
8，服裝類商城，篩選器的設計。
9，生鮮類商城app的設計。
以上商城app設計案例里有產(chǎn)品頁界面設計，也有商城首頁的ui設計。電商APP的設計不能只滿足表面的視覺層面，還要關注業(yè)務的流程，這樣設計出來的APP才能吸引更多用戶訪問和購買你的產(chǎn)品。
人人都是產(chǎn)品經(jīng)理 2018-08-19 14:05:13
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
本文將致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。enjoy~
想象一下你努力工作，花了很多時間來創(chuàng)建一個詳細的原型，然后一個客戶拒絕它甚至不接近他想要的。聽起來很熟悉，不是嗎？至少每一個設計師都經(jīng)歷過這樣一個不愉快的局面。也許現(xiàn)在每個人都希望得到一些相關的建議，如何避免這種情況，但真正說沒有一個完美的決定。
然而，有幾種方法有助于降低客戶拒絕的風險，并節(jié)省設計師的時間和勇氣。今天的文章致力于稱為情緒板的技術。讓我們來看看情緒板是什么，以及他們在設計師的工作流程中是如何幫助的。
情緒板技術不僅在設計領域流行，而且在許多創(chuàng)造性的專業(yè)人員中流行。情緒板是確實的板（數(shù)字或材料），從照片到各種肌理，人們填充不同種類的東西以至于能將想法和概念形象化。
與線框和原型不同，情緒板不顯示未來項目的詳細圖片。它們意在傳遞正確的情緒，并帶來產(chǎn)品期望的情感。
情緒板是一個有用的工具，幫助設計師有效地與客戶和團隊成員合作。紙板可以在一個緊湊的時間框架內(nèi)輕松地被創(chuàng)建，并把抽象的想法變成現(xiàn)實。這樣，設計師可以有效地與他人分享他們的想法，因為視覺材料總是比流暢的說法更好。
情緒板是一個很好的方法來實驗調(diào)色板，字體和風格，以及規(guī)劃一個項目的視覺層次。每個人都自己決定在情緒板中包含哪些組成部分。UI/UX設計師通常使用各種樣本以至于可以來描述界面元素的特征。讓我們來看看情緒板常見的幾種類型。
設計師經(jīng)常收集免費高清的圖片，方便他們在項目或其他地方使用這些素材。這些收集品可能有助于情緒板的創(chuàng)作。將美麗的照片組成的自由拼貼是傳遞設計理念的一種有效方式。此外，拼貼可以用插圖，字體和顏色案例來構(gòu)成。
創(chuàng)建這種類型的情緒板是最快的，也是最容易的。但是，如果客戶比較關注細節(jié)，他們可能并不會對將來項目中的這些拼貼感興趣。
靈感來源和想法可視化的另一種方法是找高質(zhì)量的參考。網(wǎng)上有很多資源，如Behance和Dribble，在那里設計師可以通過免費瀏覽的方式獲取靈感和還有一些實際項目的示例。由一個相同風格或任何其他特性聯(lián)合起來的設計作品可以很容易地說明一個新項目的想法。此外，這樣的情緒板可以幫助客戶有效地理解一個概念，因為他們可以看到類似的參考，并能夠大致想象出他們的產(chǎn)品會是什么樣子。
這些情緒畫板更像是原型和線框圖。他們的目標是展示產(chǎn)品的結(jié)構(gòu)和視覺層次。不同之處在于模版畫板上的UI元素沒有線框圖中的原型或示意圖那么詳細。把隨機的插圖和照片來當做界面的構(gòu)成元素，并以此來展示（數(shù)字）產(chǎn)品的布局。此外，可以用這種方式選擇圖像，從而更容易的確認合適的配色。這種方法比原型更快，因為它不需要細節(jié)。
我們中的許多人可能注意到，在設計工作流程中，線框和圓形總是被描述為基本階段，而很少人提到情緒畫板。有些人認為他們是在浪費時間，或是認為這只是一種“娛樂”。經(jīng)管如此，仍然有很多人把畫板作為每個創(chuàng)意過程的一部分。但是他們?yōu)槭裁匆x擇這項技術呢？在這里，我們收集了設計師的原因清單。
情緒畫板的第一個且很大的有點是它不需要花太多的時間就能完成。這意味著，在幾小時或者更少時間內(nèi)，設計師就可以創(chuàng)建一個視覺指南，為客戶提出一個概念。情緒畫板可以很容易地編輯，這樣既省時又省力。
這樣的視覺指南是一個很好的基礎，可以快速的跳轉(zhuǎn)到下一個階段——原型階段。此外，如果客戶對結(jié)果不滿意且想要一個新方案，設計師也不會變得神經(jīng)質(zhì)，因為他們不用花一整天的時間來創(chuàng)建一個詳細的演示。
當然，設計師不能總是依賴靈感，因為他們有工作要做，然而，如果創(chuàng)造者收到啟發(fā)，事情就能更有效的進行。情緒畫板是一個尋找創(chuàng)意和熱情的好方法。美麗的照片和插圖有助于找到正確的情緒和風格。此外，如果可能，你可以試著通過你周圍的東西來創(chuàng)建一個情緒畫板當做素材使用。據(jù)說手工對創(chuàng)造性思維有很大的影響。所以為何不試一試呢？
一個拼貼內(nèi)可以包含照片、插畫和顏色形成布置引人入勝的樣品。在一個板上混合不同顏色的圖片，即使UI元素還沒有準備好，設計者也可以用調(diào)色板進行實驗。
當產(chǎn)品處于抽象概念階段時，設計師和客戶有時很難在討論時相互理解。例如，雙方可以以不同的方式看到某種風格，從而引起爭論。這就是為什么使用一些視覺參考如情緒板總是一個好主意
繼續(xù)上面的觀點，應該說任何長的報告都不能比視覺呈現(xiàn)更好地解釋你的計劃和想法。在客戶的腦海中，文字無法成形，但視覺材料是一個可靠的指導，幫助客戶深入深入細節(jié)并正確理解你的想法。
在早期階段說明你的想法，這樣客戶可以看到你的計劃以及他們的產(chǎn)品是如何成形的。
如果一個創(chuàng)意團隊沒有收到客戶關于設計風格的指示，任務就落在設計師的肩上。要了解一種或另一種樣式如何工作，不必為它們中的每一種構(gòu)建詳細的原型。添加到情緒板不同的紋理，實驗類型的插圖，測試字體，并改變顏色。用情緒板來嘗試選項比用一個接一個地改變原型更快、更方便。
獲得客戶信任的方法之一是讓他們覺得自己深入?yún)⑴c了一個項目。因此，在這個階段，如果他們愿意，他們可以積極參與風格和樣本的選擇。在非設計師的情況下，做模型是一種很簡單的技巧。
可以建議客戶對照片和圖片進行拼貼，如果不是新客戶，也可以提供參考。通過這種方式，設計師可以輕松地了解客戶的品味和偏好，并了解他們對項目的期望。
為了更實際地介紹這個問題，我們想向您展示由Tubik設計師Dima Panchenko編寫的用于用戶界面設計項目的擴展情緒板集。他還做了一些常規(guī)筆記向客戶展示了情緒板，這對溝通的過程和選擇了項目的概念有積極的影響。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
香港理工大學教授John Heskett認為，作為設計師有三個階段性的價值：修飾者，區(qū)分者，設計驅(qū)動。在信息爆炸的今天，設計師每天閱讀大量的設計文章、作品，但卻依然提升緩慢。一個優(yōu)秀的設計作品：到底好在那里？背后思考是什么？品牌價值有哪些？…為了幫助設計師提升基礎審美。每周我們會挑選全球優(yōu)秀拔尖的設計，幫你解讀每個設計背后的思考！讓基礎審美養(yǎng)成設計好習慣的第一步。
------------------任何設計問題添加微信：uiskyss---------------------------
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
隨著消費升級的步伐，商家總結(jié)出在帶動消費能力上小孩>女人>寵物>男人的規(guī)律，爸爸們作為商家最不重視的一個角色，該如何在父親節(jié)以爸爸為主角制作一款 H5 呢？手機充值作為一個日活數(shù)千萬的工具型產(chǎn)品，親密充作為多號碼充值的首要場景，對話費充值的生態(tài)與成長起到至關重要的作用。未來，在新用戶增速放緩環(huán)境下，發(fā)揮親密充功能沉淀的用戶充值關系，將成為我們新的探索方向。
所以此次在父親節(jié)進行發(fā)力，制作一款可以對手機充值親密充有拉動作用的 H5 品宣。
相對于每年母親節(jié)的聲勢浩大，但是一到父親節(jié)世界就都安靜了。這是機會也是挑戰(zhàn)，機會在于因為父親節(jié)平均聲量較小，所以產(chǎn)出較容易被大家所看到，同時也面臨著關注度不夠的客觀情況的挑戰(zhàn)。
這個用戶的狀態(tài)反映了許多人父親節(jié)送禮物的常態(tài)，送來送去好像什么都不合適，最終還是充了一筆話費，這恰好也是此次話費充值父親節(jié)品宣的落腳點。此次品宣的雛形就初現(xiàn)了，一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子，他們之間發(fā)生的火花。
但若單單如此，則略顯單調(diào)，如何增加趣味性與可玩性呢？
確定了主題后開始具體著手項目具體制作，由于第一次制作劇情動畫、配音與答題三者相結(jié)合的故事性交互 H5，下面會每一步說明，我們在這些地方都是怎么做的。
劇本是故事性交互 H5 的重中之重，也是其對用戶是否吸引的關鍵因素，若缺乏吸引力用戶則無法到達最后看到品牌曝光，一個劇本最基本的需要一個通順且合理的劇情，更高的要求是要充分利用用戶好奇心，獲取用戶注意力，完成品牌與功能的曝光。按照寫文章的方法，一個飽滿的劇本需要有三部分組成。
具體的配音工作交給配音外包商就好，我們要做的就是對最后效果的把控。
首先要了解匹配原理，為了節(jié)省開發(fā)時間與資源，六種方言動畫全部采用同一種幀數(shù)與時間，所以需要匹配每一句的配音時長。
配音時長可以通過三種方法控制：
確定好玩法流程后，進入視覺階段，這次整體的設定是不同區(qū)域的爸爸形象，要表現(xiàn)出各區(qū)域的特色，結(jié)合好配音，才會達到比較理想的效果。
在人物的刻畫上，視覺是有很多表現(xiàn)形式的，但會根據(jù)整體方案的氣質(zhì)去選擇合適的視覺呈現(xiàn)。由于這次的方案會有人物配音，為了使整體效果更自然，更接近用戶的想象，加上對產(chǎn)品用戶群的定位，我們摒棄了低齡卡通的設計方向，在人物設計上選擇了寫實的設計風格，更符合用戶心理對父親這個嚴肅、嚴謹?shù)男睦碛∠蟆?
結(jié)合對話的內(nèi)容以及動畫的表現(xiàn)形式，在細節(jié)刻畫顏色搭配上增加復古的味道，使人物更活潑不呆板將字體圖形化設計，結(jié)合中國元素，提煉各省市的簡稱加上有特點的人物設計，能更快速的幫用戶選擇以及增加親切感，以下就是各區(qū)域的爸爸形象設計，有沒有一款打動你呀。
人物的設定出來后，主頁面的視覺風格就比較好把控了，復古的老式畫報風格，是一個很好的選擇～既能突出人物形象，又能把內(nèi)容很好的劃分整合。
板式設定：
主頁面整體視覺風格確立以及版式布局，畫面主體還是以人物形象為主，配合動畫讓整個畫面更有動感，強調(diào)打電話的動作，更貼近產(chǎn)品。
在動畫的設計上，也是遇到了很多困難，因為6個區(qū)域人物分為獨白、對話、聽電話3個部分的動畫，而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內(nèi)，又要保證形態(tài)的自然有趣，又要能對上字幕配音。
這里的難度非常非常的大，需要每個步驟都配合的剛剛好，非常感謝開發(fā)哥哥耐心打磨，最后的呈現(xiàn)還是很滿意的。
動畫效果，頁面過多就選一部分進行展示：
最后整體數(shù)據(jù)效果還是比較理想，用戶完成全部選項占比整體 UV 34.89%，說明 H5 內(nèi)容對用戶吸引度較高，能夠用內(nèi)容本身吸引用戶到達廣告落地頁，完成運營目標。也帶來較高的親密充數(shù)據(jù)，相較平時有顯著提升，給親密充帶來綁定與充值。
第一次制作配音動畫相關的運營 H5，制作初期既期待又緊張，中間也遇到了幾次看似無法逾越的難題，最終呈現(xiàn)結(jié)果也還較為滿意。
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。
這段話是我補上的，我是設計師Johnson1949
提到谷歌原生系統(tǒng)UI大家有的人不是很喜歡，有的人可能已接觸到安卓手機系統(tǒng)＝谷歌系統(tǒng)UI其實，有一些偏頗，2014年的谷歌系統(tǒng)UI還是比較難看，不過自從采用material design風格以來，流暢度和色彩搭配，圖標的設計真的不錯了，目前小編用的是motonexus6，旨在體驗谷歌系統(tǒng)UI。有需要的可以試一下。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
需要做一個“開屏頁”
“哪個開屏頁”
“帶跳過的哪個”
“帶跳過的。是一頁的那個還是可以滑動的？”
“滑動的”
上面的對話不知道有沒有很熟悉。
我們都知道APP在啟動時會有一些頁面先行展示，例如這樣
通常來說我們會簡單的把它們統(tǒng)稱為“開屏頁”或者“啟動頁”
但實際上,這種統(tǒng)稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴謹。“熊”寶
寶們表示很委屈。
其實這些“開屏頁”的交互方式其實并不是完全一樣的,因此也承載著完全不同的功能,有著不同的名字:閃屏 Splash Screen、啟動頁 Launch Screen、引導頁Onboarding Screen。接下來我們就來走進它們的“內(nèi)心世界”,了解一下它們的真正用法。
定義：閃屏是每次啟動過程中展示給用戶的一個過渡頁面，用于減緩用戶在打開應用時等待的焦慮心情。
交互方式：閃屏通常是一張背景圖片，無法進行交互，無法點擊也無法跳轉(zhuǎn)
劣勢：無法跳轉(zhuǎn)，只能進行展示作用，無法很好的承載營銷需求
優(yōu)勢：展示時間不可控
使用建議：
避免包含太多文字字符（閱讀速度慢的話可能還沒看完就關閉了）
不用過去吸引用戶的注意（干擾用戶的本來目的）
不要做廣告（干擾，且不能點擊）
定義：啟動頁形式閃屏但擁有交互功能，常用于展示營銷活動廣告圖片并引導用戶點擊
使用示例：常用與展示營銷活動廣告圖片并引導用戶點擊
交互方式：
1、點擊頁面或按鈕進入活動承載頁
2、點擊跳過，跳過啟動頁，進入首頁，或N秒后自動消失
注：由于加載時間不確定，啟動圖通常會緩存并存在下次啟動時使用
定義：用戶安裝或更新后首次啟動時展示數(shù)個頁面，常用于介紹應用的核心概念，功能玩法，使用場景，核心變更
使用示例：
交互方式：
1、左右滑動可以切換
2、最后一頁頁面可點擊進入
注：首次打開才出現(xiàn)，之后就不在出現(xiàn)，清除用戶數(shù)據(jù)，再次打開應用可以看到
使用建議：
1.輕易不要使用引導頁,以免阻礙用戶快速的使用體驗
2.為了降低用戶反感程度,引導頁數(shù)通常越少越好(<5)
3.盡量提供“跳過”按鈕
4.每頁的文案不要超過9個字,如果有更多內(nèi)容可以用小號文字進行輔助說明
(根據(jù)愛爾蘭哲學家漢密爾頓觀察發(fā)現(xiàn)的7±2效應,一個人的短時記憶至少能回憶出5個字,最多回憶9個,即7±2個。因此展示的文案要控制在9個字以內(nèi),超過后用戶容易遺忘、出現(xiàn)記憶偏差。)
劣勢：
增加了用戶進入產(chǎn)品的時間，用戶翻頁過多，可能會失去耐心，降低好感度
通常來說：開屏三兄弟順序如下：
流程僅是建議的常規(guī)流程,通常來說閃屏是基本都有的,而啟動頁和引導頁,如果產(chǎn)品需要,三個流程都走一遍也不是不可以,不過還是要盡量考慮到用戶的忍耐度,不要讓用戶在漫長的“走流程”中失去了最初的興趣。
Appe曾經(jīng)在《iOS人機交互手冊》里建議:盡量不要展示閃屏或其它啟動流程,避免干擾用戶注意力然而,在馬桶蓋、地板磚甚至是美女身上都能打廣告的今天,啟動頁/閃屏/引導頁這三兄弟自帶的“廣告位”光環(huán),讓產(chǎn)品、運營們對其欲罷不能,幾乎已經(jīng)成為APP的啟動標配,一起組成了現(xiàn)在常見的啟動流程。它們共同承擔起展示品牌性格,廣告營銷入口,功能介紹與引導的大任。
這讓我想到最近看的一個段子,放出來給大家看看,僅做娛樂。
不過,正所謂存在即合理,既然市面上的啟動流程都是“全套服務”,說明這么做定是符合特定階段的市場需求的,所以作為產(chǎn)品設計師的我們在調(diào)侃過之后,還是要做好我們的本職工作:用專業(yè)知識解決實際問題?？催^這篇文章后,相信
你又重新認識了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產(chǎn)品、品牌、運營大佬了~
云和數(shù)據(jù)西安中心 2018-07-09 13:24:29
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
前言
搜索框是 app 內(nèi)最常見的控件之一，可以幫助用戶快速又精準找到期望的內(nèi)容與功能。不同的使用場景下，根據(jù)頁面中搜索的重要程度，搜索框也有著不同的樣式。
下面就和大家聊聊常見的四種樣式：一級tab、頂部搜索、搜索 icon 、隱藏式搜索。
位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。設計的時候通常會使用“放大鏡” icon ，簡單、識辨度高符合用戶已有的認知。
部分 app 會在一級 tab 中設置“發(fā)現(xiàn)”入口來承接搜索功能，在“發(fā)現(xiàn)”頁面中，由于增加其他運營內(nèi)容導致流量被分攤，搜索相對就會弱一些。
一級 tab 相比其他方式，搜索過程更方便，點擊操作更容易。
例如在貝殼找房 app 中，“找”作為該 app 的重要功能單獨設立一個入口，用戶搜索時無需進入二級頁面中去完成條件篩選，搜索過程更方便、一目了然。
在篩選中選擇總價、房型、特色、朝向等條件后，點擊“開始找房”按鈕進入搜索結(jié)果頁。如果在搜索過程中退出，再次回到該頁面后，仍會保留上一次操作的結(jié)果，方便下次修改和查找。
貝殼找房和 App Store 搜索入口在底部導航，這個位置符合拇指熱力區(qū)操作，屏幕偏下的位置單手持握手機的時候更容易點擊。
需要注意的是底部導航的數(shù)量有限。在底部導航超過5個的時候不建議在底部再增加入口，過于擁擠不適合用戶點擊。
位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。當用戶瀏覽的時候，搜索框也會懸停在頂部，不斷引導用戶進行搜索。
通常以搜索框的形式存在，為了突出搜索框，搜索框會有淺灰色的底/描邊/投影、帶顏色的導航襯底或者有明顯的提示語。
不同類型的 app 搜索功能也不一樣，除了文本搜索，淘寶有圖片搜索功能，方便拍圖找物；蝦米音樂還有語音搜索功能，方便查歌找曲。
頂部搜索相比其他方式，搜索入口更顯眼，為轉(zhuǎn)化提供更多流量。
例如在天貓 app 中，當用戶進入的時候，部分是帶著明確的購買意圖，這時就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導航欄上，即使是在上滑的時候，也是在頂部。
在頂部搜索框內(nèi)推薦了客廳地毯，根據(jù)用戶的歷史搜索行為觸發(fā)的引導，在用戶已經(jīng)搜索的基礎上，轉(zhuǎn)化率會大大的提升。 App 運營還會根據(jù)熱點、時節(jié)更換搜索框的預設關鍵詞，能吸引更多的點擊量。
需要注意的是結(jié)合場景去使用搜索功能，例如支付寶，剛進入 app 用戶可能找不到想要的功能在哪里，這時候搜索框置頂讓用戶方便去查找。但是當用戶在向下瀏覽的時候，用戶想要瀏覽推薦內(nèi)容，搜索功能相對減弱，為了減少空間占用，搜索框變搜索 icon 。
使用 icon 作為搜索點擊區(qū)域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。設計的時候通常也會使用“放大鏡” icon 。
搜索 icon 相比其他方式，搜索位置更靈活，可以單獨出現(xiàn)，也可以和其他功能組合。
當搜索功能在頁面中不再是高頻使用功能時，僅通過搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區(qū)域少，可與其他功能組合出現(xiàn)，例如 in ；也可單獨出現(xiàn)，如貓眼，僅靠圖標標紅來提示用戶此功能。
需要注意的是在同一個 app 的不同頁面中，由于對搜索功能的需求不同，有些頁面會選擇搜索 icon ，有些頁面會選擇頂部導航。例如天貓 app ，在品牌頁面中，對于用戶即將瀏覽的內(nèi)容都是根據(jù)用戶行為產(chǎn)生和運營推薦的，自然搜索功能也會弱一些，采用搜索icon 即可。天貓首頁強調(diào)引導用戶去搜索、購買商品，采用頂部搜索框。
位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現(xiàn)，平時不會打亂用戶的行為。微信首頁的搜索功能在初始進入時是隱藏的，當用戶下拉頁面時，頂部搜索框才會出現(xiàn)，這就和使用場景密不可分。
微信首頁（iOS端）剛進來的時候主要以處理最近回復為主，搜索功能相對弱化，在用戶瀏覽列表的時候，搜索框也不會懸停在頂部導航。而在第二個 tab 通訊錄列表中，主要以查找聯(lián)系人為主，搜索功能一開始進入就顯示在列表頂部。
總結(jié)
絕大部分的 app 里帶有搜索功能，搜索功能可以幫助用戶快速找到所需內(nèi)容，減少時間成本。搜索也是提高流量的重要入口，吸引用戶注意力。
但想要搜索在頁面中恰如其分的應用并不那么容易，需要引導用戶行為和分析使用場景，這就依賴我們前期大量樣式積累，才能輸出合理的設計方式。
我們再來回顧文中提及的四種搜索框樣式：
1.一級 tab ：位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。
2.頂部搜索：位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。
3.搜索 icon ：使用 icon 作為搜索點擊區(qū)域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。
4.隱藏式搜索：位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現(xiàn)，平時不會打亂用戶的行為。
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
據(jù)悉，Magic Leap近日將公布關于Magic Leap One的2D和3D用戶界面，有關媒體還在該公司的開發(fā)人員文件中發(fā)現(xiàn)了包括Landscape和Immersive在內(nèi)的應用程序。
小小設計控 2018-07-30 09:34:38
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一、提取設計原則關鍵詞
1. 提取一級關鍵詞
第一步，先要去提取出關鍵詞，這個關鍵詞怎么來，有幾種方式獲取，第一個從整個公司戰(zhàn)略出發(fā)，任何一個產(chǎn)品一定有他的戰(zhàn)略，品牌戰(zhàn)略，商業(yè)戰(zhàn)略。舉個例子，假設我們是 eaby，公司今年戰(zhàn)略是全球化，高品質(zhì)，正品，那么這個就是一級核心關鍵詞，所有的設計語言一定要和公司戰(zhàn)略結(jié)合起來，可以理解為戰(zhàn)略關鍵詞是整個設計語言頂部金字塔。
二、運用情緒版提取二級關鍵詞
有了一級關鍵詞后，需要去思考，那么什么樣的設計能給人全球化的感受呢，什么樣的感覺能有高品質(zhì)，正品應該傳遞什么樣的感覺呢？此刻需要用到第二個方法就是情緒版，通過情緒版去把符合這些關鍵詞感受的圖形具體化。
三、高品質(zhì)特征是什么？
下圖是一組日本的花茶設計，那么在這組設計中，設計師是如何體現(xiàn)高品質(zhì)呢？
△ 首先包裝很精美耐看，設計簡約
△ 做工精量，整個產(chǎn)品包裝，都是在富士山腳下
△ 采摘環(huán)境很透明，值得被信任
△ 整個品茶的過程也特別讓人向往，很有儀式感
△ 整個的設計很完整，很有設計感在里面
通過以上案例拆解，我們能對這個高品質(zhì)的關鍵詞有更加進一步的理解，高品質(zhì)原來在情感層面是一個這么抽象的感覺，但是很多同學會問，那么這二級詞匯也很抽象，如何靠這個來做設計，很難去理解及表達，別著急，還有下一步。
1. 高品質(zhì)設計表現(xiàn)形式？
關于高品質(zhì)在視覺形式上如何來體現(xiàn)了，哪些設計感覺能代表高品質(zhì)呢，這個時候就需要我們?nèi)ふ乙恍┰O計參考，這些案例要能代表高品質(zhì)。
△ 清晰的有品質(zhì)的圖片
△ 牛皮癬，不精致不可取
△ 優(yōu)雅的排版和留白，文字清晰，雜志感受
△ 圖文密集，缺少版式不可取
△ 精致的布局，柵格的體系，給人品質(zhì)感
△ 缺乏版式及設計感
△ 有設計細節(jié)的
△ 無細節(jié)不可取
△ 合理的配色，簡單清晰
△ 山寨的配色不可取
△ 設計的延續(xù)性和完整性
2. GOOD CASE
3. BAD CASE
四、設計分層
以上就是我們從一個戰(zhàn)略關鍵詞逐步推導到一級關鍵詞，到二級關鍵詞，到設計手法，以及對應設計表達，推導的一個全過程。
五、總結(jié)
以上大概為一個設計關鍵詞的全部推導過程及到設計手法的確定，也是設計語言里面最難的部分，后面的關鍵詞也是類似的思考方法和思路，最終通過推導我們需要得出每個關鍵詞的情緒圖，以及對應設計特征，最終需要在界面中展示的形色字構(gòu)質(zhì)，一個完整過程。
比如國際化，同樣通過前面思路，我們需要去思考國際化如何在設計中體現(xiàn)，去提煉出代表國際化的象征物，如地標，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節(jié)日場景。
結(jié)語
希望大家可以通過我這期的分享，能夠詳細理解到如何從公司戰(zhàn)略層提取到核心一級關鍵詞，到二級關鍵詞，以及對應的設計手法，對應到形色字構(gòu)質(zhì)，大家可以依據(jù)此方法去拿你現(xiàn)在手上的界面去做一次體系化的推導。
最后，依據(jù)推導出來的原則，以及對應的設計手法去做概念，去在界面中運用，最終完成設計語言第一步，設計關鍵詞和設計手法定義。
圖片素材作者：Tran Mau Tri Tam ?
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
五步創(chuàng)作2018世界杯超級球星插畫
2018年世界杯賽正在如火如荼地進行，為了以示慶祝，我們挑選了來自多個國家的25位超級明星，給他們創(chuàng)作人物插圖，送給廣大球迷們。在創(chuàng)作過程中，Leo Natsume＆Daniel Nyari給了我們很多靈感，非常感謝！
為了準確地畫出每個球星的面部結(jié)構(gòu)特征，一開始收集材料的時候就要收集的全一些。我們要從照片中提取每位球星的準確特征，這樣最后做出來的插畫才能“形神兼?zhèn)洹保拍芊浅Ｉ鷦印?
讓我們一起來看看設計思考的過程吧。
第一步
觀察人物要從不同角度來看——正面，45度和側(cè)面輪廓。此外，我們還需要收集不同面部表情的照片，比如沖刺的時候、休息的時候、微笑的時候等，才能更了解人物。做設計，我們不僅要看到“形”，還要看到“神”，多了解人物的個性和習慣有助于我們做出更有靈魂的設計創(chuàng)意。
第二步
接下來，我們要根據(jù)剛剛從不同角度做的人物分析總結(jié)一般面部結(jié)構(gòu)和特征。我們以梅西為例，他留著經(jīng)典的復古發(fā)型、大耳朵、小而有神的眼睛。當然，為了保持插圖最終的統(tǒng)一性，所有人物的視線水平需要保持一致，并且應該根據(jù)人臉的長度和寬度以及發(fā)型進行調(diào)整。
第三步
通過前兩個步驟之后，現(xiàn)在我們已經(jīng)有了人物的主要圖像了。現(xiàn)在，可以開始考慮人物的種族，膚色，發(fā)型和制服的顏色了，這樣有助于做出原汁原味的人物視覺。同時，我們必須調(diào)整整體色調(diào)來調(diào)節(jié)亮度和飽和度的差異。
第四步
這是最關鍵的一步。完成以上所有操作后，就可以根據(jù)前面步驟中收集的照片選擇每個球星最具特色的面部表情。例如，梅西微笑著輕輕抬起頭的樣子最吸引人，我們就選這個表情。
第五步
這是最后一步，我們將做細節(jié)的調(diào)整，包括人物的整體圖像結(jié)構(gòu)、顏色對比度、面部元素之間的比例等。然后再添加其他內(nèi)容，如條紋、耐克/阿迪達斯徽標和其他此類細節(jié)。最后，將設計草稿縮小200％，以確定某些地方的設計是否足夠亮。
經(jīng)過上述五個步驟之后，我們的球星插畫就出爐啦。我們一共設計了25位球星插畫，挑選部分比較好的展示一下。And,祝大家看世界杯愉快！
作者：Queble
翻譯：熊小熊
原文鏈接：https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.88yangsc.com