<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設計者

          -設計過程中,共情(同理心)的一些觀點和心得,希望能夠讓更多設計師對這些軟能力有更好的提升和應用,歡迎前來交流探討



          到底什么是共情

          ————


          在體驗設計的過程中,如果不能對設計對象有更深入的了解,設計思維就無法開始。而用戶對產品持有的觀念、態度甚至意見并不一定會表現的很明顯,這需要設計者更加主動的與用戶進行互動去構建共情。這可以使得你能夠更加了解他們的需求、想法、情緒和動機。好消息是,你能掌握多種方法來與用戶構建共情去獲取更多信息。并且當你有足夠的“正念”和經驗時,你也能成為共情他人的專家。

          “正念”:有目的的、有意識的,關注、覺察當下的一切,而對當下的一切又都不作任何判斷、任何分析、任何反應,只是單純地覺察它、注意它。



          百科

          共情(Empathy),也稱為神入、同理心,共情又譯作同感、同理心、投情等。 由人本主義創始人羅杰斯所闡述的概念,卻越來越出現在現代精神分析學者的著作中。不管是人性觀還是心理失調的理論及治療方法似乎都極為對立的兩個理論流派,卻在對共情的理解和應用上,逐步趨于一致。共情似乎為現代精神分析與人本主義的融合搭起了一所橋梁。


          通俗含義

          我們常說的感同身受、換位思考、同情心、設身處地、將心比心這都是共情的一種描述。Empathy一詞源于德語“Einfühlung”,意為讓人們跟藝術品融為一體,比喻走進一件藝術品的奇妙體驗,因此國外常常會看見“站進別人鞋子里去”的共情比喻——(Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.)意為正如俗話所說,站在他們的立場上,以便更深入地了解他們的處境。


          對于“共情”我更多的理解成是兩個或多個載體之間的一種共識一種情緒共鳴,然后再到行為跟思維上的影響。但實際上發生完全的共情是不可能的,有時連我們自己也會做一些無法理解的迷惑行為,并且客體是多樣化的,可以是跨物種的,跨維度的。而我們要做的就是在工作中定義共情的有效范圍,盡可能的與目標用戶產生共情以了解更多信息或需求,然后去定義和構思新的需求與設計。共情很重要,但它不是設計工作中的全部,有效而不要過度的使用也很重要。


          1. 共情載體的多樣化可以是你通過一幅畫感受到了作者的情緒表達

          2. 十字路口聽見火車的鳴笛聲,從而感知到危險的信號

          3. 當你傍晚處在城市生僻的角落,打開地圖軟件,亮起了回家的導航


          身邊的共情

          我們身邊的共情無處不在,正是這些共情使得人與人之間的情感更豐富,當然也是因為人類有強大的表達能力。通常當客體情緒在表達出來的情況下,主體是可以更容易得到共情的。所有當主體更專注的去感受客體的情緒表達時,能夠使達到共情變得更迅速。



                  常的的共情場景;


          1. 身處于電影院,看到某一段感人的情節,很多人開始淚盈眼眶。

          2. 朋友講述著自己的不幸,你聽完后的同情與表示理解他。

          3. 看著熟睡的嬰兒,人們自覺的保持了安靜的氛圍。

          4. 準備上樓,當眼看電梯門就要關上時,里面的人幫忙打開了電梯門。

          5. 正在寫報告時,突然的停電讓你措手不及,也讓你的同事措手不及。

          6. 與伙伴開黑游戲,共同取得勝利那一刻。

          7. .....


          以上都是一些生活中常有的共情場景。通常當我們與其他客體得到共情時,往往我們能夠更清楚客體傳遞的信息是什么、需求是什么,這完全可以應用到我們的設計場景中幫助我們獲取更多的有效信息。



          共情對體驗設計的作用

          ————


          如果你想要更了解你的產品用戶,從而讓你的產品更好的服務用戶得到更好的體驗口碑,那么體驗設計師如果對目標用戶沒有更深入的了解,那么產品設計中的各種設想都是沒辦法決策的,甚至都難以測試和驗證,這對產品研發一定是一個危險信號。而共情則能幫助我們洞察用戶需求和定義問題,所以共情在體驗設計中顯得基本且至關重要。


          以交互設計為例

          - 電商的界面設計:

          產品原型與交互界面時常是有所出入的,其原因在于前者更關注產品本身框架與盈利點,而后者更注重整體的用戶體驗的細節。共情用戶需求,以及思考商業盈利與用戶體驗之間平衡的點似乎是無法脫離共情應用的。這便是共情應用的一種體現,也是共情價值與設計賦能的體現。



          - 移動端常見廣告推廣界面:

          一直以來在產品營銷廣告中,始終存在一些流氓的交互方式讓用戶苦惱。往往更加注重和尊重用戶感受可以更好的提升用戶的好感與使用體驗,這便能夠使產品與用戶之間的感情升溫贏得口碑。



          - 組織產品功能架構時:

          在構建產品業務框架時,大多可能會出現以公司服務資源為中心的構建方式,但同時這種由內而外開發方式會為產品帶來更多的弊端(往往產品投入使用后,會出現超出預期的問題)。嘗試去站進用戶的鞋子里去,或者找來目標用戶甚至是相關的專家來做咨詢,減少研發迭代的彎路。



          用戶研究中的共情應用

          - 用戶畫像:

          用戶畫像是體驗設計中常見的一種設計工具,它能夠幫助產品定義目標用戶,能夠有效用于產品設計決策或者洞察用戶需求等。一個好的用戶畫像是基于真實用戶的,它不是胡編亂造的。畫像在于形成多組可供參考的角色材料,這有利于跨團隊跨層級之間快速實現共情,達到業務目標的統一性。因此一組目標用戶畫像能否幫助團隊快速實現共情是一個重要的衡量標準,而不僅是一組人口調查數據。



          - 用故事去描述:

          故事的元素通常會更豐富更有趣味,用故事敘事更能提升用戶的興趣和關注,這能便于構建共情。因此當你發布測試任務或者撰寫研究報告時,都可以加入背景故事或用故事敘事,便于對象更容易理解和共情,你甚至可以用筆繪制故事版,像四格漫畫一般,因為用圖傳達概念或信息更容易讓人記住或回想起來,并且當你用這些方法時,自身也能加強理解。共情不是單向傳遞的,不要高估對方的理解能力,讓你的信息更簡單明了的傳遞也是重要的共情應用!



          - 仔細傾聽和觀察:

          在與目標用戶進行互動的時候,通常會借助電子設備幫助記錄這個過程,目的是為了更仔細的觀察和聆聽,并注意到被忽略的信息。就像一種正念,我們會帶有目的性的觀察目標活動,并且不會進行干涉,同時不對當下發生的一切提前作出任何結論、分析或判斷,直至這個過程有了一個里程或結果,我們再將收集到的各種信息放在一起去思考。傾聽和觀察是人與人之間互動的根本方式,相對仔細完整的傾聽與觀察可以獲取到更加有效的共情,而片面的則可能產生共情偏差。



          小結:

          共情在體驗設計的應用中很廣泛也很重要,甚至還延展了許多幫助共情的工具,這些都是為了讓設計者能夠更好的了解市場、發掘用戶需求、甚至找到新的產品機會,最終幫助企業解決產品實際問題。有時在共情工作中,我們就像一個老中醫一般,對患者望聞問切。 一旦有了問題,就應該及時使用適當的方式去共情目標對象,定位問題所在,并制定解決方案。



          如何在體驗設計中構建共情

          ————


          制定共情的范圍

          為了尋求更加有價值的目標用戶進行共情研究,我們會對共情的目標進行范圍篩選,可以是根據某些用戶習慣、常使用的產品服務、某個場景、也可以是社會群體(例如學生、司機)、甚至可以是動植物(例如寵物類產品)。所以第一步你要根據需求去制定共情目標的篩選條件,然后一點點縮小和鎖定有效的目標群體,再開始招募、溝通或是進行其他下一步工作。我們沒辦法跟所有目標用戶構建共情也沒有必要這樣做。通常五個左右的用戶就能夠反映出大多數問題,并出現重疊的反饋。


          - 在不同研發階段嘗試與特殊的用戶共情

          伴隨產品的發展過程用戶也在時時發生微妙的變化,在跨度大的迭代中,嘗試與產品潛在用戶或極端用戶進行共情研究也是很有價值的。潛在用戶的需求通常存在著更多的不確定,這也意味有發現新機會的可能。而極端用戶通常會有一些更刻薄的需求,這些需求可能不是主流,但也有主流發展的潛力,不過至少這些改進會為極端用戶帶來驚喜。這就像是在公交車站下安裝一臺自動售賣機,不是大多數人的需求,也不是當前的主流趨勢,但卻能夠為部分乘客帶來方便或驚喜,我們不能忽略這些少數。




          帶有目標的進行

          在體驗設計的過程中,我們需要與目標對象構建共情時,一定是有目的有意圖的。以使用性測試為例,往往我們都會設定一些產品測試任務和目標給用戶,再進行觀察和共情。這也將允許我們能夠在同一個或相似的場景事件中發生共情,這樣才能夠獲取到更真實有效的共情。以一個吸塵器產品為例,如果對方是在地毯上測試的,而你是在木質地板的環境下去共情的,那么共情結果肯定是有所出入的。所以構建一個共情目的甚至是環境是有效共情的一個重點之一。



          情緒降噪與傾聽

          構建共情會受情緒影響,在共情前有必要去除負面情緒影響,不要為共情構建帶來更多的阻力,另外則是仔細的傾聽和理解。這就好比我們要專注學習,除了認知聽講,腦子里一旦充斥著其他負面情緒或思維影響,就很難完成專注學習的目的。同理,在用戶幫助我們測試產品或訪談時,我們也要首先做好彼此的心理建設,去除主要的負面情緒甚至去除不利的環境影響因素,例如緩解用戶緊張不安的情緒,找一個素一點且安靜的測試房間等。



          合理的工具輔助

          圖表、筆記、錄制設備是幫助我們共情的最好工具,在不同的場景下,這些工具能夠幫助我們更好的收集信息,并且便于我們思考和共情。我們在短時間能記住的信息是有限的,這也是為什么我們會用到7±2這種定律去控制信息量的原因。以用戶體驗地圖為例,在記載用戶體驗產品的過程中,便是一種很好的共情輔助工具,它能夠按照使用步驟或階段記載用戶使用情況和情緒變化等反饋。



          構建共情的要素

          在我的理解中,共情由四個主要的因素影響來構成。

          一、尊重:受到不同的環境跟經歷影響,要去準確理解一個人是很困難的,哪怕是多年的夫妻也是如此。所有首先要做到尊重,消除任何偏見,不要帶有批判或評價的心理。然而做到足夠的尊重也并不容易。

          二、觀察:觀察是獲取客體傳遞信息的主要途徑,不能掌握足夠的信息是無法做到共情的,片面的或者假設的信息都將影響到正確的共情。

          三、思考:對客體的信息與觀念進行思考,嘗試理解客體的各種行為根因以達成一致的認知。

          四、融入:將自己感受到的情緒與認知代入到共情對象的行徑中,去仔細揣摩,以洞察用戶的行為、感受、需求、思維方式以及與產品之間的關聯,就像靈魂附體一般,以達到更深入的共情來定義問題。




          共情為設計賦能

          最后便是共情結果如何應用到設計之中,將共情結果賦能到產品設計也是共情工作的價值所在。通常這套流程是共情->定義->構思->原型->測試,在這個整個過程中隨時是可以返回到前面其他階段中反復打磨的,而共情作為一個起點也揭示了其重要性。我們一切的共情工作皆為了能夠優化和解決產品的問題,使得產品體驗能夠更好,這是我們在體驗設計中不斷去共情的初衷。




          好的共情設計欣賞

          ————


          以移動端的產品來講,現在好的共情設計真是百花齊放,這正是創新技術與共情設計發展的好趨勢,也是敢于創新探索的好機遇。這里我們放三種典型的欣賞案例說一下;


          一、智能便捷型:給用戶提供更加智能便捷的服務功能,使得用戶能夠獲得更輕松流暢的服務體驗;




          二、人性化類型:通過大數據與技術手段,為用戶提供更加人性化的服務方案,提升用戶好感度、依賴性,加強產品口碑與體驗;




          三、情感關注型:有一些屬于情感關注類型的共情設計,通過獲取用戶的場景信息或其他數據共情用戶情緒,并給予用戶合適的關愛、幫助、引導。為用戶帶來軟件有情感,品牌有溫度的體驗;



          小結:

          在體驗設計中,情感化設計一定會是一個值得深入方向,我們應該關注到不同場景下用戶會產生的情緒變化,為用戶提供更加走心的服務體驗,為產品收獲更多口碑。當然,在產品完善的這個漫長過程中,我們也要隨時甄別我們所做的事情是否對用戶和企業有更高的價值。在研發資源有限的情況下,劃分這些設計點的權重,合理分配研發資源。



          共情構建中的認知偏差

          ————


          能夠對共情構建產生影響的認知偏差挺多的,這些認知上的偏差會影響到共情的正確性,不僅是構建共情的主體還是客體都會有影響。國外產品設計師Abhishek Umrao在UX MAGAZINE(https://uxmag.com/articles/6-ways-psychology-affects-your-design-work)上整理了六個關于影響UX體驗設計的認知偏差可以了解一下。這里圍繞構建共情補充了一些相關認知偏差,希望能夠在構建共情的工作中再少一些坑;


          1. Empathy gap(共情偏差)

          共情偏差是指由于經驗、預期和態度存在差異,我們很難準確地去體會他人的感受。這一點就是前文提到的我們無法做到完全共情,我們對共情的概念要有一定認知。

          建議:通過技巧去彌補,減少認知偏差。多一些耐心的聆聽,減少偏見和執念,嘗試思考如果是TA該怎么辦?


          2. Negativity bias(負面情緒偏差)

          情緒會對我們的認識和行為產生影響,而負面情緒產生的影響則是最大的,這會對我們的共情判斷產生偏差,所以前文我們會提到消除情緒噪點的概念。

          建議:盡可能的維持中立或積極的情緒狀態會更有助于共情工作,但至少是消除負面的情緒影響。


          3. Observer-expectancy effect(觀察者預期效應)

          觀察者常常會不自覺地扭曲影響因素或數據,以得到預期結果。這就好比在用戶進行產品測試的期間,向你咨詢了意見,而你很有可能不自覺的給出你的期望或者一些暗示,這會對目標產生可暗示性偏差(Suggestibility),使得目標想到的內容往往會被扭曲。

          建議:1. 對面向用戶的測試材料進行自查糾正,盡可能處于中間立場,不要干擾測試結果。2. 在主持訪談或用戶測試現場時,對于用戶的主動咨詢或交談中不要解釋過多,讓用戶理解其定義跟概念即可,說的越多越是容易出現觀察者預期效應。


          4. Automation bias(直覺偏誤)

          基于自身的認知或經歷,有時做出判斷會過度依賴個人直覺,而不去收集更多有益于做出準確判斷的證據。這一現象常常表現為產品或項目經理的一拍腦袋的決定,但是往往因為過度依賴直覺而忽略了實際的場景差異等。

          建議:對于不能直接給出有效證據的決策,要敢于質疑而去追究其正確性。當使用參考信息時要思考兩者之間的差異性??傊灰獞{借事件的相識性而忽略差異性,最終憑直覺決策。


          5. Authority bias(權威偏見)

          人們會過度倚重某些權威的意見,而忽視事情發生的實際背景。以品牌的影響力為例,兩種不同的任務實施程序,通常人們會認為大品牌的方案更好更值得信賴,而忽略了一些體驗細節。

          建議:對于相比較的軟件測試任務,我們有時會弱化甚至隱匿品牌信息。其目的便是在比較時減少這些權威偏見,不論是正面的還是負面的,這些都會影響用戶判斷,所以在特殊的場景研究下,請注意這一影響是否干擾結果。


          6. Normalcy bias(正?;`)

          人們會過度依賴先前的經驗,把一些極端事件看作正常的,認為事情很快會過去。以用戶測試為例,當6個人都正常完成了測試任務,僅有一人出現出現問題時,這是一個概念問題,我們不能忽視這僅有的一個用戶,更不能安慰自己這只是一個特例。

          建議:上文有提到嘗試與極端用戶進行交流,其實道理類似,問題純在即合理,我們有必要注重和研究這些極少數,它們極有可能帶來新的機會點。


          7. Illusion of transparency(透明度錯覺)

          人們高估自己的個人心理狀態被他人知曉的程度的一種傾向,時常表現為你以為別人都明白了你的意思,實際上別人明白的還遠遠不夠。與“知識的詛咒”這一偏差的差別在于,前者是我以為對方明白了實際對方還有諸多不解,而知識的詛咒是你無法給對方進行可理解的解釋,有著文化背景或認知的障礙,實際上這兩者偏差概念都會影響到共情工作。實際辦公中透明度錯覺時常體現在需求表達、文檔解釋、跨部門溝通中,往往你以為你說的已經很清楚了,但在實際研發中卻會體現出諸多差異。

          建議:適當的了解其他部門的專業文化,便于更好的解釋給對方。組織好信息框架,簡單易懂的信息框架易于對方理解,例如書本的目錄大綱、信息的分類等??鐖F隊或部門的PRD(產品需求文檔)盡可能的減少專業術語的應用或者進行注釋,文檔的目的不在于體現多專業而是更加易懂的傳達信息。


          趣味思考

          ————


          研究用戶從觀察自己開始。每個時代的人都會有不一樣的特質或者某些現狀,在這個大環境下,你會發現與同齡人之間有很多相似點,那么加強對自己的行為理解,是不是就等同研究了這些同齡用戶的共有特征?這些特性是否會對你的產品使用有關聯?帶著這些特性去體驗你的產品時,是否會發現新的機會點?



          參考文獻:https://uxren.cn/?p=68537#影響UX設計的6個心理偏差

          參考文獻:https://uxren.cn/?p=68382#如何構建同理心


          文章來源:站酷    作者:泡泡bing


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

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          資深UI設計者

          每年的雙11在設計師們的眼里,都不僅僅是購物狂歡節還是一場視覺盛宴。這不,今年的雙11重頭戲來了。

          天貓聯合各品牌發布了超級符合“貓頭海報”,一共55家下面讓我們一次看個夠。

          1. 泡泡瑪特,很有意思的創意

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          2. The North Face場景感十足

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          3. 好奇很溫馨的設計

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          4. 外星人,一直都想買的電腦

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          5. VANS,我喜歡他家的黑格子鞋

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          6. Levi’s,我服了

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          7. 麥當勞,煙霧的創意很契合產品

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          8. 惠氏鉑臻3,一團線織出來的創意

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          9. 拉面說,來碗面

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          10. 宜家家居,仔細看,是購物袋

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          11. 巴黎歐萊雅,萬能的C4D

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          12. 朗仕,細節很多

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          13. 華為,冷暖對比很有沖擊力

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          14. 樂高,積木的海洋

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          15. Marshall,燥起來

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          16. Jordan,喬丹

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          17. 肯德基,WOW好吃!

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          18. 林氏木業,俯視的構圖角度,空間感很強

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          19. 元氣森林,故事性很強

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          20. 強生,滿是愛

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          21. fresh,高端的護膚品牌

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          22. 萬代,為“酷”而生

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          23. 始祖鳥,化石來了

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          24. 三生花,旗袍肯定很漂亮

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          25. HOLLISTER,一起沖浪

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          26. 施華洛世奇,每個女孩都值得擁有

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          27. PINKO,亂的有創意

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          28. MINI,我有個進MINI車友群的夢

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          29. 孩之寶變形金剛,汽車人變形

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          30. Onisuka Tiger,日本的運動產品品牌

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          31. 優衣庫,線下實體店的貨架創意

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          32. 三頓半

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          33. OLAY

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          34. Dyson,很親切的表達方式

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          35. 迪士尼商店,可愛、好玩

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          36. NIKE

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          37. 法國嬌蘭,看起來很貴氣

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          38. 榮耀

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          39. LINE FRIENDS

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          40. M.A.C

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          41. 紅星美凱龍,空間感很強

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          42. NET-A-PORTER,泡泡龍的感覺

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          43. 稀奇,太喜感了

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          44. 百威,喲喲切克鬧

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          45. 芭比

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          46. 李子柒,依然還是熟悉的味道

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          47. 愛他美3,陽光帥氣

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          48. 花西子,雕刻工藝品

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          49. 伊利谷粒多,太美了

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          50. Apple,表情包集合

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          51. 滴露,傳統國風的感覺

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          52. Moleskine

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          53. 大疆,很喜歡無人機,有一起拼單的嗎?

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          54. 繪兒樂,這個創意現實中我玩過

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          55. 樂事,好吃

          今年的雙11品牌聯合貓頭海報,簡直就是一波天秀!

          每個品牌對于貓頭的創意表達都不一樣,很多都是生活中隨處能見到的,但在設計師的眼中,就是創意靈感來源。

          下面還有視頻版,大家一起看看:

          以下視頻來源于

          看完今年的貓頭海報,讓我更加期待接下來各品牌雙11活動的玩法和創意。接下來讓我拭目以待吧。


          文章來源:優設    作者:
          美工美邦


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


          作為產品經理,你需要了解的移動互聯網時代

          資深UI設計者

          編輯導語:移動互聯網,是PC互聯網發展的必然產物,將移動通信和互聯網二者結合起來,成為一體。目前,移動互聯網正逐漸滲透到人們生活、工作的各個領域,微信、支付寶、位置服務等豐富多彩的移動互聯網應用迅猛發展,正在深刻改變信息時代的社會生活。我們總能聽到、看到移動互聯網這個詞,但是你知道其發展歷程嗎?

          2007年1月9日,第一代iPhone誕生:3.5英寸全觸控屏幕、金屬機身以及iPhone OS推開了智能手機時代的大門。

          iPhone的發布給了雷軍極大的震撼,他買了很多iPhone,到處送人。

          同時,遠在珠海的黃章也注意到了這款與眾不同的手機。此時魅族MP3風頭正盛,取得了巨大的成功,但黃章卻選擇放棄了MP3的業務,將精力資源轉向了智能手機的研發。

          創立于2007年的Twitter,可以讓用戶更新不超過140個字內容,在美國一炮而紅,同時也讓中國創業者看到了機會。王興與穆榮均(現任美團聯合創始人、美團大學校長)在華清嘉園的一棟民居里,創建了類似Twitter的網站,取名叫“飯否”。

          2009年,飯否用戶已經增至100萬,包括微信之父張小龍也在飯否上匿名發表了2359條日記,讓大家看到了他的另一面。后來飯否被關,核心團隊卻沒有散,他們繼續做了美團網。

          當時只走了兩個人,其中一位就是張一鳴,也是王興福建龍巖老鄉,這個年輕人后來創建了今日頭條。

          2010年11月,飯否再次上線,但大勢已去,飯否項目就此終止。2008年7月份,我國網民數量達2.53億,首次大幅超過美國。但互聯網普及率只有19.1%,畢竟有電腦的人還是少數。

          接下來的移動互聯網的到來,讓每個人隨時隨地上網成為可能,一個新時代開始了。

          同年9月,谷歌正式發布了Android 1.0系統,這是Android系統最早的版本;同年10月份,世界上第一款使用Android操作系統的手機HTC G1誕生,可支持觸屏操作,并內置了310萬像素攝像頭,同時支持3G網絡。

          除手機之外,Android系統逐漸擴展到平板電腦、電視、手表等其他設備。

          同樣在這一年,還在上海交大讀研究生的張旭豪與同學一起創建“餓了么”,早期的餓了么采用的是原始電話接單形式,用戶打來電話,他們去跟餐館下單,然后取餐送到用戶手里并收錢,賺取中間的差價,這個模式贏得了許多大學生用戶的認可。

          2009年1月7日,中國移動、中國電信和中國聯通獲得3G牌照,標志著中國進入3G時代。相比2G,3G技術可以處理圖像、音樂、視頻等多種媒體形式,移動上網逐漸成為可能。

          同樣在2009年,程一笑還是人人網的 iPhone 客戶端的開發,兩年后他離職創業做了一款工具產品-GIF快手,這也是快手的前身,是一款用來制作、分享GIF圖片的手機應用,當時在微博逐漸流行開來。

          2009年7月,新浪管理層決定要做微博這個產品,由時任桌面產品事業部主管彭少彬帶隊,團隊每天幾乎都是干到凌晨才回家。

          2個月后,新浪推出“新浪微博”內測版,成為門戶網站中第一家提供微博服務門戶網站,之后又添加了添加了@ 、私信、評論、轉發功能。

          2010年,騰訊、網易、搜狐都推出了自己的微博產品,微博大戰打響,新浪微博結合自己媒體資源優勢,通過邀請明星和名人入駐策略,最終戰勝了其他產品,后來新浪微博成功去掉了前綴變為“微博”,成為“微博”賽道的唯一玩家。

          2010年4月6日,在中關村保福寺橋銀谷大廈,小米正式宣告成立,黎萬強的父親一大早起來熬了一鍋小米粥,每人喝了一碗小米粥便開始工作了。

          2010年9月22日中秋節,周鴻祎邀請了李開復以及創新工廠的幾位骨干在懷柔農家院吃飯,突然接到了報告:騰訊將“QQ醫生”升級為了“QQ電腦管家”,并且具備云查殺木馬、漏洞修補、安全防護、系統維護和軟件管理等功能,涵蓋了360安全衛士的主流功能。

          而且QQ醫生通過后臺靜默安裝的方式,神不知鬼不覺的進入用戶電腦,直接威脅360在安全領域的地位。周鴻祎當即給馬化騰打了一個電話,希望能停止強制安裝,但是最終溝通無效。

          隨后,在中秋節結束后的一周,360發布了迎戰QQ進攻的武器-360隱私保護器幫助用戶監控電腦中軟件在后臺的所有行為。

          針對360隱私保護器曝光QQ偷窺用戶隱私事件,騰訊正式宣布起訴360不正當競爭,要求360公開道歉賠償,停止侵權行為。

          之后針對騰訊刊登《反對360不正當競爭及加強行業自律的聯合聲明》,在2010年10月29日,360推出了“扣扣保鏢”,可以過濾廣告、清理垃圾、提升QQ的運行速度、防止QQ盜號、同時不顯示IP保護用戶隱私。

          發布72小時內,裝機量就突破了1000萬,馬化騰在這一天也度過了他難忘的40歲生日。終于,矛盾全面爆發,騰訊通過彈窗發布了“艱難的決定”-在裝有360軟件的電腦上停止運行QQ軟件,給上億用戶出了一道選擇題。

          后來政府部門介入之后,QQ和360恢復兼容,并對外做了道歉說明,一場生死大戰正式結束。

          通過3Q大戰,讓360一戰成名,而騰訊也開始反思過去的商業模式,變得更加開放,不是每個產品都親自去做,而是通過投資、并購等形式搭建自己的產業生態圈,走上了一個新的高度。

          2010年10月,一款名為kik的APP流行起來,可以直接跟通訊錄的人免費聊天,當然前提是另一個人也安裝了kik,上線15天便斬獲了100萬用戶。而這款新產品的出現,也吸引了雷軍跟張小龍的注意。

          一個月后米聊誕生了,雷軍也曾想到到騰訊會介入,在米聊發布之后,他曾經對內部員工說:

          “如果騰訊介入這個領域,那米聊成功的可能性就會被大大降低,介入得越早,我們成功的難度越大。據內部消息,騰訊給了我們3個月的時間”。

          但是,騰訊沒有留給雷軍3個月的時間。

          張小龍看到kik這款產品之后,立即給馬化騰寫郵件,建議由他的廣州團隊做一個類似kik的產品,馬化騰當即回復同意。

          當時騰訊內部有三個團隊同時在做,都叫微信,誰跑贏了就上誰的。最終張小龍帶領的Email團隊勝出,僅僅比米聊晚了一個月。

          2010年,來自香港的郭秉鑫團隊,針對開車不方便接電話場景和盲人開發了全球第一款語音IM應用Talkbox。

          2011年1月份上線,僅3天就在App Store下載達100萬,掀起了語音聊天的浪潮。前段時間熱播的互聯網創業題材劇《創業時代》正是取材于此。

          緊接著米聊、微信都迅速加入了語音對講功能,用戶量猛增。隨著大公司的入場,Talkbox的“活路”被斷了,用戶量從四五百萬跌落到僅有100萬,最后退出大陸,轉向海外市場。

          360公司在2011年也推出了一款IM產品-“口信”,可以基于手機通訊錄的熟人免費發短信、照片,也允許用戶發語音消息,主打穩定跟安全,最終也不了了之。

          得益于騰訊QQ巨大的流量導入以及背后的關系鏈、自身的社交基因以及綜合技術能力,微信迅速成長。在米聊還在糾結做熟人社區還是陌生人交友時,微信通過附近的人、搖一搖、漂流瓶等一系列交友功能,獲得了大量用戶。

          2011年底,微信用戶已超過5000萬,2012年3月,微信用戶數突破1億大關。米聊漸漸淡出了人們的視野,雷軍也將主要精力放到智能手機的研發上,并于2011年8月16日,正式發布小米手機。

          同樣在2010年,來自美國的團購網站Groupon大火,成立僅7個月便實現了盈利,并且融資了1.4億美金,谷歌向也Groupon發出收購邀約,報價一路路上漲至60億美元。

          Groupon的火爆也讓國內創業者看到了機會,一時間各類公司紛紛涌進團購領域。

          第三次創業的王興創辦了美團網、人人公司旗下團購網站“糯米網“宣布上線、淘寶也推出了聚劃算、拉手、24券、團寶網、滿座網、窩窩團等紛紛上線。

          截止到2011年5月,國內的團購網站達5000多家,“千團大戰”正式打響。

          這一年3月,與唐巖私交甚好的方三文從網易離職創辦了雪球。一年后,時任網易總編輯的唐巖也宣布離職,創立陌陌科技,他們想做一個基于地理位置的社交工具。

          團隊最開始有三個人,除了唐巖,還有一個產品經理與一個技術人員,后來又通過QQ群里貼小廣告招來一位開發工程師。

          2012年大年初七,時任九九房CEO的張一鳴跟投資人見面,他想在九九房之外再做點別的有意思的事情:能根據個人的興趣,推薦符合口味的內容。

          之后張一鳴辭去了CEO的職務,開始了自己的第五次創業,成立了字節跳動公司(bytedance),除了今日頭條之外,還推出了“內涵段子”、“內涵漫畫”等產品。

          2012年6月,在阿里巴巴任職八年、時任支付寶B2C事業部副總經理的程維離職,創立小桔科技,他們做的產品叫滴滴打車,9月9日,滴滴打車在北京上線。

          而早在一個月前,位于杭州的一家公司也上線了一款智能打車應用-快的打車。

          之后兩家公司在智能出行領域開啟了補貼大戰,滴滴背靠騰訊,快的背靠阿里,馬化騰曾在一次會上表示最多的時候一天投入4000萬元,但大家都不敢收手,否則就前功盡棄了。

          2015年02月14日,情人節,在各方力量的博弈下,快的打車與滴滴打車聯合發布聲明,宣布兩家實現戰略合并。

          2013年12月4日工信部正式向三大運營商發布4G牌照,中國移動、中國電信和中國聯通均獲得TD-LTE牌照,標志了中國移動互聯網正式邁入4G高速時代。

          2014年1月26日,來源于線下發紅包的靈感,微信推出了推出了“新年紅包”,一經推出就在各大微信群中傳播。

          據騰訊發布的數據顯示,從除夕開始,截至大年初一下午4點,參與搶微信紅包的用戶超過500萬,總計搶紅包7500萬次以上,領取到的紅包總計超過2000萬個,平均每分鐘領取的紅包達到9412個。

          因為紅包最終提現需要綁定銀行卡,微信綁卡的數量呈指數級增長,微信紅包一夜之間打進了支付寶后院,也奠定了微信支付的江湖地位。

          2014年11月,15歲考上中科大,28歲擔任聯想中國區最年輕的事業部總經理的徐正,與曾斌在創立每日優鮮,為用戶提供自營生鮮電商服務,推出之后發展迅速,領跑行業。

          同樣在該月,易車創始人李斌與劉強東、李想、騰訊、高瓴資本、順為資本等聯合發起創立蔚來汽車。一年后,李想卸任汽車之家總裁,創辦了車合家,并在2018年推出了理想ONE智能電動車。

          2015年7月的一個晚上,王思聰與黃立成第一次見面,并決定投資一款名叫17的手機直播產品。

          在接下來的幾個月里17相繼在臺灣、香港、新加坡、美國等蘋果App Store排行榜登上榜首,并在2015年9月沖到中國免費榜第一。同時王思聰在微博上發布了一條帶有17 ID界面的微博,雖然后來17因為涉黃被下架,但這并不能阻擋17的知名度迅速在國內傳播開來。

          市場的火爆,智能手機性能與網絡速度提升,也讓國內創業者嗅到了商機,不管是大公司還是小的創業團隊紛紛擠入到直播當中來,妄圖在中間分一杯羹。

          一時間市面上的直播產品多達百款,映客、花椒、NOW直播、虎牙、斗魚、熊貓等等,直播行業頓時硝煙四起。

          而直播戰場最后活下來的卻寥寥無幾,映客成功實現上市、花椒與六間房合并、熊貓直播在2019年倒閉,斗魚與虎牙也在2020年宣布合并。

          2016年4月22日,胡瑋煒創立摩拜單車,易車公司董事長,蔚來汽車創始人李斌是她的天使投資人。

          用戶只需在APP上實名注冊,并繳納299元保障金,即可租用。而在一年前,戴威與4名合伙人在北大投放了2000輛單車,他們做的也是共享單車平臺,名字叫ofo,主要面向校園市場。

          共享單車的出現也吸引了大批資本涌入,一時間各種五顏六色的單車出現在城市的街頭:小藍單車、優拜單車、小鳴單車、悟空單車、町町單車等等,讓人應接不暇。

          在共享經濟的帶動下,創投界也掀起了一股共享風,一時間共享充電寶、共享雨傘、共享籃球也都紛紛獲得融資。

          然而混戰過后,最終幸存的寥寥無幾:

          • 最摩拜單車被美團以35%美團股權+65%的現金收購,創始人胡瑋煒宣布辭職,后來美團將摩拜單車改名為美團單車;
          • ofo押金至今還沒全部退完,法院對戴威作出了“限制消費令”;
          • 滴滴則推出了自有共享單車品牌-青桔單車;
          • 哈羅單車避開了一線城市,面向二三線城市,實現了逆襲;
          • 其他眾多共享單車都隨著時間消失不見,很多人甚至都記不起他們曾經來過。

          2016年5月,Musical.ly開啟了新一輪的融資,計劃融資金額約為1億美元。

          Musical.ly可以讓用戶將自己的視頻配上自己喜歡的音樂,通過對口型以及肢體語言來制作15秒的MV,這款由中國團隊開發的產品,在歐美青少年之間迅速流行開來。

          同年7月,登上了蘋果應用商店美國地區的榜首。

          2015年6月,已經轉型為短視頻社區的快手用戶數破1億,而在3個月之后,抖音才開始入場,很快成為今日頭條的戰略級產品,逐漸縮小與快手之間的差距,之后今日頭條又推出了西瓜視頻、火山小視頻等產品,滿足不同人群觀看需要。

          抖音快手等產品的出現,也讓個體有了更多表達自己的方式,自媒體不再是專業人士的專屬,許多人將自己普通的日常生活拍成短視頻,也收獲了大量粉絲。

          2017年11月10日,今日頭條宣布10億美元收購Musical.ly,并與抖音合并。

          一年后,Musical.ly 全面整合至 TikTok(抖音海外版),Musical.ly現有用戶更新應用后,會自動升級至新TikTok,這也宣告Musical.ly的品牌使命正式終結。

          2018年7月26日,社交電商平臺拼多多,正式登陸納斯達克,股票代碼“PDD”,市值一度超過京東、百度。

          在國內電商基本被淘寶、京東兩大巨頭壟斷情況下,拼多多瞄準下沉市場,依托社交拼團的形式,迅速占領市場,從2015年4月上線到上市僅僅用了3年時間。

          拼多多上市也讓創始人黃崢身價大漲,憑借776億元財富躋身于2018年中國福布斯排行榜第12位,僅次于丁磊跟雷軍。

          畢業于浙江大學的黃崢,2004年獲得美國威斯康星大學麥迪遜分校計算機碩士學位,在段永平(現任步步高集團董事長)的建議下,選擇了加入谷歌做碼農、產品經理,并且拿到了原始股,隨著谷歌的上市,黃崢也賺到了人生中的第一桶金。

          之后黃崢與李開復一起,回到中國參與并創建了谷歌中國,在谷歌呆了3年,黃崢就加入了創業隊伍中,先后創辦手機電商、電商代運營和游戲公司,最后孵化出了拼多多。

          兩個月后,另外一家公司也正式掛牌納斯達克交易所,它就是趣頭條。

          趣頭條重點面向三線及以下城市,基于金幣體系,通過看資訊賺金幣、邀請好友得獎勵等一系列形式,收獲了大量下沉市場的用戶,從成立到上市,僅僅用了兩年多的時間。

          移動互聯網時代,一個個移動應用如雨后春筍般出現,開始了用戶時長爭奪戰,音頻社交、社區團購、社交電商、視頻娛樂等領域誕生了一大批優秀的應用。

          隨著網民數量增速放緩,人口紅利優勢逐漸消失,獲客成本也水漲船高,企業除了提升精細化運營能力之外,也都在尋找新的增長點。

          有的公司趕上了新一波的浪潮,尋找到了新的增長點,煥發新的生機與活力,有的公司則錯失了移動互聯網時代,仍舊靠著之前的業務維持運轉,有的公司則經營不善,黯然離場。

          公司與公司之間也紛紛開始了收購與整合:

          • 阿里巴巴先后投資并購了高德、優酷土豆、UC瀏覽器、微博、大麥網、餓了么等等;
          • 騰訊也投資并入股同程網、大眾點評、京東、58同城、海瀾之家、盛大游戲、搜狗等等;
          • 陌陌以將近50億元的價格全資收購了探探;
          • 美團以35%股權、65%的現金收購摩拜單車;
          • 趕集網與58同城、大眾點評與美團、快的與滴滴、藝龍與攜程、百度外賣與餓了么,去哪兒與攜程也都選擇了合并,去哪兒與攜程合并之后,原去哪兒CEO莊辰超再次創業,創辦便利蜂。

          2019年6月6日,工信部向中國電信、中國移動、中國聯通、中國廣電發放了5G商用牌照。5G的誕生將加速物聯網、車聯網、AR/VR、智慧城市、智慧醫療、工業4.0等領域發展。

          科技不斷發展,時代不斷進步,我們國家也提出了“新基建”的發展理念,重點發展5G基站建設、大數據中心、人工智能、工業互聯網、特高壓、城際高速鐵路和城市軌道交通、新能源汽車充電樁、七大領域。

          而且隨著人工智能技術的發展,21世紀將進入智能時代。

          對于我們個人來講,我們能做的就是順勢而為,找好自己的方向,做好自己的選擇,在新一波浪潮來臨之時,能抓住屬于自己的機遇,實現你人生的迭代升級。

          文章來源:人人都是產品經理    作者:HQ


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

          如何使用色彩可視化出行耗時

          資深UI設計者

          比對出行時長

          每天,世界上有40億人在城市中穿行,這個不斷增長變化的群體占據了世界人口的一半還多。了解人們如何出行以及出行的演變對于改善我們的城市、環境和數十億人的生活至關重要。我們創建了 Uber Movement,來幫助大家增進理解。

          視頻地址:https://youtu.be/bszvEIMVsIc (需翻墻)

          目前,Uber已在全球700多個城市提供服務,所有出行數據不僅能幫助我們提高服務質量,也有可能幫助到城市規劃師,以及那些渴望提高城市建設水平的人。Uber Movement允許用戶以多種方式查看數據:用戶可以查看某個日期某次出行的平均耗時,也可以查看某個區域不同日期范圍內的平均耗時,或者可以對比同一個區域不同的兩個行程的耗時。

          圖1:從華盛頓市中心出發到各地所需的出行時長

          圖1中的截圖展現了從華盛頓市中心到達城市其他區域的平均耗時(在2016年3月16日鐵路運輸因維修而暫停服務)。截圖a中顯示了晚高峰的耗時情況,截圖b顯示了兩周前鐵路運輸未中止的耗時情況,截圖c則比對了兩個時段下的數據,指示出鐵路服務暫停對路面交通帶來的嚴重影響。如圖示,在上述情況下,晚高峰時段從1400 K St NE區到1500 Kearny St NE區的平均出行時間增加了67.8%。

          對于需考慮在哪里新增公交線路的公共交通機構,以及那些判別什么時候主干道需要進行道路養護的城市機構,都能夠通過這些數據了解到什么時候減少車道會對交通的影響最小,應向駕駛者提供哪些替代路線。

           

          眼見為實

          為了讓這些數據有價值,必須讓它們有使用價值。這就需要數據可視化的加持了。作為負責 Uber Movement 的產品設計師,我需要確保我們分享的數據是盡可能清晰易懂的。

          我們遇到了一個有趣的問題:如何展示兩個不同卻又有關聯的可視化元素。「時長熱力圖」展現了在一個特定的日期(例如,2016年1月11日星期一下午)下,從任一起始點到某個位置的耗時(以分鐘為單位);也可以是一個跨度長達幾個月(例如,2016年3月至5月的工作日早晨)的平均耗時。這個熱力圖使用了相鄰色,基于相同的顏色來調整色調由亮至暗(如下圖1所示,淺藍色至深藍色)。

          「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度,哪一個時段下的耗時更少,少多少?對于該熱力圖,我們使用了對比色(如圖2)來表現數據由0至兩極(快與慢)。如果差值為零,則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。

          我們的用戶會在這兩種熱力圖中連續反復切換,所以我們需要將這兩種模式從視覺上明確區分出來。

          圖2:早期設計的5階色(左側單位為絕對耗時,右側單位為相對耗時比)

          在早期的設計中(如圖2),5階相鄰色(由淡綠色至藍色)被用來表現路程的絕對耗時,而5階對比色(由綠至淡黃再到紅色)則用來表現兩種條件的對比。

          初期嘗試使用五個顏色梯度,但在可用性測試中發現地圖的色彩辨識度低(見下圖3)。主要有以下幾個問題:

          • 我們通過顏色表現由A點至B點的路程耗時,每一個目的地區域根據時間被賦予5階范圍中的一個顏色,并有20%的透明度,疊加在地圖上。這樣的設計呈現出由中心至外圍的漸變效果,區塊之間對比度較低,使它們看起來糊在一塊,讓色彩背后的數據以及地圖上的標簽都不那么易讀。
          • 結果就是,5階色彩沒有足夠的對比度將中心至邊緣的區塊區分開來。
          • 另外,5階色彩不足以滿足不同城市,不同時間段耗時的有效展示。

          顯而易見,可用性測試的參與者難以從地圖判斷出耗時,特別是當地圖縮放聚焦在市中心時,也難以區分兩種模式(耗時熱力圖/對比熱力圖),見圖3。

          圖3:西雅圖的出現時長

          圖3,以早期的設計效果(5階相鄰色)查看從西雅圖市中心至其他區域的平均耗時,截圖a 展現了西雅圖所有區域的耗費時長,顏色讓區塊看起來“糊在一塊兒”。截圖b則展現了縮放聚焦至市中心區域時的效果,難以區分不同區域。

           

          設計探索

          通過多步的探索實驗,我將這個復雜的設計難題拆解為幾個不同的小挑戰,并驗證不同的方案,最終獲得一個色彩系統達到易讀性最理想的熱圖效果。

          1.通過相鄰色和對比色兩個樣本有效區分耗時熱力圖和對比熱力圖

          由于同時應用相鄰色與對比色,所用的配色就必須是“四色系”配色方案以明確區分。(譯注:tetradic color 的翻譯可能不合適,根據定義,其為一種大膽的配色方案,四種顏色對立均等地分布在色輪的四個方向上。)我使用了 Uber Movement 的品牌色(#2473BD)作為相鄰色的基準色,然后使用 Paletton.com 列舉了幾組“四色系”配色方案,將四種顏色分配為兩對互補組合。

          圖4:為實驗準備的色階方案

           

          2.根據時長間隔等比或是梯度增加色組的色彩階層數

          早期設計從5階色彩范圍開始(如圖2、3),兩種模式的熱圖都產生了一種“糊在一塊兒”的漸變效果。我們希望這個系統可以滿足不同體量的城市,從市中心到外圍區域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現0至1.5小時,顯然不足以讓用戶有效辯識地圖上的時間跨度。

          我實驗性地將色彩范圍的階層從5增加到9,11,13。時間間隔分別以等比增加與梯度增加羅列(梯度增加以30分鐘為總時長)。

          表1:5、9、11、13色階方案(左側為等距增加,右側為非等距增加)

          之所以選擇了梯度增加,是因為根據我們與城市規劃者的溝通,了解到他們是基于「交通分析區(TAZ)」這種交通規劃模型來進行分析的,它將每個區域以人口密度劃分。城市區域的人口密度相比郊區會高很多。基于市區人口密度高,在市區對交通狀況進行定義時,以每5分鐘為間隔相比在郊區更有效。

          顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續性(見圖5)。圖中左側(方案1)使用了單色系,右側(方案2)則通過不同色調的顏色組合增加色組內的對比度。

          圖5:用于實驗的2個色階(左側為淡色系,右側為多色系)

           

          3.嘗試通過提升對比度去除掉區間的漸變效果

          我將不同的顏色方案放到測試環境中去看看實際效果。為了去除漸變效果,在不受時間值和透明度影響的情況下,使用了彩色比例尺上的離散色值(見圖6右側的效果)。這樣處在相同色彩尺度區間的區域看起來合并了,能夠很好地辨別出區域之間耗時的異同。

          圖6:采用離散色值消除漸變色。(從左側變為右側)

          早期的配色方案是基于「耗時」調整的色值,并且使用了20%的透明度,由此顯示出一種「漸變效果」,導致鄰近區域過于相近,用戶難以根據顏色判斷數值差異。新的配色方案則取消了以上兩點,這使得相同時間的區域合并,清晰的色帶使其更易讀。

          我還開發了個程序用來計算鄰近色組的對比度(見下方表2),方案2配色中的9階色彩范圍表現出最佳的平均對比度,其次是11階。考慮到平均路程耗費時長在不同城市會有較大的差異,方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比,新方案的對比度提高了30%。

          從上面的圖表可以看到,方案2配色有更高的對比度。其中,顏色階次越少,對比度也越高。

           

          4.在測試環境中對比顏色方案

          基于以上的結果,我將方案1(單色系)排除了。我們將方案2放到測試環境中查看了兩種間隔取色策略的效果。(譯注:這里的兩種策略指的是上面圖表1呈現的兩種取色方案。一種是例如每10分鐘遞進一個色階,等分;另一種則是會變化,例如前30分鐘每5分鐘遞進一個色階,超過30分鐘則每10分鐘遞進一個色階。

          表2:鄰近色組的對比度計算

          下圖7展示了波士頓城整體區域的熱圖效果,讓我們再看看聚焦到市中心的效果如何。

          圖7:波士頓城整體區域的熱圖效果

          圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。

          圖8:「變化時間間隔取色」后的效果

           

          5.對配色色階進行微調

          在這一系列的實驗之后,才明確了這個方案(方案2中的11階色彩)屬最佳效果。能夠很好地滿足視圖中大跨度時間差的呈現。不論是城市的整體縱覽或是聚焦在市中心區域,都能提供最佳的對比度。

          我們的內部團隊對實驗進行了評審和測試,并最終敲定了色彩范圍(見圖表1),結果將在近期發布。

          隨著越來越多的用戶在 Uber Movement 中探索他們的城市,我們也在不斷的學習與迭代,讓數據更有效地為大家所用。

           

          因效用而美

          數據可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時,創作物的美學不是附屬品,而是一種內在價值。美感不只是粉飾。當數據可視化被合理地創造時,它因效用而美。

          我們以一種微小的方式,通過不斷試錯與探索,試圖讓人們以一種全新的視角看看這個世界。它是有效的,也即是美的。



          文章來源:UXRen    作者:Dawei Huang


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

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          資深UI設計者

          新版本的改動介紹

          在9月底雙十一臨近的關口上,淘寶上線了 9.13 新版本,對首頁做出了巨大的改版,堪稱這 5 年來力度最大的改版幅度。

          我們先來簡單看看新版本有哪些重要的改進:

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          • 去掉了分類分頁器
          • 頂部輪播圖下移,改成豎狀的
          • 減少瓷片區的數量,進行卡片化分離
          • 刪除推薦商品瀑布流的分頁器
          • 推薦商品卡片的類型調整
          • 商品卡片不再直接跳轉詳情頁

          如果只是通過視覺角度上來看,新改版必然是比過去的老版本 “清爽” 得多,畢竟精簡掉了大量的內容。尤其是兩個分頁器組件,除了占空間外,實在找不出什么要去點擊的必要。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          輪播圖從頂部撤離和瓷片區進行合并,是一個比較有趣的設定,不僅廣告圖的面積減少,而且營銷推薦位全部集中到一起,使得模塊的劃分更集中。

          現在的首頁從上到下的結構即:

          • 搜索欄
          • 業務入口
          • 營銷模塊
          • 推薦瀑布流

          如此化繁為簡的改造發生在淘寶APP身上,就像看一出浪子回頭的感人戲碼…

          但不要這么容易被結構上的改造欺騙,改版后的淘寶降低了模塊的數量,但只是把減少的元素在其它地方呈現。即這次改版的重點——推薦瀑布流。

          細心的同學應該都發現了,瀑布流卡片已經出現在了第一屏的底部,即使不用上滾也可以看見卡片的頭部了。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          并且瓷片區也采用了瀑布流式的雙列布局,通過瓷片區白色背景的襯托,這半截露出的圖片反而顯得越發顯眼,越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。

          當我們開始瀏覽瀑布流的推薦內容以后,淘寶夾帶的大量私貨就進來了,我們來統計下總共有哪些類型:

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          實際的卡片類型,可能還不止我羅列出來的這些。這個本來是用來推薦商品的列表,已經演化成一個聚合了算法推薦內容的 “巴別塔”。

          而其中最重要的商品卡片,甚至也不能直接點擊就跳轉到商品詳情頁中,而是添加了一個中轉頁面,進一步根據算法推薦相關商品,能直接跳轉進詳情頁的少數商品卡片,應該是有做廣告投放的定向導流。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          這樣改版后的目的,不難分析出目的是為了進一步增加用戶 “逛淘寶” 的幾率和時間,讓本來打開應用就搜索—購買—關閉一條龍的用戶,也會不自覺陷入信息流的海洋中去。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          可能很多人會覺得,難道不應該讓流程更短,購買步驟更容易,才符合優秀交互設計的定義嘛?

          下面我們就做一些具體的分析吧!

          關于新設計的思考

          對于一個商業應用來講,交互不是為了無條件迎合用戶的,雖然無論是 UX 還是 UED 的概念里,都愛強調用戶至上論,體驗為王之類的。但是…

          1. 商業訴求 > 用戶體驗

          只有在用戶量高速擴張,商業目標是需要用戶獲得良好體驗、口碑的情況下,用戶體驗的重要性才和大家在童話里了解的一致。更多的時候,是產品想喂用戶吃金坷垃時,我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。

          淘寶通過不同的方式獲取了大量用戶的數據,資料、喜好、購物傾向等等,在龐大的商品數支撐下,可以通過算法給你推薦無窮無盡的商品,總有你會感興趣的部分。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          只要增加了信息流的曝光次數,不要讓用戶那么快完事,過早的陷入剁手的悔恨,抽起事后煙……

          那么他們就會被這種簡單的產品形式俘獲,做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個購物應用不想著最快的方式促成交易,而是讓用戶在里面繞圈子,原因也只能有一個 —— 流量。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          大家都知道雙十一將近,各家電商平臺作妖時間又到了。但這兩年的電商行業已經發生了巨大的改變,那就是直播、短視頻帶貨形式帶來的變局。

          這兩年,以抖音、快手為代表,興起的短視頻、直播帶貨風潮,已經成社會的熱門話題,薇婭沒事就在綜藝里和愛豆們一起帶貨,李佳琦身體有恙上微博熱搜,羅永浩靠帶貨上演 “真還傳”……

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          本來,購物方式的多元化,對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現的社會化電商平臺、返利網、或值得買,都可以促進電商行業的繁榮,促進平臺和整個產業鏈的發展。

          但是,直播、短視頻的興起和過去的這些行業全部不一樣,它們本身并不依附于電商平臺,但卻擁有海量的流量和用戶基數。而當這樣的流量引擎在變現問題聚焦在電商時,直播和短視頻頭部平臺就有了和電商平臺們叫板的資格。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          2. 直播電商規模,不算短視頻

          主流的數據預測報告中,20年的直播電商規模都會達到萬億級別,直播電商的高速發展是沒法阻擋的大趨勢,它的發展會搶奪存量用戶的注意力,有大量的用戶購物逛商品,不在淘寶APP內,而是通過其它平臺轉化,再進來下單,或干脆在外部下單,這是絕對不能被容忍的。

          所以淘寶不僅要緊跟趨勢,也要對抗外部的競爭,在今年加大對短視頻、直播的投入,也就順理成章。根據淘寶研究院的數據,過去三年直播帶貨的規模增長在 150% 以上,是全球增長最快的電商模式。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          同時,雙十一的直播觀看用戶 18 年為 1793 萬人次,19 年為 4133 萬人次,同比增長 131%,對比 618 數據,毫無疑問今年肯定也會保持的增長。

          淘寶App五年來最大力度改版,從設計師角度為你詳細分析!

          并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動成效已經越來越差,再讓用戶去集福,首頁上增加一大堆煙花繚亂的游戲和活動,已經不能再幫助雙十一獲得快速的增長了。

          所以今年,淘寶在國慶前,上架了首頁新版本的設計,在應用形態上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習慣,也在為后續的雙十一做預熱,相信屆時會有大量的直播內容露出和短視頻推薦。

          至于還有什么新花樣或殺手锏還沒秀出來,我們就拭目以待吧……


          文章來源:優設    作者:超人的電話亭


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


          合理打造“稀缺性”,提升你的設計轉化率

          資深UI設計者


          摘要:本文原標題為《用戶體驗中的稀缺性:心理偏見成為常態》,文章對當前設計稀缺性的情況進行了簡要分析,并給出了一些需要牢記的小貼士,閱讀預計需要7分鐘。

           

          你知道稀缺性是咋回事嗎?

          我隨意觀看了Unbox Therapy對這個杯子的某個測評視頻,很顯然這個杯子是不會倒的。我一直在笑,但在視頻的最后,我也很好奇人們對杯子的需求是什么。

          在亞馬遜上,它以14.99 美元的價格限時出售,原價為24.99美元。不銹鋼版本僅剩下3個庫存。我喜歡不銹鋼的杯子,而且這是一個減價品,而且它很快就會售空。如果不買,我就要用之前會倒的杯子喝咖啡了。錯過它的話太可惜了。

          是的,多數時候這個杯子不會倒

           

          稀缺性讓事物變得有吸引力

          稀缺性是一種心理偏見,它讓我們覺得稀缺的東西比富足的東西擁有更高的價值。一般來說,我們更偏愛那些更難得到的東西。

           

          稀缺性已成為常態

          和大多數現象一樣,稀缺性從線下興起。昂貴的餐廳用大盤子裝小份食物,以突出食材的稀缺性;名牌大學限制招生名額,以保持排他性。

          這看起來很貴

          但隨著科技企業變得更加成熟,數字產品變得更加精細,稀缺性很快走向了線上,現在稀缺性已成為增加吸引力最流行的方法之一。

          目前人們已經習慣了在線上瀏覽時看到并期待某種形式的稀缺性,運用稀缺性已經不再具有競爭優勢,而是為滿足用戶需求而做的最基本的起點。

           

          稀缺性融合了多種偏見

          稀缺性變得流行起來,因為它非常有效并相對容易實現。而它如此富有成效的原因在于它結合了多種偏見:

          1. 損失厭惡(Loss Aversion)

          如果我們不去購買某個稀缺性產品,這基本上意味著短期內我們將失去這個產品本身,而從長期來看,我們也將失去可以選擇它的自由。加倍的損失=加倍的痛苦。

          2. 社會認同(social proof)

          通常,當一款產品需求變高時,這款產品會變得稀缺。一旦出現這種情況,就意味著有其他人在過去購買了這款產品,所以它一定是有價值的,我們也該抓住這個機會。

          3. 預期后悔(Anticipated regret)

          當面臨一個決定時,我們不僅會預期會發生的事件,還會預期我們可能會經歷的與之相關的后悔。決定現在就采取行動是我們試圖消除這種可能性的努力。

           

           

          稀缺性會以不同形式出現

          盡管稀缺性可以被應用于品質、體驗等不可量化的特征,但當評估對象是可量化的物品、地點等時,稀缺性的應用效果會更加出色。這就是像亞馬遜和Booking.com這樣的公司接受它并廣泛使用它的原因。

          基于這些可量化的對象,稀缺性有三種主要的形式:

          1. 限時稀缺(Time-limited scarcity)

          當對時間進行限制時,就會產生一個截止時間,讓人們在截止時間之前采取行動。當看到截止時間時,人們不確定之后是否還能獲得這個產品,除非他們現在就采取行動,但這樣就增加了壓力,從用戶體驗的角度來看,反而缺乏了同理心。

          舉例如下:

          • 亞馬遜的限時秒殺活動:好
            限時秒殺活動僅持續幾個小時,頁面上會顯示截止時間。頁面還會顯示已購者占總限購人數的百分比來凸顯緊迫感。
          • 在Interaction Design Foundation上的課程:機智
            在報名截止前顯示倒計時。已報滿的課程仍然會顯示出來,讓人們知道錯過機會是什么感覺。
          • 在eBay上購買東西:糟糕
            eBay對限時產品會用一個紅色的圖標和一個模糊的“即將售罄” (Almost gone)的標簽。不顯示下架時間的做法考慮不周,而且是可以被商家操縱的。
          • 在Airbnb上找房源:一般
            Airbnb通過顯示剩余房源比例來表現供給的有限性,并通過一個“難得發現(Rare Find)”的標簽來讓用戶對他們的搜索結果感到幸運。

          2. 限量稀缺(Quantity-limited scarcity)

          有限或稀少的產品供給會讓人們覺得這威脅到了他們選擇的自由,進而激發他們做出反應,來對抗這種威脅并維持他們對資源的獲得權。

          限量稀缺被認為比限時稀缺更有效,因為供給的結束是不可預測的,完全取決于需求而不是時間。

          舉例:

          • 在Booking.com上搜索酒店:印象深刻
            Booking.com在運用稀缺性上跑得飛快,可謂是行業里對博爾特,他們的成功在很大程度上都要歸功于限量稀缺。網頁不僅顯示剩余房間的數量,還會顯示一大堆的標簽和文本,讓你感覺自己下單78物超所值。Booking.com很聰明的運用了自己擁有的大量數據,網頁提供的信息量雖然很大,但都很有用。
          • 在Ryan Air上預定機票:好
            Ryan Air利用低價機票優先出售這一事實,以強調低價機票僅剩的數量。
          • 在Selfridges上購買衣服:巧妙
            Selfridges 網站上的產品詳細信息同時顯示了可購買和不可購買的尺碼。這讓可購買的尺碼看起來更稀缺。這樣顯示是微妙且有用的,因為有些人的尺寸介于兩個尺碼之間。

          3. 訪問受限稀缺(Access-limited scarcity)

          它指的是限制對信息、群組或空間等功能的訪問。研究表明,潛意識中的抑制力會讓人們更重視那些受限制的功能,而不是那些不受限制的功能,因為排他性讓他們覺得自己很特別。

          舉例:

          • 成為Medium的訂閱者
            如果你想要閱讀Medium上的所有文章,就需要向平臺付費,成為他們的特權用戶。
          • 加入Tinder Select
            Tinder(交友App)的“Elo”排名系統基于吸引力對會員進行排名,并邀請排名靠前的會員加入名為“Tinder Select”的封閉版本。盡管這把其他用戶排除在外,有點見利忘義 ,但Tinder還是達到了其目的:通過獎勵讓受歡迎的用戶感到與眾不同。

           

           

          稀缺性有爭議,但本不應該有

          如果稀缺性適合我們所設計的產品,那它可以優化用戶流量并對業務目標產生影響。稀缺性還會重構信息,并在有緊急需求時提醒用戶。

          有些人可能會說,這迫使用戶做出了決定,但只要數字是真實的,還有什么其他的選擇嗎? 我們如果沒有及時告知用戶產品稀缺的情況,難道就不會造成他們對遺憾或挫敗感嗎?這樣我們難道不是正在創造糟糕的用戶體驗嗎?只要我們向人們展示的是事實,催促人們做決定看起來反而是公平的。

          話雖如此,我同意一些企業會不道德地通過虛假庫存和會員資格來利用稀缺性,但是他們同樣也可以通過任何其他方式來達到其可疑的目的,而且從長期來看,這樣做總是會導致信譽喪失。

           

           

          稀缺性的應用應該遵循一些規則

          為避免爭議,下面是一些可以最大化利用稀缺性并真正提升用戶體驗的建議。

          可以做的事情:

          1. 利用稀缺性來提高感知價值并加速轉化
          2. 利用時間稀缺來促銷時效性強的產品
          3. 利用數量稀缺來讓人們意識到庫存短缺
          4. 利用訪問稀缺來強調受限功能的優勢
          5. 利用A/B測試來測試哪些稀缺性信息最適合你的受眾
          6. 利用可用性測試來測試信息對可信度和信任度的影響
          7. 利用動畫元素來強調緊迫性(例如,顯示一個發光的紅色圖標來突出實時狀態)

          不可以做的事情:

          1. 在未做用戶測試之前。不要使用稀缺性
          2. 如果庫存的數量不可靠的話,不要使用稀缺性
          3. 如果信息不能保證不會出錯的話,不要使用稀缺性
          4. 不要編造虛假數字來人為的制造稀缺產品

           

          結論

          稀缺性會讓我們對稀缺的東西賦予更高的價值,隨著時間的推移,這已經成為增加吸引力的必由之路。稀缺性的方法很有效,因為它結合了多種偏見(損失厭惡、社會認同和預期后悔),并擁有不同的形式(時間、數量和訪問受限)。

          稀缺性是有爭議,但這些爭議本不應該出現,因為我們并不能對用戶隱藏信息。如果你遵循一些簡單的規則,稀缺性可以幫你提高用戶體驗。

          文章來源:UXRen    作者:David Teodorescu



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

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          資深UI設計者

          編輯導語:雙十一剁手節快到了,各個商家已經開始在各大平臺開啟雙十一預熱活動;如今的賣貨模式也有所變化,不是僅靠打打廣告,推送信息,如今直播帶貨已經成為了各大商家青睞的賣貨模式;本文作者分析了關于直播帶貨主播的選品有何底層邏輯,我們一起來看一下。

          距離雙十一這場年度大戰已經不到一個月,各個相關環節都已經進入“戰備”狀態;當然,逃不過直播二字。

          如今再說直播帶貨,想必大家都不會感到陌生;經歷過2019年李佳琦、薇婭出圈帶來的高速發展,今年年初黑天鵝事件的催熟式暴增;明星直播帶貨首秀、企業總裁直播自救等等相關話題都成了熱搜??停哉急娙搜矍?。

          直播帶貨從2016年起步以來,短短三年多時間就成為了一項“全民運動”,它的發展其實帶著必然性。

          一方面,處于移動互聯網時代,智能手機、4G網絡的普及以及如今5G的發展,都極大提升了用戶網絡瀏覽的便利性。

          另一方面,用戶手機網絡購物習慣已經養成。

          據統計,2019年通過手機進行購物的網民超7.07億,占手機網民的78.9%;而相較于圖文、短視頻等介質,直播帶貨能夠更加全面、立體地展示商品,通過主播講解推薦,實現足不出戶的陪伴式購物體驗,用戶可以邊看邊買,實時互動性強。

          突破了時間和空間上的局限性,直播成為更具帶貨優勢的載體。

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          從風口成為行業大趨勢,直播電商競爭必然日益激烈;以淘寶直播為例,2019年,平臺誕生了177個帶貨過億的主播;這背后是千億級的貨品量、貨品品質、貨品服務保障的訴求。

          今天,我們想來聊聊,直播電商“人、貨、場”三要素中“貨”遵循怎樣的底層邏輯呢?

          一、直播選品四大維度:品牌+產品+價格+用戶

          直播帶貨中,并不是所有的產品都能進入直播間。

          許多商家透露,部分頂流主播的選品率,一般不超過5%;主播往往會形成自己比較固定的選品配比,交個朋友CEO黃賀就曾在采訪中總結出老羅帶貨直播間的一個選品規律:食品一場直播占到30%左右,日化、日用百貨占到30%左右,數碼家電占到20%,新奇特產品占到20%。

          究其底層邏輯,主播在選品時,通常會考慮四個維度:品牌、產品、價格、用戶;并根據直播節奏,安排產品上播順序,最終確定引流品、暢銷品、利潤品、特色品等品類進入直播間。

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          首先,在品牌層面挑選時,主播通常會考慮品牌知名度、品牌產地、品牌供應鏈這三方面。

          高知名度品牌可提升直播間聲量并起到引流的效果;如水果等帶有地域特色的產品往往會因為產地而影響質量;完善的品牌供應鏈則是確保產品從售前到售后流暢運作的基礎保障。

          從產品層面看,在標品、非標品兩個大范圍下,主播往往希望自己的直播間內有著更為豐富多樣的產品組合;比如同一場直播里,同時包含著新品、熱銷品、庫存品;新品可作為特色品存在,熱銷品作為利潤品,庫存品則是充當低價引流的鉤子產品。

          直播帶貨剛起步的時候,標品更受主播青睞,明碼標價一定程度上降低了直播的難度,用戶購買更依賴產品本身。

          隨著產業的逐漸成熟,主播專業度的提高,高單價、低復購的非標品類在直播帶貨中逐步增多;比如昂貴的珠寶翡翠,在直播產業中已經成為一個不容小覷的億級市場。

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          從左至右依次是抖音直播、快手直播、淘寶直播

          從價格層面看,低價是公認的最佳引流方式;主播往往希望利用價格差或者更大的優惠力度來吸引用戶,除此以外還可能采用贈品、大禮包等形式。

          從用戶層面看,主播在推薦產品時,也有剛需產品、非剛需產品的差別;會根據自己粉絲的用戶畫像、使用場景、消費能力、興趣愛好等進行選品。

          以薇婭一場日常直播為例,該場直播共38件產品,各個價格區間商品占比相差不多;其中包括19.9的網紅低脂紅薯番薯仔地瓜干作為鉤子產品,也包括價格超過3000元的劉雯同款鄂爾多斯羊絨衫提高直播間品牌價值;而價格區間在100-300元,300-500元,500-1000元的產品數量比例一致,商品價格結構均衡。

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          數據來源:知瓜數據

          另外,薇婭直播帶貨起于服裝,逐漸擴展到各個品類,到如今形成穩定的選品策略;但是基于對粉絲屬性的考慮,在如今的商品分布中,女裝/女士精品類產品占比仍然是最高的。

          二、主播、品牌成熟度對直播賣貨品效影響大不同

          不同影響力的主播,不同成熟度的品牌,直播帶貨在品效兩方面的差異非常大,主要可以分為四個區間:

          • 品效爆棚=高知名度/社交熱度+頭部主播,比如李佳琦+完美日記;
          • 有品增效=知名度/社交熱度較低+頭部主播,比如薇婭推薦的網紅爆品;
          • 有品無效=知名度/社交熱度較低+員工/導購/尾部主播,比如商場導購直播;
          • 品效兼優=高知名度/社交熱度+中腰部主播,比如李子柒螺螄粉+美刻美食(淘寶直播,粉絲數:6.48萬),GMV超30萬。

          備戰雙十一,直播帶貨主播選品有何底層邏輯?

          三、直播電商“貨”的未來發展趨勢

          直播電商正處于高速發展階段,主播或是用戶對于“貨”的選擇也越發挑剔。

          前幾天,淘寶直播官方就舉辦了一場“雙11主播選品會”,以滿足主播們對商品品質、性價比等方面提出的更高要求。

          未來,直播電商中的“貨”將呈現以下趨勢:

          1)萬物皆可直播,非標品滲透率逐漸提高

          隨著直播電商的發展,沖破了我們對產品的刻板觀念,如汽車、房產等以往只能在線下進行的品類也擁有了更多可能;薇婭已經賣過火箭,下次又會是什么,我們可以大膽發揮想象。

          2)貨品規范化,主播形成自己的選品策略

          隨著行業的不斷成熟,各地政府推出相關扶持及規劃化文件,包括“貨”在內的各個方面都將得到規范化發展;如今,集中擁有資源的頭部主播都已經形成獨有的選品方法論,這對中小主播來說,也將是一種示范作用。

          3)品效協同,產品進入直播間更加理性

          主播和產品是一個雙向選擇的過程,品牌經過前期試水,對直播帶貨帶來的品效影響有了更直觀感受,對于直播間的選擇將會更加理性;一定程度上,也起著對行業的正向促進作用。


          文章來源:人人都是產品經理    作者:面朝研究院


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


          圖標設計指南

          資深UI設計者

          圖標是UI設計中除了文字之外最不可或缺的視覺元素,在設計中看似只占一個很小的區域,但是它卻是考驗設計師基本功的重要標準,了解圖標相關的概念,以及正確繪制的方法,是入門 UI設計的必備條件。

          兩萬字超強干貨!設計師必看的圖標設計指南

          本文將對圖標進行系統的介紹,篇幅所限,本文只針對圖標設計中最重要的設計概念和設計思路為主。大家如果對圖標的其他方面感興趣,歡迎給留言,后續出相關系列內容。過程中也有針對幾種典型的圖標進行實操代練。想要把圖標設計的更好,這就需要我們在平時勤加練習外,還要進行深度的思考,希望我的這篇梳理可以給大家帶來幫助。

          圖標概述及發展歷程

          1. 圖標的定義

          圖標,也稱為icon或Picoto,是計算機世界對現實世界的隱喻和概括,代表軟件產品中的功能及操作。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標做為國際通用性語言,生活中隨處可見,例如商場導視中收銀臺圖標、出口圖標、衛生間圖標等,又或者是日常手機里使用的那些App圖標,如微信、電話、短信等。的確,圖標的形式有很多種,它可以應用在很多場景中,并且表現方式非常豐富,有線的、有面的、還有擬物的等。

          兩萬字超強干貨!設計師必看的圖標設計指南

          粗淺劃分的話,UI設計中常見的圖標大致分為兩大類,第一類我們稱之為「標志性圖標」,比如手機中應用啟動圖標;第二類我們稱之為「功能性圖標」,這類圖標經常出現于 App 或網站中,用于功能性指示引導或操作。

          2. 圖標的重要性

          對于UI設計而言,圖標可以說是整個產品的點睛之筆,它甚至可以直接影響著一款產品的形象和氣質。在不少 UI 界面中,圖標幾乎是這個頁面的核心支撐體,它直接影響著產品的視覺體驗和產品調性。它有以下幾點好處:

          • 全球通用:Windows,iOS, etc., 中文版和英文版甚至各種語言版本,在不打開菜單之前,基本上都長一樣;
          • 節約空間:如果能用一個圖標清楚表達含義的時候,就不需要用文字,比如用一個“叉”代表「關閉」;
          • 快速定位:圖標可以用它獨特的形狀或者顏色讓人快速定位到一個功能;
          • 上下文的定位:比如小飛機的圖標單獨放出來不確定是什么,但是在和收件箱在一起它就可以認為是發件箱了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 起源

          圖標的發展歷程其實有些類似中文、英文等語言的發展,大體也分為兩個階段:

          實物 → 符號;符號 → 新符號

          來看一個小例子:

          兩萬字超強干貨!設計師必看的圖標設計指南

          左邊這個東西叫軟盤,可能很多小伙伴沒見過(事實上我也沒有),「保存」圖標就是將「軟盤」符號化之后形成的圖形,「軟盤」是「保存」圖標的實體。但隨著時間的推移,人們逐漸將長期接觸的符號本身作為一種新的實體,在大家的眼里,它不再是一個具象事物的抽象符號,而是直接當成一個實體來使用,甚至這個符號的實體已經淡出歷史,但人們還在習慣性使用這個符號。

          如你所知,圖標、標識都不是界面設計師所創造的概念,它的存在可以追溯到人類文明誕生之初,在漫長的歷史長河當中,早期用來傳達信息的圖標演變為系統的文字,而在地圖、圖書、壁畫和建筑等各種各樣的地方,還存在著用來代表和傳達特定概念的圖標和標識。

          兩萬字超強干貨!設計師必看的圖標設計指南

          隨著技術的發展,計算機誕生了,而顯示器的出現,也為圖形化界面的誕生,鋪平了道路。20世紀70年代,施樂在位于帕羅奧托的研究所當中,誕生了最早的擁有圖形化界面的電腦,著名的「 Xerox Alto」。這款昂貴的概念機最終并沒有走進大眾的視野,但是它的后續機型施樂之星在1981年問世,并且成為了計算機史上的重要里程碑,而 Xerox Alto 對于喬布斯和比爾蓋茨的啟發,更是引發了計算機歷史上最著名的一場戰爭:蘋果VS微軟,Windows 對抗 Macintosh。當然這都是后話。

          4. 擬物圖標

          80年代,想做的具象(擬物),卻因為像素和機能的限制無法實現,所以對好的標準是越具象越好 。到了1995年計算機顯卡的顯示能力得到革命性的改變,Photoshop 5.0的發布,恰好讓憋屈了這么多年的圖形和UI設計師們巴不得立馬上天(終于可以施展拳腳了)。從win95開始,到osx/win7的這十來年正是UI擬物化發展壯大并大行其道的階段。同時也是顯示技術飛速發展的十年,從640×480,到800×600,到1024×768,到1920×1080 / 1920×1200,再到4k,再到retina屏,平面顯示技術能達到的水準基本已經是人眼能感受到的。

          兩萬字超強干貨!設計師必看的圖標設計指南

          當人們對計算機尚不熟悉的時候,用戶的需求是“弄懂這玩意到底是干嘛的”,是用戶體驗的核心。擬物化的圖標和界面會給予用戶具象化的引導,比如回收站,音樂,電腦,文件夾的圖標,用戶可以直接聯想到現實中的物品并更快的理解這些程序或者文件的作用。包括立體的按鈕引導用戶點擊,用戶都可以通過聯想,更快的理解操作/互動的方式。這樣可以降低用戶的學習成本,縮短學習周期,讓用戶更快的適應計算機的使用,弄懂這玩意到底是干嘛的。

          來自蘋果的Macintosh系統在圖形化界面發展史上是無法繞過的里程碑。1991年,蘋果借由Macintosh,首次發布了彩色的圖標設計。圖標所能容納的信息量比起上一個黑白界面的時代更大,全新的樣式使得它在信息傳達的功能性上有了明顯的提升。

          兩萬字超強干貨!設計師必看的圖標設計指南

          但是隨著 ICON 的發展,擬物圖標也帶來了一些問題,華麗的視覺元素或許在用戶使用的初期,起到賞心悅目的裝飾,但久而久之,這都將成為對用戶獲取信息的一種干擾。如今人們對各種常規交互模式人們也早已了然于胸,用戶的需求也從“弄懂這玩意這么用”變成了“快捷更舒心的使用”。用戶用的方便變成了用戶體驗的重心。

          再者,大家都熟悉的事物其實非常有限,而 APP 的創新卻在不斷進行,很多創新的產品本身在現實世界就沒有參照物,所以也決定了擬物圖標必然會被扁平化取代。

          5. 扁平化

          從iMac到iPhone引領的擬物圖標更是開啟了一個絢麗的圖標設計時代。擬物時代盛行也帶來了一些麻煩——擬物圖標的質感、光影會分散用戶的注意力,形成「視覺噪聲」。于是UI設計師開始探索更新的表現形式來設計界面中的圖標。如微軟引領的Metro風格圖標設計和Google引領的長投影風格的圖標設計。 不管你喜歡與否,當年的微軟讓 Metro 和扁平化賺足了眼球,甚至讓人一看到扁平化就想到Metro。

          兩萬字超強干貨!設計師必看的圖標設計指南

          區別于擬物化更加接近于真實的實物,扁平化則是簡化真實的物體,轉而通過抽象、簡化、符號化的設計元素來表現。

          2013年,蘋果推出了iOS7 開啟了擬物向扁平轉變的風潮。在iOS7中對整個界面的圖標、按鈕、字體、信息層級等各方面都進行扁平化設計。蘋果的這一系列動作打破了人們對扁平化風格的芥蒂,并最終推動了整個移動端扁平化設計的進程。

          兩萬字超強干貨!設計師必看的圖標設計指南

          那么,蘋果公司在堅持了多年的擬物化設計風格之后,曾經作為該風格的引領者和受益者,為何會突然轉向,熱情地擁抱起扁平化設計來了呢?難道是因為我們視覺疲勞了嗎?答案很簡單,

          1. 因為使用了Retina屏,屏幕清晰度支持扁平化更多的細節;
          2. 當具象化慢慢達到了,當大師們發現具象化已經不再有挑戰時,于是開始嘗試從別的角度表達;
          3. 高度的擬物在一定程度上減輕了學習成本,但是提高了辨識成本。

          總之,扁平化這種二維設計已經成為一種更加流行的設計風格。所有元素的邊界都很干凈利落,較多使用色塊和符號化的圖形以及無襯線修飾的字體,界面更加整齊簡潔。使用這種設計風格的優點是可以更加簡單直接的將信息和事物的工作方式展示出來,將一切干擾信息弱化,減少認知障礙的產生。

          兩萬字超強干貨!設計師必看的圖標設計指南

          雖然扁平化的優點有很多,也適合當下技術發展需要的,但是缺點也是顯而易見的。譬如表現形式太過于抽象、缺乏情感的傳遞,而事實上發展到今天的扁平化設計確實也在不斷的優化自己~使得自己更加的適應時代的發展。另外還有一個點就是所謂的 “審美疲勞”。當你一直看著簡單的東西,久而久之就會越來越煩,你就會越來越想要看那些豐富多彩的東西。反之亦然。這也表明 UI 新的趨勢再一部向“突出內容”的本質靠攏,即“認知簡約”。也許當滿世界都是扁平化后,擬物化的設計卻又變得更顯眼了呢?最近流行的“新擬物”風格就是最好的證明。

          6. 微扁平、輕擬物

          由于扁平風格表現形式單一,同質化嚴重,缺乏個性,圖標慢慢開始發展到微扁平輕擬物的方向。相較于擬物風格不會有太多復雜的視覺元素,與扁平風格又有了更豐富的情感內容,所以現在界面中,在面積比較小的區域我們使用扁平圖標或線形圖標;在面積比較大的區域我們會使用加入漸變甚至輕質感的圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          7.「新擬物」風格圖標

          蘋果在 WWDC2020 搞了個大新聞:macOS 將與 iOS 統一步調,從X86 平臺遷移至ARM 平臺,并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱為Big Sur。

          macOS Big Sur是第一個將「新擬物」設計投入大規模商用的操作系統,這可視為「新擬物」在實用化道路上的首次勝利。值得一提的是,在 Big Sur 的 ” 外觀 ” 設置里,多了一項名為” 自適應強調色 “的選項。蘋果將主題色的指定權留給開發者,這是否暗示新一代 App 在光影上會有更豐富的效果?

          兩萬字超強干貨!設計師必看的圖標設計指南

          「新擬物」設計的精髓在于對光線的絕妙運用。它把光效拿捏在 ” 扁平 ” 與 ” 擬物 ” 之間,進而打造一種全新的視覺體驗。

          不同于傳統的擬物,「新擬物」雖然將符合物理規律的光影效果引入界面,但它所模擬的材質是自然界不存在的。換句話說,「新擬物」是將真實光線用于虛擬對象,而 ” 擬物 ” 是還原實際物品在特定光照下的效果;

          兩萬字超強干貨!設計師必看的圖標設計指南

          由于整個設計界將不得不考慮新擬物風格,圍繞該風格的可能性將會有爆炸性的發展,并且這種新的數字空間設計理念如何能夠合理地適用于用戶界面設計和功能性將取得更大的突破。與以往一樣,第三方應用將比蘋果更大膽、更快速地推動這一風格——這也是我們將會真正開始解鎖新擬物優勢的時候。

          應用圖標的類型及作用

          產品應用圖標(也叫啟動圖標),是指產品「品牌標識」中獨立的圖形,也是產品品牌的核心組成元素。作為產品所有視覺通信中必不可少的元素,其使用率非常高,所以該獨立圖形在設計中應做到最簡化。

          一個小問題:為什么iOS系統中圖標形狀是統一的圓角矩形?

          蘋果官方給出的解釋是在空間有限的的區域,太多形狀顯得雜亂,如果形狀不規則,就無法控制統一間距,設計師水平也不一樣,這樣統一規范能保證標準。推薦一個iOS啟動圖標資源網站,設計時可以找找靈感。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ iOSIcon gallery

          而安卓應用圖標就沒那么規范,處于百花齊放的狀態,各家廠商都在設計獨屬于自己的視覺語言。大家都不一樣,也就導致沒有個性之美。

          兩萬字超強干貨!設計師必看的圖標設計指南

          安卓應用圖標設計規范網站

          兩萬字超強干貨!設計師必看的圖標設計指南

          應用圖標的類型

          應用圖標有不同的風格,這些風格有可能偏擬物,也有可能很扁平,有可能很抽象,也可能很具象。通過不同的設計風格可以更加標新立異,從而被用戶記住。因此能在第一時間贏得用戶的好感和記憶非常重要,將產品圖標設計的好看且容易被人記住就成了非常重要的任務。應用圖標的風格主要有以下幾種。

          1.  中文文字圖標

          中文是我們的母語,每一個漢字都令人記憶深刻,文字也是最直白的信息,而且不容易被曲解,所以很多國內的產品都會使用文字作為自己的產品圖標。中文設計模式即字體設計,提取應用名稱中的一個或多個漢字,進行設計變形,變形后的字體圖形具有產品屬性的外貌特征。常見中文圖標又分為單字、多字和字加圖形的幾種類型。

          單字

          提取產品名稱中最具代表性的文字,通過對筆畫及整體骨架進行字體設計,以達到符合產品特性和視覺差異化的目的。其優點是可以直截了當的傳遞產品信息,識別性強。

          兩萬字超強干貨!設計師必看的圖標設計指南

          多字

          多字圖標設計要注意的是整體的協調性和可讀性,一般為2-3個字,最多兩行(四個字)排列。

          其優點是更加直接的告訴用戶產品名稱,達到品牌推廣的目的,減輕用戶記憶成本。其缺點是如果圖標上的文字和下面的輔助文字完全一樣,會顯得重復啰嗦,像介紹了兩遍自己一樣。

          兩萬字超強干貨!設計師必看的圖標設計指南

          字加圖形組合

          文字加輔助圖形的組合,也是常見的產品圖標設計方法,相比純文字圖標,顯得更加豐富有獨特的產品的氣質和屬性。需要注意的是做好文字和輔助圖形間的平衡。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 英文字母圖標

          英文設計與中文設計的設計模式相似,通常是提取應用名稱的首字母融合產品的功能賣點或行業屬性進行創意加工,新的字母圖形依舊保持本身的識別性。

          單字母

          通常提取英文首字母進行設計,由于英文字母本身結構簡潔,稍加改動就很容易達到設計感于識別性兼備的產品圖標。需要注意的是英文字母本來就少,都用字母很容易創意雷同,難以形成差異化。

          兩萬字超強干貨!設計師必看的圖標設計指南

          多字母

          提取產品全稱或幾個單詞的首字母組合而成,形成獨有的產品簡稱,方便用戶記憶。

          兩萬字超強干貨!設計師必看的圖標設計指南

          字母加圖形組合

          字母加圖形組合的設計形式比較廣泛,圖形分為幾何圖形和通過提煉的圖形。通過字母與圖形進行創意加工,可以使應用圖標視覺表現更加飽滿。

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 數字圖標

          直接用數字做應用圖標的相對較少,但是數字識別性強,易于傳播的特點。利用數字進行設計能給人親和力。難點是怎樣與品牌形成強關聯性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 特殊符號圖標

          由于符號本身的含義會對產品屬性有一定限制,所以特殊符號在應用圖標的設計案例中相對較少。如“$”符號可代表與金錢有關聯性的產品,無法運用在與此屬性無關的產品上。不過也正是由于自身屬性強的特點,可以很好的詮釋關聯的產品屬性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          除了中英文圖標,還有圖形類圖標比較常見。這種類型的設計模式的優點就是直觀醒目和簡潔大方,視覺沖擊力強。常見的有以下幾種:

          5. 幾何圖形

          幾何圖形的設計模式給人簡約、現代、個性等視覺感受,從單個具象圖形到復雜的空間感營造,幾何圖形的表現形式非常豐富。不同的形狀給人的情感表達不同,如三角形給人傳達個性、穩定、現代、時尚等,添加圓角后又會更加親民、可愛。我們可以結合產品特征,合理的選擇適合的形狀圖形進行創意。此類型較考驗設計師的圖形創意能力。

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 單雙形/剪影

          單雙形是指應用圖標只展示單個或兩個的剪影圖形。通常有兩種設計方式,在深色背板上使圖形反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖形填充顏色,圖形可以是單色也可以是漸變色。這種設計模式的優點是簡潔明確,易于用戶在眾多的應用圖標陣列中快速找到目標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          7. 線形

          線形的設計模式分為兩種設計方式,在深色的背板上讓圖標反白,背景可以是單色也可以是漸變色;在淺色的背板上讓圖標填充顏色,圖標可以是單色也可以是漸變色,或是其他視覺效果。纖細的線框圖形傳遞出簡潔輕快的氣質,適合于文藝、清新的應用,在界面設計時保持這種干凈明快的風格,才能與應用圖標設計表里如一。線性風格一定注意不可太細,如果做得太細,在手機上看會非常尖銳,顯得不易點擊。例如airbnb,它的背景是一個微漸變,線性風格曲線組成“A”,同時是一個小蜜蜂。

          兩萬字超強干貨!設計師必看的圖標設計指南

          8. 動物圖形/剪影

          動物作為圖標設計元素是比較常見的方式之一,通過提取動物整體形象或者局部特征部位作為設計元素,背景填充單色或漸變色,簡潔明了。動物給人的印象比較可愛,有助于加深用戶對產品的印象。常見的表現形式有剪影、線性描邊風格、面性風格等。

          兩萬字超強干貨!設計師必看的圖標設計指南

          9. 卡通形象

          卡通風格的產品圖標會讓用戶更有好感,一個可愛的卡通形象有助于加深用戶對產品的印象。很多決策者會認為卡通是一種低齡的審美,這種想法其實是錯誤的??ㄍ梢哉f是一種各年齡層都能接受的風格,例如Bear,它的卡通形象是一頭潔白的北極熊,簡潔的形象設計與產品的閱讀體驗一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          10. 正負形

          以正形為底突出負形特征,以負形表達產品屬性,傳遞產品信息。例如NPR One,圖標中的負形圖形是對話氣泡,告訴我們這是一個媒體或社交的應用,而正形圖形強調產品氣質。

          兩萬字超強干貨!設計師必看的圖標設計指南

          11. 白色漸變

          白色漸變的設計模式與透明白色相似,都是通過白色不透明度來構建出圖形的立體控件感,它比單純的剪影圖形更加具有質感,這種質感帶給了我們視覺上的享受。例如印象筆記·圈點,它是一只白色的鵝毛形象,垂直的線型漸變使鵝毛富有了生命力一般,顯得更加輕柔。

          兩萬字超強干貨!設計師必看的圖標設計指南

          12. 彩色漸變

          色彩比任何圖形都更能抓住用戶的注意力,同時色彩更加具有情緒,能傳遞出應用的產品氣質。比起白色漸變圖形,彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比,營造空間感。應用圖標的背景和圖形的色彩要拉開對比,一般為白色或淺色背景。

          兩萬字超強干貨!設計師必看的圖標設計指南

          13. 無

          無,即沒有設計。除了背板什么也沒有。雖然這類設計模式比較獨特,但我們并不鼓勵,因為用戶很難從一個顏色上得到有用的信息。例如“黃油相機”的圖標設計成一塊黃油的樣子已深入人心了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          14. 應用圖標的作用

          打開率是一款移動應用的重要數據,應用只有被打開才有它的運營價值。在我們手機里安裝了許許多多的應用,除了一些我們每天必須使用的應用如微信,其他大多數的應用在沒有使用場景時很難想到去打開他們。因此,這些應用如何在手機屏幕上吸引用戶的注意,鼓勵用戶打開顯得非常重要。于是在應用圖標上做文章就顯得很有必要,常見的設計手法有:

          • 品牌傳播:在游戲領域比較常見,在應用圖標上打上品牌的旗號就能或者用戶的注意;
          • 營銷事件:將營銷事件(例如雙11)展示在應用圖標上,折扣、促銷等都能吸引眼球;
          • 核心賣點:將核心賣點出現在應用圖標上,引起用戶注意,從而提高應用被打開的頻率;
          • 節日氛圍:節日通常伴隨著消費,因此電商類應用最注重節日氛圍的主題設計,每年春節期間桌面圖標幾乎一片紅,非常有節日氣氛;

          兩萬字超強干貨!設計師必看的圖標設計指南

          應用圖標繪制方法及流程

          1. iOS應用圖標

          在設計模板還沒有如今這么發達時,設計師需要設計啟動圖標(1024x1024px)之后按照程序員的要求切出幾十個不同尺寸的圖標。比如,在手機中@3x情況下桌面圖標尺寸為180x180px,在@2x情況下為120x120px;在應用商店圖標需要使用的尺寸是1024x1024px;這個工作太煩人了,好在現在我們只需要專注在啟動圖標設計本身上了。在蘋果給我們的這套資源中,有 Template-AppIcons-iOS 這個文件。打開這個文件,用我們自己設計的啟動圖標替換掉智能對象里的內容,你會發現所有尺寸的圖標都變成了我們的圖標。iOS的圓角圖標并不是標準的圓角矩形,而是某種連續曲線。

          兩萬字超強干貨!設計師必看的圖標設計指南

          我們把兩個圓角曲線放大重疊后進行對比,其中灰色線框為標準圓角矩形繪制的圓角,紅色為iOS平滑圓角,它與圓角矩形擁有相同的對角線錨點,區別在于其曲線稍微向中心收緊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          事實上,我們很難在Retina屏幕上區分這么細微的差別,因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角,直接繪制成直角矩形交給開發同學即可,如果應用圖標需用于展示,可以繪制120*120px圓角矩形、27px圓角半徑代替。

          2. 安卓應用圖標

          安卓應用圖標同樣需要很多尺寸,主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形,然后程序員通過代碼進行切割使其變成圓角圖標。

          3. iOS應用圖標設計流程

          在我之前的設計作品中,有個“影記”的攝影社區APP,本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。

          尋找隱喻

          隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為,即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影,馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞,去找一些氣質相符的圖片制作情緒版,通過情緒版可以感受到產品的調性,然后從中提取一些形狀和色彩作為產品圖標的主要造型。

          兩萬字超強干貨!設計師必看的圖標設計指南

          競品分析

          應用市場各類產品不勝其數,在同類應用中存在大量相似的應用圖標設計,如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異,避免創意撞車,讓用戶在腦中形成思維模式,它還指圖形表意是否清晰,是否符合用戶的心里預期。

          兩萬字超強干貨!設計師必看的圖標設計指南

          提取關鍵詞

          根據收集的圖片,創建情緒版,結合自己的產品提取關鍵詞,然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”,相機中的“快門”“信號燈”“開關機”,并依次將關鍵詞描繪成下列圖形。

          兩萬字超強干貨!設計師必看的圖標設計指南

          抽象圖形

          確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形,接下來將繪制好的3個圖形相結合,即完成初步設想。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標柵格線

          使用iOS應用圖標柵格線作為設計依據有助于建立和諧的圖標繪制比例,并與iOS系統保持統一,下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。

          兩萬字超強干貨!設計師必看的圖標設計指南

          豐富細節

          通過上面圖形組合已基本完成應用圖標的設計,接下來我們還應從顏色、質感、背板等著手豐富圖形的細節,建立起應用的產品氣質?!坝坝洝弊鳛閿z影師分享佳作平臺,攝影師們用的器材顏色大多以黑色為主,因此酷酷的黑色更適合作為應用的主色。白色的信號燈過于普通,使用相機本身發出的橘紅色燈光作為信號燈的顏色,使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。

          兩萬字超強干貨!設計師必看的圖標設計指南

          多場景測試

          將應用圖標設計稿交付開發提交至App Store上架,正確的圖標設計稿應是直角矩形,iOS會自動應用一個圓角遮罩將圖標的4個角遮住,假如圖標設計稿自帶圓角,就有可能露出圖標透明區域。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 注:上圖非實際大小,僅表明不同分辨率下的比例關系

          此外,應用圖標還會以不同的分辨率出現在不同場景中,例如在iPhone 8plus上需@3x(120px)的圖,而在iPhone7的設置頁需要58px的圖,就需要將120px的圖縮小。將大圖縮小成小圖時,一些細節就會丟失,使畫面變得模糊,因此設計師應對小尺寸圖標進行細微調整,去除不必要的裝飾元素,以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。

          兩萬字超強干貨!設計師必看的圖標設計指南

          功能圖標的設計規范

          除了產品圖標,還有一種圖標被稱為功能(或系統)圖標,功能圖標指的是擔負一定功能和含義的圖形,一般來說需要像文字一般地被人迅速理解,所以表達方式上不適合特別復雜,如微信底部四個系統圖標就使用了比較簡潔的線性風格。

          功能圖標在UI設計中占據非常重要的作用,幾乎存在于每一個應用界面中,無論是在導航欄、工具欄或標簽欄,還是在首頁、詳情頁或個人中心頁,都隨處可見功能圖標的身影。功能圖標具有明確的表意功能,其作用在于替代文字或輔助文字來指引用戶進行快速導航,它具有圖形化的符號,比文字更加直觀,符合普羅大眾的認知習慣,有助于用戶形成記憶思維,提高應用的易用性。同時設計精致、風格統一的功能圖標提升了產品視覺效果,不但給用戶帶來視覺上的愉悅感,還帶來了良好一致的使用體驗。

          1. 圖標的規范

          圖標是良好設計系統的基本組成部分,對營銷材料非常有幫助。他們是插畫內容的基礎構建塊,但他們也具有很高的技術性。因此科學嚴謹的設計規范能幫助我們設計精致、風格統一的圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 圖標尺寸

          一致性是設計圖標的關鍵,在繪制時,一定要確保所有的圖標都相同大小。在UI界面設計中,網格的大小必須要是4或12的倍數(安卓是8的倍數,iOS是4的是倍數)。@2x下作圖要保證是4的倍數,這樣可以整除2,適配@1x的屏幕;@3x下作圖就需要是12的倍數了,這個數值可以整除2、3、4,適配@1x和@2x的屏幕,界面中通常使用的圖標尺寸24*24px、48*48px。這里建議用48px做為常規圖標設計尺寸。

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常我們只需要選擇一個通用的尺寸來繪制,然后讓開發人員根據倍數調整可能需要的尺寸即可,這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。

          不過當我們的圖標涉及一些復雜的細節時,還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px,但是營銷圖標是80px,兩者的使用差別會很大,那么我們就需要為那些較大的尺寸添加一些細節。

          兩萬字超強干貨!設計師必看的圖標設計指南

          知識點:

          這里建議從最大的尺寸開始,然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多,也能的保留圖標原始狀態。

          圖標繪制基于48x48px畫布繪制的線性圖標,線寬默認為4px,不同場景縮放比例使用:

          • 圖標為32x32px時,線寬3px(基準線寬)
          • 圖標為24x24px時,線寬2px(基準線寬)
          • 圖標為16x16px時,線寬2px(基準線寬)
          • ……

          如果你要繪制描邊圖標,那么需要保證所有的筆畫都是相同的粗細,并且筆畫之間的間距不要比筆畫本身更細。

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 圖標的keyline

          圖標網格為圖形元素的一致但靈活的定位建立了明確的規則,keyline是網格的基礎-。通過使用這些核心形狀作為知道,你可以跨系統保持一致的視覺比例。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 圖標關鍵圖形

          圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界,關鍵線有助于促進圖標統一性,簡化設計過程中比例調整成本,繪制小圖形需要參照小正方形的keyline。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 圖標的拐角

          兩萬字超強干貨!設計師必看的圖標設計指南

          直角拐角:當基礎圖形為滿容器正方形時,建議使用3X圓角,當基礎圖形為滿高(寬)矩形時,建議使用2X圓角。當基礎圖形為較?。ㄐ∮?/2寬高)矩形時,建議使用1X圓角。

          兩萬字超強干貨!設計師必看的圖標設計指南

          非直角拐角:根據圖標場景,通常情況下無論角度,默認均為1X圓角;特殊弧度的曲線“拐角”情況除外,根據圖標設計需要單獨考慮。

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 圖標區域 封閉和非封閉

          封閉區域,有閉合曲線構成的為封閉區域,可以進行獨立顏色填充;

          非封閉區域,由非閉合曲線構成的非封閉區域,原則上是不能進行獨立的顏色填充;

          兩萬字超強干貨!設計師必看的圖標設計指南

          封閉區域為曲線形狀且有相交線段時,原則上是不能進行獨立的顏色填充;

          7. 圖標繪制規則

          當線段與曲線相交或者與直線非垂直相交時,線段末端用圓頭端點;

          當線段與直線垂直相交時,線段末端用方頭端點;

          當圓點的直徑與線寬一樣時,圓點用圖形繪制,不用線段;

          當圓形和方形在小于16px時建議用圖形繪制,不要用線;

          兩萬字超強干貨!設計師必看的圖標設計指南

          傾斜角度

          根據像素的網格線來設置一條線的起點和終點,會讓你的圖標看起來更清晰。圖標中的傾斜角度應為45的倍數,保持與keyline中的對角線或十字垂直相交線保持平行關系,若是矩形外框,傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。應避免用13.7°,81°等這些奇怪的數值。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線段和端點

          為保證風格的整體一致性,圖標所有線段端點默認均應為與線段同寬的圓角端點,通常情況下線段端點和可編輯節點坐標以整數坐標為佳。默認基于48px畫布繪制的線性圖標,線寬默認為4px,無論直線和曲線在任何時候線寬都應均保持一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標斷口與間距

          內部結構與外框的間距不得不小于線寬,內部元素之間的間距不得不小于線寬的1/2px。

          外形框的端口尺寸關系:4px、8px、12px,建議尺寸為4的倍數。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標風格變換

          圖標在特定規律下允許不同風格之間的變換,分別為線性風格(默認)、填充風格、混合風格、多色混合風格。

          兩萬字超強干貨!設計師必看的圖標設計指南

          單雙像素描邊

          如果為圖標設置1像素的邊框,邊框應該使用外部或內部的描邊樣式,但是不建議居中描邊樣式,居中描邊的1px邊框,雖然在放大它們的時候,它們看起來很清晰。但在100%比例大小顯示的時候,它們會模糊。雙數用居中描邊,單數用外描邊,所有錨點要與網格對齊不能出現偏移。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線段閉合

          所有線段結合處應為閉合狀態,避免錯位出現。

          兩萬字超強干貨!設計師必看的圖標設計指南

          統一透視

          如果圖標有透視需求的話,就要統一透視角度,例如圖標透視方向朝左,那就統一所有圖標的透視角度都朝左邊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          8. 視覺柵格

          除了像素柵格,還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里,以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器,這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡,避免以后開發時還需要重新調整。

          兩萬字超強干貨!設計師必看的圖標設計指南

          9. 視覺重量

          繪制圖標不光要滿足物理上大小統一,還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。

          UI界面的圖標通常可以近似的看做以下的基本格式之一:橫向矩形,縱向矩形,對角矩形,圓形,三角形,正方形。 如果把它們做成高斯模糊效果,你就會發現它們具有相同的視覺重量,因為它們變成或多或少相同的斑點效果。

          兩萬字超強干貨!設計師必看的圖標設計指南

          根據圖標形狀,將它們放在相應的框架中。你就會發現,方形圖標比三角形或細長圖標更緊湊。

          10. 圖標繪制細節

          清晰是圖標的基本要素,在sketch中,參數不要有小數點,讓圖標占滿像素網格。因為計算機不能識別小數點,導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格,導致圖標出現虛邊。

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常從一套圖標中最復雜的那個開始,因為它會幫助我們定義相同的視覺重量,讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時,更復雜的圖標會吸引用戶更多的注意力,而且視覺上看上去更重。

          兩萬字超強干貨!設計師必看的圖標設計指南

          11. 圖標的顏色

          默認顏色:如果是功能圖標,那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜,不利于和其他設計師協作。而對于營銷圖標,出于品牌宣傳的目的,你可能會想要使用兩種顏色,個人認為圖標最好是單一顏色的,3種或3種以上顏色的東西都是插圖,而不是圖標。

          選擇狀態顏色:未選擇圖標顏色為#000000,透明度為87%;未激活圖標顏色為#000000,透明度為54%;禁用圖標顏色為#000000,透明度為38%。

          兩萬字超強干貨!設計師必看的圖標設計指南

          12. 功能圖標的風格

          功能圖標在UI設計中占據非常重要的作用,幾乎存在于每一個應用界面中,無論是在導航欄、工具欄或標簽欄,還是在首頁、詳情頁、或個人中心頁,都隨處可見功能圖標的身影。功能圖標具有明確的表意功能,起作用在于替代文字或輔助文字來指引用戶進行快速導航,它具有圖形化的符號,比文字更加直觀,符合普羅大眾的認知習慣,有助于用戶形成記憶思維,提高應用的易用性。同時,設計精美、風格統一的功能圖標提升了產品視覺效果,不但給用戶帶來視覺上的愉悅感,還帶來良好一致的使用體驗。

          常見的功能性圖標風格大致有三種:線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式,所以歸根到底,基礎的圖標風格有兩大類:「線性圖標」和「面型圖標」;

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標

          線性圖標是通過線條來表現物體的輪廓,它比面形圖標更能塑造優美的外觀,且作為貫穿圖標繪制的線條本身就是一種設計語言,因此繪制整套線性圖標會更加統一,具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標,如果線條粗細不一致,會給人一種權重上存在差異的感覺。所以,在繪制線型圖標時,通常會使用統一粗細的線條。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標具有辨識度高,清晰,簡約易識別等優點,線性圖標不會對頁面造成太多的視覺干擾。缺點是:線性圖標的創作空間較少,太復雜的線性圖標對識別性產生較大的困擾。

          兩萬字超強干貨!設計師必看的圖標設計指南

          常用的App圖標設計線的粗細一般有2PX或者3PX,不同的線條粗細 ICON 所帶來的視覺感受也不同,細線顯得精致,粗線視覺面積大,顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛,個別 App 的底部標簽欄圖標采用粗線條設計,但粗線條的 ICON 圖形較為極簡才適用。

          線性圖標根據樣式還可以分為:雙色線性圖標、線面填充圖標、線性漸變圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性圖標使用場景

          在iOS所有原生應用的導航欄和工具欄都采用了2px線框的圖標設計,很多APP產品的標簽欄都選擇用線性風格的圖標設計。無疑,線性圖標可以減少視覺干擾,讓用戶集中在產品核心功能上,同時輕量化的視覺語言也與扁平化的設計風格更為融合。它比面形圖標更能塑造優美的外觀,且線條本身就是一種設計語言,因此繪制整套線性圖標會更加統一,具有整體感。

          兩萬字超強干貨!設計師必看的圖標設計指南

          通常,在UI設計中,線性圖標很少和背板同時存在,因為線條的圖形視覺表現力較弱,容易埋沒在背景色中,但也不是必須的,如果掌握好一定的規則,一些簡單的線性圖標和背板的組合也會很協調。

          面形圖標

          面形圖標是以面為主要表現形式的圖標,通過線或者面去切割基礎輪廓面,通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。在「微信」底部標簽欄中,未選中的圖標是線性圖標,而選中的圖標則是面形圖標,同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多,所以更加顯眼。實際上,蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標,是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。

          兩萬字超強干貨!設計師必看的圖標設計指南

          面形圖標具有表意能力強,細節豐富,情緒感強,視覺突出,創作空間大等優點。面性圖標可以讓用戶迅速定位圖標位置,預知點擊后的狀態。但是面性圖標在頁面中不可過多出現,否則會造成頁面臃腫,難分主次,用戶視覺疲勞。

          面性圖標根據不同的配色樣式可以分為:單色飽和度填充圖標,純色漸變圖標和多色漸變圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          基于最基本的「線性圖標」和「面型圖標」,通過不同的形態和風格的組合,再結合豐富的 表現手法,就可以設計出形形色色的圖標風格了。比如:不同粗細線條線性圖標的組合,或者面面組合,或者線面組合。大家在設計圖標的時候,需要根據自己的產品特征、受眾和使用場景,去選擇適合自己的表現形式。

          面形圖標使用場景

          面形圖標具有廣泛適用性,通常在運動、時尚類應用的標簽欄出現。由于面形圖標的視覺占比最大化,具有強烈的視覺表現力。

          兩萬字超強干貨!設計師必看的圖標設計指南

          功能入口的面形圖標通常分為反白和正形兩種類型。反白即在彩色背板上顯示白色的圖標,正形即圖標直接填充色彩且無背板。在帶有背板的圖標設計時要注意圖標與背板的尺寸比例,雖沒有嚴格的繪制標準,但從整體視覺效果上考慮,圖標尺寸最好不低于背板直徑但1/2,最大不超過背板直徑的0.618(黃金比例),同時還要考慮所有圖標的視差一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          13. 扁平圖標的使用場景

          扁平化圖標實際上是線性圖標和面形圖標的一種組合形式,這種類似插畫感覺的圖形一開始多用于引導頁、空狀態也的情感化設計,后來逐漸在標簽欄、首頁主要功能入口也出現了扁平化圖標的身影。精致的扁平化圖標令人賞心悅目,拉近了與用戶之間的距離,從而建立起良好的用戶印象。

          兩萬字超強干貨!設計師必看的圖標設計指南

          14. 品類區圖標

          品類區圖標的衛視通常是位于搜索框、banner之下(也俗稱“金剛區”),而且品類區區域通常會占屏幕22%-25%不等,且位于屏幕頭部,從用戶閱讀屏幕內容的視覺流來說位置至關重要,而且是聚合各類子版塊的入口,為各個子版塊分發內容引導流量。所以其重要性不言而喻,產品要讓用戶通過不同類型展示方式的組件找到相應的功能,而圖標具備精煉高度概括內容的特性,識別度也大于文字,所以「金剛區」的圖標設計通常以圖標+說明文字為主。

          兩萬字超強干貨!設計師必看的圖標設計指南

          常見的設計手法有:圓形底板+45度漸變+白色面形+微投影;45度漸變+扁平圖標+微投影;簡單線性;45度漸變+不透明度+面形圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          15. 文字圖標

          文字圖標是指用文字直接表示特定含義的圖標符號。由于文字本身就是一種演化而來的符號,英文的首字母或者詞語關鍵字本身也具備很強的信息濃縮性,因此在某些場景下,采用文字或字符作為圖標,是一種很不錯的表現手法。

          兩萬字超強干貨!設計師必看的圖標設計指南

          比如「提示」圖標,使用一個圓圈包裹一個英文字母「i」,意為 information,表示「注釋信息」的含義;比如停車場直接使用「Parking」中的首字母 「P」,這些都是比較約定俗稱的使用方式。還有一些場景,很難用象形或者表意的方式進行表達,那么就很適合使用文字符號,例如京東/天貓某些商品具備「正品保證」的標識,這個概念太抽象了,很難用象形去概括,創造新的表意符號又很難被大眾接受,這時「正」字就很適合作為這個場景特定的圖標符號,作為針對中國用戶群體的產品圖標,簡單粗暴且有效。

          知識點:

          如果可能的話,盡量避免在圖標中使用文字。因為圖標應該是全球性的。如果你確實需要文字圖標(例如貨幣符號等等),那么請你自己繪制,而不是直接使用字體。

          16. 動態圖標

          這幾年動效設計的熱度穩定增長,只有靜態排版的時代正在過去。動效的出現,也讓圖標擁有了更多的可能性。動態圖標可以讓你的app或網站生動有趣,在我們所常見的各種數字產品當中,UI組件和各色元素都已經動畫化了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          運動中的物體比靜態的物體更能快速引起人們的注意,在UI設計中嘗試添加一些動畫及動畫圖標,不僅能在視覺上快速吸引用戶,還能使產品更具交互性,提升產品的趣味性。分享幾個動態圖標資源網站:

          useAnimations:支持所有設備、網站、Android和iOS,可以免費用于個人和商業用途。

          兩萬字超強干貨!設計師必看的圖標設計指南

          useanimations.com

          Lordicon:每一個圖標都提供線性輪廓和面形剪影兩種風格樣式,并且圖標是基于Lottie動畫引擎的矢量動畫圖標,大小完全可擴展,兼容所有主流瀏覽器。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ https://lordicon.com

          Icons8 Animated icons 2.0:提供的動態圖標格式包括 Lottie 適用的 JSON、GIF 和 After Effects 格式,透過網頁可以搜尋、預覽動態圖標效果。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ https://icons8.com/animated-icons

          Feather:設計師Cole Bemis制作的一個開源圖標庫,可自行調節圖標大小和線條粗細。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ https://feathericons.com/

          17. 圖標命名規則

          科學和的命名規則能夠幫助我們快速定位到自己制作的圖標,并且幫助開發縮短命名時間,加強團隊寫作效率。切圖可按照“業務_類型_功能_大小_狀態”的格式進行命名。

          兩萬字超強干貨!設計師必看的圖標設計指南

          切圖命名的格式建議為全英文,可在切圖之前對圖層進行命名,常用切圖命名對照表如下所示。

          兩萬字超強干貨!設計師必看的圖標設計指南

          如何繪制功能圖標

          1. 圖標繪制方法

          圖標的繪制方式主要有兩種:布爾運算 和 貝塞爾曲線。

          布爾運算

          布爾指的是喬治·布爾,19世紀的一位數學家,為了紀念布爾在符號邏輯運算中的杰出貢獻,所以將這種運算稱為布爾運算。

          布爾運算聽起來比較難,但其實非常簡單,布爾運算采用的數字邏輯推演法,主要有數字邏輯的聯合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法,對應到設計軟件中,就有:合并形狀、減去頂層形狀、與形狀區域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型,這就是布爾運算。

          兩萬字超強干貨!設計師必看的圖標設計指南

          • 合并形狀:將兩個形狀合并為一個,取的是合集;
          • 減去頂層形狀:用底層圖形減去頂層圖形所得最終圖形;
          • 與形狀區域相交:得到的形狀是兩個圖形重疊的部分,取的是交集;
          • 排除重疊形狀:簡單理解就是減去兩個圖形重疊的部分,與「與形狀區域相交」相反;

          基本上通過布爾運算,我們能繪制出常見的大部分圖標了,但有時我們需要針對某些線條進行單獨的調整,又或者我們需要打造一套手繪風的矢量圖標,這個時候就需要用到貝塞爾曲線了。

          貝塞爾曲線

          貝塞爾曲線適用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾(Pierre Bézier)所發表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具,使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。

          貝塞爾曲線包括:節點、控制點、控制線、曲線這幾個基本概念。

          矢量圖形便是由這幾個基本概念構成的。圖形由基礎節點作為支撐構成,控制點和節點之間的線段稱為控制線,控制線就像皮筋一樣,調整控制點的位置,可以改變曲線的形狀,就像被皮筋(控制線)拉扯一樣。

          兩萬字超強干貨!設計師必看的圖標設計指南

          節點包括 4 種基礎屬性類型,一種是沒有控制點和控制線的「直線節點」;另一種是「鏡像關聯節點」,這種節點控制其中一側的控制點,另一側的控制點會發生鏡像變化,適合繪制對稱結構的曲線;再有一種是「無關聯節點」,即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響;最后一種是「不對稱關聯節點」,這種類型下,節點兩側的控制點和節點會永遠保持在同一條直線上,但是卻不會對稱控制線的長度。

          知識點:

          在 Sketch 中,我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型,加快繪制效率。

          鋼筆工具

          繪制自由貝塞爾曲線常用的工具便是鋼筆工具,鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜,但是一但上手,會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站,以游戲的形式練習鋼筆工具,通關的時候你對鋼筆工具就已經輕車熟路了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          繪制實戰

          這里選擇了幾個比較典型的圖標,簡單演示下繪制方法和各自的繪制思路:

          面性

          眼睛:布爾運算相交 / 相減 / 合并形狀

          繪制一個正圓,然后復制這個正圓形,通過布爾運算「與形狀區域相交」得到眼睛外輪廓,再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。

          兩萬字超強干貨!設計師必看的圖標設計指南

          位置定位:旋轉 / 相減

          這個圖標由兩個大小圓形相減,得到環形,再繪制一個和大圓半徑相等的正方形,和圓環左、下對齊,最后逆時針旋轉45度完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          WIFI:相加 / 相減 / 旋轉

          繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型,再繪制一個正三角形,和靶子圖形相交得到Wi-Fi圖標。

          兩萬字超強干貨!設計師必看的圖標設計指南

          齒輪:旋轉 / 相減

          通過兩個圖形的布爾運算得到環形,然后繪制一個梯形,復制一個鏡像,將其對齊環形兩端,復制梯形編組并旋轉復制三次(45度),最后合并全部形狀完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          鈴鐺:相加 / 相減

          由3個矩形組成鈴鐺主體,鈴鐺頂部圓頂結構通過設置全圓角所得,鈴鐺底部的半圓使用圓形和矩形進行布爾運算,完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          線性

          放大鏡:旋轉 / 相加

          繪制一個正圓和一條線,用對齊工具將其居中對齊,編組后逆時針旋轉45度即可。

          兩萬字超強干貨!設計師必看的圖標設計指南

          時鐘:鋼筆 / 剪刀工具

          繪制一個正圓和一個矩形,使圓形的左下角對齊圓形中心,用鋼筆工具在矩形左邊和下邊增加兩個錨點,再用剪刀工具減去多余的線條即可。

          兩萬字超強干貨!設計師必看的圖標設計指南

          雨傘:相減 / 剪刀工具

          繪制一個正圓,再繪制一個矩形與其相減得到傘頂,然后繪制一個矩形,通過剪刀工具減去多余部分,得到傘架,傘把手圓角化處理,完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          相機:合并

          繪制一個矩形和一個梯形,通過合并得到相機主體,再繪制一個正圓完成相機鏡頭部分,完成。

          兩萬字超強干貨!設計師必看的圖標設計指南

          愛心:相加 / 旋轉

          繪制兩個正圓和一個直徑與圓形等寬的正方形,然后逆時針旋轉45度所得。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 制定規范

          無規矩不成方圓,規矩的出現可以讓一切雜亂的東西變得合理,統一起來。在設計上也是如此,規范具有統一輸出,指引細節、便于查看的好處,規范就是一組圖標中的規矩,所有圖標的繪制都按照規矩來,最終的成品就會顯得井然有序。

          小小的圖標是由很多圖形元素組成的,在這些圖標中,元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異,也將幫助我們學會圖標設計的底層結構,依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。

          兩萬字超強干貨!設計師必看的圖標設計指南

          在制定規范時,我們通常先繪制出一個符合業務風格的圖標,然后根據這一個圖標定制后續的圖標規范,依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度,光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一,這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。

          兩萬字超強干貨!設計師必看的圖標設計指南

          制定規范的三個過程:

          • 拆分細節:將圖標中的細節元素(圓角、筆畫末端等)進行分解,并在規范中制定細節元素的使用法則。
          • 風格定位:根據產品調性,業務屬性在規范中制定相應的色彩、質感風格。
          • 功能劃分:不同功能(金剛區和標簽欄等)的圖標要區分開來,功能相近的包括色彩、質感應該采取相近性。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 圖標設計規范

          3. 線性or面性

          設計中,我們應該是用「線性圖標」還是「面性圖標」呢?

          其實二者沒有太明顯的選擇優劣,很多場景下已經越來越模糊,但總的來說,還是有一些法則可以作為參考:

          常用的手法:在App的底部導航欄,選中狀態使用面型圖標,而非選中狀態使用線性圖標;

          16px左右的小圖標慎用線性圖標,線性圖標在16px下,可排布像素的區域較小,這個時候線性圖標不容易設計;

          面型圖標比起線性圖標,除裝飾性外具備更強的視覺信息層次感,更具引導性,比如金剛區功能圖標、IOS設置界面,使用面型圖標;

          車載等系統界面,更適合用面型圖標,面型圖標的視覺面積較大,短時間內更加容易識別;

          線性圖標看起來通常會更加細膩精致,適合比較精致簡潔的設計或者女性化產品設計;

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 圖標導出

          文件格式是導出圖標的關鍵。不同的人需要的文件格式也不同,如果你為外部合伙人提供圖標,那么可能會提供1x、2x和3x.的png文件,以適應多種設備。而對于開發和其他設計人員,則通常需要導出.svg文件,這些文件可以在設計程序中編輯,并且可以通過代碼在應用程序或瀏覽器中繪制。導出的svg可以用sketch的官方插件「sketch-SVGO」進行代碼優化,壓縮svg的體積,精簡svg代碼。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ sketch-SVGO 插件官方下載頁

          svg格式僅支持居中描邊的圖標,并且不支持投影,因此對于復雜豐富的圖標還是切img圖為好。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 圖標管理和交付

          完成圖標后需要進行視覺檢視,避免任何多余的線條或形狀,保證盡可能整潔。檢查所有線條是否都在標準框架內,讓其他人幫忙來檢查你的圖標是否整潔是非常有必要的。對圖標精心設計評審,合格后再加入資源庫,這樣避免多人同時修改而造成混亂,同時提升團隊協作效率。推薦一個免費的圖標管理工具:Nucleo,團隊協作需要付費。

          兩萬字超強干貨!設計師必看的圖標設計指南

          △ 圖標資源管理工具:Nucleo

          圖標設計的評判標準

          我們了解了 icon 的基本知識,那么如何設計一個好的 icon 呢?怎樣評判我們的 icon 是否合適,是否貼合整個產品呢?我們需要了解什么才是一個好的 icon 。

          我們可以從以下五個方面來檢驗,分別是:識別性,規范性、統一性、呼吸感與品牌感。

          兩萬字超強干貨!設計師必看的圖標設計指南

          1. 識別性

          圖標就是幫助用戶理解信息,所以識別性(也可以說是可訪問性)是一個圖標最重要的一項,尤其在沒有文字說明的情況下,一定不能讓用戶產生疑惑。我們檢測圖標的可讀性通常要將圖標的背景色底板在黑色和白色之間進行切換對比,不論是黑色還是白色的背景都可以看清圖標的全部細節,還需要確保圖標中的每一種顏色都是可見的。

          圖標識別性可以分為兩類,分別是含義識別和視覺識別。

          • 含義識別:是視覺語言是否可替換文字語言,簡言之就是讓你的圖標可以被用戶理解,不會讓用戶產生歧義。
          • 視覺識別:圖標的大小,復雜度,顏色,線條的粗細,這些影響視覺識別的因素識別性是否高。

          兩萬字超強干貨!設計師必看的圖標設計指南

          靈活的設計思路,在保證識別度的前提下靈活發揮,嘗試各種不同風格的表現形式。

          兩萬字超強干貨!設計師必看的圖標設計指南

          當然,腦洞也不要太大,失去了原本的含義,造成誤解。

          兩萬字超強干貨!設計師必看的圖標設計指南

          2. 規范性

          規范性也是做好一個圖標的基礎,我們要保證圖標在視覺大小的一致性,圖標飽滿度、遵循同一種規律,細節統一性。

          視覺大小的一致性:在相同尺寸的基礎上分析形狀間的視覺差異,來審視視覺上是否統一,如一樣尺寸大小的圓和方形的視覺大小就不一致,那么我們可以規定它的最大尺寸,進而在尺寸規范中適當調整,使得視覺大小達到統一;

          兩萬字超強干貨!設計師必看的圖標設計指南

          • 飽滿度:常用的衡量方法就是正負形衡量法,在圖標所占區域的矩形框中,看圖標的正形的面積是否還可以增加;
          • 相同規律:同一套圖標必須是以同種風格呈現的,例如是否全部使用了圓角或直角的風格,圓角大小、繪制風格是否一致;
          • 細節統一:包括像素是否對齊、圓角、描邊粗細是否統一的問題;

          3. 統一性

          在繪制多個類型相同的圖標時,我們需要注意這一套圖標合集需要在視覺上保持統一性。在一整套產品中,會有很多種圖標,但是圖標的功能不一樣,所表達的內容也不同。這時,圖標一致性的意義就體現出來了,根據格式塔原理中的相似性原則:人們會將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素,則應在視覺上保持統一匹配。

          兩萬字超強干貨!設計師必看的圖標設計指南

          圖標內容的統一會讓用戶明白相似的圖標所代表的的功能也相同,而且在視覺上也更加和諧美觀。因此我們在繪標后還需檢查線條的粗細比重,邊角的大小,配色方案,細節層次和設計元素在整個合集中是否是不變且一致的。

          圖標的統一性可以從:線條粗細、設計語言、復雜程度、顏色規范四個大的方向去著手。

          線條粗細:相同功能類型的圖標線寬粗細統一,有背板的圖標線條不易過細;

          兩萬字超強干貨!設計師必看的圖標設計指南

          設計語言:可拆分為透明度(拉開層次)、圓角(圓角還是直角)、斷線開口(開口位置)、設計特征四個緯度去規范;

          兩萬字超強干貨!設計師必看的圖標設計指南

          復雜程度:如果不能簡化圖標,就保持同一組圖標的墨水重量一致,簡化太復雜的圖標,增強辨識度;

          兩萬字超強干貨!設計師必看的圖標設計指南

          顏色規范:對于線面結合的扁平圖標建議最多用兩種顏色,活動入口圖標如果需要的色彩數量多,那就需要保持敏感,從一種色彩的周圍小幅度提取另一種色彩或多種色彩,調整其色相、飽和度、明度就能搭配出許多和諧的顏色。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 呼吸感

          呼吸感的意思就是適當留白。不管是圖標還是界面,適當的留白可以突出主體內容,讓內容具備易看性。在圖標的繪制過程中,我們應該注意圖標元素之間的間距不宜過近,元素也不宜過多。圖標是一個物體的簡略縮影,目的是為了表達內容,讓用戶快速理解,太過復雜的細節會影響圖標的識別速度。因此在圖標的繪制過程中應該刪除所有無法傳達圖標意義的元素,避免使圖標變得太過復雜難以識別。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 品牌感

          品牌感就是我們上面談到的要與品牌理念相符,傳達給用戶的感受一致,通過吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌圖形的方法來提取品牌基因。我們要試著從品牌設計的角度去理解,尋找自己產品獨特的品牌氣質,挑選合適的技法。然后把這些元素具象化,融入在界面設計中。

          兩萬字超強干貨!設計師必看的圖標設計指南

          那么,該如何提升品牌感,打造屬于自己App的獨特風格呢?品牌基因為我們提供了一些線索,這是近年來非常流行的一種趨勢。

          圖標的品牌感

          我們都知道圖標在APP設計中的重要性,但是打開許多APP你會發現他們的圖標設計都非常普通,似乎是在圖標網站上下載的素材。雖然一些優秀的設計師在進行圖標設計師加入一些諸如圓角、斷線等設計語言,但是仍逃脫不了與其他APP設計雷同、毫無個性的通病,使得UI看上去普通、不精致,缺少產品氣質。

          那么,該如何打造屬于自己APP的獨特風格呢?品牌基因為我們提供了一些線索。它是由平面設計中的VIS(視覺識別系統)引入的一種設計策略,通過對品牌形象進行延生設計形成一套完整的視覺符號。每一個APP都有其品牌形象,代表了與眾不同的氣質。接下來,我們就來學習如何利用品牌基因進行圖標設計。

          1. 提取品牌圖形

          通常一個App的第一個tab是首頁,是用戶進入App后看到的第一個頁面,最常見的圖標設計是一個小房子的圖形。首頁是App中最重要的頁面,承載了整個產品的核心功能,是用戶瀏覽最多的地方,因此使用一個讓人印象深刻的品牌圖形作為“首頁”圖標是必要的,不但使App內外形成了視覺聯系,同時也二次傳遞了品牌形象,加強了用戶對App的良好印象。例如網易云音樂的首頁標簽就直接使用了它的品牌圖形,其優點不言而喻。

          兩萬字超強干貨!設計師必看的圖標設計指南

          但是請注意,這種設計策略并不適合于所有的App,當第一個tab被賦予特定功能,就不可使用品牌圖形,否則用戶會難以理解。例如微信第一個tab是聊天列表,此時使用氣泡就比品牌圖形更加合適。

          還有另外一種情況。通常一個App的最后一個tab是個人中心,即“我的”。如果App的品牌圖形是動物圖形,也可以使用其整體或局部圖形來作為「個人中心」的入口圖標。

          2. 提取品牌色彩

          色彩也是圖標設計中重要的構成元素之一,合理協調的色彩搭配讓用戶在瀏覽頁面時感覺舒服。從品牌形象中提取色彩作為圖標設計的依據,可以給用戶帶來由內而外一致的視覺體驗。在設計時提取品牌色彩可適當調整色彩的飽和度,明度,既可以將圖形整體填充色彩(例如微信),也可以局部填充色彩,還可以填充為圖標背景色,使圖標之間形成色彩上的關聯。直播應用Bigo Live的品牌色是青藍色,在標簽欄的圖標設計上(選中態)將圖形局部元素填充青藍漸變色,活潑清爽的搭配帶給用戶輕快的感覺,與整體品牌調性高度一致。

          兩萬字超強干貨!設計師必看的圖標設計指南

          3. 提取設計語言

          在VI設計中通常提取輔助圖形作為設計元素,這在圖標設計中同樣適用,當所有的圖標都具備了相同的設計元素,他們就構成了一套完整的視覺符號。例如飛豬的品牌圖形就很特別,豬的頭部輪廓是由大寫字母F演變成的翅膀造型,因此可以看到“我的”小人圖標的也使用了類似的輪廓,這樣他們就形成了某種視覺聯系。

          兩萬字超強干貨!設計師必看的圖標設計指南

          4. 提取產品氣質

          品牌形象決定了產品的氣質,而產品的氣質決定了吸引什么樣的用戶。就如當我們第一次看到一個人的時候,往往會根據他的外貌形象特征,產生一個大致的印象,這就是一個人的氣質。APP也同樣,例如傳遞傳統手工藝人社交的「東家」,其產品流淌著古樸、溫潤、精致的人文氣息,它將宋體漢字的筆畫進行拆解組合,創造出具有東方韻味且極具形式感的圖標設計。

          兩萬字超強干貨!設計師必看的圖標設計指南

          5. 拆分品牌名稱

          App標簽欄圖標最常見的形式是圖形加文字的組合,由于文字本身就能傳達最直接的含義,因此圖形的識別性并不那么重要了,我們就可以在其視覺表現形式上賦予更多創意和個性。MONO是一款閱讀類App,它的標簽欄圖標直接將品牌名稱中的4個字母拆分成4個圖形。雖然每個字母與其對應的功能模塊本身并沒有直接聯系,但加上標簽文字的輔助也不會造成閱讀困難,而且產品本身的用戶人群就是比較能接受新鮮事物的年輕人,因此這樣的創意反而給App設計加分了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          6. 展開形象聯想

          我們日常使用的眾多App大多數都有著相同的功能模塊:首頁、發現、動態、我的等,因此也就出現了很多雷同的圖標設計。比如“首頁”是尖頂房子,“發現”是眼睛,“動態”是氣泡,如果有差別也只是設計風格的差異,有的直角有的圓角,有的線性有的面形。這樣的設計沒有品牌歸屬感,試一下將這些圖標單獨拿出來就無法判斷它是誰,它從哪兒來?

          兩萬字超強干貨!設計師必看的圖標設計指南

          優秀的設計師不僅要具備將圖標繪制精美的能力,還要具備豐富的設計想象力,不拘泥于設計規范的條條框框,有時候打破規則才能設計出優秀的圖標?!笆醉摗背诵》孔游覀冞€可以想到什么?馬蜂窩的做法就很巧妙,“首頁”圖標是“蜂巢”,而蜂巢是馬蜂的房子,這樣的設計與品牌形象緊密相連,簡直完美!不過的改版好像已經改沒了。

          兩萬字超強干貨!設計師必看的圖標設計指南

          知識點:

          總之,要想在繪制整套圖標時建立統一風格,就要從外觀和顏色上確立主風格,在局部尋求個性特征,將兩者結合,并融合產品屬性和符合用戶定位,先在腦海中構思出清晰的概念,然后在稿紙上繪制草圖,最后確立一個最佳方案上機完成,只有不斷地思考和打磨才能創作出最佳的設計方案。

          兩萬字超強干貨!設計師必看的圖標設計指南

          寫在最后

          圖標設計是UI設計中非常重要的環節,在尺寸有限的界面上,小小的 icon 可以更加簡單的表達含義,傳遞給用戶正確和友好的指引。建議每位UI設計師在平時做大量的練習嘗試各種不同的風格,以滿足不同的業務需求。另外,關于如何繪制keyline線,還有的iphone12樣機,有需要的同學可以出門右轉私信我。


          文章來源:優設    作者:印跡時光


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

          做設計能用到的三條設計曲線,學起來準沒錯!

          資深UI設計者

          作為人類,我們無法總是理性地看到事物的本質。社會心理學告知我們,人類的感知與決策,在一定程度上,會帶有偏差。而作為設計師,我們可以主動利用這些偏差,設計更好的產品。

          做設計能用到的三條設計曲線,學起來準沒錯!

          本文介紹了三條曲線,它們都將認知偏差做了可視化的表達,前兩個來自日常收集整理,后面一個由筆者總結工作經驗得出,下面開始吧。

          雙曲貼現

          1984 年,經濟學家 Mazur 提出模型:我們的大腦難以處理冗長的信息,因為不確定性隨著信息的增加而增加。隨著時間推移,我們對收益的感知下降。

          做設計能用到的三條設計曲線,學起來準沒錯!

          決策中,我們傾向于把長期的權重調低:無論是收益還是成本,只要時間夠長,我們都傾向認為它不夠重要。

          舉例來看:各大銀行如何吸引潛在用戶辦理信用卡?可以承諾在后期,提供專業的優質服務與購物優惠,也可以信用卡辦理完成的當下,讓用戶領取諸如行李箱、廚具套裝之類的禮品。雖然兩種方式都有可能吸引來用戶,但原本辦卡意愿相對低的用戶,大部分是被當下的禮品所吸引。換言之,這部分用戶是「額外的」。

          做設計能用到的三條設計曲線,學起來準沒錯!

          各大互聯網產品都深諳此道,比如購買會員的頁面,首月打折/首月免費/一年后付費都是慣用的手法,就在當下,給用戶利益,促進轉化。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:比起稍后的利益,我們更傾向當下給用戶一些甜頭,哪怕甜頭很小。

          峰終定律

          峰終定律由諾貝爾獎得主 DanielKahneman 提出:人們對于一段體驗的評價,取決于這段時間內最好的體驗,與結尾的體驗。我們的大腦最擅長「以偏概全」,它不會無差別收錄所有內容,只會去記錄離自己最近、讓自己印象最深的點。

          做設計能用到的三條設計曲線,學起來準沒錯!

          宜家是峰終定律最好的踐行者。顧客的購物流程中,差強人意的體驗不在少數。比如店員很少,難以及時獲得幫助,比如購物路線很長,對于有明確購物目的的顧客不太友好,比如永遠要排的結賬長隊等等。

          做設計能用到的三條設計曲線,學起來準沒錯!

          但是宜家把握了它的「峰&終」?!阜濉故沁^程中的小驚喜,比如隨時可以坐下體驗的沙發躺椅,比如偶爾出現的極便宜的家居用品,比如貼心的鉛筆與尺子;「終」就是結賬出口外,撫平顧客排隊焦躁的冰淇淋與熱狗。

          做設計能用到的三條設計曲線,學起來準沒錯!

          而這些產品宜家本可以提高售價,但卻沒有。因為用一個美味便宜的冰激淋結束購物之旅,糟糕體驗被拋到腦后,人們回想起宜家時,會選擇性地認為整個流程都非常棒。

          做設計能用到的三條設計曲線,學起來準沒錯!

          游戲產品也非常善于遵循峰終定律讓玩家玩得更盡興。比如疫情之后大熱的 Switch 健身環大冒險。

          做設計能用到的三條設計曲線,學起來準沒錯!

          運動時,系統會一直強力夸夸為玩家打氣,完成動作都會有及時的鼓勵給到,創造一個接一個的體驗「峰」值。每一次通過關卡,還會讓玩家站直并高抬雙手,將健身環舉過頭頂堅持幾秒,畫面里的「終」是非常有儀式感的 ending 動作,讓玩家成就感滿滿。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:在滿足了用戶的常規體驗之后,用心打造一些帶有巧思的設計,安排在流程的中間與結尾處,給用戶創造峰值體驗。這不僅有可能讓普通用戶轉化轉化成忠誠用戶,還能極大提高產品滿意度還能帶來口碑效應。

          徒勞曲線

          租房產品中,用戶在 APP 內挑選幾套心儀的房源,再約房東/經紀人去實地看房,是很典型租房用戶場景。我們發起「看房路線」這一功能的設計。使用看房路線,用戶能夠在選好x套房源后,根據智能規劃的看房順序與路線,輔以時間提示與導航,有條不紊地去實地看房,妥妥貼心功能。

          做設計能用到的三條設計曲線,學起來準沒錯!

          我們大費周章產出了設計方案,上線后的效果,無論是使用頻率與使用深度,都不理想。調研后發現,實地看房的場景,其實存在極大的不確定性。用戶在看房中途,可能做出決策租賃某一套,也可能被經紀人帶領去看別的房源,從而中斷原本的計劃。

          做設計能用到的三條設計曲線,學起來準沒錯!

          用戶是完全自由的,他們會尋求最熟悉、最好用、最穩妥的途徑去解決自己的非娛樂性問題。至于導航,用戶平時使用什么同類產品呢?高德地圖、百度地圖這類很成熟的地圖類應用。

          用戶不會因為場景不在專業的地圖APP內,就原諒打折扣的導航體驗。用戶預期遠高于實際產品開發程度,這種認知偏差,需要產品人來買單。

          做設計能用到的三條設計曲線,學起來準沒錯!

          總結這個功能的問題出現在哪里?其一,設計缺失,沒有將線下流程的旁枝側節考慮全面;其二,設計過度,但沒有成本去滿足用戶的高階需求。如何調整用戶的預期到合理的區間,我們做設計時的「度」怎樣把握,徒勞曲線應運而生。

          做設計能用到的三條設計曲線,學起來準沒錯!

          橫軸是設計投入程度,縱軸是用戶滿意度,隨著設計投入程度的加大,用戶的滿意度呈遞增態勢,但到了一定程度,滿意度會斷崖式下跌至谷底,這個階段的設計投入便是徒勞。當設計投入快到達極限時,滿意度又陡然到了一個新的高度。

          我們要將自己的設計置于一個合理的區間,并將用戶的期望調整同步。當有足夠成本支持(無論可觀支持抑或主觀爭?。r,把握機會,為用戶創造體驗。

          做設計能用到的三條設計曲線,學起來準沒錯!

          技巧總結:要引導用戶在使用產品的時候,對功能有合理的預期——如果不能提供完善的服務,就用樸素的設計方案滿足用戶的基本訴求,而非好高騖遠。在用戶有更加合理選擇的時候,給與用戶便利,尊重用戶的自由。這樣不太功利的思考與設計,很可能帶給你的產品帶來更快的迭代,與更多的用戶。

          雙曲貼現、峰終定理、徒勞曲線,三條曲線嘗試將人們的思維偏差暴露出來,利用得當,事半功倍。希望能帶給你一點啟發。


          文章來源:優設    作者:58UXD


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


          移動端橫向滑動的設計總結

          資深UI設計者

          所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的橫向內容滑動設計。用于在同一個頁面的 X 軸方向拓展內容空間,“左右橫滑”的交互方式被廣泛應用于各類 App 中。

          橫向滑動要解決什么問題?

          橫向滑動作為手勢交互的一個拓展,目的初衷是提升信息“內容和操作”的拓展性。

          1. “內容”拓展性:

          移動端的任何類型頁面內容都可能無法在一個界面呈現完整,因此滑動去呈現更多的內容,常見的當然是縱向滑動。但它無法承載所有類型內容呈現的問題,這個時候就需要橫向滑動來解決。

          2. “操作”拓展性:

          當一個頁面的內容已經是固定完整的,這時候需要用戶進行一些行為操作,如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現在界面上必然導致混亂,因此需要配合一些橫向滑動激發這些行為,從而保證界面的流暢體驗。

          目前橫向滑動的典型設計場景及利弊分析

          橫向滑動從移動端手勢出現到現在十幾年的時間已經有了非常典型的使用場景,接下來我們就來列舉一下有哪些常見的類型:以下從「清晰度、效果」兩個緯度進行分解

          超多案例!移動端橫向滑動的設計總結

          1. 入口型橫滑切換(手機主頁app、各大電商入口、banner…)

          解決內容拓展問題

          這類場景通常是用戶最熟悉的,不論從認知清晰度、效果角度都是不錯的,主要原因是場景曝光度非常高、頻次非常高;比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次;

          超多案例!移動端橫向滑動的設計總結

          2. 內容型橫滑切換(微視、垂直電商、地圖)

          解決內容拓展問題

          這類切換方式適合內容相對聚焦和單一的產品,比如垂直類電商:wish、唯品會,所有內容僅僅是通過類目來區分的產品;微視:內容統一為小視頻…;百度地圖:橫滑查看更大范圍地圖…;由于內容的高度統一和整合,因此切換難度低,但在認知的初期會稍有一定的門檻,原因是大部分app都是縱向滑動feeds流,而且用戶記憶是海馬記憶,不會特別清楚記得app的操作,所以新打開app和新用戶會有一個認知過程,但門檻不高。

          超多案例!移動端橫向滑動的設計總結

          3. 隱藏操作喚起

          解決操作拓展問題(管理列表、IM列表、通訊錄list…)

          解決操作問題

          在所有類型中的橫滑,只有這種方式不是瀏覽型手勢而是操作型,通常這類功能隱藏在列表中,為了保證列表信息的有效性和美觀度,選擇隱藏操作功能,由于是低頻操作,所以初期需要用戶發現并成功使用該功能;不過目前很多list頁面都采用這種通用的交互手勢,因此用戶并不難發現。

          超多案例!移動端橫向滑動的設計總結

          4. 模塊內容橫滑切換(餓了嗎\品質優選)

          最復雜也是最容易出現問題的

          解決內容拓展問題

          這是最容易出錯的一種場景,就是在整個界面中只有一個模塊采用橫向滑動,而其它內容又是縱向feeds流滑動;由于移動端內容的路徑多、入口多,因此用戶的核心操作流是:找入口——看信息——做任務;在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略,比如說:餓了么品質優選、唯品會二級類目、去哪兒旅游推薦…,這些案例其實是為了橫向空間拓展更多的內容而做此選擇,但通常情況下隱藏內容點擊率會驟降,很少有用戶耐心的橫滑瀏覽完成,因此設計師要嚴格把控數量以及內容的質量;在這里還有一種情況是很嚴重的,就是模塊級的橫滑內容與縱向列表之間有疊加交互,就會導致用戶反復在2中操作中完成任務,這一點非常不建議使用此手勢,當然以下案例并沒有這種情況。

          超多案例!移動端橫向滑動的設計總結

          橫向滑動的優點

          1. 幾乎能夠100%適配到所有設備,保持了一致性

          2. 為二級信息提供了展示空間,并且不占用頁面空間。

          比如在圖片畫廊里的圖片,橫向滑動可以讓用戶預覽內容,可以劃過或者點擊查看。

          3. 橫向滑動節約了縱向屏幕空間。

          而不是將所有內容都展示在一個很長的頁面??v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活?,F在,內容可以在橫向和縱向兩個方向同時展示。

          4. 橫向滑動可以讓用戶預知分類里的內容,通過往一邊滑、向下滑,差不不同類別的內容。

          兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。

          5. 橫向滑動的內容需要保持高質量和持續吸引力才能提升點擊轉化。

          慎用左右橫滑設計?

          1. 挑選合適的使用場景

          單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容(比如朋友圈或知乎的回答),而對于 App 首頁等多種信息聚合的頁面,就適合橫向開拓內容維度。

          2. 顯眼并適宜的主題展示

          3. 引導左右滑動(可見性)

          4. 控制數量并避免極限情況

          5. 低效率和錯誤的優先級

          設計師們都喜歡“左右橫滑”的設計,不僅因為信息密度大,頁面層次好梳理,更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”,因為它的效率還是太低。而效率低,體現在兩個方面:

          首先,就像上面說過的,更多的小白用戶對左右滑動的預期并不強,還是更加適應縱向滑動的傳統交互方式。違反了“Don’t Make Me Think”的基本原則。

          其次,縱向和橫向優先級常常導致預期錯誤。以下圖 App Store 為例,所謂的內容都是 App,泳道只是用不同的維度把 App 組織起來。

          如果你要購買其中一個資源位,你要更高優先級“泳道”中的第二屏位置,還是低優先級“泳道”中的第一屏位置呢?


          文章來源:優設   作者:Jingwhale Design


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


          日歷

          鏈接

          個人資料

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

          存檔

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