<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          頁面轉場: 忽略它可能會使設計師犯錯

          ui設計分享達人

          頁面轉場有哪些類型?該注意什么細節呢?



          不知各位產品經理、UE/UI設計師在設計產品時,除了考慮交互說明、功能狀態、頁面邏輯等之外,是否會關注 頁面跳轉間的“轉場效果”???


          可能有人會覺得:“不就普通的界面左移和右移,需要講這個嗎?”  但是如果我問:“為什么要有頁面轉場?有哪些轉場類型?要注意哪些細節?” 你能一五一十地回答出來么?

          畢竟頁面間的轉場過渡,是用戶體驗我們產品最直接的感知形式,也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹'頁面轉場'的文章,所以今天就寫下這方面的干貨,希望能給你帶來一些收獲。



          Part1:頁面轉場的作用


          頁面轉場最基礎的作用,無疑是拉通頁面與頁面間的使用流程,使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外,頁面轉場還可以體現出多個方面的作用:


          1.加深用戶印象


          一些新奇獨特、區別于競品的轉場效果,完全可以加深用戶對自己產品的印象,留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新,進一步提升了產品的競爭力。


          2.更有儀式感、增加代入感


          就如《每日故宮》在查看文物時,會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍,很符合該產品獨有的特色。另外一些日志產品,會利用“翻書”的轉場效果來加強用戶的代入感、趣味性。


          3.突出重點用戶


          產品里的重點用戶(如vip用戶、平臺作家)都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外,特殊的頁面轉場也能給帶來一種‘專門定制’的感知。


          像《人人都是產品經理》APP,在打開普通頁面和專欄作家的文章時,前者是普通的‘左移’,后者則‘上下開啟’,給讀者一種‘開啟知識寶庫’的進場感受。



          Part2:頁面轉場類型


          說完頁面轉場的作用后,下面就是你可能感興趣的內容:頁面轉場到底有哪些類型?(以移動端頁面轉場為例,PC端亦可復用該類型)


          1.翻書/頁、折疊


          翻書/頁:指模仿現實生活中書本和紙張的切換效果,是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。


          折疊:根據水平或者垂直線為中心點,將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉場。


          2.3D翻轉、立體旋轉


          3D翻轉:將二維的頁面以3D形式(類似魔方)進行切換。適合體現產品功能的“空間感”。


          立體旋轉:根據水平或者垂直線為中心點,將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果,用于容納更多的信息內容。



          3.拉伸、上下合并


          拉伸:根據水平或者垂直線為中心點,將頁面進行拉長消失處理,可分為’內拉‘與’外拉‘兩種方式。


          上下合并:將即將進場的頁面分為上下兩部分進場,使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。


          4.扭曲、頁面融合


          扭曲:根據水平或者垂直線為中心點,將整個頁面進行旋轉、壓縮等處理,適合給用戶傳達一種’異次元、空間傳送‘的效果。


          頁面融合:根據頁面的某個視覺元素,通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’,也是過渡效果最和諧的方式之一。


          5.彈出、縮放


          彈出:根據頁面的某個視覺元素,將其彈入到下一個頁面中去。適合突出某視覺元素,將其重點彈出展示。


          縮放:將整個頁面自大而小或者自小而大進行縮放過渡,很適合大封面的轉場。


          6.移入、淡化


          這是我們最常見、最普通的轉場方式了,大部分的產品使用這兩種轉場方式。移入有’上下左右‘4個進入方向,而一直使用’左移進入、右移退出‘的轉場,最能體現產品功能的使用流程。




          Part3:轉場時應該考慮的細節


          各種效果只是提供一種選擇而已,根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點,是交互設計師不能忽略的事項。


          1.頁面間的關聯性


          頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯的,為了增加用戶轉場后的代入感、避免產生認知錯誤(覺得進錯頁面),可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。


          比如之前QQ游戲中心,將前頁的背景圖沿用到后頁中,讓后頁的游戲描述更有代入感,用戶第一時間就覺得'來對地方了~'


          2.進退方向


          頁面的進入和退出盡量是成反方向的,即頁面從右加載邊移入,退出時則從左邊移出。否則混亂無序地進退方向,會使用戶的操作流和視覺流感到不適。




          3.返回邏輯的不同


          用戶習以為常的頁面返回習慣,一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊(叫法不同,即按住屏幕最左邊位置向右滑到,iOS與Android均可實現該方式)。因“返回/關閉”圖標在視覺上帶有明確的指向性,用戶知道點擊后到底是“返回”還是“關閉”。


          但不同頁面類型的屏幕摳邊,對應的含義和邏輯卻是各不相同的:


          原生頁面:屏幕摳邊是返回上一級頁面

          就如朋友朋友圈一樣,原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態,亦可以重新加載頁面。


          H5頁面:屏幕摳邊是關閉整個鏈接

          無論在H5里操作了多少內容/頁面,屏幕摳邊都會關閉整個H5鏈接,再次進入時只能重新加載頁面,操作記錄都會被清空。


          4.更的返回方式


          除了點擊“返回/關閉”圖標、屏幕摳邊外,可以根據自己產品的頁面形態,考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里,采取“下滑“的形式返回上級頁面。



          原因在于:該詳情頁是以大圖+文字的結構描述食物,而大圖的展示區域很接近于手指的“黃金操作區”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回,“下滑”可以在最短距離內、最快速地讓用戶返回首頁瀏覽其他內容。



          5.是否保存/清除用戶操作


          頁面間的跳轉和退出,勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時,不同的產品都會選擇不同的退出策略。舉個特別典型的例子:微信朋友圈。


          當退出朋友圈再重新進入時,是會停留在退出前的頁面位置,方便繼續瀏覽好友內容。


          而退出朋友圈后,入口處提示有好友新動態時,再次進入朋友圈則回到頂部初始位置,以保證可以第一時間獲取好友動態,滿足用戶日常的社交需求。



          每日故宮在這一方面的處理也很用心:無論用戶在詳情頁里進行了什么操作(屏幕伸縮或滑動位置),退出頁面時都會清除用戶的操作痕跡,還原到文物的初始狀態,給人帶來一種“保護文物、細心嚴謹”的心理感受。

          轉自:站酷-和出此嚴



          底部導航設計的黃金法則

          ui設計分享達人

          導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時,顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式,但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則:


          簡單

          首先,最重要的是,導航系統必須簡單。良好的導航應該感覺像一只無形的手,引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。


          可見

          正如雅各布·尼爾森( Jakob Nielsen)所說,識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用,而不僅僅是在我們預期用戶需要導航的時候。


          明確

          導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標,它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買;此元素將指導他們執行適當的操作。


          一致性

          所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶,要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。


          大拇指設計法則

          史蒂文·霍伯在對移動設備使用情況的研究中發現,49%的人依靠一個拇指在手機上完成任務。在下面的圖中,手機屏幕上的圖表是近似可達圖,其中顏色表示用戶可以觸及的屏幕區域,并與拇指交互。綠色表示用戶可以輕松到達的區域;黃色表示需要伸展的區域;紅色表示需要用戶改變握住設備的方式的區域。



          在設計時,要考慮到你的應用程序將在多種環境中使用;即使是喜歡使用雙手握手機的人也不一定總是使用多個手指,更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣,通過單手和拇指的交互即可輕松達到目標。


          另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。


          最后,也是很重要的一點,要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大(135 ppi顯示器上的48×48像素,縮放比例為1.0倍)。避免使用小于7平方毫米的觸摸目標區域。



          觸摸目標區域不應小于44像素到48像素(或11毫米到13毫米),包括填充。



          標簽欄

          許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分,允許在功能之間快速切換。



          底部導航設計的三個關鍵因素

          導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地,這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。


          1.僅顯示最重要的目的地

          避免在底部導航中使用五個以上的訪問標簽,因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且,隨著每個額外的選項卡顯示,就會增加了應用程序的復雜性。


          避免使用五個以上的目的地。



          避免滾動內容

          對于小屏幕來說,部分隱藏的導航似乎是一個非常好的解決方案,因為你不必擔心有限的屏幕空間,只需將導航選項放入一個可滾動的選項卡即可。但是,可滾動的內容效率較低,因為用戶必須先滾動才能看到所需的選項,因此最好盡可能避免。


          該避免在選項卡欄中放置太多項目,以防止用戶滾動,然后才能單擊所需的選項。



          2.明確當前位置

          應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置。“我在哪里?“是用戶遇到的基本問題之一。用戶應該第一眼就知道如何從A點轉到B點,而不需要任何外部引導。你應該適當的使用視覺提示(圖標、標簽和顏色),這樣導航就不需要任何解釋。


          圖標

          底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標,但大多數圖標代表的功能包括搜索,電子郵件,打印等。


          在適用于Android的先前版本的Bloom.fm應用程序中,很難理解用戶的當前位置。


          顏色

          避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反,遵循這個簡單的規則,用應用程序的主顏色為當前的底部導航(包括圖標和任何顯示的文本標簽)著色。


          左:不同顏色的圖標使你的應用看起來像一棵圣誕樹。右:只使用一種原色。



          這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。


          如果底部導航欄是彩色的,請確保對當前位置的圖標和文本標簽使用黑色或白色。


          左:避免將彩色圖標與彩色底部導航欄配對。右:使用黑色或白色圖標。


          文本標簽

          文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽,因為它們不會截斷或自動換行。


          避免換行,截斷和縮小文本標簽。


          菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。


          目標尺寸

          使目標區域足夠大,以使其易于點擊或單擊。要計算每個底部導航動作的寬度,請將視圖的寬度除以動作數量?;蛘?,將所有底部導航動作設置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。


          顯示了移動設備上的固定底部導航欄,單位為密度獨立像素(dp)


          標簽上的微標

          你可以在標簽欄圖標上顯示微標,以表明存在與該視圖或模式相關的新信息。


          考慮對標簽欄圖標加微標以保持通俗易懂。


          3.使導航不言而喻

          良好的導航感覺就像是一只看不見的手,可以引導用戶前進。畢竟,如果人們找不到它,即使是最酷的功能或最引人注目的內容也沒有用。


          行為

          每個底部導航圖標必須指向目標目的地,并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖,或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件,請改用工具欄。


          每個底部導航圖標必須通向目標目的地。


          上面的控件是工具欄而不是底部導航。


          保持一致性

          盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。

          當選項卡的功能不可用時,不要刪除它。如果在某些情況下刪除了某個選項卡,但在其他情況下沒有,替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用,但要說明為什么選項卡的內容不可用。例如,如果用戶沒有本地文件,則Dropbox應用中的“本地”選項卡將顯示一個頁面,說明如何獲取文件。


          Dropbox應用的空狀態頁面


          滾動時隱藏標簽欄

          如果屏幕是滾動的,則當人們滾動查找新內容時,標簽欄可以隱藏,而當他們開始回到頂部時,標簽欄可以顯示。


          標簽導航可以在滾動時動態消失。



          視覺愉悅

          避免使用橫向運動在視圖之間轉換?;顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。


          圖形圖標:創意導航

          屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面,這種導航模式更加節省屏幕空間。


          Google Material Design,浮動操作按鈕


          Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標,并具有運動行為。

          像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。



          Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時,這些圖標也很方便地消失。



          然而,這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看,不便于用戶頻繁點擊操作

          而且,許多研究人員表明,圖標難以記憶,而且效率極低。只有普遍理解的圖標才能被很好的記憶(例如,打印,關閉,播放/暫停,回復等)。這就是為什么使圖標清晰直觀*,并在圖標旁邊引入文本標簽的*重要原因。


          結論

          導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時,要始終考慮用戶角色以及他們的目標。然后,定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用,他們使用它的可能性就越大。


          轉自:UI中國-Coldrain1


          實心圖標與空心圖標的區別?

          ui設計分享達人

          有讀者說,面試的時候面試官提到了一個問題,但不知道怎么回答。


          這個問題是:實心圖標和空心圖標的區別是什么?


          這個問題網上的討論挺多的,國內外很多設計師都有針對這個問題給出一些自己的看法。


          01.


          最早是 2013 年,設計師 Aubrey Johnson 在 Medium 上吐槽了一段關于 iOS 7 標簽欄圖標的問題。說是 iOS 大范圍使用線性/空心圖標來讓用戶辨別產品功能,會讓用戶在認知理解上更為費力。

          他給出了這樣一張圖,來說明人腦對于圖形的認知負荷主要來自于圖形的線性結構。我查了一下這位設計師的背景,看到他除了是設計師,同時還是一名開發者,而且有認知心理學的學習經歷。所以能承認這個論點是有一定道理的。


          于是另一位設計師 Curt Arledge, 在 2014 年,專門為這個「假說」做了一次實驗。實驗的內容是將一組相同圖標,分為實心和空心,給用戶做測試。結論是相同一組圖標,用戶識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒,其中有個別空心圖標的識別速度甚至比實心圖標還快。


          我仔細翻閱了這個實驗的所有資料和參考文獻,并對這名設計師提出的很多參考做了閱讀,過程中,我發現這個實驗有一個細節問題。


          就是,在給用戶做這組圖標測試之前,他會給這些用戶先熟悉一下這些圖標,以及圖標所代表的意思,然后隨機呈現讓他們做判斷。

          這里的問題是,如果這樣來分析,它的實驗條件就不僅僅是具備識別要求,還要具備記憶要求。


          有些圖標比較具象,傳遞的意思很清晰,不需要記憶,一看就知道,哦,這是「鑰匙」;而有些圖標就沒那么容易理解,在看到的那一瞬間是判定不出來是什么的,所以要想一下,剛才記的圖標里有什么,然后才想起來,哦,它是「標簽」。


          所以情況可能是,用戶在判斷過程中,因為忘了這個圖標所表達的意思,于是想了一下,那識別速度肯定就慢了,無論是實心還是空心。


          所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說,實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。


          在這個問題上,可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論,是更站得住腳的。也就是,空心圖標,在用戶的認知理解上需要調動更多神經元來進行識別。用人話說,就是識別起來比實心圖標費力。


          畢竟連人家蘋果公司也認同了他的說法,現在的 iOS 系統自帶產品,也都把空心圖標改成了實心圖標了。


          02.


          我在梳理完這些資料后,在想,圖標除了讓用戶知道它是什么之外,還有什么作用呢?


          于是延伸出了一個新的理解,就是,實心圖標比空心圖標更具定位與引導的作用。

          上面提到,用戶對于圖標的認識在于識別,不是記憶??吹剿袷裁?,就判定是什么;而不是看到它想起來應該叫什么。


          所以識別圖標除了知道它所表達的是什么意思之外,還要知道它在引導著什么。


          比如,標簽欄圖標就那么 2-5 個,用戶在使用 App 的過程中,不需要強行記憶或特地去識別,只是點擊的時候眼睛一掃而過,來判斷自己要進入哪個功能頁。這時候,它是給用戶做定位引導用的。


          我相信現在在看文章的你,一下子也想不起來微信底部四個圖標的樣子吧?或者對于微信的「發現」頁,也不能理解為什么要用那樣一個圖標來表示。


          但是當你看到它,并知道它在底部第三個位置,點擊之后,還看到了里面有朋友圈,就知道它代表的是什么意思了。

          所以用戶在這層理解上,不會真正去思考它為什么是「發現」,而是直接通過以往對于它的理解,通過識別位置來理解它里面有哪些功能,比如里面有「朋友圈」。


          再通過變化來提示用戶,比如從空心圖標變到實心圖標。所以在一些規范里,它也只是告訴說,空心和實心圖標在標簽欄中的區別就是,空心是未選中狀態,而實心是選中狀態。因為實心圖標所示的色塊,更符合選中且定位于某個功能頁的一種說明提示。


          再用顏色把選中的圖標凸顯出來,讓人在視覺上更聚焦,讓用戶知道自己目前選擇的是它。


          在視覺領域里有個說法是,色塊比形狀更容易抓人眼球。再是具有紋理的色塊,比純色快更吸引眼球。

          空心圖標就是形狀,實心圖標就是色塊。


          所以用戶在看到圖標的時候,不僅僅可以知道它所表達的意思,還能知道自己目前所處的位置。那么相比起來,色塊當然會比形狀更有優勢。


          就好像在商場里,突然尿急,看到這樣的廁所指示牌,你怎么想?

          我相信不管是男生還是女生,第一反應都是往右走吧?


          所以第二個結論是,實心圖標比空心圖標更有引導性。


          03.


          或許有人會問,那空心圖標就沒用了么?不是的。


          其實上面有提到,空心圖標相比實心圖標更難識別,那么人就需要調動更多神經來對空心圖標進行確認。所以它能豐富頁面的視覺效果,也就是裝飾感。


          舉個例子:

          上面兩組圖,能看出來第一組整體看起來會比較抓眼,因為圖標比較重;但是第二組看起來會清晰得多,因為用戶的視線會聚焦在內容上。


          在這個例子中,圖標作為裝飾類信息,不應該搶了內容的風頭,它在這里只是增加了排版基調與內容分層的作用。而設計師應該在這里引導用戶去看內容本身,而不是去看圖標。


          裝飾是給內容做裝飾,而不是給自己做裝飾,如果是給自己做裝飾,那就沒必要用線條來表現了。各位設計師應該懂我意思。


          當然也有用實心圖標來填充列表信息的,這也跟頁面風格有關,比如你產品風格全是扁平塊狀內容的,突然有了一部分空心圖標,也會顯得很不搭。


          我只是在這里用這個例子來說明,空心圖標的引導性沒有實心圖標強,所以更多會被用來當做裝飾品。


          而當空心圖標與實心圖標同時出現,并表達同一類信息時,它們就是一種信息的兩種狀態,比如選中與未選中。


          所以我們現在能看到很多產品依然在標簽欄保留著空心圖標。

          除了風格因素的影響外,它還能體現出被選中狀態的功能圖標,并讓其它圖標起到裝飾性的作用。


          04.


          從后面延伸的兩個點來說,圖標的作用還是很明顯的。我這里只探討了兩類圖標的部分區別,并著重講解了實心圖標的作用。它們之間還是有很多其它內容可以深究的。


          我想說的是,即使用戶對熟悉的圖標,無論是實心還是空心,在實驗環境下的識別速度上無差異,但是兩類圖標對信息所承載的意思確實是不同的。


          于是,本篇文章的結論:

          • 人的大腦在識別空心圖標時,會比實心圖標更顯吃力;
          • 實心圖標的引導性要強于空心圖標;
          • 空心圖標的裝飾性會更強;
          • 實心圖標承載的信息相對更重,參考選中狀態。

          轉自

          界面設計——視覺層面的三維解析

          ui設計分享達人



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


          在我看來,界面設計的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創意創新。




          界面設計是一個很龐大的體系,具有很多原則,比如輕量、容錯、清晰等等,其中包含了交互層面以及視覺層面等,今天我想單獨把視覺剝離出來,來講一講我對界面設計“視覺層面”的理解與認知。


          在我看來,界面設計的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創意創新。


          信息傳遞是讓用戶看的明白,快速清晰的獲取信息;

          視覺美化是讓用戶看的舒服,讓界面足夠美觀;

          創新創意是讓用戶看的驚喜,看到一些不一樣的創意點。


          如下圖:



          三個維度的目標如何實現呢?我提取了以下三個關鍵詞:



          清晰、和諧、獨特是我們要達成的目標,達成目標一定會有一些原理所在,而有了原理就會有具體的執行方法,所以后面的每一個知識點,我都會按照“設計目標-執行原理-執行方法”的邏輯給大家講解,大綱如下:


          1 清晰 

          1.1清晰-降噪-容器整合

          1.2清晰-聚焦-局部放大


          2 和諧

          2.1 和諧-呼應-顏色呼應

          2.2 和諧-節奏-變化對比

          2.3 和諧-飽滿-負形縮減


          3 獨特

          3.1 獨特-品牌延展-IP形象結合

          3.2 獨特-事物本意-事物圖形化



          1.清晰 

          1.1清晰-降噪-容器整合  

          設計目標:清晰

          執行原理:信息降噪

          執行方法:容器整合



          當界面信息過于分散時,會對用戶造成不必要的干擾,導致用戶產生疑惑甚至直接離開界面。


          作為設計師,要做的就是對信息進行整合,我們可以稱之為信息減噪,目的就是讓頁面更加清晰,減少干擾。


          這里我經常使用“容器整合法”來讓內容更加清晰、聚焦。


          當分散的內容裝進一個“容器后”,就可以使內容聚焦在容器當中,讓信息更加規整。而卡片就是一個很好的“容器”。


          實際案例:

          在改版騰訊動漫個人中心的時候,頭部就存在信息分散不聚焦的問題,四個視覺觸點(綠色圈處)分散在四個角落,形成極大干擾。



          這里我就采用了”卡片容器“的方法,將信息裝進容器中,減少分散信息的干擾,使界面更加清晰、工整,效果如下:


           

          現在很多產品都在使用卡片化的布局,尤其是在信息數量、層級較多的時候,更加需要有容器將其規整起來,這樣才會讓界面保持不亂!



          1.2 清晰-聚焦-局部放大  

          設計目標:清晰

          執行原理:聚焦

          執行方法:局部放大




          我們在平時做需求的時候,經常會遇到信息特別多,特別亂的時候,如果此時我們選擇什么都想突出,最后的結果一定適得其反,什么都突出部不了,這時候就需要我們選擇一些內容來進行局部放大,反而可以讓整體信息更加聚焦、清晰。


          這種方法經常用在有數字展示的頁面當中,比如下面這種頁面:



          再比如,下面這個模塊信息,如果”3“沒有放大,整體的信息會亂到你眼花繚亂,我們看下對比:



          所以,大家在遇到有數字,且信息雜亂的時候,就可以采用局部放大的方式來使整體更加聚焦、清晰。



          2.和諧  

          2.1 和諧-呼應-顏色呼應 

          設計目標:和諧

          執行原理:呼應

          執行方法:以顏色呼應為例


           

          很多時候我們會覺得自己做的東西很不和諧,其中一個很重要的原因就是因為頁面中沒有貫穿的元素,也就是沒有呼應,很常用的一個呼應的方法就是顏色呼應。


          例如這個畫面總看起來不夠和諧,你會覺得綠色很突兀,就是因為顏色上沒有呼應:



          而一旦你想辦法,讓綠色“事出有因”,比如取自眼鏡的顏色:



          那么,突兀的問題解決了,和諧的目標也就實現了。

          而剛才那個人中心的界面:



          我們會發現,圖標的顏色也是取自背景色,所以整體看起來才會如此和諧。


          除了顏色呼應,還有很多呼應的方式,比如圖形、圖標風格等等,這里就不再舉例了。



          2.2 和諧-節奏感-對比變化 

          設計目標:和諧

          執行原理:節奏感

          執行方法:對比變化



          對于音樂,節奏感是非常重要的,如果一段音樂一直是一個頻率,那可能也算不上音樂了。


          界面也是一樣的,節奏感是讓頁面變得“和諧”很重要的因素之一,如何做到呢?


          我們在展示文字列表的時候,你覺得下面兩種哪個更舒服些呢?



          我猜你會覺得第二個舒服一些,因為它有變化,有節奏感,所以它和諧、舒適。


          我們會發現很多產品首頁帶有封面圖的列表都有很多種排法,例如1帶多,1x2,2x2,2x3等等:



          就是為了防止每個模塊過于重復,如果每個模塊都是每排兩張封面,一直下來:



          看起來會非常乏味。


          2.3  和諧-飽滿-負形縮減 

          設計目標:和諧

          執行原理:飽滿

          執行方法:負形縮減



          在做圖標或者字體的時候,經常要講一個原則就是“飽滿”,界面上每個“不能拆分的元素”都需要盡量做到飽滿,比如圖標,再比如下面這個信息組件:



          正文就屬于不能拆分的單一原子,大家可能會問,這種信息不就是方方正正的一個信息塊嗎,怎么會不飽滿呢,比如行間距過大:



          再比如,我在優化騰訊動漫信息流的時候,發現正文出現的表情遠遠大于文字,如下圖:



          表情一旦出現,就會造成大量空隙(負形過大),導致整體不夠飽滿、和諧。

          我們可以看下其他產品,表情和文字幾乎都是一樣的大小,他們都會盡量縮小負形空間(也就是空隙小大):



          在這樣的原則之下,優化后的效果如下:



          以上是關于和諧的幾點方法。


          3.獨特 

          如果你的界面做到了清晰、和諧,在視覺層面就已經算是及格了,如果還能加上一點小創意,就可以讓人眼前一亮。

          如何能夠做到獨特?可以從兩方面出發,1是品牌,2是內容本身含義。


          3.1獨特-品牌延展-吉祥物結合  

          設計目標:獨特

          執行原理:品牌延展

          執行方法:IP形象結合



          從品牌出發,可以有很多方向,比如logo,圖形,品牌吉祥物等,下面以品牌吉祥物為例:

          在做小說閱讀器的時候,有一個設置選項是選擇文字的背景顏色,選擇控件是圓形,而品牌形象也偏圓形,此時就可以將圓形控件與形象相互結合:



          但是選擇控件有兩種狀態,為了更加生動,就讓給形象正面面對你的時候作為選擇狀態,而轉過身作為非選擇狀態,大概效果如下:



          此創意已在騰訊動漫小說落地實現。


          3.2 獨特-事物本意延展-事物圖形化 

          設計目標:獨特

          執行原理:事物本意延展

          執行方法:事物圖形化



          除了品牌,還可以根據事物本身的意思來延展圖形,比如日間夜間模式的切換按鈕,男女性別的切換按鈕,都可以利用事物本身的含義來延展圖形設計:



          此創意已在騰訊動漫個人中心模塊落地。


          再比如,彈幕的展示方式,就可以聯想到電視機,再把電視機圖形化,如下圖:



          此創意已經在騰訊動漫小說頻道頁實現。


          這里需要注意下,有時候如果圖形過于普通,可以配合動效來增加獨特性,但一定要注意開發成本。

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


          如何寫出清晰易懂的交互文檔?

          ui設計分享達人

          在做交互文檔之前,我們先要明白什么是交互文檔、為什么要做以及做了給誰看。


          一、什么是交互文檔 


          交互文檔,即交互設計說明文檔。英文 Design Requirement Document ,簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。


          二、為什么需要交互文檔          


          有些人可能對文檔這種東西比較反感,尤其是從事工作不久的朋友。其實工作得越久,越會發現文檔的重要性,它可以幫助你理清思路,并記錄下來,便于回顧。


          工作上而言,有一份規范的文檔可以讓你的設計更有說服力,也易于工作對接,提高彼此之間的溝通效率。 


          三、交互文檔給誰看的   
             

          交互文檔其實要說給誰看,其實具體情況具體分析。有的公司老板也要盯交互文檔,以及甲方爸爸、運營部門同事,都有查看的可能。


          【產品經理】產品經理與交互設計師可能是溝通最多的人,產品經理主要在文檔中確認設計思路和業務流程,然后過一下頁面交互模塊。


          【視覺設計】UI設計師通常最關注的是頁面交互模塊,有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景,以便于自己更了解產品業務邏輯和用戶心理。


          【開發人員】前端的開發同事和UI設計師一樣,最關注頁面交互模塊,其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等,這些都清晰了,他們才能輸出一份準確合格的開發文檔。


          【測試人員】因為測試人員是把關產品上線的一群人,所以各個模塊、步驟都應該去了解透徹,才能提出有效的bug。



          四、如何撰寫交互文檔 


          本文主要闡述以Axure軟件為撰寫工具,大家可以根據實際需求決定用什么軟件(Sketch、PPT、Word、PS、AI 等)。比如小需求可以用Sketch,快而。如果是要給甲方爸爸/大老板看的,使用PPT會讓他們更好理解。



          通常,一個比較基礎、規范的交互文檔(DRD)由:文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然,這不是絕對,你可以根據你的實際工作需要進行增減。


          比如,如果是C端產品的話,用戶調研的結論、用戶畫像、用戶體驗地圖等等,都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下,這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維,大家一起將產品變得更好。


          其次,交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理(兼交互),他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要,重要的是里面的業務邏輯。。。其實用產品思維想,交互文檔就是交互設計師的產品,而看的人就是用戶,保持良好的可讀性,可謂至關重要。


          1、文檔封面

          交互文檔的封面如上圖,通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。


          2、更新日志

          我們都知道,在產品的迭代的過程中,需求/功能是會不斷調整的。而更新日志,就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊,建議是要加上鏈接可直接跳轉至新增內容的,如上圖。

           

          版本號也是同理,都應加上對應的版本鏈接,便于查看者回溯之前的內容,與當前的新版本形成對比。這一點對開發人員來說很重要,其次對于新同事深入理解產品也能起到很大的幫助。

           

          修改日期,通常是按時間倒序排列,查看起來會比較方便。



          3、文檔圖例


          文檔圖例,顧名思義就是關于此文檔的一些輔助說明,目的是為了讓讀者更好地理解文檔。如上圖的:操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。


          4、設計背景/思路

          設計背景,根據實際工作需要,放置一些關于思路整理、靈感來源的文檔。 


          比如用研報告、用戶畫像、競品分析報告、商業畫布等等。增強文檔的說服力,盡量讓每一個人都能理解到產品的戰略目標和業務邏輯。 


          因為我今年對接最久的是一個B端產品的項目,所以整理了一個產品畫像,僅供參考。


          5、業務流程


          業務流程圖,不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程,直接和業務掛鉤,可以說是產品的核心流程。


          例如淘寶APP,買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示,多數情況下是由產品經理繪制。


          以上是我所負責產品的核心業務的流程圖。因為是B端產品,涉及角色較多,針對3個代表性角色分別進行了繪制,僅供參考。(涉及到保密協議,所有關鍵詞都去掉了)


          6、頁面交互


          (1)信息架構

          信息架構屬于用戶體驗的結構層,是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代,否則不會大改。


          (2)權限說明

          如果是C端產品,權限這一塊相對簡單,比較好整理的。B端產品涉及角色眾多,可能要單獨拎出來分析整理。以上僅供參考,大家具體情況具體分析。若是功能很單一的產品,交互文檔中也可省去這個模塊。


          (3)操作流程圖

          產品操作流程圖就是通過圖形化的表達形式,闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時,會產生的一系列操作和反饋的圖標。

           

          注:不要將所有流程匯總在一個表里,或者展示在同一個頁面中,而應跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受,怎么易懂怎么來。 

          上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載,后臺回復“交互”即可。


          (4)頁面線框圖

          頁面線框圖,是通過圖形化的表達形式,闡述產品在頁面層面的信息。包括: 


          【頁面標題】即每一個頁面的對應標題,一般就是導航欄標題


          【頁面內容】以黑白為主,保證信息規整易讀


          【交互說明】用標簽將其對應起來,包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等


          【主流程線】只需要畫出主流程線即可,千萬不可太多太雜,時刻考慮讀者的感受

          以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記,可以讓查看者一目了然更好理解文檔。


          7、全局通用說明


          全局通用說明,指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的,方便自己或者接手該項目的設計師直接調用。其次,對開發及時封裝可復用控件也是有參考價值的。 


          (1)常用控件

          常用控件類似UIKit,通常將極具復用價值的控制整理在一起,方便及時調用。


          (2)復用界面

          顧名思義就是全局可復用的一些內頁,比如選擇聯系人、獨立搜索頁等。 


          (3)時間規范

          在做產品的第一步,就應該約定一個時間規范。不然各個端開發出來,你會發現iOS是斜杠的,Android是橫杠的,WEB是圓點的...真到了發現的時候再改,那真是彼此都是無比崩潰的。 


          (4)缺省頁匯總

          缺省頁一般包括加載失敗、加載中、網絡中斷和無數據的空頁面。為空頁可以按照模塊整理在一起,方便UI設計師最后一起設計缺省頁,保持風格統一。 


          8、廢紙簍 


          廢紙簍,被稱為是交互文檔的“后悔藥”。在需求不斷變動的情況下,改改改的過程中,請把你改過的稿子,放這里!??!因為很可能最后還是用的第一個方案...(此刻內心有點絕望) 



          五、總結


          文檔、軟件只是工具,最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻,都應該站在“讀者”的角度思考,他們看的時候感受會是怎樣的,會覺得很難理解嗎?

          轉自-站酷

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

          全面的圖標設計類型和風格總結

          ui設計分享達人

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

          圖標是 UI 設計中極為重要的一個環節,我們在做每個界面的設計幾乎都會涉及到圖標的表達,出色的圖標設計可以讓界面表達更加精致、有趣。圖標的設計往往也體現著設計師的基本功,因此除了日常多畫提升對圖標造型的把控力外,我們也更需要了解和學習圖標設計的趨勢類型,從而幫助我們提高在設計中的效率。

          基于自我學習的目的,平時在瀏覽一些設計網站時也會做相對應的收集。因此本文主要對于圖標設計的 「類型、風格」 進行了整理,以及自己對于每種圖標類型的思考。




          圖標的類型劃分

          設計網站上的圖標可以說是多種多樣,不同類型的圖標都有著獨特的魅力。例如,線性圖標簡潔輕量、面性圖標厚重直接,當然同一種類型的圖標也具有很多不同的表現形式。

          因此基于本人對圖標的理解,大致劃分為三類:線性、面性、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。



          線性圖標

          使用輕量的線條勾勒的圖標,整體感受也趨向于精致、細致而具有銳度感。不同的線條表現具有不同的視覺感受,細線輕量、直線硬朗、曲線柔美。

          1. 線型圖標基礎分析及想法

          粗細對比

          粗細不同,圖標的力度和重量感就會有差異。粗線的圖標,視覺關注力來說會更加突出,但較于細線的圖標也會顯得粗壯、厚重。細線的圖標,精致、透氣、秀美。

          但在設計時需要依據 「整體的 UI 風格」 來決定線的粗細,而并非單純的考慮圖標的關注度,反而更需要考慮圖標與界面整體的平衡感。

          柔度對比

          直角與圓角決定了外形的感知和風格的走向,如下圖對比中看出,圓角越大圖形越趨向于可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽剛(如下左圖)。因此剛或柔或中間值完全取決于早期對于整體風格的定調。




          繁簡對比

          除了輕量化和簡潔之外,圖標的識別性也是極為重要。如下左圖,「過度簡潔」 導致圖標失去該有的識別度而出現歧義,而下右圖的元素疊加使得圖標稍顯復雜。在繁與簡的平衡中,應該保持在不影響圖標識別度的情況下,最大限度的提升圖標的簡潔程度。




          特征的識別度

          除了簡潔程度,也需要考慮圖標該有的特征。例如下圖 「評論」 圖標的案例,當我把圖標中的「三個點」 去掉時,圖標依舊具有 「對話/評論」 的表意,而當我把下面的 「箭頭」 去掉保留 「三個點」 時,則會出現歧義,它可以被表意為 「更多」 的意思,因此在設計圖標時需要對于表意做精準把握,避免歧義出現。




          保持圖標的特征美感

          如下面的 「心形」 圖標,下左圖是我們具有普識性的圖標,與圓形組合之后依然保持著原有的形態美感。但我們不時也會看到第三種設計,整體外形雖然保持著愛心,但為了與整體風格「一致」 強行對外輪廓進行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關鍵點。




          組合型比例

          組合型的比例會影響到圖標的精致程度,準確的 「比例值」 能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這里以圖標窄邊作為 「基準值」 進行嘗試。當內形為外形的 1 : 2 時(下圖2),圖標的整體視覺效果較為平衡;當大于 1 : 2 并接近 4 : 3 時,圖標內部結構會顯得過于飽滿。而小于 1 : 2 并接近 4 : 1 時(下圖3)則會產生稀疏不緊湊的效果。(這里的比例只是案例需要,實際設計以最終的視覺感知為準)



          2. 線性類型拓展

          基礎的理論,結合延展的應用,可以迸發出更多的創意想法。線形圖標也并非只有一種設計形態。通過以下案例,可以看看線型圖標設計類型的多樣性。

          極簡風格

          整體風格極為簡約,沒有多余的線條,通過線條還原圖形的本質,外形 「簡單」 卻具有很強的識別性,在視覺感知上輕松、干凈。

          極簡的風格圖標在于對圖形的把控,多一筆可能顯得復雜,少一筆可能影響識別程度。以上圖為例,圖標的組合元素保持在 2 個左右,整體較為干凈。

          實際應用:Instagram、Airbnb、Facebook、Twitte




          雙色

          相較于 「純色的圖標」 更具表現力,細節上也會更加豐富,形態感知上多了一層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

          同色系:同為冷色系、暖色系或同一色系的表達形式。如下圖案例,以暗色為主色,亮色點綴提亮,使得圖標具有一種高光提亮的感覺。




          另一組案例是亮色主色結合暗色,整體圖標效果還算可以,但較亮的顏色沒有應用在圖標的關鍵特征上,使得圖標第一眼的感知稍有減弱。





          對比互補色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍色的撞色之后相比單色的圖標更加出彩和具有記憶點。





          實際案例:騰訊動漫我的頁面





          透明度變化

          本質上與上面一種為一個類型的設計,通過透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。




          實際案例:愛奇藝9宮格圖標




          漸變層次疊加

          漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。





          黑白+品牌色

          黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。




          實際案例:大眾點評攻略頁面圖標





          線性漸變

          結合漸變的顏色,豐富了整個圖標的視覺表達,并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。





          實際案例:網易考拉、NAVER




          一筆成形

          此類圖標在視覺表達上具有較高的線性流暢度和設計感,關注點在于整組圖標的 「開口起始點」 設定上需保持一致。例如,「從左到右」或「從右到左」形成一體化的連貫線條,開口起始點不一致會影響整組圖標的一致性,應用在頁面時也會顯得雜亂。



          斷點圖標

          與上一種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找一個缺口來打破 「全包邊圖標」 的沉悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小,另外需要控制開口個數避免過多導致圖標外形過于零碎。




          實際案例:騰訊體育、京東



          面性圖標

          面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴于外輪廓的清晰度,因此在設計時對于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。


          1. 面型圖標基礎分析及想法

          輪廓對比

          輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,一個氣質較為直接硬朗,另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。





          鏤空對比

          適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度并沒有多大作用,沒有鏤空則少了一些透氣感。




          形體對比

          形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標相對會精致一些,多了一些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。



          繁簡對比

          設計面性圖標時,對于多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過于零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。


          2. 面性圖標類型拓展

          面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。

          單色面+點綴色

          整體的外形使用統一的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統一又具有差異化。





          多彩雙色

          通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的 APP 中極為常見,簡單且容易出效果。




          微質感漸變

          微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:




          實際案例:全民K歌





          透明度/灰度變化

          透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。





          實際案例:企鵝FM我的頁面




          透明度變化+漸變

          漸變的設計提升了面性圖標的質感,從顏色上具有一定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。




          透明疊加的圖標+漸變的背景

          此類圖標常常被應用在 UI 界面中的列表或者頂部入口的位置。





          實際案例:全民K歌點歌頁面





          顏色疊加穿透

          圖標透明疊加之后產生了交錯的負形,疊加出第三個面。雖然整體設計依然保持著扁平化,但卻多了一份層次感,并且增加了圖標的細節。




          實際案例:百度網盤





          漸變層次疊加

          整體的效果與透明度變化的圖標較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度感和層次感。





          實際案例:NAVER、掌上生活





          高斯模糊

          此類圖標基本沒有在 APP 中看到,與「透明度變化」或「顏色疊加」相比都更具層次感和空間感,同時圖標也具有較強的設計感。





          線面結合

          結合了線性和面性的優點,既保持了面性的重量感,同時具有線性的精致、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控,不同比例可以呈現出不同的視覺感知。



          1. 線面結合圖標的基礎分析及想法

          線面比例

          線面比例的差異,圖形呈現出來的張力也會有不同的感受?;谥虚g填充的圖標形態嘗試了三種不同的比例,從下圖中可以看出,當填充與外形窄邊比為 1 : 3 時(左圖)圖標呈現往內收的感覺;填充與外形窄邊比為 1 : 2 時(中間)圖標整體較為平衡;當填充與外形窄邊比為 2 : 3(大于1:2)時(右圖)整體具有外擴趨勢。




          組合形式

          線面可以通過不同的組合形式進行繪制。基于不同的組合形態可以設計出多種多樣的線面圖標,不同的組合形式會體現出不同的設計風格,因此在設計時盡量多發散思考,尋找出適合你的組合方式。




          繁簡對比

          線面結合本身就由兩種形式組合,因此在設計的時候更需要對整體造型進行把控,單體(線和面)造型必須保持較高的簡潔程度,這樣最終組合形成的圖標才不會過于復雜(左圖),若本身形態過于復雜,則會降低圖標的辨識度和視覺美觀度。


          2. 線面結合圖標類型拓展

          線面結合的圖標集合了線性和面性的優點,在設計方式上也繼承了兩者的優點。設計方式也是基于以上兩種的結合,因此可以結合出更多設計的可能性。

          黑白線+面性品牌色

          與「線性+品牌色」的做法較為接近,統一的線性顏色疊加品牌色的透出。




          實際案例:好好住、soul




          線面雙色

          基于線面的基礎上,在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。




          線面結合-陰陽

          線和面的結合按 50% 的比例進行設計,依據上下、左右、居中等基礎方式的結構化設計,整體圖標的視覺效果較為跳躍,非常規。



          線面雙色+錯位

          在雙色圖標的基礎上,線和面按照統一的 「百分比」 進行縮放,并進行透視和位移的設計,整體呈現出來的是一種交錯疊加的視覺效果,相比普通的線面雙色更加豐富。




          實際案例:閑魚底部tab、臉球底部tab




          線面錯位+漸變

          基于上一種風格,對面或者線的顏色進行漸變設計,豐富了圖標的質感和顏色更加細膩。




          線面透明度變化

          與「線面透明度變化」的設計方式大致一樣。如下圖案例,「弱線強面」的第一識別度較弱,而「弱面強線」 的外形識別度較高,也更符合圖標的表達。




          實際案例:新浪微博、騰訊新聞

          基于三種基礎的類型表達,可以拓展出多種多樣的設計形式。除了以上的案例之外,還收集了一些其他的設計。





          線面結合 – 插畫

          整體比較偏向插圖的感覺,細節和元素較多,常見于一些 APP 的空白頁設計。




          線面結合 – 卡通插畫

          整體感覺比較可愛、卡通、二次元,常見于一些二次元或漫畫類的 APP。





          面性 – 漸變強質感

          整體風格的光影質感會比較強烈,常在一些活動運營或小游戲的界面出現。




          面性 – 扁平寫實

          整體感覺比較扁平,細節的豐富度與現實感知接近。





          線面+漸變插畫

          整體風格比較偏向絢麗多彩的顏色風格,質感和細節較為豐富。


          寫實風格




          3D質感圖標

          由于 C4D 的制作成本相對較高,目前較少在常規的 APP 中看到。但 3D 作為一個主流的設計趨勢,在時間和能力允許的情況下需要多做這方面的嘗試。




          等距的線面結合

          等距的設計,讓原本線面的圖標豐富了層次,并具有立體透視的感覺。




          除了以上這些之外,我們在實際場景中也會發現一些較為特別的圖標設計。

          Facebook 更多頁面的列表圖標

          整體風格偏向插畫風+漸變質感。由于更多的頁面為純列表的設計,因此整個頁面在圖標的設計上做了很大膽的嘗試,與常規的單色圖標相比更具有吸引力。為了區別不同的業務,系統性質的功能圖標做了色調的區分。




          APP Store 游戲和新APP界面下的類別列表圖標

          整體為具象化扁平風格的設計表達,圖標的顏色還原了最基本的現實感知。




          iOS 系統辦公類軟件的起始頁面圖標

          整體風格比較偏商務簡約,具象的圖形表達+輕微的漸變質感。




          QQ手機版中延展的功能圖標

          整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達,色調方面基于業務屬性結合品牌色進行了區分,整體既統一又具有差異化。




          大眾點評頂部入口的圖標

          整體風格偏向寫實+強漸變+炫光感,每個圖標都具有豐富的細節表達。




          旅法師營地

          游戲、二次元類的 APP,因此在圖標的設計上也偏向細節較為豐富的插畫風格。




          嗶哩嗶哩動漫

          圖標風格偏向卡通插畫,選中態與默認態的設計較為巧妙。



          總結

          本文的重點在于透過這些設計類型或者技法的了解,幫助我們在日常設計中提升輸出效率。圖標雖然作為 UI 設計的基礎,卻有很深的學問,精致的圖標更是可以起到點睛的作用,提升界面的質感和氛圍。

          圖標的種類遠遠不止本文所提到的這些內容,但是萬變不離其宗,都是「線性、面性、線面結合」 再結合 「透明度、漸變、顏色疊加、質感、多維空間」等等的表達方式而設計出來的。

          我們除了需要掌握這些內容之外,還需要提升圖標設計的造型能力,更需要日積月累的練習和思考,從量到質的變化。

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


          破熵而行-驅動產品增長

          ui設計分享達人

          本文是基于我對《破繭成蝶2》讀后的觀點和反思,自己的項目經歷跟作者相似,也是為了更好的總結這兩年對產品、對設計的心得。

          本文篇幅較長,請耐心閱讀。主要是總結一個完善的體系,便于大家理清自己的設計思路和自我定位。


          閱讀本文你可以獲得什么?

          一、前言——擁抱變化,破熵而行

          二、產品設計師的思維轉變

          三、對設計師的能力模型

          四、設計師該關注的數據

          五、產品周期影響設計策略

          六、設計師順勢而為,自我定位 



          一、前言——擁抱變化,破熵而行

          在人口紅利、流量紅利、資本紅利逐漸消退的互聯網下半場,從“買流量、買用戶”為代表的粗放式發展進入了穩扎穩打的精細化時代,需要考慮在有限的資源及能力的基礎上精打細算、量入為出,讓產品可持續地發展下去。


          互聯網產品正在從標準化、大眾化轉向個性化。針對垂直領域或細分用戶群體的產品越來越有市場。戰略層也需要抽絲剝繭,拋去形式注重產品的本質。比如一些下沉型電商業務,紅包和會員都只是一種形式,其實本質還是用戶追求“性價比”有利可圖,所以一旦用戶的“便宜需求”難以達到,還是會引發數據的下降,這就需要大量可持續資本投入維持。見利期的變長,傳統電商行業的鋒芒也被新零售掩蓋,投資人也不斷轉移更創新可收的項目。所以真正的留存是可持續發展的,且需要根據企業自己的實際情況,在戰略上和運營上,有一個人無我有的本質上的創新點(核心競爭力),而非形式上的創新。

          Image title


          在日新月異,變化百態的互聯網下半場,創業者和產品設計工作者都需要改變自己的想法,擁抱變化破熵而行,保持自己戰斗力,用更科學客觀的方法來提升產品價值。



          二、產品設計師的思維轉變

          產品設計師的重要標志是“以產品為中心”的思維及覺悟,即能打破本位主義,站在產品的角度,從整個項目閉環上協同解決問題,提升產品價值。設計師的角度理解,就是打開自身格局,擴展上下游的知識,通過自己的綜合能力助力于業務。在此過程中職能會有跨界,比如我會提出驗證數據的方法,比如ABtest,從業務角度推設計可以通過哪些數據進行提升,然后做出不同方案進行評審,推動項目實施落地。


          產品設計者可以由產品經理,UX,UI擔當或轉變,我更傾向是全棧的UX,通過思想認知的轉變,職能界線的打破來扮演這個角色。自己也是這樣努力的在轉型。得益于公司的開放包容,這兩年我還是能承擔起這樣的角色,建立組織,帶領團隊,通過設計來提升產品價值。對于產品設計師,第一個需要改變的就是產品設計思維。



          2.1從“問題驅動”到“價值驅動”

          Image title


          2.2 始終貫徹精益思維


          互聯網寒冬,連阿里都要把錢花在刀刃上。阿里8月15日發布的財報上,雖然新零售收入水平同步增速高達134%,高于上一季度132%,成阿里本季營收增長引擎,但是阿里本財季對盒馬新零售業務投入仍然十分謹慎。最近兩個季度盒馬開始由原先的大門店業態轉向更多元、成本更低的小業態的轉型期,本財季內凈增門店僅為15家。所以需要我們始終貫穿精益思維去做產品。


          精益思想(Lean Thinking)源于20世紀80年代日本豐田發明的精益生產(Lean Production)方式,精益生產方式造成日本汽車的質量與成本優勢,曾經壓得美國汽車抬不起頭。世界汽車工業重心已向日本傾斜。精益思想的核心就是(消除浪費)以越來越少的投入——較少的人力、較少的設備、較短的時間和較小的場地創造出盡可能多的價值;同時也越來越接近用戶,提供他們確實要的東西。


          那么要做到產品上的精益思維,一方面要貫徹“以提升產品價值為目標”并用數據驗證;另一方面建議先用較小成本在小渠道驗證,然后在擴大投入。

          Image title



          整個產品團隊,不管是產品負責人、產品經理、設計、運營、開發都需要緊密聯合在一起,為提升產品價值而努力。為什么這么說,其實本質上大家都是為了業務好,但是每個人卻扛著不一樣的KPI,產品經理有業務指標,運營有運營指標,設計師也有自己的設計價值觀。如果大家都只為了自己,產品和運營會唯業務指標做導向,典型的就是引入大量無法留存的流量,耗費資源,最終對整個產品長期發展并沒有太多價值。對設計師來說,我見過很多設計都很有偏向性,要么就是一味追求好看,感覺業務擋了自己發揮才能,要么一味分析競品和交互,卻給不出有效、有價值的解決方案。其實都不是站在產品價值上看問題,更希望是自己能交出一份滿意的答卷。我自己也在一個電商摸索期犯過類似錯誤,無法忍受一個沒有細節的產品,過多追求設計質量,而其實產品初期,負責人只想著能快速迭代,找到活下去的出路。



          2.3以始為終打造數據閉環 


          數據閉環就是從你的產品價值目標來拆分你的量化目標,通過設計上線等驗證數據,形成閉環,然后循環優化的這個過程。需要從傳統的“問題驅動”轉變成“價值驅動”,因為解決問題是難以被價值量化的,整個業務發展過程中也會出現很多產品問題需要被優化,我們把“提升產品價值”作為目標就形成了“以終為始”的數據閉環。其實現在大部分企業都是以目標驅動業務的,拆分目標,變成顆粒度目標數據再進行逐步達成,這個過程不是說不去“發現問題-解決問題”,而是需要知道工作要務,“重要緊急”的先做,“重要不緊急”的長期計劃實行,至于用戶體驗上的東西也是要有節奏的去優化。

          Image title




          三、對設計師的能力模型


          對設計師的能力模型一直在提出不同的更高要求,無論是哪個大咖提出來的理論似乎都是非常的正確和所需要的,導致很多設計師的恐慌,我是不是要被淘汰了。

          Image title

          Image title


          其實還是要抓住本質,因人而異看待。設計的能力分布模型,大概分為 “I”型 、“一”型、“T”型。


          “I”型為單一型,傳統對設計師的定義就是單一的,領域分的比較細。單一型主要看深度,深度達到一定程度可以成為專家,但是如果淺薄又單一很容易被淘汰。


          “一”型為廣博型,廣博型最忌諱的就是成為什么都會卻什么都不精的“萬金油”,看似什么都懂,結果做起來什么都廢。


          新型模式“T”型,“T”型既有較深的專業知識,又有廣博的知識面,這類是集深與博于一身的人才,也是市面上最有市場的一類。


          綜合性人才都是需要一個長期由深度到廣度,再由廣度到深度循環提升的過程,在此過程中也很容易迷失,跟“I”型對比,無法通過有限的時間都提升上去,那么需要掌握一定的方法,認識自我逐步提高。

          Image title



          3.1、強大扎實的專業能力——知行合一 廣而不范


          為什么強調專業能力,《破2》里面提到,思維是1,技能是0,話是沒有錯,但是80%以上的設計師還是靠技能在吃飯。有的東西你想得再好無法落地,也是無濟于事。所以一個專業合格的設計師必須有強大扎實的專業能力,當然思維是內驅力,如果你的專業很出色,估計內核也不會差。


          首先要有一個專業優勢判斷,然后強化自己的優勢,再根據橫向模型去擴展對自己工作最優幫助的繼續加強,做到廣而不范。比如你是一個ui設計師,你要保證自己的視覺能力,然后去擴展交互能力,其次再去強化動效,體驗等等。再比如你是一個交互設計要保證自己對交互的精通,然后提高用研、數分能力,再去擴展其他能力。還有要做到知行合一,其實大部分我們都在通過不同的學習提升自己的能力,但是要把理論性,縹緲性的知識概念落實到自己的工作中去,努力去實踐,再復盤總結不斷提升自己的實操能力。比如你學了插畫,你的項目上能不能用上;你競品分析了更好的體驗,能不要也變相用到自己的項目里;你新學了一些分析原理,能不能用同樣的思維來分析自己的項目等等。



          3.2、保障基礎軟實力 —— 一顆強大正能量的心


          心力、腦力、體力,都要保障,尤其是互聯網年輕化后,體力也非常重要,京東就直接把不能加班的員工全開了,多么痛的領悟。那么對于產品設計師其實更關鍵的是心力和腦力,越是高階設計師,思維能力、洞察能力越是重要。無論是ui、ue、還是產品設計師我覺得都需要有強大的自我驅動能力,打破本位主義,不斷擴展自己的專業素質,才能更好的融合于業務。阿里提出:人才是聰明的,的確很多人忽略了先天的差距,事實上同樣的努力,不一樣的天分,總還是有區別的,有的人適合做小兵,有的人適合做將軍,但是你可以保證的是心態,心態里我總結了兩個我覺得非常重要的點,一個就是皮實、一個就是積極,就是有一顆強大而正能量的心!



          3.3、先讓自己變得足夠優秀再考慮做管理


          對于走技能線還是走管理崗,很多人會想的很多。其實先讓自己變得足夠優秀,不斷提升,一切自然水到渠成。領導者或許需要天分,管理者是每個人都可以成為的,且有一些理論和工具可以支撐的,所以很多團隊會內部提拔,因為培養起來并不難。只要你足夠優秀,還是很有希望做管理,相反過早做管理,自己的基石沒打好,管理起來也會比較艱難。有興趣的人可以去聽一下喜馬拉雅上的《可復制的領導力》。如果你勵志要走向管理層,也可以根據阿里的縱向能力模型對號入座,不斷提升,不過很多時候機遇也很重要。



          四、設計師該關心的常規數據


          想要驅動產品增長必須要對數據有所了解,來幫助我們產出更貼近用戶行為的設計,同時需要了解數據產生的過程和基礎工具。最基礎的就是產品提出數據,讓開發進行埋點,此過程中設計也可以提出自己想要關心的數據點。公司有后臺可以直接觀測數據,現在也像GrowingIO數據分析產品無需在網站或app中埋點,即可獲取并分析全面、實時的用戶行為數據,需要觀察數據可以直接去后臺關注,也可以讓產品經理或者數據分析師給你拉數據。


          頁面瀏覽量(PV)

          用戶每1次對網站中的每個網頁訪問(成功訪問/進入)均被記錄1次。用戶對同一頁面的多次訪問,訪問量累計。在一定統計周期內用戶每次刷新網頁1次也被計算1次。理論上PV與來訪者數量成正比,但是它不能精準決定頁面的真實訪問數,比如同一個IP地址通過不斷的刷新頁面,也可以制造出非常高的PV。


          獨立訪客人數(UV)

          訪問網站的一臺電腦客戶端為一個訪客。00:00~24:00內相同的客戶端只被計算一次。使用獨立用戶作為統計量,可以更加精準的了解一個時間段內,實際上有多少個訪問者來到了相應的頁面。


          用戶訪問次數(VV)

          當用戶完成瀏覽并退出所有頁面就算完成了一次訪問,再次打開瀏覽時,VV數+1。VV同時也是視頻播放次數(Video View)的簡稱。


          跳出率(BR)

          表示用戶來到網站后,沒有進行操作就直接離開的比例,代表著陸頁面(訪客進入網站的第一個頁面)是否對用戶有吸引力,常用的計算方式是落地頁面的訪問量除以總訪量。


          退出率(GA )

          針對網站內某一個特定的頁面而言,退出率是衡量從這個頁面退出網站的比例,通過一個頁面的退出次數除以訪問次數。退出率反映了網站對用戶的吸引力,如果退出百分比很高,說明用戶僅瀏覽了少量的頁面便離開了,因此需要改善網站的內容來吸引用戶,解決用戶的內容訴求。


          平均訪問時長(AAT )

          指在特定統計時間段內,瀏覽網站的一個頁面或整個網站時,用戶所停留的總時間除以該頁面或整個網站的訪問次數的比例。該數據是分析用戶粘性的重要指標之一,也可以側面反映出網站的用戶體驗。平均訪問時長越短,說明網站對用戶的吸引力越差。


          轉化率(CR )

          在一個統計周期內,完成轉化行為的次數占推廣信息總點擊次數的比率。常用的是登錄注冊的新流量轉化率和產生實際支付的轉化率。轉化率是產品盈利的重要指標之一,它直接反映了產品的盈利能力。提升轉化是提升產品價值的重要性指標,一般用A/Btest去檢驗更優方案來提升轉化率。


          回購率(RR)

          指用戶對商品或者服務的重復購買次數(回頭客),是針對有購買功能的產品,回購率越高,用戶粘性越高。


          新增用戶

          既安裝應用后,首次成功啟動產品的用戶,按照統計跨度不同分為日新增(DNU)、周新增(WNU)、月新增(MNU)。新增用戶量指標主要是衡量營銷推廣渠道效果的最基礎指標。新增用戶占活躍用戶的比例也可以用來用于衡量產品健康程度。如果某產品新用戶占比過高,那說明該產品的活躍是靠推廣得來,這種情況非常有必要關注,尤其是新增用戶的留存率情況,這種情況留存率低對產品來說也非常危險,視為不可持續發展的流量。


          活躍用戶

          既在特定的統計周期內,成功啟動過產品的用戶。除此之外,我們還可以將活躍用戶定義為某統計周期內操作過產品核心功能的用戶(按照設備去重統計)。

          活躍用戶是衡量產品用戶規模的重要指標,和新增用戶相輔相成。


          DAU(日活):某個自然日內成功啟動過應用的用戶,該日內同一個設備多次啟動只記一個活躍用戶;

          WAU(周活):某個自然周內成功啟動過應用的用戶,該周內同一個設備多次啟動只記一個活躍用戶。這個指標是為了查看用戶的類型結構,如輕度用戶、中度用戶、重度用戶等;

          MAU(月活):某個自然月內成功啟動過應用的用戶,該月內同一個設備多次啟動只記一個活躍用戶。這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。


          留存率

          留存率是驗證用戶粘性的關鍵指標,既在某一統計時段內的新增用戶數中再經過一段時間后仍啟動該應用的用戶比例(留存率=留存用戶/新增用戶*100%)。統計留存用戶的顆粒度有:
          自然日:包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
          自然周:包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
          自然月:包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
          自然日的留存中主要關注(次日留存、7日留存、30日留存并觀察留存率的衰減程度。一般來說,留存率低于20%會是一個比較危險的信號。)

          日留存率:快速判斷App粘性
          日留存率:可以很快的幫助我們判斷 App 的粘性到底強不強。我們可以通過日留存率的數值來判斷一個 App 的質量,通常這個數字如果達到了 40% 就表示產品非常優秀了。我們可以結合產品的新手引導設計和新用戶轉化路徑來分析用戶的流失原因,通過不斷的修改和調整來降低用戶流失,提升次日留存率。

          周留存率:判斷App用戶忠誠度
          周留存率:我們可以通過周留存率來判斷一個用戶的忠誠度,在一周的時間段里,用戶通常會經歷一個完整的使用和體驗周期,如果在這個階段用戶能夠留下來,就有可能成為忠誠度較高的用戶。

          月留存率:了解App版本迭代效果
          月留存率:通常移動 App 的迭代周期為 2 - 4 周一個版本,所以月留存率是能夠反映出一個版本的用戶留存情況,一個版本的更新,總是會或多或少的影響用戶的體驗,所以通過比較月留存率能夠判斷出每個版本更新是否對用戶有影響。


          流失率

          指那些曾經使用過產品或服務,由于各種原因不再使用產品或服務的用戶。用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。流失率和留存率有緊密關聯,流失率高既留存率低,但活躍度不一定高,因此需要綜合分析。也是重點關注次日、7日、30日的流失率。對于流失用戶的界定依照產品服務的不同而標準不同。社交類產品用戶幾乎每天登錄查看,可能用戶未登錄超過1個月,我們就可以認為已經流失了。而電商類產品用戶可能3個月未登錄或者半年內沒有任何購買行為可以被認定是流失了,所以不是每個產品都有固定的流失期限,而是根據產品屬性而判斷。


          一次性用戶

          既新增日后再也沒有啟動過應用的用戶。一次性用戶是關鍵的營銷指標,和判斷無效用戶的標準,從中把目標用戶過濾出來。一般劃定的界限是至少超過7天時間才能夠定義是否是一次性用戶。


          使用時長

          既統計時間段內,某個設備從啟動應用到結束使用的總計時長。一般按照人均使用時長、次均使用時長、單次使用時長進行分析,衡量用戶產品著陸的粘性,也是衡量活躍度,產品質量的參考依據。


          啟動次數

          既統計時間段內,用戶打開應用的次數。重點關注人均啟動次數,結合使用時長可進行分析。用戶主動關閉應用或應用進入后臺超過30s,再返回或打開應用時,則統計為兩次啟動,啟動次數主要看待頻數分布情況。


          使用間隔

          既用戶上次使用應用的時間與再次使用時間的時間差。使用頻數分布,觀察應用對于用戶的粘性,以及運營內容的深度。雖然是使用間隔,但是通過計算同一設備,先后兩次啟動的時間差,來完成使用間隔統計,充分考慮應用周期性和碎片化使用的特征。


          常規數據基本就這些,值得思考的是不同類型的產品,定義每個數據的具體量是不同的,而且產品周期中的不同階段關注的主要數據指標也會有不同側重點。



          五、產品周期影響設計策略 


          產品階段就是產品生命周期,可分為探索期、成長期、成熟期、衰退期,每個階段的設計策略和工作權重都有所不同。雖然每個階段側重點不同,凡是還是需要辯證看待結合實踐,比如大廠的產品初期起點較高,有大流量的引流和背后大數據支撐,所以各種方式都沒有太大的限制,根據業務,資源不同來根據產品用方法。

          Image title


          5.1探索期(產品初創期)


          目標:掌控產品方向(活下去)

          關注:用戶價值

          用戶:假設用戶

          策略:最小成本驗證產品方向

          方法:假設的用戶畫像、產品故事地圖、設計沖刺法、訪談、用戶研究(定性分析)

          關注數據指標:推薦意愿/新增用戶數/滿意度

          品牌:不急于建立

          Image title



          5.1.1、通過訪談、調研,初步建立用戶畫像,抽象假象用戶,提煉關鍵點。


          用戶畫像是在大數據時代背景下,用戶信息充斥在網絡中,將用戶的每個具體信息抽象成標簽,利用這些標簽將用戶形象具體化,從而為用戶提供有針對性的服務。


          產品摸索期我所定義的目標用戶其實并不準確,而是假象用戶,此階段的概念用戶一直隨著產品方向的改變而改變,所以無法確立明確針對性的用戶畫像信息,但是我們應該先確定一個大概的目標用戶定性的去分析,區分用戶角色,挖掘不同角色的痛點,然后找到解決問題的切入點。

          Image title


          5.1.2、利用用戶診斷法建立產品假設,并進行價值評估,明確產品方向。

          Image title


          5.1.3、利用用戶故事地圖篩選核心任務及對應功能


          用戶故事地圖可以用小會議的形式展開,就是讓所有參與者一起用便簽,一張一個動作,從左至右按照時間線,描繪用戶在產品使用場景下所發生的所有用戶行為。同一時間發生的,就寫在同一位置的下方;出現同一場景不同可能的動作時,可能會形成不同的分支動作;直到重回主線或者結束支線。最后關鍵還是總結用戶痛點和產品核心的功能點。

          Image title

          Image title



          5.1.4、貫穿最小成本原則,最小成本試錯——MVP和設計沖刺法


          最小可行產品(MVP)是指可以產生預期成果的最小產品發布,對于迭代產品來說,又可以講最小可行方案:最小可行方案是指可以產生預期成果的最小發布方案。


          設計沖刺法的本質理念跟MVP還是一致的,只不過所用成本更小。設計沖刺法特點:參與人員較少且有最終決策權;閉關沖刺使用白板隨時記錄;適用于風險高、時間緊、起步難的情況。


          MVP是最小可行方案進行發布驗證,而設計沖刺是更短時間產生一個頭腦風暴的真實原型,進行真人測試,這個過程并沒有真正設計一款產品,而是通過設計方式做了一次早起用戶調研,并獲得相對有驗證性的結果,避免真實上線效果不好對用戶造成的負面影響。


          其實市面上大部分還是用的MVP,因為實際上用設計沖刺,一個是對設計人員的要求較高,二是驗證的結果由于測試范圍的限制不一定與市場反應一致。與做一個小產品來說,現在更流行保險的辦法可以做一個小程序,或者幾個小程序進行方案對比,大流量下好乘涼,小程序的開發成本,用戶引入成本更低。



          5.1.5、定性為主,不斷試錯中掌控產品方向


          船小才好調頭,對于產品來說如果本身戰略層出現問題,后續投入越多的資本越難收場,用戶量不上不下,用戶粘性不高,結果資金不夠了,用之雞肋棄之可惜,再轉方向還是比較困難。尤其是用戶對產品建立一定認知后,重新調整大方向,基本等于刷新用戶流。



          5.2成長期(產品高速增長期)


          目標:鞏固差異化的產品定位(活得好)

          關注:產品核心競爭力

          用戶:目標用戶

          策略:大膽創新鞏固差異化的產品定位

          方法:提煉用戶畫像不斷校驗、用戶體驗地圖、設計接力法(定性+定量)

          關注數據指標:新增用戶數/留存率/復購率/活躍度

          品牌:建立有創意且能落地的品牌,加深用戶認知,占領用戶心智

          Image title


          5.2.1、用戶校驗,確立產品定位


          產品成長期用戶大量涌盡,掌握一定數據和掌控產品方向后可以通過數據分析或用戶調研,來看實際用戶特征和之前假設的用戶人群特征是否符合。集中精力服務好最重要的用戶群體,定性挖掘、定量驗證的思路去完成用戶畫像。


          可針對目標用戶進行調研和深度訪談,從用戶選擇產品最關鍵因素提煉產品目前的核心吸引點。用戶的關心點也要跟產品本身的當前定位做對比,看用戶接受到的點是否是產品讓他們感受到的點,感受不到又是什么原因,不斷提煉核心競爭點的優勢。

          Image title


          成長期需要確認產品的定位,就是差異化的產品方向,即差異化的目標用戶群體(價值排序)、差異化的產品及服務(競爭優勢)、差異化的產品價值(核心優勢)。


          價值排序:通過了解用戶特征,明確用戶分類及相關利益群體,然后明確把誰放在第一位。在實際產品設計過程中,我們也可以用價值排序,來設計產品功能和交互體驗,比如平臺收費是針對買方還是賣方。


          競爭策略:避實就虛地找到競爭對手的盲區或自己的優勢所在,為用戶提供差異化服務。競爭策略主要依賴高層的洞見和判斷,如果你出產品和競爭對手沒有本質差異,那就考慮是否可以服務與不同種類的人群或者能提供不一樣的價值。比如同樣是做電商,你的質量、價格、物流、種類是不是有優勢。



          5.2.2、確立增長指標


          增長指標是對應于產品差異化定位的可量化指標。增長指標要符合:可成長性,客觀性,有方向性。避免主觀,虛榮的指標,最常見的就是過分關注獲客拉新指標,留存不足,及前后導向不一致的情況。至于用戶滿意度、任務完成度等主觀的體驗指標可以作為參考,但是不能作為最終的增長指標。核心關注點是轉化、留存、復購、活躍度等指標,既側面體現了良好的用戶體驗,增加了用戶與產品粘性,讓產品長期可持續發展。



          5.2.3、利用用戶體驗地圖(E-Experience Map),同理心地圖,結合增長指標大膽提出假設,排優先級,并根據開發成本等因素通過四象限原則,選擇最小成本提升指標   


          用戶故事地圖、用戶體驗地圖、同理心地圖的區別:用戶故事地圖強調用戶使用產品/服務的任務流程,用它來篩選當前最重要的任務及對應功能,以完成最小可行產品設計;用戶體驗地圖不僅包括任務流程,還包括與之對應的體驗問題,更關注用戶的體驗情緒,從而找到提升體驗的機會點;同理心地圖幫助我們在每個不同場景下與用戶換位思考、打開思路,挖掘用戶選擇決定的深層動機。在實際使用場合沒有嚴格界線,可根據實際情況使用核心點進行分析。

          Image title

          Image title



          5.2.4、體驗升級——逐步發布驗證(設計接力)

          大版本迭代的優點就是一旦成功,可以大幅度拉開和競爭對手的差距,但是一旦失敗,會影響業務的發展得不償失。所以為了預防風險,大多數公司會在上線前先進行可用性測試,進行必要的線上驗證再發布。通過不斷分析增長指標,找選設計方向,進行模塊拆分,接力發布,循環驗證,提升產品價值。


          先驗證后發布方法:


          a、A/BTest

          制作兩個(A/B)或多個(A/B/n)版本,在同一時間維度,分別讓組成成分相同(相似)的訪客群組(目標人群)隨機的訪問這些版本,收集各群組的用戶體驗數據和業務數據,最后分析、評估出最好版本,正式采用(消除UX、bug帶來的影響數據),并不斷迭代進入一下個A/BTest。產品成長期,中小型企業可以用局部變量測試,大型成熟產品可以重疊實驗(更多、更好、更快)。

          要求:1、隨機抽樣;2、足夠的樣本量。

          優點:可以在同時段觀測效果,受到環境影響因素一致,容易客觀驗證方案

          缺點:需要占用開發資源,完整的一次測驗需要花費時間較多


          b、灰度測試

          先進行一個小范圍的嘗試工作,然后再慢慢放量,直到這個全新的功能覆蓋到所有的系統用戶。比如Facebook先發布1%,慢慢推廣到全部,現在普遍大廠也會用到這個方法,減少大版本試錯帶來的損失?;叶葴y試的同時可以A/Btest,在灰度測試過程中選出最佳方案,然后全部發布。

          合適:用戶群體較大,否則會因為流量小而導致結果不準確。


          c、分時段測試

          可以通過不同時段測試,對比數據。為減少對用戶過多干擾和負面影響,可以先用夜間或用戶量較小時段切換到新版本。

          缺點:得到的是環比數據,不像ABtest對比結果明顯有參考意義。而且在沒有確定方向的摸索階段,用分段測試,數據指向不明確,通常會存在數據一直不好的情況,頻繁換方案, 自亂陣腳。


          d、分渠道測試

          渠道推廣對業務支出也是占比較大,優秀的商業設計也能讓渠道轉化提高,從而減小獲客單價。所以渠道上的設計都會做n版,優化總結,提升最終的數據。


          e、新舊版本切換

          新版本上線后留出”返回舊版“的入口,這樣一旦用戶不喜歡新版可以切換到老版本。這樣可以很大程度降低風險,還可以監測不同版本數據,還給用戶一個緩沖時間讓用戶逐漸接受新版本。

          缺點:如果新版本運行效果不佳,決策者會進退兩難,一般在較有把握,或者想教育用戶新的體驗會局部用這個方法。



          5.2.5、尋求差異,擴大競爭優勢


          A、瘋狂聯想法

          a、橫向聯想

          結合產品定位,先得出核心關鍵詞,再在核心關鍵詞的基礎上繼續發散。比如一個男士護膚品電商網站,核心關鍵詞是:垂直、B2C、男用戶多、護膚品等,可以根據這些關鍵詞找到合適的參考。值得注意的是關鍵詞的選擇也可以根據你需要的提升的核心價值點去聯想。

          Image title


          b、縱向聯想

          縱向聯想是從一個關鍵詞出發,縱向不斷延展出新的關鍵詞,并找到對應競品。比如保健品有一個重要的特征就是注重功效,我們可以想到具有同種特征的護膚品。

          關于聯想,在頭腦風暴中并沒有特備嚴格的步驟方法規定,可以根據自己的認知由近至遠拓展。思維跟橫向縱向也是類似,可以先參考最典型接近的,再利用共同關鍵特征來擴散,也可以利用不同組合的關鍵詞重新找到相應的競品。最后根據四象限原則,把相關度高,體驗好的,更有參考價值的競品拿來精細分析。

          Image title


          B、競品對比分析法

          通過聯想發我們也能聯想出不同維度的競品,這師我們需要考慮競品哪些部分類似可以參考的,哪些部分不同需要注意的,但同時也可以考慮借鑒不同部分的優勢轉化成自己的優勢。比如最早彈幕只出現在視頻上,抓住彈幕可以活躍氣氛,滿足觀眾發表評論和觀看時時評論達到的心里共鳴,增加用戶之間的互動性,從而提高用戶粘性的核心點后,彈幕也出現在直播、音頻、新聞,甚至是炒股軟件上。

          Image title



          5.2.6、做有創意且能落地的品牌設計


          品牌的核心點就是讓人“記住”,最好能找到目標用戶心智中空缺的領域,在這個垂直領域占領優勢位置,所以品牌強調差異化。比如一想到打車就想到滴滴,一想到購物就想到萬能的淘寶,一遇到問題就上百度。


          傳統的方法:了解業務——發散關鍵詞——情緒版——視覺方案

          精益方法:內外調研——語言釘——個性關鍵詞——視覺錘(快速落地)


          成長期的品牌建設更需要突出創新性,讓人眼前一亮,記憶猶新。這里展示展示了御膳房網站的品牌三元法示例,御膳房的風格的確做到了主題感強烈,讓人眼前一亮,不過個人認為作為科技網站,還是略顯了花哨,安全感不足。品牌三元法是也是通過對產品的了解,分別從理性業務層和感性業務層出發,延伸個性創造層,記錄關鍵詞展開設計,其本質還是圍繞業務拓展價值。成熟的品牌設計者,不僅要從業務出發,更要考慮不同場景的品牌應用,打造統一有個性的全方位品牌。

          Image title


          5.3成熟期(產品穩定期)


          目標:提升產品價值(賺的多)

          關注:商業變現

          用戶:活躍用戶

          策略:科學嚴謹提升商業價值

          方法:用戶體驗地圖、設計跨欄法(定量為主)

          關注數據指標:活躍度/流失率/營收/成本率/現金流

          品牌:擴大品牌影響力和品牌價值

          Image title


          5.3.1、用戶分層,尋找核心價值用戶


          a、核心價值用戶是留存用戶中最活躍的部分

          b、找到核心價值的用戶特征


          通過RFM模型來篩選核心價值用戶

          R=Recency最近一次消費

          F=Frequency消費頻率

          M=Monetary消費金額

          (RFM,1代表高,0代表低)

          (111)重要價值客戶:最近消費時間較近、消費頻次和消費金額都高,典型的核心價值用戶,高留存、高活躍度

          (011)重要保持客戶:最近消費時間較遠,但是消費頻次和金額都很高,說明這是一段時間沒來的忠實客戶,需要與他保持聯系,召回

          (101)重要發展客戶:最近消費時間近、消費金額高,但是頻次不高,忠誠度不高,很有潛力的用戶,必須重點發展

          (001)重要挽留客戶:最近消費時間較遠、消費頻次不高,但消費金額高的,可能是將要流失或者已經流失的用戶,應當采用措施挽留


          一般公司都會有利用RFM來觀測核心用戶,針對不同類型來做不同的措施,但是所有數據的利用率都跟產品客觀成長度有掛鉤,成長期可能還不是那么細分,成熟期就會更精細的分析。最簡單粗暴的就是看看最近一次消費,超過多少天就短信消息召回給個優惠券之類的。


          c、總結核心規律,改進產品,調整運營策略

          找到核心價值的用戶特征后,需要探測他們的行為模式與貢獻的規律,從而激勵更多用戶貢獻更多價值。比如喜馬拉雅,找到訂閱節目的用戶明顯留存度更高,用戶活躍度也高于隨便聽聽的用戶的規律后,在產品設計時會把訂閱放在顯眼的位置,并且在首頁把用戶感興趣的模塊放在優先的位置來提升訂閱度。

          Image title



          5.3.2、商業價值提升


          a、以科學創新為代表的產品核心競爭力:數據和技術驅動一切,科技提升效率。

          b、用戶價值:用戶價值是商業變現的基礎,沒有人會在沒有用戶轉化的平臺上投入資金。

          c、商業變現:用戶付費,廣告收入,與用戶體驗合理價值平衡。


          在商業變現階段,除了要著眼于如何更的賺到錢,也需要平衡用戶體驗,且不斷提高產品本身的價值。百度在成為巨頭后,百度貼吧過多不相關的推送導致用戶粘性急劇下降,魏則西事件等負面消息,再到陸奇離職,目前市值縮水至365.38億,被拼多多趕超。而微信和抖音這方面做的較為出色。微信是迫不得已不愿打擾用戶,所以廣告頻率一直不高,廣告質量也有所保障,會根據用戶的喜好推薦廣告。抖音是沉浸式的廣告體驗,一不留神就進入了廣告的坑,而且廣告的形式與抖音原生用戶的不謀而合,有些有創意的網紅視頻用戶的接受度也很高,從而會極大的提高轉化,對用戶體驗的影響也較少。



          5.3.3、增值假設——圍繞目標增長(量化設計師的價值)


          設計策略:穩定、規范、統一、科學嚴謹


          a、拆分變量科學測試

          到了成熟期,設計師在修改設計方案的時候不是改的越多越好,有的時候一個模塊的重構,一個按鈕的顏色變化都能影響數據轉化,所以需要通過科學的方式,調整到合適的顆粒度去測試。  

          Image title


          b、把AB測試作為一項基本制度

          如果想要驗證設計效果,那么可以在保持功能不變的情況下,只看設計方案的區別,這樣就可以有效的量化設計。


          2018 年,中國移動互聯網用戶增長放緩,上半年僅增長 2 千萬。但是頭條系卻異軍突起,超過百度系、阿里系穩居總使用時長第 2 名。頭條系的崛起有許多的原因,強大的數據監控系統,成熟的增長引擎,上百組同時進行的AB測試等等都在幫助產品經理和運營們找到最優的方案。


          c、用戶增長地圖

          用戶增長地圖是借用AARRR概念作為骨架的展開的,通過AARRR模型針對沒一步提出增值假設,以提升總體價值指標。

          Image title


          5.3.4、提高整體效率:通過DPL(Design Pattern Library)組件庫批量優化;科技力量-人工智能


          a、根據長期積累下來的AB測試結果,沉淀規范后,把這些規范內容快速復制到若干條產品線上。從產品周期來說,摸索期需要建立一定的視覺規范,但不合適做細致化的組件,等業務慢慢穩定下來,不會有大方向的改變后,需要慢慢建立細致的組件庫,以方便團隊合作。每個業務也有其特殊性,to B的業務一般建立組件庫會比較早,模式化的東西較多,針對不同的B端也會有定制化的內容,DPL可以大大提高整個業務的效率。

          Image title



          b、通過智能科技的力量來提升整體的效率。比如阿里的千人千面,通過消費者偏好進行個性化投放,魯班系統對banner進行簡單的合成,大大提高大促期間海報生成的效率。



          5.3.5、打造統一的全業務線品牌設計


          a、形成統一且獨特的品牌印記

          成熟期面對繁多支線,先對內樹立統一的品牌形象;主品牌與產品調性統一;線上線下風格的統一。


          b、品牌印記提取與深化

          品牌趨勢都是化繁為簡,比如蘋果、奔馳的logo就越來越簡單,利于大眾記憶,也利于線下拓展。

          提取出logo基因去強調品牌作為拓展延伸,比如天貓和考拉的吉祥物頭部圖形的簡化應用,都比較簡約,易記,易拓展


          C、成熟期的品牌也不是一成不變的

          成熟期,產品在市場中已經有了穩固位置,品牌不宜過度設計,而需要采取保守、穩重、擴展性強的風格。品牌的更新升級,一方面順應企業的戰略方向的改變,一方面順應整個設計前瞻潮流。比如美團變黃的品牌升級,是為了更好的從外賣這個觸點深入用戶心智,而OPPO ,vivo等品牌升級感覺更美有特色,其實也是順應國際化的設計趨勢,更有文字辨識度,更國際化。

          Image title



          5.4衰退期

          每個產品都有一個生命周期,這是受市場因素導致的,此時用戶會逐漸流失,既被其它新產品的體驗模式所吸引,所以這時應該更關注用戶流失后使用的產品,分析競品的商業模式和功能,同時監測流失速度,需盡快拓展產品邊界,尋找新的切入點。不過好的產品都是在不斷優化,迎合新時代的需求,不斷擴大自己的影響力和產品價值。之前文章我也寫過關于微信的未雨綢繆,不斷優化。微信的用戶粘性強大,誰也不好說他能再打幾年,像抖音這種迅速崛起的產品是否是現象級的曇花一現,也要看它是否能與時俱進。



          六、設計師順勢而為,自我定位

          一般來說小公司的大部分項目處于探索期和成長期,而大公司的項目很多處于成熟期,也有一些孵化探索的項目。處于探索期的項目,需要大膽創新同時,有可能變化極快,無法冷靜下來根據數據用不同設計方式達成增長目標,我就經歷過一個首頁一星期全新大改版n次的慘痛經歷。反觀大公司很多流程復雜,驗證方式系統完善,有些設計師感覺沒有用武之地,不能施展才華。


          根據不同階段采取適合自己的設計方法,驅動產品提高設計價值,切勿漫無目標、抱怨環境,浪費時間。


          如果你思維極其顛覆愛挑戰可以選擇從0到1的新行業;如果你喜歡創新可以選擇成長型的行業及公司,或是成熟公司里的成長型項目;如果你追求科學、嚴謹、,那么可以選擇成熟型的公司、項目。

          轉自-UI中國

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

          組件化設計:彈窗的使用邏輯

          ui設計分享達人

          彈窗其實是一個很泛的概念,幾乎所有在頁面中有彈出的行為的操作都能稱之為彈窗,其實是有點混亂,本文旨在梳理它們之間的關系


          轉自:站酷-備哥


          一文讀懂2020年最全設計趨勢

          ui設計分享達人

          寫在前面

          過去幾年中,我們的積極反應促使我們繼續探索和分析主要設計領域的新趨勢。盡管大多數趨勢都是去年發生的變化,但到2020年,我們仍有一些新趨勢值得追求。最重要的趨勢是與技術有關的趨勢,以及它們的發展趨勢,以及它們如何影響設計領域。 


          總體趨勢

          2020年的主要趨勢動作設計與動畫, 對于2020年,我們認為運動設計是主要趨勢,因為我們在所有設計領域都遇到動畫,從小的交互到徽標和UI,一切都在變化。動畫內容正在進入現代世界,在現代世界中,書面內容沒有以前那么吸引人。 動作設計正確實施后,可使廣告系列的信息更快,更正確地傳達給受眾。

          undefined

          01. theQoos品牌插圖由  閔慶  02  軍團賽季 3由  尼克Scarcella   03.  溶劑-使大麻銀行公開賽由  BluBlu工作室  04  云服務(動畫圖標)由  亞歷山大Baleev  05.  病毒性肝炎由  昂布爾集體 ,  蒂博ZELLER ,  喬納森Plesel  06 。  UXC_Design2020_Project研究通過  Donerzozo


          目錄

          1. UI / UX

          2.插圖

          3.動態圖形

          4.平面設計

          5.基于技術的趨勢 

          6.包裝

          7.版式

          8.趨勢工具


          1. UI / UX

          1.1暗模式(Android Q和iOS 13)

          暗模式是2020年的新趨勢,Android引入了兩種類型的暗模式,分別稱為“強制暗模式”和“系統暗模式”。微軟通過在其電子郵件應用程序中展示其暗模式擊敗了谷歌,但谷歌迅速推出了自己的針對Android 10的Gmail應用程序的暗版本模式。

          有了介紹此更新的大公司,許多設計師將選擇在他們的應用程序或站點中使用暗模式,因此希望在來年看到越來越多的暗模式。

          undefined


          1.2粗體顏色

          在過去的兩年(到2020年)中,強烈的色彩已成為重要的趨勢。大膽的色彩豐富,明亮,甚至極富活力。它們可以是主要或次要顏色。 


          undefined

          01.  EMART UX / UI可再生的通過  加X,  李寶藍 ,  Sabum卞 ,  熙榮,  尤金全度妍 ,  ? ? ?,  Bongho彩  02  NSH通過  索菲婭費多托娃   03.   埃爾多拉多賭場-移動Web UI,應用程序ü用  的Loredana PAPP-Dinea ,  Mihai Baldean ,  Milo主題  04.  mmcité+網站由  工作室9  茲林,帕維爾Valek  05.  自動哈克系列#21-25由  安德烈福  06.  Flipd應用程序通過  ESTUDIO PUM


          1.3 UI中的插圖

          多年來,插圖一直是設計中最強勁的趨勢之一。插圖是對概念的直觀解釋,可以使用戶更好地理解產品背后的思想。除了一些精美的插圖使這一概念獨具匠心外,它們還可以更快地傳達信息。

          undefined

          01.  海妖重新設計,以  西爾Theyssens ,  安東尼科拉德  02  浮雕-醫療項目由  馬丁Pankiewicz  葛爾若,  米沃什Po?arkowski  03.  abuk:圖書封面設計有聲書商店到  謝爾蓋Valiukh,  Tubik工作室  04.我llustration系統GOL到  ESTUDIO PUM  05 。  智能家居的應用程序- IOS到  瑪麗亞Osadcha  06.斯基林貿易(skilling.com) -   Loredana酒店PAPP-Dinea ,  米哈伊Baldean 


          1.4講故事

          設計中的講故事是關于幫助用戶在平臺上的旅程,從而使他的體驗盡可能輕松和流暢(在UX設計中)。一個好的故事可以幫助用戶更輕松地了解產品。為了講述一個故事,我們可以使用一個特別創建的角色,將這個角色賦予他個性,我們創建一個故事和一個沖突,最終由我們的產品(UI設計)解決。這是產品設計中講故事的基礎。講故事在UI和UX中都使用,并且基于相同的原理,但實現方式有所不同。

          undefined01.  余吳-旅行計劃應用由  朱莉張庭  02.  UX / UI | 食品外賣應用由  康斯坦丁Seredkin  03.  COOC通過  cuneyt仙


          1.5動畫圖形和微交互

          正如我們所說,動態圖形是今年的趨勢,它在UI設計中也有很強的表現,它為插圖增添了力量,使創意更易于吸收并保留在用戶的記憶中。 

          微交互在2018年成為第一流,但這一趨勢值得在2020年關注。它們是UI設計中極其重要的趨勢,這使基本應用程序/網站與非凡的應用程序/網站有所不同。微交互在使用戶了解系統的工作原理并引導其獲得更好的體驗方面起著至關重要的作用。 

          如果您是UI設計師,但尚未在工作中使用微交互,建議您這樣做,因為到2020年,沒有UI的任何UI設計都將是非?;镜摹?nbsp;


          undefined

          01.  UI / UX | 智能藥房應用的   阿納斯塔西婭中號,  謝爾蓋Nikonenko UX   02.  氣候與動物:滅絕危機網站UI / UX  由  丹尼爾·譚,  達芙妮龍  03  飛素食者由  帕特里夏賴納斯  04.  UKRPOSHTA。烏克蘭國家郵政局的移動應用程序,伊洛娜·金(  Ilona Kim)  05 .  Tagir Tikeev 的聾人報警應用程序


          1.6用戶界面中的視頻

          到2020年,信息必須非常快地到達用戶手中,最好通過視頻內容來完成。您選擇通過動畫或經典電影來解釋產品,視頻內容對于任何網站或應用程序都是必不可少的。


          1.7功能

          UI設計中的一個重要部分是功能,即,根據其目的和功能選擇每個元素。許多人認為您必須在設計和功能之間進行選擇,但是在新技術的幫助下,這兩種技術可以很好地融合在一起并相互補充。設計負責引起對站點或應用程序的注意,其功能使體驗變得更輕松。它使用戶可以更快地找到信息。

          undefined01.斯基林貿易(skilling.com) -   Loredana酒店帕普用餐 ,  邁克爾Baldean 


          1.8注意細節

          在UI設計中,對細節的更多關注非常重要。從按鈕,圖標,加載到導航到細微的細節,都可以打造出非凡的設計。隨著新技術的出現,我們在UI中必須注意的細節始終在變化。

          在明年,我們將看到越來越少的按鈕,以及更多基于手勢的導航。例如,后退按鈕(Android的導航常用)在Android 10中正式消失。

          undefined

          01.  FLYR的視覺形象和營銷網站的  Ramotion 

          02.  鬧鐘應用聾人通過  Tagir Tikeev


          1.8漸變

          幾年來,我們一直在談論設計中的漸變,這種趨勢在2020年將繼續保持強勁,因此值得一提。新鮮的色彩是成功漸變的完美選擇。它們可以用于按鈕,圖標,插圖,甚至用于排版。

          undefined

          01.  Wavecut - IOS應用程序通過  Eleken局  02.  抗憂郁癥的應用程序-產品設計(UX / UI)由  安娜Arutiunian 

          03.  保羅回腸-電影音樂作曲家,制作人,DJ,Perfomer  通過  的Loredana PAPP-Dinea ,  米哈伊Baldean ,  米洛主題  04.  ITEXIA通過  下一頁局 ,  亞歷克斯海鷗 ,  Jegor Walowski


          2.插圖


          2.1角色設計

          角色設計包括定義一個支持整個概念的角色。最重要的是,通過繪圖,設計師向角色灌輸了強烈的個性。您在應用程序或網站中遇到的虛擬助手是角色設計的一個很好的例子。

          undefined

          01.  新微小的事情?兒童圖畫書由  Vuon插圖 ,  榮阮 ,  榮范  02  的Adobe X Createfulness由  邁特弗蘭基,  馬蒂厄Tarwane  03。 3D人物V2由  安東尼奧·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞


          2.2紋理

          插圖和紋理很好地結合在一起,可以創造出令人難忘的構圖。從粒狀紋理到預制的筆觸,您可以找到許多想法來為插圖添加紋理,也可以手動創建它們。瀏覽網絡時,您可以找到許多可以在插圖中使用的紋理,預制筆刷和工具。 

          undefined

          01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 飯 太稀


          2.3平面插圖

          在過去的幾年中,我們到處都可以看到平面插圖。它們仍然處于趨勢中,但現在有了一個新的組成部分:對每個元素應用細線。大多數藝術家都選擇使用細的黑色筆觸,但也可以將其上色,使其陰影比所涉及的對象暗。

          undefined

          01. BILLY KENNY -剛剛為音樂通過  桑戈BANG  02 Babelia - Lecturas對維拉諾由  米格爾·安赫爾Camprubí  03.  拳擊貓-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解釋器VIDEO  由  哈立德abdelazi ?


          2.4等軸測圖

          是的,等軸測圖仍然在這里。它們主要可以在UI設計中找到。隨著人們對加密貨幣的興趣不斷增加,這種趨勢似乎已經生效,但是在2019年它已經發展了,現在我們在其他業務領域中發現了這一趨勢。

          undefined

          01.  龐克市由  溫祚_  02  FastCompany -等距號由  阿圖爾Tenczynski  03和05.  抗體亞型由  馬里奧·德?梅耶爾  04.  松弛插圖由  京張 


          2.5 3D

          隨著效率越來越高的軟件和工具的出現,3d渲染已逐漸發生變化。3D插圖非常受歡迎,因為與2D插圖不同,它提供了更逼真的圖像。

          undefined

          01. 游戲巴伊亞之家由  Miagui  02  天平 由  卡韋薩Patata工作室  03.  城堡毀滅者由  穆罕默德Chahin  04.  Eyoo家庭3D插圖由  Baianat  05.  個人插圖第1卷由  巴勃羅·馬林 06.  一個人旅行通過  亂伊萊恩


          2.6超大膽的色彩

          大膽的顏色非常適合插圖。它們營造出歡樂的氛圍,使角色脫穎而出,并在圖像背后展現故事。

          undefined

          01.  瑪莎·希肖娃(Masha Shishova)攝于莫斯科的  STRTFD咖啡壁畫  02. 作家- 利奧·夏目(  Leo Natsume)的移動互聯網思想  03.  可口可樂圓罐插圖由塔尼亞·雅庫諾娃(  Tania Yakunova) 


          3.動態圖形


          3.1 3D視頻 

          在2020年,無法想象沒有3D設計的運動。設計的這個分支打開了一個世界的大門,在這個世界中,只有想象力是極限。我們可以在廣告,電影,游戲,廣告活動等中找到3d。

          undefined

          01.  龐克市由  溫祚_ ,  視覺設計藝術的影響  


          3.2視頻+動畫插圖(混合媒體)

          拍攝的視頻,動畫插圖以及有時是靜止的照片的結合可以產生非凡的效果。2d或3d插圖可創建令人難忘的視頻,從幾行運動到3D真實人物甚至是現實生活中不存在的復雜視覺效果。

          undefined

          undefined

          01.  Coppel /回到學校通過  大量工作室  02  PWR  由安娜·霍查,  Edvina元 


          3.3 2D動畫-說明性視頻

          2D動畫專注于創建故事和角色,并在創作過程中使用矢量。當您想要廣告系列或產品的說明性視頻時,2D可能是理想的選擇。在一個總是忙碌而又沒有時間閱讀的世界中,說明性視頻對于任何網站都是必不可少的。

          undefined

          01.  Freelive  由  工作室Infografika ,  謝爾蓋·薩多斯基 ,  阿納斯塔西婭Alterka ,  Arsentiy Lesnik賓館 ,  尤里·阿姆斯特朗 ,  阿林好,  喬治VALD ,馬克西姆Tleubaev  


          3.4動畫徽標

          您已經了解到動畫是2020年的“必備”,為了保持競爭力,我們還必須將它們集成到徽標設計中。許多公司已開始對其徽標進行動畫處理,以引起人們的注意。這也是徽標設計的主要趨勢。

          undefined


          01.  杯茶由  維多利亞伍  02 - 07.  運動野獸?Logomachine。動畫標志的  運動設計學院,  維克托Villamarin的,  波格丹·杜米特留,  Logomachine .NET ,  亞歷山大·庫茲涅佐夫,  扎克李,  丹尼斯Siurin ,  斯坦尼斯拉夫·馬爾琴科,  莉扎薇塔Tsareva ,  Supremus Levenus ,  安東·福明,  埃米爾Khafizov ,  膽堿哈達           


          3.5混合動畫2D和3D集成

          這一趨勢不是一個新趨勢,但絕對值得一提?;旌蟿赢嬀褪鞘褂脼榇藙摻ǖ奶囟ㄜ浖?D與3D結合在一起。 

          undefined


          4.平面設計


          4.1平面設計中的3D 

          盡管2d壟斷了設計的這一分支,但3d可以為最終概念添加額外的內容。3d渲染可以采用插圖,動畫或字體的形式。

          undefined

          01.  畫像由  費爾南多·多明格斯Cózar  02.  NASA | 太空時代的  工作室-JQΔ   03.  美國宇航局X BBC | 不自然世界的  工作室,JQΔ


          4.2雙色

          精益求精的概念可以完美描述這一趨勢,設計師在其中創造出大膽的元素,并帶有優雅的手感和強烈的對比。這種趨勢是創建更易于訪問的打印的理想選擇,因為某些打印技術如果顏色更多,則價格會更高。

          undefined

          01.  冬季公開賽'18由  Kinoto Studio,  Romina Rios,  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物館由  de_form工作室,  諾拉demeczky ,  的Eniko DERI  04.  刻字系列IX由  拉斐爾·塞拉


          4.3光學感知藝術

          歐普藝術作品是抽象的,有許多知名的黑白作品。通常,它們給觀看者留下動感,隱藏的圖像,閃爍和振動的圖案或腫脹或翹曲的印象。(來源:wikipedia.org)。

          這種趨勢給人以動靜的印象,但是以一種靜態的方式。如果要實現在印刷海報中移動圖形的想法,這是最合適的方法。

          undefined

          01 02  東京電影節共混物由  梅賽德斯巴桑 ,  的Adobe住  03.  海報-第一卷由  Xtian米勒


          4.4平面設計中的插圖

          插圖在設計的所有領域都非常重要,因此我們在圖形設計中也可以找到它們。2D插圖在現在已經非常流行了幾年,并且即使在2020年,也將繼續成為設計師的最愛。 

          undefined

          01.  GOOSE赫爾-海報由  Ewelina鵝  02  CAT酒吧和舞廳/ 2019至  kissmiklos,  Eszter薩拉 


          4.5動畫海報

          動畫無處不在,我們在設計的各個領域都可以找到它們,當然它們也存在于數字海報中。動畫可以將2D與3D混合在一起,效果令人著迷。

          undefined

          01  節地鐵地鐵由  Bzoing,  維吉尼貝達德  02.  失敗的Windows由  皮埃爾Kleinhouse,  轄Zivony 


          4.6復古合成波

          復古合成波是一種在80年代出現的趨勢,但一旦好萊塢開始發行該十年的電影后便開始重新出現。隨著《陌生人事物》系列的成功,這一潮流再次開始流行。

          undefinedundefined

          01.  雞尾酒和夢想通過  Gjorgji Despodov  02.  CINEMAX由  杰森巴爾巴  03.奇怪的事情(Netflix.com)


          4.7瑞士設計,達達主義,包豪斯

          20世紀最重要的圖形設計運動始終是最好的設計師的靈感來源。這些樣式值得一提,因為它們始終是的,遵循它們所施加的規則幾乎不可能在設計中犯錯誤。總的來說,這些運動強調版式,無襯線字體(Helvetica于1957年在包豪斯舞臺上創建),幾何形狀,簡單的線條,體積和顏色。

          undefined


          01.  瑞士海報01(版式方面)由  Mehman Mammedov  02.  黃視VOL.3通過  維奧萊納齊名


          4.8大的不間斷彩色空間 

          大型,不間斷的色彩空間將在明年成為非常流行的趨勢。它們與大膽的字體搭配使用,可以在圖形設計,產品設計以及ui中找到。

          undefined

          01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌內容由  約翰Vernizzi  03.  Kekkil?-BVB的  Kurppa Hosk


          4.9超極簡主義

          極簡主義的設計僅使用必需品,非常有限的調色板和簡單的形狀來打造令人難忘的身份。放棄多余的元素,使所有設計項目都有目的。要創建超極簡主義的設計,您需要使用盡可能多的白色/負空間,簡單的配色方案和一些基本的幾何形狀。

          undefined

          01.  Heim雜志,第3頁,  Sasha Yaguza撰寫  02.  Andrei Gheorghe- DADA-通過  moodley品牌標識發布


          5.基于技術的趨勢

          技術通過智能設備和嶄新的理念正在徹底改變我們的生活。這些新技術使設計師已經開發出進入當前趨勢的新功能。人工智能,機器學習,虛擬現實和增強現實正在影響設計師的思維方式和創作方式。


          5.1增強現實的移動應用

          隨著蘋果和谷歌推出自己的AR開發平臺ARKit和ARCore,很明顯,整個世界將面向增強現實技術。 

          許多大品牌已經在其應用程序中采用了這項技術,而那些尚未采用這種技術的公司必須認真考慮如何使用戶在這種新現實中與之交互。


          有一些AR交互可用于創建直觀的應用程序。第一個是將應用程序固定在手機屏幕上時。另一個是AR UI與用戶周圍的環境相關聯時。最常用的互動方式之一


          是當UI與對象相關并通過掃描特定項目觸發時。該動作將數字動畫連接到特殊的“標記”。 

          有關更具體的AI規則,請閱讀Apple指南,以提供“將真實的虛擬對象與現實世界無縫融合的沉浸式,引人入勝的體驗”。

          undefined


          5.2 AI,ML,聊天機器人和虛擬助手

          聊天機器人是一種 通過聽覺或文本方法 進行  對話的  軟件。[1]  此類程序通常旨在令人信服地模擬人類作為對話伴侶的行為,盡管截至2019年,它們仍遠遠不能通過  圖靈測試。[2]  資料來源:維基百科


          人們還不習慣與AI對話,因此設計師(和開發人員)的工作很大一部分是使流程簡單并建立信任。他們需要幫助人們了解系統可以做什么以及如何使用它。


          使用AIML(人工智能標記語言)設計和編寫腳本聊天機器人,是出色的UX設計人員的魔力可以發揮作用的地方。

          大多數使用聊天機器人的公司都選擇說明助手來為AI做鬼臉。以下是一些在其UI設計中使用聊天機器人的品牌:Spotify,星巴克,萬事達卡,絲芙蘭,Lyft,必勝客。

          undefined


          5.3 VR

          大多數人將VR與游戲行業聯系在一起是有充分理由的,但是隨著所有大型科技公司開發VR套件和應用程序,我們可以肯定地說,我們將發現使用和享受這項技術的新方法。VR已經用于教育,醫療保健,旅游,房地產或建筑。 

          undefined


          5.4語音用戶界面(VUI)

          語音用戶界面(VUI)使用語音識別  來理解語音命令和問題,通常是文本到語音以播放答復,從而  使語音與計算機的人機交互成為可能  。語音命令設備(VCD)是受語音用戶界面控制的設備。資料來源:維基百科 

          去年,使用互聯網連接的設備的人中有40%每月至少使用一次語音助手,與去年相比,這一數字增加了10%。


          6.產品設計


          6.1包裝中的圖案

          在過飽和的包裝市場中,很難創造出可以脫穎而出的新產品,因此設計師要回到根源并創造出使產品在擁擠的零售貨架上脫穎而出的樣式。幾何,花卉,浪漫或單色圖案是任何產品包裝的大膽選擇。

          undefined




          01.  飛行山羊咖啡由  妮可LaFave    02.  VITA SPA皮膚  由  DWYW   03.  巧克力包裝設計由  算術   04.  100手繪無縫的圖案和形狀   的  Arseny Samolevsky


          6.2包裝插圖

          插圖一直是包裝設計中的重要元素。通過他們,我們可以講述一個故事,使目標受眾可以更好地理解該概念背后的歷史。平面插圖已經存在了數十年,并且很可能會一直處于流行趨勢。

          undefined





          01. 布里格斯原件由  熙宰金  02  天鵝絨咖啡杯  由  安東Malishev,  呵呵卡羅拉  03.  廢物不包括廚房-品牌打造的  嘗試和真正的DESIG ň04  家,甜蜜的壽司兒童  通過  精明的機構,  馬里亞納星火  05.  Cerveza塔Maleante通過  Antonay 


          6.3留白

          極簡主義是設計的基本原則,而今天它又是新事物。它放棄了設計中不需要的所有內容,并用負空間代替了它。這種趨勢將功能帶到了最前沿,并專注于簡潔的設計,使版式脫穎而出。

          undefined

          01.  香味精油 由Y u型簡林,  黃惡嗯-祥  ,  智泰蓮 02.  重塑品牌理念,為BodriPincészet由  克里斯托夫Gáthi


          6.4單色和兩種顏色

          首先,在調色板中僅使用1或2個色調似乎有些限制,但它們可以創建非常強烈的視覺識別感。僅使用一種或兩種顏色,就可以保持簡約的外觀,放棄所有多余的東西。結果是精美,高雅的產品令人賞心悅目。

          undefined

          01. Zerbet冰糕由  才林賈爾斯  02.  貝利啤酒  由  埃德大廳 悉尼,  葉卡捷琳娜Leontyeva ,  波阿斯孫


          6.5大膽的顏色

          大膽的顏色和漸變仍然是非常強烈的趨勢,這種趨勢將在2020年持續。使用這些顏色,您可以創建令人難忘的產品。

          undefined

          01.  極簡主義和享樂主義:Fabula Branding 重新設計了  千年品牌

          02  紋身商城  通過  Openmint工作室,  葉卡捷琳娜Teterkino ,  煙,  葉戈爾Kumachov 

          03.  Organic  by  Larissa Kendrik 和  加布里埃爾· 沙茨曼

          04.  VIZOU -老花眼鏡  的  工作室開頭語,  阿克塞爾杜馬克 

          05.  包裝的調味開心果由  米拉Katagarova


          6.6注意細節(受新藝術風格啟發)

          注重細節的包裝比以往任何時候都更受歡迎。設計師選擇這種趨勢是因為它賦予了產品真實性。這種趨勢使我們以現代方式思考經典。 

          undefined

          01.  HYWILDE由  查德·邁克爾·工作室  02  AMSTEL KARGO IPA通過  卡帕羅設計船員

          03.  大島咖啡烘焙-咖啡咬傷的  農場設計


          6.7包裝中的講故事

          到2020年,品牌將不得不重新考慮其產品和包裝。品牌必須講述一個故事,以幫助客戶體驗產品的本質。這可以通過為包裝創建視覺和敘述身份來實現。

          undefined

          01.  喙接通過  骨干品牌推廣   02.  Colorea用t  骨干品牌


          7.版式


          7.1粗體印刷

          粗體印刷術是設計中的重要趨勢,它取代了圖像作為主要元素。勇敢的排版可以在網頁設計和圖形設計中發揮作用。

          undefined

          01.  埃里克·林格(Eirik Lyng),作者:  埃里克· 赫斯特雷(ErikHerrstr?m);  02.  包豪斯(Bauhaus_100)(x3),作者:  BunkerType(JesúsMorentin)

          03.  UCCA當代藝術中心北京由  布魯斯·莫設計(BMD)  ,耶勒馬雷夏爾 


          7.2小寫

          越來越多的應用程序使用完全小寫的文本,非常易于閱讀,并且完美地融入了簡約和現代的設計中。在明年,我們絕對必須關注這一趨勢。

          undefined

          01.  Autea品牌和網頁設計由  米哈爾Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的


          7.3自定義字體 

          盡管自定義字體沒有什么新意,但我們將看到這種趨勢越來越多地出現在設計中,尤其是在徽標和海報中。這種做法在大品牌中更常見,因為生產專用字體可能會非常昂貴,但是設計人員可以對現有字體進行少量調整,結果可能會非常獨特。 

          undefined

          01.  Think8全球研究院通過  勃洛克設計  02  ZINEZ?//設計周期由  芭芭拉·卡托納 ,  媒體與設計系埃格爾  03.  式設計'19通過  TRüF創意  04.  Cako字體由  維奧萊納齊名


          7.4動力學排版

          就像我們說的那樣,動畫在設計中無處不在,因此在排版中也很常見。動態字體使用小的和簡單的交互作用來移動和移動屏幕上的字體。這種簡單的技術可以處理文本并創建最終產品,該產品保留在查看器的內存中。

          undefined

          undefined

          01和02.  Grafika  ,  Gimmick Studio設計  。03&04.  增強現實與動作排版,作者:  Alex Slobzheninov


          7.5堆疊字體 

          堆疊文本可能是一種現代化的解決方案,可以吸引您注意基本信息。我們可以在網頁設計,應用程序設計和圖形設計中看到這種趨勢。

          undefined




          01.  L'嗡通過  Atipus巴塞羅那  02  期刊由  杰瑪馬奧尼  03.  海報收藏| VOL.8由  羅馬發表  04. SMLXL由  梅麗莎Baillache,  墊新郎,  杰森·利特爾


          8.趨勢工具


          8.1 Adobe Spark

          Adobe Spark是Adobe Systems  開發的  用于移動和Web的媒體創建應用程序的集成套件  。[1]  它包含三個獨立的設計應用程序:  Spark Page,  Spark Post和  Spark Video。(來源:WIkipedia) 


          他的免費Adobe Spark Web應用程序可與Spark Page,Spark Post和Spark Video  iOS移動應用程序同步  ,從而使用戶可以從任何設備創建,編輯和共享其視覺故事。


          [3]  這三個設計應用程序允許用戶創建和設計可用于企業,教育,社交媒體營銷人員等的視覺內容。[4]  Spark Gallery突出顯示了使用該應用程序的人們所做的不同項目。使用這三個應用程序時,用戶可以導入圖片或搜索圖片。

          undefined


          8.2繁殖

           Procreate是 由Savage Interactive針對iOS開發和發布的   用于  數字繪畫的  光柵圖形編輯器 應用程序。針對iPad的藝術可能性而設計  ,并且適合從初學者到專業人士的藝術家。


           它提供130多種逼真的畫筆,多層,  混合模式,  蒙版,   過程視頻的4K分辨率導出  ,  自動保存以及許多其他經典和原始的  數字藝術  工具。除光柵圖形外,該軟件的編輯和渲染文本和矢量圖形能力有限  。(來源:Wikipedia)Procreate是2018年App Store上最暢銷的應用程序。

          undefined


          8.3 Adobe XD

          Adobe XD是  由Adobe Inc開發和發布的   用于  Web應用程序  和  移動應用程序的基于矢量的 用戶體驗設計工具。它適用于  macOS  和  Windows,盡管有適用于iOS  和  Android的版本   可幫助直接在移動設備上預覽工作結果。XD支持  網站線框圖,并創建簡單的交互式點擊型原型。(來源:維基百科)

          undefined


          作者授權


          總結

          每一年每一個時間段都會有新的趨勢,學會的辯證的眼光去看待便是最大的智慧。世界一直都在變,趨勢也是。保持學習和探索的心不變就是對自己熱愛的事情最好的回應,念念不忘,必有回響。共勉!

          轉自:站酷-木七木七 

          減少認知過載獲得更好的用戶體驗

          ui設計分享達人

          好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單,但實際上設計師已經做出了非常多的設計思考。用戶越少的去思考界面,用戶就越能專注他們要完成的目標。在瀏覽頁面時,用戶的注意力不應該停留在界面和設計上,他們更應該關注的是如何達成他們的目的。所以作為設計師的首要工作就是通過事先清除障礙,為用戶提供直達目標的途徑。


          “通常,飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態是非常困難的。與其強迫人們從他們的主任務上轉移注意力,不如直接帶他們去他們想去的地方?!?

          ——Luke Wroblewski,谷歌產品總監


          換個思路來看。復雜和混亂的界面會迫使用戶去尋找解決問題的方法,而通常情況下,這些方法并不是一目了然的。用戶會因為過多的選項、界面、導航等感到困惑,用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓,也足以讓用戶離開。

          這種過度的思考就被稱為認知過載,在這篇文章里,我們將為你解釋如何避免認知過載。首先,我們需要明白我們大腦中存在過載風險的原因。

          Image title

          認知超負荷的科學根源
          認知過載是指工作記憶中腦力處理的信息總量過多。當你的工作記憶接收到的信息超出其可以輕松處理的信息時,就會發生認知過載,從而產生挫敗感。
          但這究竟意味著什么?工作記憶到底是什么?針對這些我們又應該怎樣進行設計呢?那就讓我們先來了解一下認知負荷理論的起源吧。


          JOHN SWELLER和認知負荷理論
          雖然對認知的研究可以追溯到幾個世紀,但直到20世紀80年代,澳大利亞教育心理學家約翰·瑞勒才將這項研究應用于教學設計當中。Sweller試圖為每一種類型的學習者找出最適合他們的學習方法,讓他們可以記住他們學到的所有知識。換句話說,怎樣的課程設計才是最佳的呢?
          Sweller在1988年出版了“ 認知負荷理論,學習難度和教學設計 ”,這使他的研究工作達到新的高峰,于1994年重新修改并重新發表。他的研究中運用了數據組織結構中的圖表數據庫,講述了有效和無效的教學方法,而他對于工作記憶負荷極限的研究結果才是設計師們找到的最有用內容。
          Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學家和語言學家,他在20世紀50年代測試出短期記憶的極限。Miller的研究在于數字化設計,尤其是分塊技術方面,這將在后面討論。另外,Miller還創作了論文“ The Magical Number Seven, Plus orMinus Two“,這個理論促使許多設計師將菜單項的數量限制在5和9之間。
          雖然這些理論最初是針對教育領域的,但它們同樣適用于用戶體驗(UX)設計。


          工作記憶
          如果你每次打開冰箱,都必須回答一個像謎語一樣的問題,“什么東西小的時候四只腳走路,長大了以后兩只腳,而老了以后有三只腳?”這是一個老段子。但是,根據認知負荷理論,使用這種讓人無奈的用戶體驗設計會讓用戶產生挫敗感。

          Image title

          要理解認知負荷理論,你必須要了解什么是工作記憶,大腦在短時間內用于完成任務的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶,并在需要時從長期記憶中抽取。通俗一點說,工作記憶相當于計算機內存,而長期記憶則相當于硬盤驅動器。
          工作記憶和短期記憶通??梢曰Q使用,但它們略有不同。工作記憶是處理信息的過程,而短期記憶更像是一個信息的便簽本,它雖然重要,但卻沒有長期記憶重要。
          讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候,你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思,才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接,因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時,你的短期記憶會記住你在文章中的位置,這樣當你從外部頁面返回時你不會迷失,但到了第二天早上,該位置就會被遺忘掉。

          Image title

          設計中的應用
          Steve Krug(史蒂夫·克魯格)是一位很有影響力的作家,他在網頁設計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設計師認為是有巨大影響力的著作。
          書中記錄了許多寶貴的經驗,下面就列舉一些的:
          1、每一個頁面都要清晰明了。
          2、用戶傾向于“滿意” - 也就是說,采取一個最簡單的解決方案來解決他們的問題,而不是最好的解決方案。此外,作為習慣的生物,用戶將一遍又一遍地使用相同的方法解決問題,而不會刻意尋找一個更好的選擇。
          3、當新用戶可以熟練使用該系統來實現他們的目標時,系統的可用性就足夠了。
          4、用戶使用網絡的絕大部分是想要節省時間。因此,用戶的行為通常會像鯊魚一樣“保持移動,否則就會死亡”。
          5、后退按鈕是Web瀏覽器最常用的功能。
          6、屏幕上顯示的主頁按鈕即使從來不被用戶使用,但也能讓用戶感到放心。
          總之,用戶在瀏覽網站過程中哪怕是一瞬間的思考,也會對他們的工作記憶造成負擔。例如 “這個可以點擊嗎?“首頁按鈕在哪兒?”和“我怎么保存?”等等問題,都會不同程度破壞用戶體驗。


          認知超負荷最常見的原因
          許多設計元素都有可能對用戶的大腦造成超負荷,外界環境中會有更多的因素它們超出了設計師的控制范圍。例如:一個用戶瀏覽網站的同時會擔心第二天的工作報告,或者被窗戶外裝修的噪音所打擾,此時,無論你的網站設計多么簡單,這些都會耗盡他們的工作記憶。
          我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關注的用戶更能專注于你的網站。不經常上網的用戶往往比經驗豐富的網絡用戶思考的更多。
          雖然我們無法量化所有的認知過載,但我們可以盡量的去避免他的產生,下面,我們對網頁設計中最常見的類型以及避免它們的最佳方法進行了分類說明。
          1.不必要的操作
          用戶的每一步操作都會增加他們的認知負擔。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標上,所以多余的操作將迫使用戶投入更多的精力,這樣就需要更多的工作記憶才能完成任務,所以,那些不必要的操作步驟很考驗用戶的耐心。
          速度和節奏是讓認知負荷最小化的基本因素。用戶希望以輕快,目的性很強的步驟來完成任務,所以應該提前消除一切延遲。
          Image title

          用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網站,但Touch of Modern卻要求用戶在使用之前必須進行注冊!這個強制而又多余的行為將會嚇跑很多的潛在用戶。
          解決方案
          下面這個方法,可以幫助我們找到不必要的操作有哪些:列出用戶要完成任務必須要去做的步驟。例如發送電子郵件:
          1、點擊電子郵件圖標。
          2、點擊“發送到”輸入框。
          3、輸入電子郵件地址。
          4、點擊“主題”輸入框。
          5、等等....
          現在,重新審視列表并且找出可刪減的操作步驟,想到什么了嗎?你可以通過將光標一開始就自動定位在“發送到”字段就可以刪除步驟2.這將減少用戶的操作,雖然很微小,但你消除的每一步對于用戶來說都是友好的。

          Image title

          我們來看看谷歌的主頁。光標一開始就在搜索輸入框當中,因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗,所以不要忽視它們。
          2.過度刺激
          雜亂無章的頁面會分散用戶的注意力,使用戶無法專注他們想要完成的目標。就像有好幾個人同時與你交談時你會很難集中注意力,當頁面上太多的圖片、動畫、圖標、廣告、文本類型和鮮艷的顏色奪取你的注意時,就會很難集中注意力。
          記住,每個人的工作記憶在完成目標的過程中,會因為外界的刺激對每一步工作重新排序。每一次分心,尤其是視覺上的強烈刺激,都需要消耗用戶的一部分注意力。

          Image title

          LINGsCARS就是個極端的例子,你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上,即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
          解決方法
          首先,減少一切不必要的元素。僅保留必要的內容通常是最佳的選擇,減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網站,而不是視覺上復雜的網站。
          你還可以進行內容區分以達到平衡的效果。太多相同的內容(比如文字或圖像)會讓用戶感到厭煩。所以,視覺內容要進行合理的組合,圖像、視頻、信息圖表等,能夠使頁面和諧,并便于用戶理解。
          影視網站IMDb本可以在很大程度上輕松地只依靠圖片進行排版,但它反而運用同量的文字內容來平衡網站頁面。

          Image title


          在抽取出一個頁面上必須要展示的元素之后,你應該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解,也就是說,用一種方式,盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適,而這樣的結構也能讓界面交互更容易。
          下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單,右中是一個有特色的凍酸奶交易文本描述,插在文本中間的照片和色塊的使用,分分鐘創造出一個讓人喜愛的沙漏結構。
          下面來看看Groupon是如何將它的垂直菜單(中間偏左)和描述凍酸奶的文字(中間偏右)進行布局的吧。大圖居中被文字包圍著,這樣就打造了一個舒適自然的沙漏形狀。

          Image title

          對稱不僅僅是在屏幕的兩側應用相同的布局,它是視覺重心和視覺方向的平衡。通過這種方式,非對稱頁面也能看起來很有組織性,如下圖的OTHR所示。

          Image title

          將你的頁面內容精減到只包含簡單的和非競爭性的元素,這只是完成了預防過度刺激工作的一半。。不要忘記要以簡單的布局呈現這些元素。
          3、太多選項(希克定律)
          這有點自相矛盾:用戶需要更多的選擇,但是往往太多的選擇會使他們的大腦超負荷。


          席克定律(選擇困難癥)為我們揭示出了一種現象:用戶擁有的選擇越多,他們做出決定的時間就越長。


          作為設計師要去理解庫克定律,可以把每個選項看作是明亮的閃光燈,如下所示,太多的閃光燈會過度刺激用戶。

          Image title

          甚至像Rakuten這樣的知名網站也會犯類似的錯誤,因為他們沒有真正的理解這個設計原則。給用戶需要的而不是給他們認為他們需要的。
          解決方案
          假如你已經解決了不必要的和多余的選項,你可以將他們分別放入不同的組進行分類,你可以在百貨商店的網站上看到很多例子,這些網站擁有廣泛的產品選擇。
          它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單,抽屜和拉出其中的一種方式隱藏一些選項,那么你將獲得兩全其美的效果,這些超級菜單雖然為用戶提供了許多選項,但一定程度上不會給用戶帶來很大的負擔。

          Image title

          但是,隱藏式的導航欄不利于發現,因此電子商務和新聞等行業的設計人員應該注意。你可以通過放置其他類似產品的鏈接使缺點最小化(比方說亞馬遜的“相關購買”)從而最大限度地減少隱藏菜單的缺點?;蛘吣憧梢詺w納導航菜單的類別,將它們精簡為單行導航(如Apple和CNN那樣)。

          Image title

          你還需要注意應該如何組織整個網站的導航。許多與庫克定律有關的問題可以通過管理信息架構(IA)來處理,我們將在下面的“難以查找的頁面和功能”部分中討論。
          4.太多內容
          就像過度刺激和選項過多的問題一樣,提供過多的內容會將用戶的工作記憶拉向不同的方向。
          顯然,你希望展現的只是重要的內容,但對于一些網站來說,一切都是重要的,如果你的網站也有非常多的內容,為了避免讓用戶產生困惑,應該對內容信息進行和里的組織規劃。

          Image title

          Arngren的問題并不是它展示了很多的產品,而是它同時展示了太多的產品。在組織結構上的調整將會給網站帶來更好的體驗。
          解決方案
          如上所述,George Miller的解決策略是“分塊”,將需要展示的大量內容以可管理的方式組合起來,以便于記憶,電話號碼分為國家代碼,區號,一組三位數和兩組四位數字便于記憶,而一連串的11個數字會很難被記住。
          你想在商店主頁上放大量產品的圖片嗎?比起將它們全部羅列出來,不如通過他們的類型將他們分組羅列。Etsy通過根據不同的店鋪將產品進行分組展示。

          Image title

          還有文本組塊,文本組塊包括簡短的自然段,合理利用標題和副標題以及足夠的留白。
          對于需要大量數據的長表單字段,可以嘗試采用多步驟表單。長表單可能會令人生畏,有時會導致用戶流失。你可以將表單的信息分在不同的頁面里,減少信息過量給用戶帶來的影響。記得一定要有一個進度標記來讓用戶知道還剩下多少頁。(可以總結為復雜的頁面簡單化)

          Image title

          購買機票總是涉及填寫大量的信息,其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗:選擇航班,填寫乘客信息,輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔,也有可能會放棄購買。
          5.模棱兩可的界面
          認知超負荷的罪魁禍首先就是用戶界面混亂。永遠不要讓用戶花費大量的時間來弄清楚他們如何才能完成想要的目標,以及花費時間來弄清楚圖標的含義是什么。

          Image title

          并非所有用戶都是經驗豐富的,從而可以理解SpeedCrunch這種含義模糊的圖標。即使他們能夠識別代表Windows系統和Mac OS X系統的符號,那么位于右下角的那兩個圖標也會讓用戶迷茫。
          解決方案
          使用用戶已經熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作,即便是在以前從未使用過的網站上也是這樣。如果你覺得沒有新意,可以融合品牌特征巧妙的結合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標,但同時也賦予了他們品牌獨有的橙色。

          Image title

          標準標簽(如“聯系人”和“提交”)的按鈕比非傳統標簽(如“地址”或“開始”)更容易識別。通常已知的標簽可以提高用戶的瀏覽體驗,而不常見的標簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
          另外,你如果真的需要一個從未見過的圖標該怎么辦呢?如果這樣,可以運用現實生活中的場景展示來讓圖標進行自我解釋,這種做法是連接現實和虛擬的橋梁。例如:早期的互聯網先驅選擇了一個信封來代表電子郵件,因為信封是郵件系統的明顯標志。
          此外,要避免含義模糊的圖標,特別是可能還會被誤認為是其他含義的圖標,就像下列Issuu的圖標,有些是被人熟知的,但有一些卻不是。如果用戶必須通過點擊這個圖標來發現它的功能,這就會中斷他們的操作進程。

          Image title

          任何一個表意不清的圖標都應該附帶說明,告訴用戶怎樣操作。新的并且不常見的用戶界面,就需要更多的分步教程。例如,Slack就給出了一個完整的視頻引導來說明界面的操作流程。

          Image title

          6.難以查找的頁面和功能
          即使用戶已經擁有他們所需要的一切,但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素,導航應該放在明顯的地方,給用戶信心去任意瀏覽網站而不會迷失。

          Image title

          如果你覺得漢堡包圖標不好,那可以在看看Mojo Yogurt,它會要求你將鼠標懸停在左上角的徽標上以顯示導航菜單。

          Image title

          雖然圍繞著Logo有個小的動效,但對于整個屏幕的顏色和動效來說,它并不夠明顯。
          解決方案
          根據用戶的偏好理順你的信息架構。你的目標用戶群可能并不認可你的做法。因此,要想他們學習如何組織網站,卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。

          Image title

          如果你還希望通過組合頁面和菜單項來消除多余的頁面。設計工作室Waaark通過將其工作室的簡介,團隊成員簡介和聯系信息這三個頁面合并到一個頁面來簡化他們的導航。

          Image title

          如果某些功能或特征比其他功能或特征更重要,可以運用視覺手段來吸引他們的注意,增加大小,添加動畫以及使用對比色以此來吸引用戶的眼球。

          Image title

          PayPal期望有更多的老用戶而不是新用戶,并通過設置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
          7.內部不一致
          假設網站的主頁使用標準的藍色和帶下劃線的文本來表示鏈接,但另一個頁面僅使用藍色而沒有下劃線。當用戶瀏覽其他頁面時就會停下來去想,“它沒有下劃線,這還是個鏈接么?”他們甚至可能不會再去關心鏈接,而會被其他頁面的不統一分散注意力從而影響整體的用戶體驗。
          要記住,最好的用戶體驗是不會被用戶所察覺的,而像上面這樣通常都會被注意到。
          總結
          1、認知過載是影響工作記憶的因素。當過多的信息阻礙決策和整體經驗時,就會發生認知過載。
          2、使用不同的內容類型和結構化頁面組合,可以避免視覺混亂。
          3、隱藏式菜單可以幫助用戶一次管理可用選項的數量,但降低了可發現性。
          4、“分塊”和“步驟”等的方式可以防止認知過載。
          5、UI元素和圖標應該基于用戶現有的認知上,這樣他們就不需要過多的思考,新的獨特的功能要加上解釋說明。
          6、圍繞用戶的實際思考方式構建你的信息架構。卡片分類等可用性測試可以為你的目標群體揭示最直觀的導航方案。
          7、視覺和功能的不一致,以及打字錯誤和語法錯誤,都會分散用戶的注意力。
          8、盡可能減少冗余。另外,請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。


          文章來源:UI中國

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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合