<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設計分享達人


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

          心理學在我們生活中涉及的面很廣,是每個行業都要了解的,對于設計師來說,更要了解用戶的心理,因為我們的設計是面向用戶的 



          閱讀時間:大約9分鐘


          目錄


          • 前言

          • 7±2法則

          • 費茨定律

          • ??硕?

          • 格式塔原則

          • 色彩心理學

          • 馮·雷斯托夫效應

          • 奧卡姆剃刀原理

          • 總結




          前言


          最近正好在學習用戶體驗方面的知識,也查閱了相關的資料和文章,輸出是最好的輸入,所以把整理的相關文檔寫下了,也是將所學的知識再鞏固下,歡迎大家一起探討。




          7±2法則的定義


          7±2法則出于美國心理學家George A. Miller1956年發布的論文《神奇的數字7加減2:我們加工信息能力的某些限制》。Miller最早對短時記憶能力進行了定量研究,他發現人的短時記憶能力的廣度為7±2個信息塊。

          這說明人的大腦短時記憶的容量大約為“7”,并在7+2與7-2之間浮動,因此,心理學家把這個神奇的記憶容量規律稱為“7±2法則”。由7±2法則我們可以得出,一般人接受新事物的記憶容量大約是7,最多不會超過9。


          心理學家Alan Baddeley質疑7加減2規則。Baddeley(1994)翻出Miller的文章,發現那并不是真正的研究報告,只是一次專業會議的講稿。Miller基本上是自言自語,猜想人能夠同時處理的信息量有沒有固有的限制。

          此外,Nelson Cowan(2001)等研究者也追隨了他的腳步?,F在研究表明,那個“神奇的數字”其實是4。(無論是7±2還是4,便于我們記憶同時也協助我們工作提升效率就是最好的數字)


          George Mandler(1969)指出,人們能分門別類地記住信息,并且如果每個記憶類別里只有1~3條信息,那么人們能夠出色地回憶起來。當每類超過3條信息時,記憶效果就會相應下降,每類有4~6條信息時,人能記住80%;儲存信息條數越多,記住的比例就越低,當每類有80條信息時,人只能記住20%(如下圖所示)。



          舉個直觀的例子,以下隨機給出10個詞語,你看一遍能記住幾個?

          桌子   電腦   椅子  水杯   鉛筆   地圖   綠植   鍵盤   鼠標   文件


          7±2法則的運用


          1、組塊記憶


          為了改善不穩定的工作記憶,人們會采取一些有趣的策略。其中之一就是將信息“組塊記憶”。

          也就是把數字分為3-4-4來記憶,抖音的登錄賬號、美團的Dialog彈窗都是遵循的這一原則。

          包括現在在生活中,我給別人發手機號碼或者是身份證號的時候都會選擇這個原則,自己看著也清晰,也便于對方將信息分類。



          2、優化選項


          網易新聞和今日頭條的導航都遵循了7±2法則,更多的信息左側滑動即可。



          3、頁面布局


          7±2法則還可以幫我們將頁面分組,將內容按照屬性分類,使頁面更有條理性和層次感,用戶能的完成自己的操作,例如:餓了么




          費茨定律的定義


          任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。

          用數學公式表達為時間 T = a + b log2(D/W+1)。

          T=移動設備所需時長;a,b是經驗常量,D=設備起始位置和目標位置的距離;W=目標的寬度大小。



          費茨定律的理解


          1、設備當前位置和目標位置的距離D越長,所用時間越長;

          2、目標的大小W越大,所用時間越短。


          費茨定律的應用


          1、按鈕放大,點擊更容易


          閑魚和印象筆記,一個是直接發布閑置,另一個是直接創建筆記,都屬于核心功能,將用戶最想要或最直接想點擊的按鈕外漏、放大;增加可點擊區域來滿足用戶的需求。



          2、讓相關的內容更接近


          淘寶、京東的加入購物車和立即購買,在視覺上讓用戶增加了他們相關性的認知,也減少了兩個按鈕操作之間的距離和時間。



          3、頁面的邊和腳適合放一些按鈕和菜單


          安卓手機刪除應用時的操作、Potoshop軟件頂部菜單等、Mac操作系統的底部應用等,無論我們怎么操作,鼠標都不會超過這些區域。







          ??硕傻亩x


          ??硕?— 原稱??撕B桑℉ick Hymalrs 1aw),是一種心理物理學定律。

          一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。


          ??硕傻膽?/span>


          ??硕傻膽煤軓V泛,不僅是在產品上,在生活中也隨處可用。


          和同事每天都會遇到的問題,一到中午,同事就會問,吃什么?每日一問,看著商場眾多美食,真是發愁,但如果她換種問法:我們今天中午吃海底撈還是和府撈面,這樣的詢問是不是就節省思考和作出選擇的時間?


          遙控器的設計也是,看到下面兩個遙控器的樣式,你會感覺哪個好用,很明顯是右邊小米的遙控器,老人再不用教的情況下就可以自己操作,左邊的拿起來我們要花很多時間是研究如何使用,可能剛學會,想進行下一個操作的時候又要去花時間研究,是不是很鬧心?



          猿輔導APP中,導航默認的是所有的課程,對于學員來說選擇自己想要學習的課程,比較浪費時間,右側的設計就是將我們不感興趣的課程關閉推薦,剩下的課程大大縮短了我們選擇和尋找的時間




          格式塔的定義


          格式塔(德式造型)是20世紀20年代由德國心理學家提出的一組視覺知覺原理。它建立在“一個有組織的整體,被認為大于其各部分之和”的理論基礎上。


          格式塔的應用


          在我們做設計的過程中,常用的是原則有:簡單性、接近性、相似性、連續性、閉合性等



          1、簡單性原則


          簡單原理適用于設計中的三角形構圖,均衡構圖,對稱構圖,向心構圖,攝影中的對角線,X型構圖等。這些構圖方式都是為了把復雜的信息元素通過簡單的方式讓觀者易于理解。


          58同城和愛奇藝首頁都是均衡和對稱的構圖



          2、接近性原則


          一個頁面中,如果兩個元素是接近的,給用戶的感覺他們之間就有相關性


          在支付寶我的頁面中,個人信息都是有相關性的,所以放一起遵循了接近性原則



          3、相似性原則


          我們的眼睛很容易關注那些復雜環境中外表相似的東西,可以利用相似原則組織好界面中的信息和層級關系。


          相似性原則在UI設計中也很常見,網易郵箱、騰訊視頻都采用了相似性原則



          4、連續性原則


          人的視覺有追隨一個方向上的連續性,以便把不關聯的元素聯系到一起。


          我們在APP中常看到列表也是連續性原則的應用




          色彩心理學定義


          在自然欣賞、社會活動方面,色彩在客觀上是對人們的一種刺激和象征;在主觀上又是一種反應與行為。色彩心理透過視覺開始,從知覺、感情而到記憶、思想、意志、象征等,其反應與變化是極為復雜的。色彩的應用,很重視這種因果關系,即由對色彩的經驗積累而變成對色彩的心理規范,當受到什么刺激后能產生什么反應,都是色彩心理所要探討的內容。


          色彩心理學應用


          • 黑色:精致和力量

          • 白色:干凈、精致、純潔

          • 紅色:勇氣、激勵、力量;也能激發欲望

          • 藍色:冷靜、安定、信任、安全

          • 黃色:樂觀、歡樂

          • 綠色:平衡、可持續的增長

          • 紫色:皇權、精神意識、奢華

          • 橙色:友誼、舒適、食物

          • 粉色:平靜、女性化、性


          一說到美食,我們能想到的顏色就是橘色,暖色系,因為這個顏色會增加食欲

          插播一個知識點:美團外賣選擇的橘色,跟美食相關的顏色,我們可以理解,但餓了么平臺為什么會選擇藍色而不是暖色系呢?餓了么是以科技為主導的,核心并不是美食,所以選用了科技藍



          在一些電商類網站都會將加入購物車、立即購買顏色設置為紅色,因為紅色可以刺激人的眼球,來增加點擊的欲望,還有微信群和朋友圈的未讀,都設置成紅色



          顏色也是影響人們的情緒,比如長時間在橘色的環境下呆著,會使人焦慮不安,所以一些餐廳在顏色、燈光選擇上都會選擇用一些暖色系,藍色和褐色,會使人平靜,適合一些酒吧;


          但色彩也不能濫用,它是具有聯系和含義的,例如:紅色代表赤字,即經濟困難;也可以代表警告、危險等;綠色代表環保、通行,所以在選用顏色上也要考慮它的含義和意義,要謹慎。




          馮·雷斯托夫效應定義


          馮·雷斯托夫效應告訴我們,某個元素越是違反常理,就越引人注目、令人難忘。

          Hedwig von Restorff在1933年檢驗了這個理論。她讓實驗對象觀看一系列相似的物品。如果其中某個很特殊,比如說有聚光燈照射,那么相比其他物品,受試者就更容易回憶起這件物品。


          比如,下面這個紅西紅柿


          如果你想要讓某物引人們的注目,就要使它特殊化,可以通過色彩、尺寸、留白等方式來引起注意


          例如:小紅色的紅色按鈕、蘇寧易購一套節日氣氛的首頁





          奧卡姆剃刀定律定義


          奧卡姆剃刀定律(Occam's Razor, Ockham's Razor)又稱“奧康的剃刀”,它是由14世紀英格蘭的邏輯學家、圣方濟各會修

          士奧卡姆的威廉(William of Occam,約1285年至1349年)提出。這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。正如他在《箴言書注》2卷15題說“切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情?!?


          奧卡姆剃刀定律的應用


          我們在進行頁面設計的時候并不是內容越多越好,信息飛速發展的時代,大家都講究快、效率,我只要通過這個APP盡快達到目的為好,繁冗的功能對用戶來說只會降低用戶體驗感,抖音APP底部的導航開始是文字加icon,后來發現圖標會影響整體的效果,因為當視頻播放的時候,下面的Tab識別度會降低,經過改版,將icon去掉,文字放大,CTR也上去了,之后小紅書就開始參考抖音的改版:我不管你去掉的原因是什么,CTR上去就行



          總結


          一句話在回顧下文章的定律


          7±2法則:一般人接受新事物的記憶容量大約是7,最多不會超過9

          費茨定律:A和目標B的距離越長,所用時間越長;A大小越大,所用時間越短。

          ??硕桑?/strong>選擇越多,花的時間就越多,選擇的數量增加,做出決定的時間也會跟著增加。

          格式塔原則:常用的是原則有:簡單性、接近性、相似性、連續性、閉合性

          色彩心理學:顏色也是影響人們的情緒,選用上要謹慎

          馮·雷斯托夫效應:某個元素越是違反常理,就越引人注目、令人難忘

          奧卡姆剃刀原理:簡單有效原理,去繁從簡

          轉自:站酷-麥小兜Sarah 

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


          交互基礎_頁面加載方式

          ui設計分享達人

          作為UI設計師,我相信大家都是專注于界面設計的好不好看,至于界面與界面之間如何交互,點擊之后如何反饋,是一個比較容易被忽略的重要環節。

          那么我們怎么處理好界面交互中的加載設計,減少用戶因等待產生的焦慮情緒,保證整個體驗無縫銜接,今天這篇文章就來總結下APP中數據加載模式設計。



          一、為什么要加載?

          1、用戶在進行某些操作時,都要從后臺請求數據,這個過程都需要時間,系統應該始終在合理的時間內做出適當的反饋,讓用戶了解正在發生的事情,讓用戶知道此時的操作是有反應,減緩用戶因等待而產生的焦慮感。同時加載方式也可以做的有趣,吸引用戶注意力,增加沉浸式體驗,讓用戶輕松自在的享受等待;


          2、體驗無縫銜接,減少用戶跳失,正常的等待加載時間是0.3秒以內,同時不同場景對應有不同的加載方式。



          二、常見的加載場景及方式

          a.加載場景:

          不同場景有不同的加載方式,常見的加載場景一般有以下幾種:下拉刷新、上拉加載、切換新頁面的數據加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中,要根據不同的場景搭配不同的加載樣式,才能更好的做到緩解用戶等待焦慮,降低用戶的跳失率。


          b.加載方式:

          1、全屏加載

          主要出現在手機H5頁面,例如微信的文章詳情頁。一般會有進度條或有趣的動畫設計,減輕用戶等待時的焦慮感。加載失敗后,頁面通常為空白頁,且有重新刷新操作按鈕。



          優點:將整個頁面的內容都加載出來才展現給用戶,能保證內容的整體性,全部加載完才能夠系統化的閱讀。

          缺點:一般等待的時間較長,容易產生焦躁情緒,尤其是遇到網絡不好的情況


          2、下拉刷新加載

          主要出現在頁面內容為推薦類、或者信息更新頻次高的產品,通過刷新加載新數據,加載的loading樣式可以結合產品logo或IP形象進行設計,增加趣味性,吸引用戶注意力。



          3.占位圖加載

          如果頁面布局樣式比較固定,可以采用占位圖加載機制,先加載頁面布局和占位圖,先給用戶展示頁面框架,后加載頁面圖片細節部分,這種加載方式相對于直接展示白屏來說,呈現給用戶無縫銜接的感覺,體驗更加流暢。


          4.分布加載

          當頁面中有文字和圖片時,優先加載占網絡資源較小的元素,如先加載文字,后加載圖片,圖片加載完成前使用占位符顯示,保證用戶可以順暢閱讀,縮短用戶的等待時間,提高產品體驗。


          優點:可以幫助用戶快速閱讀內容,了解信息。

          這種加載形式更加適用于內容閱讀型的APP或圖片、視頻類資源比較多的頁面。


          5.自動加載(懶加載

          當瀏覽信息時,不停的向上滑動,新的內容會不停的從底部出現,這種方式稱為自動加載。對于自動加載,要注意每次加載多少條內容,或者多少屏的內容。一般會在距下面內容一定距離時開始加載,當網速非??斓臅r候,用戶并不能感知懶加載的動作,這樣可以營造一種無極限瀏覽的錯覺,很容易的把用戶吸引住。



          優點:無需用戶操作,自動加載后續內容,營造沉浸式體驗。

          應用:適合feed流、瀑布流、算法推薦類的內容。

          6.預加載

          提前加載好頁面信息內容,這樣當網絡不好的時候,可直接從本地緩存中渲染,就不用再加載了。

          比如用戶在看A頁面的時候,App在后臺加載完B頁,等用戶打開B頁的時候就不需要等待加載了,因為App已經幫用戶提前加載好了,給用戶提供無縫鏈接的感覺,弊端就是服務器壓力很大,就是要預測用戶行為,加載其他數據,這樣會消耗不少流量,所以建議在WiFi網絡環境下采取這種預加載機制,而在蜂窩網絡狀態下則不采用預加載機制。



          7.漸進式加載

          一般出現在圖片類產品,比如pinterest、unsplash等,當瀏覽圖片的時候,經常是先看到一張模糊圖或與圖片較為相似的色彩值圖片,然后再漸漸的變得清晰,這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。



          8.后臺加載(異步處理)

          用戶在前端執行操作后,客戶端立即給予操作成功反饋提示,然后把請求放到后臺與服務器交互,這一過程用戶是看不到的,也不需要等待,體驗是非常棒的。

          例如在用微信發朋友圈時,會覺得特別流暢,即使在網絡不好的情況下,會看到你的動態立即展示在朋友圈列表,并不會提示你網絡不好,操作失敗,全部以操作成功來顯示,其實它只是將你發布的操作記錄了下來,等網絡一好就將動態上傳到服務器,從而完成發布行為,微信的點贊也是同樣的操作,你給好友點了贊,并不會提示你網絡不好,操作失敗,而是提示你點贊成功了,其實它只是將你點贊的操作記錄了下來,等網絡一好就將點贊的行為上傳到服務器,從而完成點贊行為會,給用戶帶來體驗流暢的感覺。

          所以這種加載方式是需要根據具體使用場景來權衡使用的,對于一些重要的操作,建議還是使用模態的方式加載,對于一些小操作,如點贊、訂閱、關注,可采用后臺加載的方式。



          9.模態加載

          以上幾種方式都是采用非模態加載,不會對用戶造成干擾,用戶可以做別的事情,不需要等待加載完成,大大降低了等待的焦躁感。

          模態加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結束,因為如果用戶執行了其他操作就會打斷正在進行的加載過程,實現不了用戶的目標。



          應用:用戶執行的操作本身不能和其他操作同時進行,例如登錄,退出,應用啟動,手機支付等場景。



          三、具體實施方法小結

          1、能用非模態加載的盡量不要去用模態加載,如果非得用模態加載,也盡量給一個能取消的按鈕,方便用戶在不愿意等待的情況下取消操作。


          2、如果加載的時間比較長,最好能告知用戶加載進度,讓用戶心理有個預期,這樣用戶更愿意等待,不會因為等待產生焦慮感,分分鐘卸載你的產品??茖W的實驗證實,先慢后快的進度條是讓用戶心理感受上最快的設計,這是因為用戶最容易記住最后一瞬間的感覺,如果最后一瞬間,感知到了快,就覺得很順暢了。


          3、數據加載本身就是很考驗用戶心態感受,所以盡量通過一些有趣的動畫來轉移用戶的注意力,營造沉浸式體驗,同時增加了趣味性,給予了產品人性化的設計。

           


          總結

          作為產品設計人員,盡量給用戶好的體驗,我們應該讓產品自己去解決問題,而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務端之間的數據傳輸考慮進來,站在用戶、客戶端和服務器閉環的角度去思考產品,才能設計出體驗更好的數據加載方案。


          轉自-站酷


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


          2020年UI界面設計趨勢

          ui設計分享達人

          明年的設計方向是如何,本文分析2020年UI界面設計7大設計趨勢,旨在能夠幫助大家提前了解明年設計方向,提前做好設計儲備。





          2019年接近尾聲,最近一直在研究數字設計領域的未來趨勢。從各大設計網站上觀察到一些最受喜愛的作品,從中研究發現未來的界面設計趨勢,包括今年一些受歡迎的設計系統,從中提取一些未來可能的設計風格走向。之前看過我文章的伙伴知道,我之前寫過一篇圖標趨勢的文章,里面就是探索明年趨勢走向。那么對于界面,同樣的我們需要提前掌握大致設計風格走向,為自家產品改版做一些設計儲備。





          黑夜模式

          -

          黑夜模式無疑是今年比較熱的一個設計方向,為什么這么說?首先是Google材料設計語言更新了,增加暗夜模式。同時今年Q3季度蘋果發布IOS13設計語言系統,里面增加暗夜模式。不用說后續很多APP應用都會跟隨兩大廠商更新這個黑夜模式設計方向。無疑2020年這個將會持續。黑夜模式出現為減少用戶眼睛疲勞,提升產品使用體驗。

          Materials Design


          IOS 13 Dark  


          IOS 13 Dark  (宣傳視頻,由于視頻上傳麻煩,因此截圖)


          MEDIUM


          INSTAGRAM






          留白設計

          -

          今年下半年觀察到Facebook旗下的Messenger應用和前段時間雅虎更新他們家品牌語言的同時,也重新設計他們家所有產品。我們可以看到如下應用截圖,基本去分割線,通過留白區分層級。這樣的好處可以減少分割線對內容的干擾,界面呼吸感增強,達到簡約設計的目的。


          Messenger 和 Yahoo



          McDonald`s



          PINTEREST 和 VSCO




          蘋果風格設計

          -

          蘋果風一直盛行至今天,包括大圓角卡片設計、大標題、粗字體。蘋果今年剛剛更新的IOS13設計語言同樣的是增強了卡片設計。這種風格將會在2020年繼續盛行,因此作為設計師我們更應該提前去對這種趨勢熟練掌握??ㄆO計作為承載內容的容器,其實更適用今天移動互聯網的大方向,因為卡片可以作為一個容器封裝復雜的內容,使得模塊層級區分明顯,適配性也是更強,更聚焦,來看下具體案例。


          PINTEREST 和 APPSTORE


          Pinterest是今年9月份左右剛更新的設計,圓角卡片大范圍的運用。



          BEHANCE 和 MEDIUM


          Medium對重點欄目在今年更新設計時候啟用了卡片。






          品牌穿透

          -

          為什么要說品牌穿透?Google 在系統設計語言里面增加圖形特征模塊,是什么?就是通過連接品牌元素到產品設計中。到今天很多應用已經開始熟練掌握這種設計思路了,比如運用到圖標里面或者界面設計中。蘋果雖然沒有很明確公開說明,但是我們可以從蘋果家族設計語言可以看出,包括線下體驗店、手機硬件、包裝盒以及各種各種物料設計,都是一種白色語言設計風格。通過顏色與圖形特征做品牌區分,蘋果算是目前做的最好的,史無前例。那么這種趨勢在2020將會一直保持。



          APPle體系產品與LOGO相粘性強,具有超強的記憶點



          Google家族品牌穿透(由于視頻原因,此部分截圖)


          IBM設計跟隨LOGO有一致基因







          網格化布局

          -

          網格化是一切設計系統的基礎,Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設計語言基礎上對網格研究與應用算是比較成熟的,Naver方形網格,Google的8px網格,IBM 2PX網格,蘋果其實沒有很強調他們家網格系數,其實我們可以細看他們已經提到8px Grid 。因此網格化在2020將是非常重要的。

          IBM 2PX網格語言






          微動效

          -

          5G時代已經到來,加上目前硬件升級,動效的普及已經不再是難題。我們可以慢慢發現目前很多產品設計里面都開始加入動效,來提升產品體驗,同時動效也有很強的指導性質。在某些場景下,使用動效能夠很好與用戶進行互動交流,因此在2020年動效的使用將會越來越多。


          Google Tab Motion


          E Google01



          G 圖標動畫


          washing-app-ui


          細節動畫





          3D動畫

          -

          隨著硬件升級,5G時代開始大面積推廣與普及,在應用程序里面使用3D動畫來展示產品是一個很不錯的選擇,3D更加貼近真實環境,貼近我們真實物理世界。


          3D展示商品


          3D登錄頁


          3D Product Swipe






          總結

          -

          今天分析了2020年流行的7大設計趨勢,這些設計趨勢也是伴隨著外在關系一起存在的。比如5G來了,那么自然視頻領域肯定是未來值得期待,這就是為什么微信公眾號都開始流行小視頻也是一個原因。硬件升級自然能支持更多的設計元素融入產品里面。因此作為設計師我們要多觀察這個行業、多看、多思考,來掌握未來產品設計方向。希望本篇文章能帶給你一些新的觀點與啟發。


          轉自:站酷-設計TNT



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

          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應用程序中的底部欄菜單。消息視圖處于選中狀態。


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


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


          文本標簽

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


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


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


          目標尺寸

          使目標區域足夠大,以使其易于點擊或單擊。要計算每個底部導航動作的寬度,請將視圖的寬度除以動作數量?;蛘撸瑢⑺械撞繉Ш絼幼髟O置為最大動作的寬度。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)時(右圖)整體具有外擴趨勢。




          組合形式

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




          繁簡對比

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


          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界面設計  包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

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

          存檔

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