<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>

          首頁

          有沒有發現,‘點擊 ’開始變少而各種手勢越來越多了?

          seo達人


          圖片

          但隨著大屏手機的出現、逐漸追求個性化、高效率的操作等原因,使得不少人開始習慣用“摳邊返回”的方式返回上一頁:按住屏幕左側邊緣并拖動。

          圖片

          無需特意將手指移動到特定的左上角位置、再點擊back圖標,隨意在屏幕左側邊緣按住并拖拽 即可返回上一頁,方便又快捷。

          而且現在越來越多的手勢,賦予了用戶更多的操作自由與使用效率,也讓互聯網產品的生命力進一步得到了強化,給每個產品的功能體驗帶來了更大的發揮空間。

          圖片

          下面帶大家欣賞一下,各個手勢里好玩、優秀的互聯網設計案例。

          圖片

           

          一、雙指捏合

          1、捏一捏就能抱抱?

          之前網易(抑)云上線了一個很暖心的交互,在某條歌曲評論上用雙指捏一下,就會彈出一個“抱抱”的動畫,寫下這條評論的用戶就能收到一個“抱抱”。

          夠給那些生擁有悲觀情緒(特別是抑郁癥)的人求得心靈寄托,帶來一些溫暖、安慰,表達用戶情緒,也降低產品不良風評(網抑云)。

          圖片

          亮點在于:運用「環境貼切」原則,雙指捏合的手勢動作聯想到了現實里的「抱一抱」動作,更符合/表達出抱一抱的情感關懷和暖心情緒。

          觀點總結:產品不應該是冷冰冰的,應該給用戶探索更多的樂趣和溫度,通過「用戶關懷」助力產品口碑與印象的提升。

           

          2、捏一捏就能伸縮?

          iOS的相冊圖片,可以使用雙指捏合or分離 即可對圖片進行放大、縮小瀏覽,快速查看圖片細節。

          圖片

          免去用戶「需要點擊圖片后,再去縮放」的操作鏈路,大大減少操作路徑。但該交互更多符合國外操作習慣,國內還是習慣采用【點擊后再放大】方式放大圖片。

          亮點在于:用同一個模塊兼容多種交互/內容,免去用戶「需要點擊圖片后,再去縮放」的操作鏈路

          要點總結:可思考用一定的快捷操作來滿足不同水平的用戶需求,允許用戶定制常用功能,比如【快捷鍵、重新操作、默認值等】

           

          二、搖一搖

          1、搖一搖就能加載內容?

          愛奇藝在啟動頁上的信息展示上做了創新:只需“搖一搖”即可進入對應的廣告詳情和影視劇播放頁,拋離傳統的“點擊”模式

          圖片

          亮點在于:利用新鮮玩法來吸引更多用戶觀看廣告、影視綜視頻,減少對啟動頁內容的抵觸情緒與用戶流失

          要點總結:學會用趣味性交互 / 新的設計手法吸引用戶目光,利用新鮮感的驅使引導用戶參與,減少流失

           

          2、搖一搖才能拍照出片?

          喵喵記賬有個設計挺有意思的,按下相機拍照后,需要晃動手機來使相片成像,才能看到影像慢慢顯現。

          通過連接現實生活感受,使成像過程具備儀式感與趣味性。

          圖片

          亮點在于:不僅只在視覺上進行擬物化,更注重與現實中類似的交互操作,使之更具真實感。

          要點總結:系統的一切表現和表述,應該盡可能貼近用戶所在的環境,比如【用戶語言、使用習慣、手勢操作、生活聯想/隱喻等】

           

          三、拖拽

          1、一拖就能發送照片?

          QQ里的圖片發送很有意思,只要按住想要發送的圖片并往上拖動,松手即可發送。不用像傳統的’先選中圖片,再點擊發送按鈕’,特別方便

          對于發送單張圖片來說,免去了常規的跳轉頁面調取相冊的多余步驟,大大提升操作成本

          圖片

          亮點在于:利用手指的黃金操作熱區,賦予更加快速、便捷的操作方式,大大減少行為負荷

          要點總結:對用戶重要、常用的功能可以設置「快捷操作」,提升操作效率

           

          2、頭像還能拖出來玩的?

          在即刻的個人主頁里,可以隨意地拖拽、甩動自己的頭像。松手后頭像會根據慣性回到原處。期間還帶著殘影、原來的頭像位置會顯示一個小紅心。

          圖片

          亮點在于:利用頭像降低了個人中心帶來’冷冰冰’的感覺,豐富產品的可玩性與互動性

          要點總結:設計有趣的隱藏彩蛋,能給用戶帶來驚喜并有效拉進之間的距離

           

          四、雙擊

          · 哪里需要點哪里?

          早期在抖音上看視頻時,點擊或長按屏幕上的任何位置都會顯示【愛心圖標】與【操作浮層】。

          大大減少用戶的操作成本(手指與目光的移動),突顯產品的個性化服務。

          圖片

           

          2、雙擊就能控制彈幕?

          B站作為國內「視頻彈幕」的始發者,它的用戶喜愛程度與操作頻率也是極高的。因此只要兩個手指雙擊屏幕,就能快速開啟或關閉彈幕。

          用戶可隨時隨地開啟或關閉彈幕,無需特意找到右下角的固定入口進行操作,大大減少操作成本。

          圖片

          亮點在于:免去用戶需要點擊特定區域的操作負荷,增加產品操作的舒適與自由度

          要點總結:系統狀態可見性:讓用戶知道【自己在做什么、處在系統的什么位置等】,并做出適當的反饋

           

          五、滑動

          1、用標尺來控制數值?

          Florence里的標尺設計得很有意思,通過第一人稱下的鏡頭視角,讓用戶感知當前標尺所對應的人物清晰程度,以此來控制標尺位置。

          避免用戶掌握、控制不了合適標尺的位置,提升選擇效率

          圖片

          亮點在于:提供參照物可讓用戶有直觀的決策依據,減少操作成本

          要點總結:任何讓用戶更改/選擇的地方,都應該明確地傳達出預覽效果

           

          2、用拖拽來控制人物動作?

          Florence是一款‘模擬敘事’小游戲,里面很多的交互動作都模擬了真實生活:

          比如【刷牙】,需要左右滑動屏幕來模仿真實的刷牙動作;再如【做飯】也需要滑動平底鍋來模仿炒菜動作。

          圖片

          亮點在于:利用交互動作來推動情節的發展,讓玩家有真實的代入感,提升游戲的趣味性。

          要點總結:模擬真實生活/環境的設計,能有效提升用戶的理解能力、產品趣味性

          當然還有iOS微信上的‘刪除確認’,在原有的內容基礎上表達對用戶的二次確認,避免用戶手誤造成操作失誤,減少不必要的損失發生

          圖片

           

          六、隔空手勢

          華為Mate30pro 有個「隔空手勢」的交互,可以在距離屏幕20cm-40cm內進行手勢操作,如隔空翻頁、上下滑動、隔空截屏等。

          提升手機的使用體驗與操作效率,特別是邊吃東西 邊玩手機(追劇看小說等)

          圖片

          還有優酷HD上線了一個黑科技交互【隔空手勢】,可隔著屏幕用手勢做各種操作

          如「播放/暫停、全屏/半屏、快進/退15秒、亮度調節、音量調節」等操作,讓用戶不點觸摸屏幕就能操作視頻。

          圖片

          亮點在于:讓用戶解放雙手,無需手指觸摸到屏幕即可控制手機,可減少很多衛生問題與操作成本。

          要點總結:學會利用新技術來滿足更多、高層次的用戶訴求,通過一定的設計方式來滿足不同水平的用戶需求。

           

          – END

          最后,再酷炫再方便的手勢,最多也只是錦上添花、起方便快捷的作用而已,不可能完全替代‘點擊’的位置與作用。

          正如正文所說:手勢交互只適合用對業務重要、用戶常用的場景中,可以起到四兩撥千斤的,切記不可為了酷炫而隨便添加。

          以上老和對【手勢操作】的一些小總結,覺得認同的麻煩幫我【點贊/在看/收藏/轉發】,寫得不對的請輕點噴~


          作者:和出此嚴

          轉載請注明:學UI網》有沒有發現,‘點擊 ’開始變少而各種手勢越來越多了?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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



          你真的懂如何教育用戶嗎

          純純

          我們常常會發現:某個產品功能/活動上線推出后,用戶一看到就參與并使用;但你負責的某個產品功能/活動上線后,用戶并沒有按照產品或你的預期去做出相對應的行為——功能不使用、活動不參加、廣告看了沒反應…

          理想很豐滿,現實卻很骨感;你從產品體驗流程到視覺表現復盤了一遍后都沒有問題,但是為什么用戶對你的產品/設計感知度如此之低,為什么用戶不按照你預期的設計去做出對應的行為,為什么用戶對你的設計不感冒…明明無論是體驗流程還是視覺表現都沒問題,究竟是什么原因導致這樣的結果?你真的讓你的用戶感知到了嗎?你的用戶真的懂你的設計和流程了嗎?換句話說,你真的懂如何教育用戶嗎?

          無論是C端還是B端產品,都面臨著不同程度教育用戶的問題,這篇文章將從設計的角度出發,幫助設計師如何通過設計手段去正確地教育用戶



          產品教育的本質

          想要了解怎么正確地教育用戶,需要先了解產品教育的本質。什么是產品教育?產品設計的教育并不是單純地告訴用戶1+1=2,也不是讓用戶自己去完成2+2=4;產品教育的本質是說服,說服用戶使用你的產品,說服用戶按照你的預期來使用產品

          不管是C端還是B端產品,和用戶之間都存在著緊密相連密不可分的關系:



          簡單來說就是:用戶產生了訴求,有了訴求后就衍生出相對應的產品,有了產品自然而然就產生了衡量這個產品是否是真正被需要的目標和指標,然后產品匹配相對應的用戶去解決他們的問題,從而去達成產品的目標和指標來驗證這個產品是成功的


          在達成整個產品目標的過程中,存在不同階段的用戶群體,而這類用戶群體不同階段的心理在整個使用生命周期是不斷在迭代更替的:



          小如一個Banner的投放,大如一個新產品的上線,都會經歷「新增>轉化>裂變」這三個階段;站在用戶的視角,剛接觸這個新鮮事物的時候,存在不確定性因素,從而產生擔憂的心理——對新鮮事物有了一定的認知和了解后,會抱著懷疑的態度進行體驗流程——而無論處于哪個階段,核心都是為了服務產品的業務目標


          看到這里感覺一臉懵逼:各個產品類型行業不同,業務目標種類又那么多,那憑什么說教育好用戶就能幫助完成業務目標呢?這里又回歸到本文的主題——產品教育的本質是說服,說服用戶使用產品幫助你完成你的目標



          通過說服用戶打消顧慮和擔憂,對產品就完整清晰的認知,減少不確定性因素——說服用戶取消對產品的懷疑,降低行為成本,提升號召用戶行為從而減少轉化周期——說服用戶的自私心理,降低消耗成本從而提升裂變的可能性,最終整體助力產品達成業務目標


          舉個栗子:

          產品的業務目標是提升新功能的使用人數,而這類用戶群體屬于新用戶的轉化,具體影響使用新功能的因素很多,但是很多情況下會受到其他因素干涉,(比如基礎建設、原系統詬病等)但是在做設計決策的時候,就可以以教育引導用戶作為切入點:注冊就送XXX大禮包、邀請新用戶送XXX等等設計手段來完成業務目標



          LIFT模型

          這里可以引用兩個方法論來制定設計策略和設計方案,其中一個就是LIFT模型;LIFT模型的原理就是基于用戶的問題為基礎,設計有關問題的假設解決問題,從而提高產品的效益;而影響LIFT模型的六個因素分別為:價值主張、相關性、清晰度、緊迫感、焦慮感和注意力分散——簡單來說,可以把LIFT模型當作一架飛機,價值主張是這架飛機的機身,相關性和清晰度是飛機的機翼,焦慮感和注意力分散則是機翼上的推進器,緊迫感則是整架飛機的動力



          通過上圖可以明顯地感受到如何進行相關設計:通過提升相關性和清晰度,降低用戶的焦慮感和注意力分散,透傳產品的價值主張和緊迫感來教育引導用戶;在框架交互層面可以提升相關性、清晰度和降低注意力分散;在視覺表現層面可以傳遞產品價值主張、緊迫感;通常作為方法論的使用,存在單一的形式出現,也會以多種組合的形式使用,也就是我們常說的「組合拳」,我們可以在很多產品設計中看到具體設計手段使用的案例:



          這類通過直接透傳產品價值的場景我們很常見,往往在某個新功能/模塊上新時,都會見到此類場景;比如貝殼的VR功能,當前的業務目標是提升VR功能的點擊滲透,在新功能上線后自然要對用戶做教育引導,樣式上使用了強引導的樣式來強調新功能的入口,透過透傳功能的價值主張來引導教育用戶;

          百度網盤則是使用承接頁空狀態來透傳功能的價值主張,數據工具類型的產品往往核心的目標是為了提效和安全性,所以在宣揚價值主張方面以提效安全為核心



          而一些強教育場景,則會更加突出降低用戶焦慮的形式做設計,比如Focos的功能動態教育彈窗和有道云筆記的教育手冊,都是在降低用戶對產品理解的焦慮感



          還有一種是強制和用戶綁定,引導用戶完成流程體驗的沉浸形式,此類設計常規的產品幾乎很少使用,因為功能眾多會對沒有此類訴求的用戶造成強干擾,從而導致用戶流失;而游戲類任務和體驗師一致的,所以此類設計更多在手游中看到,強制引導你完成某個任務章節,一方面是為了教育引導,另一方面為了讓你盡快上癮,從而減少用戶的流失率



          支付寶的券商理財頁則是以「組合拳」的形式設計的,頭部通過文案+圖標的形式提煉出產品價值主張和展示產品的清晰度,順勢往下使用真實的場景設計,引發和用戶之間的情緒上的共鳴,再往下直接透傳人群,兩者上結合拉通和用戶人群的相關性;整體以展示產品價值主張,提升清晰度和相關性的形式設計


          以上就是LIFT模型在各類產品中的應用,根據不同的場景、業務目標和用戶訴求,使用單個或多種形式組合對用戶進行教育和引導,其核心是從用戶心理的根本上去達到產品的教育目的



          基于福格行為模型

          首先讓我們了解下福格行為模型是什么,福格行為模型的定義是表明一個行為得以發生,行為者首先需要有進行此行為的動機和操作此行為的能力,下一步如果他們有充足的動機和能力來施行既定行為,他們就會在被誘導/觸發時進行;說人話就是如果一個人有足夠的能力和動機,然后引導他做某個行為的時候,他自然而然就去做那個行為



          由上圖可以看出:對用戶來說使用越簡單,動機越強,觸發引導越強,那么用戶觸發行為的概率也就越大!動機是什么?動機簡單來說是好處——對用戶有利的東西,那用戶怎么知道這個東西對他有利呢,所以我們要對用戶進行傳達和教育——告訴他這個東西對你有XXX的好處

          那能力又是什么?用戶需要完成12345步操作才能拿到好處和用戶需要完成12步操作就可以拿到好處,當然第二種是更容易被用戶所接受的,那用戶怎么知道只需要完成12步操作就可以拿到好處呢,還是需要我們對用戶進行傳達和教育

          有了動機和能力,觸發器又是什么呢?就是前文提到的通過設計手段進行相對的產品引導;有了以上三個條件后,用戶就會按照你的想法意愿去完成操作行為,去幫助你完成你的業務目標



          為什么教育引導用戶是基于福格行為模型呢?還是用同一個案例來示意,貝殼VR看房業務目標是提升模塊點擊滲透率,這時候利用前文提到的LIFT制定好引導策略后,所提煉出來的價值主張對用戶來說就是產品給予用戶的好處,而能力方面只需要用戶進行單次點擊的交互行為,觸發器引導又實用了很強的區域高亮樣式設計,很大概率上引導教育用戶進行點擊行為,從而符合產品設計的預期,幫助你達成提升點擊滲透率的業務目標



          總結

          開篇說明了產品教育的本質就是說服,說服的流程就是展示好處,降低操作難度,在合適的時機觸發引導,而無論是展示、引導都離不開教育用戶;總結下來常用的設計方法就是基于福格行為模型的基礎,用LIFT模型制定引導教育策略,讓用戶行為符合你的設計預期,最后助力完成業務目標,拿到數據上的結果,才能體現設計側的價值



          說一句題外話,方法論能幫助設計同學套用并且快速產出方案,但是很多不同場景不同業務下情況不同較為復雜,雖然方法論是針對普遍大多數場景,但是不要過度迷信方法論;除了減少設計師本身的思考外,還容易讓設計師產生依賴,往往輸出的交互/視覺方案沒有思考沒有靈魂,自己本身沒有能力上的提升,往嚴重了說,自然而然核心競爭力也會下降,人人都可以替代你的位置

          而我們正確使用方法論的方法呢,就是將方法論作為參考;就好比方法論是系統推薦出裝方案一鍵天賦,系統一直推薦你堆護甲,對面4個魔法輸出,你不會靈活多變出魔抗,這怎么贏嘛?


          正確使用方法論首先能幫助我們自身樹立正確的思考方向,至少在方案產出的時候,在大的方向是沒錯的;其次要根據不同場景不同人群不同情況結合業務目標進行思考,最終形成自己輸出的完美方案,這樣才能體現出設計的價值,才能真正意義上的設計賦能業務


          作者:雨灰    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          構建產品的信任力設計

          純純

          上面的場景是否很熟悉?在我們日常生活中經常能聽到/看到這樣的話,但除了運氣好的那部分人,結局往往要么是「專柜不予驗貨」,要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽!SSR!出了新通行證出了新皮膚!買?。 ?;于是這部分人開始不相信任何相關的東西,開始大肆傳播,加上一些不法分子的違法惡意行為和新聞公安宣傳,最終導致社會上絕大部分的人樹立起了很嚴謹的防備心

          眾所周知無論是作為互聯網還是傳統行業,無論是金融還是電商亦或者是游戲社交等等,想要賺錢,構建平臺和用戶之間的信任是必然的。如果你無法和用戶構建信任關系,那誰還指望用戶使用你的產品去消費(金錢/時間)呢?

          在產品設計當中,作為設計師的我們如何去和用戶構建信任關系,怎樣通過設計細節去逐步影響甚至改變用戶,這個話題是我最近在研究的東西,通過解析市面上的產品如何通過設計去構建用戶的信任關系,提煉出我們如何在產品設計當中去打造信任感



          信任力

          首先來了解一下作為互聯網的產品中信任力是如何產生的:用戶要想對產品產生信任感,必須建立一個完善俱全的產品心智。(具體的心智設計在我之前有篇文章已經詳細介紹過了,這里不再過多闡述)先上結論,當一個用戶從普通的態度到信任一款產品,這個過程是基于「認知」、「情緒」和「態度」建立的


          這個過程在不同的場景所建立的時長也不相同,售賣場景當中是最常見的。舉個例子,我們經常會在菜市場大街上看到有人吆喝賣菜刀、塑料盆各種東西,站著一圈兒人圍觀,然后會看到賣家為了展示自己商品的賣點,會很賣力地把塑料盆摔地上以此來吸引注意和展示賣點;這樣能在極短的時間內改變消費者的情緒和認知,從而改變消費者的態度,以建立消費者對產品的信任,最終提升下單轉化率。說人話就是:“我這個盆怎么摔都摔不壞,不信我吧唧摔給你看,快買它!?。 ?

          在用戶建立了與產品的心智之后,才會產生相關的信任力,從而產生相關的行為



          信任行為的途徑

          了解原理之后,那么來看一個基本的問題:信任的行為是如何產生的?用戶建立了和產品的信任心智后,怎么產生相對應的行為,主要依靠三種途徑:「第一手經驗」、「可靠的建議」和「基于理智的理解」


          基于他人的經驗

          這個途徑是日常生活中最常見的讓人信任某人或某物的方式,比如你的好朋友或者同事告訴你:XXX地方吃飯服務超棒,味道超正宗…那么基于你對好朋友或同事的關系以及他嘗試過的經驗,你會大概率選擇去那家店試一試。通過自己熟悉的人或事,在基于過去成功的經驗下,人們會再次選擇相信這類人的經驗


          這類情況在互聯網的場景中往往以KOL帶貨、探店等形式存在,早些年的小紅書微博探店測評,到近來越來越火的直播短視頻;都是基于人們在對自己信任的KOL面前,選擇信任相對應的產品或消費場景。諸如「我喜歡的明星都用這個,我跟著買肯定沒錯~」、「天不怕地不怕,就怕他李佳琦說Oh my God!」之類,都是由平臺借助KOL和用戶群體建立的信任關系,也就是我們常說的「種草」



          如果沒有喜歡的KOL怎么辦,那就建立以自己為中心輻射的社交圈,通過自己認識的人去建立深度的信任關系,比如我們最熟悉的朋友圈種草,拼多多核心的拼小圈和淘寶的淘友圈;基于自身為圓心,利用用戶的從眾心理和窺探欲建立的關系鏈,從而幫助平臺建立與用戶的信任關系



          基于可靠的建議

          基于他人經驗僅限于熟人或為了解的人所建立的關系鏈,詬病往往是必須依附于熟悉的過程,這個過程是有一個時間的,但是很多場景下并沒有那么多時間和條件給用戶去建立信任這個過程,所以出現了多種讓用戶通過陌生渠道快速建立信任關系的形式


          1.品牌的力量  我們經常看到市場上品牌做升級更新,也能看到天價的品牌設計,因為品牌是對產品或者服務的一種保障,因為這種保障我們更傾向于使用該品牌的產品,因為良好的產品使用體驗,我們更加信任該品牌,形成一個正向的循環。而互聯網產品更加熱衷于此,比如早些年的淘寶因為假貨、刷好評曾讓平臺信任感一度降低,于是有了后來的天貓品牌;比如京東的自營標,得物的專業鑒定等,無一不是借助品牌的力量建立用戶和平臺的信任關系



          2.陌生渠道詳細的經驗  電商產品力商詳頁的評價系統相信大家一定不會陌生,如果有心關注的話,會發現評價系統一直在經歷著改版:從起初的「好中差評」到現在種類繁多的評價,都是在針對信任感一直在迭代優化,并且是一條長線的迭代。加深用戶對產品快速地信任,電商產品分階段性地在優化評價體系。拼多多在前置鏈路當中,強引導確認收貨后的用戶進行評論反饋(具體在點擊「確認收貨」后跳轉至評價頁面強制拉起鍵盤進行輸入),而阿里系產品淘寶、餓了么等在前置鏈路當中以積分獎勵的形式,鼓勵用戶寫真實的評價;在后置鏈路中,強化了好評的信息,展示了「回頭客」這一概念,一方面展示了產品的真實性,向用戶傳遞二次復購的用戶;另一方面,打消了用戶對店鋪花錢雇人刷好評的顧慮



          3.專業的權威  常見于金融、政府相關的項目產品中,借助當地政府、專業權威機構的威信來和用戶建立信任關系,有相關的組織機構做背書,此類產品的用戶在整個流程中更容易做出決策;比如支付寶和地方政府的合作,寺庫和美國GIA專業鑒定機構的合作等



          基于理智的理解

          對于從未看過或者聽說過的某個產品,可以通過讓用戶了解其工作原理來建立信任,簡單來說就是「脫光了給用戶看」;有且重要的一點是,不能因為產品的易用性而覺得可忽略像用戶解釋你的產品。因為如果用戶「感知」到自己不了解產品本身,那么即便是別人推薦的,依然存在部分用戶不信任產品


          舉個簡單的例子:在互聯網各類產品建立的初期,沒有品牌,沒有背書,獲取的信息讓用戶感覺自己的隱私被暴露,存在自己的隱私數據泄漏等問題;如果向用戶展示產品的詳細的信息,會讓用戶更加的安心。比如Uber或滴滴新生的時候,品牌尚未建立,在打車前讓用戶明確詳細地了解用戶信息、車輛信息、駕駛員信息以及安全規則后,用戶才會更加安心地使用產品



          如何通過設計建立產品的信任力

          闡述了用戶對產品建立信任的原理和途徑,那么作為設計師的我們,如何在自己的產品設計當中,去和用戶建立信任感并且維護信任關系,可以看看成功的產品怎么做的


          展示品牌權威標示

          在視覺的呈現上向用戶直觀地展示相關的品牌、權威機構的標示等,能在極短的時間內改善用戶的認知和態度,從而建立起短暫的信任感;常見的此類設計在網頁設計、運營視覺中比較常見,比如官網的合作方露出,聯名活動的品牌展示等



          產品設計的一致性

          為什么大公司有很多規范,從柵格到彈窗到動效,在整個產品體驗的過程中,讓用戶感知到是在一個產品中完成的流程就是產品設計的一致性,為什么要做一致性,因為要增強品牌感和產品體驗的舒適度,目的就是讓用戶依賴于品牌產品,建立起無法分離的信任關系



          構建信任的樞紐

          從整個流程的開端到結束制定一系列的體驗來構建信任的樞紐,用拼多多的拼小圈來舉例,從最初的引導開始,向用戶透出熟悉的頭像信息引導用戶點擊觸發,然后簡單地向用戶告知產品的詳情,接著通過無處不在的用戶頭像和標簽建立信任關系,利用用戶「好的、知道了等」認知慣性去影響用戶的行為,最后通過K歌影集等功能鞏固信任關系,增強用戶粘性,實現整個樞紐的體驗閉環(不得不感嘆多多在構建信任感這一塊真的很厲害~)



          再嗶兩句

          在整個互聯網大環境下,針對存量精細化運營戰中,信任關系是有效轉化的關鍵,也是企業和品牌傳播的第一生產力。能否獲取用戶信任,將會成為企業商業價值大小的核心判斷標準;站在用戶的視角,只有信任了某個產品,才會將自己的隱私信息等向企業開放,從而產生一系列消費、轉換等行為;自媒體直播短視頻在拓展業務和平臺的合作中,增強了用戶與之間的粘性,而這一切,所有的原點都在于信任

          上面的場景是否很熟悉?在我們日常生活中經常能聽到/看到這樣的話,但除了運氣好的那部分人,結局往往要么是「專柜不予驗貨」,要么是「吃啞巴虧被人割一波韭菜」或者要么是「十連抽!SSR!出了新通行證出了新皮膚!買??!」;于是這部分人開始不相信任何相關的東西,開始大肆傳播,加上一些不法分子的違法惡意行為和新聞公安宣傳,最終導致社會上絕大部分的人樹立起了很嚴謹的防備心

          眾所周知無論是作為互聯網還是傳統行業,無論是金融還是電商亦或者是游戲社交等等,想要賺錢,構建平臺和用戶之間的信任是必然的。如果你無法和用戶構建信任關系,那誰還指望用戶使用你的產品去消費(金錢/時間)呢?

          在產品設計當中,作為設計師的我們如何去和用戶構建信任關系,怎樣通過設計細節去逐步影響甚至改變用戶,這個話題是我最近在研究的東西,通過解析市面上的產品如何通過設計去構建用戶的信任關系,提煉出我們如何在產品設計當中去打造信任感



          信任力

          首先來了解一下作為互聯網的產品中信任力是如何產生的:用戶要想對產品產生信任感,必須建立一個完善俱全的產品心智。(具體的心智設計在我之前有篇文章已經詳細介紹過了,這里不再過多闡述)先上結論,當一個用戶從普通的態度到信任一款產品,這個過程是基于「認知」、「情緒」和「態度」建立的


          這個過程在不同的場景所建立的時長也不相同,售賣場景當中是最常見的。舉個例子,我們經常會在菜市場大街上看到有人吆喝賣菜刀、塑料盆各種東西,站著一圈兒人圍觀,然后會看到賣家為了展示自己商品的賣點,會很賣力地把塑料盆摔地上以此來吸引注意和展示賣點;這樣能在極短的時間內改變消費者的情緒和認知,從而改變消費者的態度,以建立消費者對產品的信任,最終提升下單轉化率。說人話就是:“我這個盆怎么摔都摔不壞,不信我吧唧摔給你看,快買它?。。 ?/strong>

          在用戶建立了與產品的心智之后,才會產生相關的信任力,從而產生相關的行為



          信任行為的途徑

          了解原理之后,那么來看一個基本的問題:信任的行為是如何產生的?用戶建立了和產品的信任心智后,怎么產生相對應的行為,主要依靠三種途徑:「第一手經驗」、「可靠的建議」和「基于理智的理解」


          基于他人的經驗

          這個途徑是日常生活中最常見的讓人信任某人或某物的方式,比如你的好朋友或者同事告訴你:XXX地方吃飯服務超棒,味道超正宗…那么基于你對好朋友或同事的關系以及他嘗試過的經驗,你會大概率選擇去那家店試一試。通過自己熟悉的人或事,在基于過去成功的經驗下,人們會再次選擇相信這類人的經驗


          這類情況在互聯網的場景中往往以KOL帶貨、探店等形式存在,早些年的小紅書微博探店測評,到近來越來越火的直播短視頻;都是基于人們在對自己信任的KOL面前,選擇信任相對應的產品或消費場景。諸如「我喜歡的明星都用這個,我跟著買肯定沒錯~」、「天不怕地不怕,就怕他李佳琦說Oh my God!」之類,都是由平臺借助KOL和用戶群體建立的信任關系,也就是我們常說的「種草」



          如果沒有喜歡的KOL怎么辦,那就建立以自己為中心輻射的社交圈,通過自己認識的人去建立深度的信任關系,比如我們最熟悉的朋友圈種草,拼多多核心的拼小圈和淘寶的淘友圈;基于自身為圓心,利用用戶的從眾心理和窺探欲建立的關系鏈,從而幫助平臺建立與用戶的信任關系



          基于可靠的建議

          基于他人經驗僅限于熟人或為了解的人所建立的關系鏈,詬病往往是必須依附于熟悉的過程,這個過程是有一個時間的,但是很多場景下并沒有那么多時間和條件給用戶去建立信任這個過程,所以出現了多種讓用戶通過陌生渠道快速建立信任關系的形式


          1.品牌的力量  我們經常看到市場上品牌做升級更新,也能看到天價的品牌設計,因為品牌是對產品或者服務的一種保障,因為這種保障我們更傾向于使用該品牌的產品,因為良好的產品使用體驗,我們更加信任該品牌,形成一個正向的循環。而互聯網產品更加熱衷于此,比如早些年的淘寶因為假貨、刷好評曾讓平臺信任感一度降低,于是有了后來的天貓品牌;比如京東的自營標,得物的專業鑒定等,無一不是借助品牌的力量建立用戶和平臺的信任關系



          2.陌生渠道詳細的經驗  電商產品力商詳頁的評價系統相信大家一定不會陌生,如果有心關注的話,會發現評價系統一直在經歷著改版:從起初的「好中差評」到現在種類繁多的評價,都是在針對信任感一直在迭代優化,并且是一條長線的迭代。加深用戶對產品快速地信任,電商產品分階段性地在優化評價體系。拼多多在前置鏈路當中,強引導確認收貨后的用戶進行評論反饋(具體在點擊「確認收貨」后跳轉至評價頁面強制拉起鍵盤進行輸入),而阿里系產品淘寶、餓了么等在前置鏈路當中以積分獎勵的形式,鼓勵用戶寫真實的評價;在后置鏈路中,強化了好評的信息,展示了「回頭客」這一概念,一方面展示了產品的真實性,向用戶傳遞二次復購的用戶;另一方面,打消了用戶對店鋪花錢雇人刷好評的顧慮



          3.專業的權威  常見于金融、政府相關的項目產品中,借助當地政府、專業權威機構的威信來和用戶建立信任關系,有相關的組織機構做背書,此類產品的用戶在整個流程中更容易做出決策;比如支付寶和地方政府的合作,寺庫和美國GIA專業鑒定機構的合作等



          基于理智的理解

          對于從未看過或者聽說過的某個產品,可以通過讓用戶了解其工作原理來建立信任,簡單來說就是「脫光了給用戶看」;有且重要的一點是,不能因為產品的易用性而覺得可忽略像用戶解釋你的產品。因為如果用戶「感知」到自己不了解產品本身,那么即便是別人推薦的,依然存在部分用戶不信任產品


          舉個簡單的例子:在互聯網各類產品建立的初期,沒有品牌,沒有背書,獲取的信息讓用戶感覺自己的隱私被暴露,存在自己的隱私數據泄漏等問題;如果向用戶展示產品的詳細的信息,會讓用戶更加的安心。比如Uber或滴滴新生的時候,品牌尚未建立,在打車前讓用戶明確詳細地了解用戶信息、車輛信息、駕駛員信息以及安全規則后,用戶才會更加安心地使用產品



          如何通過設計建立產品的信任力

          闡述了用戶對產品建立信任的原理和途徑,那么作為設計師的我們,如何在自己的產品設計當中,去和用戶建立信任感并且維護信任關系,可以看看成功的產品怎么做的


          展示品牌權威標示

          在視覺的呈現上向用戶直觀地展示相關的品牌、權威機構的標示等,能在極短的時間內改善用戶的認知和態度,從而建立起短暫的信任感;常見的此類設計在網頁設計、運營視覺中比較常見,比如官網的合作方露出,聯名活動的品牌展示等



          產品設計的一致性

          為什么大公司有很多規范,從柵格到彈窗到動效,在整個產品體驗的過程中,讓用戶感知到是在一個產品中完成的流程就是產品設計的一致性,為什么要做一致性,因為要增強品牌感和產品體驗的舒適度,目的就是讓用戶依賴于品牌產品,建立起無法分離的信任關系



          構建信任的樞紐

          從整個流程的開端到結束制定一系列的體驗來構建信任的樞紐,用拼多多的拼小圈來舉例,從最初的引導開始,向用戶透出熟悉的頭像信息引導用戶點擊觸發,然后簡單地向用戶告知產品的詳情,接著通過無處不在的用戶頭像和標簽建立信任關系,利用用戶「好的、知道了等」認知慣性去影響用戶的行為,最后通過K歌影集等功能鞏固信任關系,增強用戶粘性,實現整個樞紐的體驗閉環(不得不感嘆多多在構建信任感這一塊真的很厲害~)



          再嗶兩句

          在整個互聯網大環境下,針對存量精細化運營戰中,信任關系是有效轉化的關鍵,也是企業和品牌傳播的第一生產力。能否獲取用戶信任,將會成為企業商業價值大小的核心判斷標準;站在用戶的視角,只有信任了某個產品,才會將自己的隱私信息等向企業開放,從而產生一系列消費、轉換等行為;自媒體直播短視頻在拓展業務和平臺的合作中,增強了用戶與之間的粘性,而這一切,所有的原點都在于信任


          作者:雨灰    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          精一技or擅百技?內卷時代下的原型工具應該怎么做

          純純

          大家對原型工具應該不陌生,無論是設計師還是產品經理,或多或少都接觸過原型圖的工具,比如較為大眾熟知的Axure,國內運用較為廣泛的墨刀和摹客,以及一些較為小眾的產品。不難發現,大多數工具類產品的運作模式幾乎都如出一轍:先免費使用一段時間,養成了用戶認知和習慣后,逐步開始投放廣告或者收取費用變向商業化——原型工具產品自然也脫離不了這種運作模式。所以在這個內卷時代下,各大原型工具相繼脫穎而出,前段時間體驗了一下摹客RP,這次就結合摹客RP這款原型工具產品來聊聊:內卷時代下工具到底應該怎么做

          精一技or擅百技?


          要說怎么做一款產品,首先先確立這款產品的定位和方向,如果定位和方向上不對,自然后續鋪墊的功能還是需求都是在錯誤的事情上繼續做錯誤的事情,相信這是每一個產品人都不愿看到的。但往往理想很豐滿,現實卻很骨感:結合自己的從業經歷,很多時候產品定位和方向是很難先做到清晰,然后才開始鋪設功能的;一般情況都是跟從競品功能,快速拿到結果,才開始結合自身業務特效慢慢摸索產品定位和方向的

          眾所周知,作為B端屬性的工具類產品,最為重要的無非就兩點:降本和增效,這兩點向來是B端尤其是偏工具類產品的核心目標;那么如何降本和增效呢?有人說降低操作成本啊,降低認知成本啊,降低學習成本啊,那到底降的是什么本?增效又是增的什么效?

          從上圖可以看出,無論是降人力成本、認知成本等等,還是增加學習效率、體驗效率等等,所有對象都指向了用戶群體。有人就會問了:你這不是廢話嘛,工具不就是給用戶用的嘛?誒~還真不一樣!用戶群雖然特指一個群體,但是隸屬不同目標下,自然而然也有類別區分

          為什么這樣說,因為不同的用戶群有不同的功能訴求;用戶A通過產品想達成目標A,用戶B通過產品想達成目標B,那么用戶A和用戶B從根本的目標不相同,那么他倆的體驗路徑和信息傳達也是需要有不同
          的區分的,簡單來說就是用戶達成的目標不同,想看到的頁面和功能也不相同

          把工具產品比喻成一個小中臺來說,所有用戶都是中臺的需求方,不同需求方的目的不同,但是作為小中臺來說都是需要同時滿足的。以摹客RP來舉例,作為一款協作產品,用戶群可大致分為產品經理、UE設計師、研發等,而針對不同的用戶群目標來看,產品經理的核心目標是快速通過原型具像化產品功能,而UE設計師則是通過產品經理的思想以圖形化的形式表達出來,而身為研發的核心目標是快速了解業務邏輯,以便構思開發結構

          擅百技?


          綜上所述來看,無非就是針對不同的用戶群體的需求都滿足嘛,我都把功能給你做上去不就好啦?表面上的確滿足了所有用戶群的需求,可事實上無形將各類的成本分攤給了各個用戶,怎么理解呢?大家可以腦補想象自己作為一名維修工,此時你急需把一顆梅花口的螺絲給取出來,這時候你來到工具間,你最希望看到下圖中哪個場景?

          毋庸置疑大家肯定都會選擇右邊那個工具間,因為功能排列整齊有序,不管你維修工是水電維修還是建筑維修還是網絡維修,都能在這個工具間找你能幫你完成你的目標。這便是所謂的擅百技——基于用戶群的需求全部將功能一一實現

          還是以摹客RP舉例,當不同用戶群進入平臺,功能排列整齊有序,都有足夠的區域和節點幫助用戶群實現各自的目標,產品經理能通過組件庫、模板等快速輸出原型圖,UE設計師則能通過多樣的圖形、動效等實現高保真交互稿,團隊方面則有快捷拉起會議、在線留言等功能;所謂是將目前市面上幾乎所有原型工具功能,結合自身的發展沉淀做出的平臺
          可是,擅百技就足夠了么?換句話說,當你在找梅花口的的起子時,你會希望看到平口起子在眼前對你進行干擾嗎?

          精一技?


          既然你說擅百技不好,那么接下來你是不是以為我會走極端,那就只針對產品經理做一款原型工具精一技不就好了?大漏特漏!雖說術業有專攻,互聯網時代咱們包容性廣,咱不走極端,在每個用戶群的功能需求上更聚焦精細化不就行了,精一技不夠,咱們就精百技,每一個功能打磨透透的,卷到極致這樣夠不夠了?
          這樣做OK,內卷時代下大家都是這樣做的,但是會帶來一個新的問題:
          在多維全局視角下,體驗成本實際上均是嫁接分攤于各個角色的
          怎么理解這個問題呢?可以看到下面一張圖示意:

          從二維視角下來看,各個角色以目標核心出發各司其職,通過工具平臺功能都能很好實現目標;但是我們不妨拔高一層視角來看看:

          以多維全局視角來看,雖然各個角色各司其職完成了自己的目標,但是基于產品使用層完全是由平臺承載的,導致了各個角色的使用成本嫁接分攤給了其他角色,簡答來說就是:
          角色A完成對應目標時,存在角色B和角色C的信息干擾,那么角色A無形中分攤了角色B和C的成本
          舉個例子:產品經理打開原型工具后,想直接拖動下拉框組件搭建一個產品原型,這時候選中下拉框組件想進行文案編輯,此時彈出了下拉框組件對應的編輯面板:字號、字色、字體、行高、字間距等等,然后其中部分功能則屬于設計同學關注的,例如字體、字色、字間距等,但是此類成本則分攤給了產品經理,產品經理在整個搭建原型的過程中,增設了過濾這些信息的成本

          那有人就會說了,這很簡單啊,可以直接做成個性化定制工具平臺啊,根據每個角色身份不同進來設計師進來就只看到和設計相關的功能,產品經理進來就只看到和產品相關的功能不就好了?而且我把每一個角色對應的功能做到專精,是不是就精一技且解決問題了?

          我要打十個!


          看到這個標題大家可能會想到我們的詠春葉問老師,無論對手學的什么招數、有多少個人,葉師傅都能一人單挑全部,然后撂下一句霸氣的:“我要打十個!”
          收一收,繼續回來我們的主題上來,是否將工具平臺做成個性化定制平臺并且其中功能都打磨細致,就能解決工具降本增效的問題了?其實不然,問題不能想得太復發,當然也不能想得很簡單,都知道用戶需求是分階段而不同的,可能產品經理A不需要設置字號大小顏色,但是產品經理B為了今年績效決定卷一卷同事,立志要出“高保真原型”,開始設置起了字號大小顏色,此時平臺功能又被局限住了
          那么究竟應該怎么做呢?不妨把眼界跳出同類競品Axure、墨刀等,結合不同多角色并行的工具搭建類產品做競品調研,得出兩個不同的產品方向思路:

          思路1是像葉師傅詠春拳一樣,見招拆招:平臺以通過不同身份拆分成不同時間段進行角色管理
          大致以上中下游角色進行功能分發,例如產品初期,上游的產品視角進入平臺,基礎的團隊管理、項目管理、關聯PRD等,然后進行聚焦產品原型搭建;之后流到中游由設計師進行二次加工,包括高保真原型稿、交互動效、串聯頁面跳轉等;最后流到下游研發團隊視角,研發通過已經二次加工過的高保真設計稿進行框架搭建、前后端接口串聯等開發評估
          站在平臺的視角來看,綜上所述產品方向可拆解為:
          時間維度:核心解決降本問題,包含時間成本、溝通成本,更加以維度追溯問題(產品問題追溯上游、設計問題追溯中游等等)
          角色維度:核心解決增效問題,減少信息干擾、提升操作效率、溝通效率和協作效率

          思路2則是基于前面個性化定制工具平臺的思路上進行優化改造的,通過不同角色視角進入不同的工具平臺,通過數據打通串聯實現多角色同平臺操作,減少時間維度上的強依賴關系
          例如產品進入平臺,依舊是創建項目、管理團隊等,然后開始進行產品形態輸入和原型搭建,之后UE同學便能在同平臺看到協作項目進行產出或者進行二次優化,最終通過管理員權限人員進行收口;其次針對平臺來說,不斷更新同步的數據,能間接豐富平臺的多元化

          無論是思路1還是思路2,不難發現:將原型工具的核心目標降本和增效,往上抽象出一層就是圍繞兩個維度在解決問題:一個是具備時效性的時間維度,一個是具備多元性的角色維度。從上圖可以感知到:不同時間節點,不同角色介入的時間隨著時間維度的增加而變化
          因為整個項目周期,不同職能的角色一定會有先后順序,那么有了這一層抽象以后,無論你的需求刻畫多么具體,無論你的case多么邊界,只要緊貼圍繞這兩個維度進行優化,都是從本質上解決工具平臺的降本和增效問題

          作者:雨灰    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          聊一聊所謂的B端C化

          純純

          最近很流行一個詞——B端C化,解釋出來就是可以用C端的模式和思維來對B端產品進行設計,討論者大致分為兩種觀點:

          1.C端產品市場已經趨于飽和,可拓展空間剩余不多了,B端產品市場還是一片藍海,于是產生了一些C端設計師轉型去做B端了,將一些C端的模式和思維帶到了B端設計中,導致越來越多的B端逐漸C化;

          2.B端產品市場互相競爭,為了在同市場中打出差異化,于是一些B端市場開始招攬C端設計師培養轉型,并且嘗試融入C端產品的模式和思維在同市場內競爭,是產品設計的“內卷化”現象,導致市面上的C化的B端產品越來越多;

          但上述無論哪一種觀點,都在闡述一種現象或者趨勢:不管是交互還是視覺還是UI,目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求,進而導致對市場培訓行業開始產生B端培訓的訴求,同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么,和傳統B端C端有什么區別,有這方面想法訴求的同學怎么去實現轉型?

          由于我本人之前是做C端UI設計師,到后來轉型成為B端交互設計師,而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作,所以這篇文章借助結合我個人的經驗和看法,談一談自己對B端C化的理解



          B端C端的區別

          在談B端C化之前,需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了,大致歸納下來主要以四個維度去區分:受眾主體、上線周期、業務類型和產品側重點這四個維度,其余的維度也會有區分,但是影響較小,主要還是圍繞以上四個維度進行B端和C端區分



          受眾主體

          受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶,特征為多樣化,用戶與用戶之間跨度也大,但是場景和路徑較為單一的,比如C端產品就以年齡層、城市、性別等來劃分用戶,每個階段的用戶都有不同的訴求、認知和習慣等等;在做任何決策方面都屬于偏感性(Heart)的個人決策(Personal);用戶穩定性則比較差,要是對產品不滿意,可以立馬換另一款產品,轉換門檻低,有多個競爭對手產品可供選擇;

          而B端產品的受眾主體則是為組織群體,特征為多場景和多維度,用戶群體較為清晰明確,可以按照崗位、角色、權限等劃分用戶群,但是之間的關系更加復雜,比如設計一個銀行內部管理系統,用戶群就很明確清晰——銀行各級職員角色,根據職級關系設計不同的功能以及權限;在做任何決策方面都屬于偏理性(Head)的團隊性決策(Team);用戶穩定性較強,要是對產品不滿意,也只能被迫適應和忍受,轉換成本較高,幾乎沒有其他產品可供選擇



          上線周期

          上線周期就是指產品從需求階段到設計階段。到開發階段直至最后產品上線所需要的周期。C端產品上線周期模式有個很明確的特點:快速迭代、敏捷,很多C端產品功能更新迭代的速度很快,上線周期非常短,往往半個月甚至一周就完成開發上線,加上用戶群的多樣性和跨度大,所以在上線的時候往往會需要AB實驗去驗證方案可行性;

          B端產品上線周期則是和C端一個對立面——長,少則雙月/季度多則半年/一年等,因為B端產品流程上都屬于重型流程,角色之間關系復雜,交互系統較為繁瑣,需求的改動和迭代并沒有那么頻繁,也不需要像C端產品那樣快速上線搶占市場,所以B端上線周期會很慢,也導致在工作強度上相比C端較為輕松一些,但是缺點就是結果沒有C端來的那么快和明顯



          業務類型

          C端產品的核心競爭力就是產品本身,關鍵總結就是讓用戶爽就完事了,所以C端產品的需求類型往往圍繞用戶群的痛點產生;因為C端用戶跨度大,不同的用戶群體有不同的痛點,所以導致C端的需求類型不是很明確清晰,需要不斷從用戶身上去探索挖掘需求,在不斷的試錯中逐漸得出正確的結論;

          B端產品的核心競爭力除了產品本身,還依賴復雜的關系、渠道、技術和資源,你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富,哪怕你的產品很一般,一樣能領先其他同行業的競爭對手,關鍵總結下來就是讓用戶贏就夠了;B端產品的需求類型雖然也是圍繞著用戶群的痛點產生,但需求的目標是更加明確清晰的,加上需求變更的頻率、范圍往往都有契約/合同所約束,所以相較于C端產品來說,B端產品是需求更加明確且容易達成目標



          產品側重點

          產品側重點無異于區分C端和B端最明顯的門檻了,C端產品的側重點主要在于體驗,而B端產品的側重點主要在于效益

          前面提到過C端產品核心讓用戶爽就完事了,加上基于用戶更換產品的成本很低:你這款產品我用不爽就換掉了,所以C端產品的側重點永遠以用戶體驗為主,前面說的需求業務類型也幾乎是圍繞用戶體驗產生的;大家對比市場上同類型的C端產品,界面、交互、功能都不會差很多,是因為經過長時間的更新迭代,已經沉淀下來目前最好的用戶體驗類型了,隨著產品量級越大,改變用戶體驗類型就越謹慎;C端產品就是為了尋找并解決用戶痛點、癢點和爽點,加上品牌性、用戶隱私等因素考量,產品側重點聚焦于用戶體驗

          B端產品側重點則是圍繞效益了,因為作為一個團隊使用的產品,不管是從易用性、功能性還是安全性,為這個團隊解決問題為首要基礎,那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了,所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上;B端產品就是為了使用產品的團隊解決效率、成本、營收的問題,加上產品的穩定性、安全性等因素的考量,產品側重點自然更聚焦在效益上



          什么是B端C化

          前面了解了B端和C端產品的區別,接下來聊一聊什么是B端C化;簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端,網上也有很多B端可視化、趨勢潮流的設計和文章,但是B端C化不僅僅是從視覺設計上的改良,下面我逐漸從大到小聊一下我對B端C化的理解


          功能架構

          在做過很多B端產品之后發現,往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌,但是有時候在搭建產品架構的時候,功能形態單一粗糙,步驟復雜且笨拙;站在業務產品的視角來看,架構邏輯上都是沒有問題的,但是站在用戶視角來看,整體框架是混亂破碎的,步驟繁瑣且復雜,導致用戶對產品的認知變差,但是又不得不去用這個產品,只能被迫去學習使用

          比如一個產品案例,就是一個產品的底層邏輯是前端輸入素材id,后端返還一個素材后就可以使用了,站在產品業務視角來看,這樣設計沒有什么問題,符合產品的底層邏輯;但是站在用戶視角就特別難受了,用戶想用一個素材,還要去尋找id然后輸入搜索,像C端那樣全部鋪出來給用戶選不好嘛?



          行為習慣

          行為習慣自然是指用戶群在該行業下的行為習慣,電商行業、社交行業等等不同行業的習慣、專業術語等都不相同,這個在C端產品中都很能得到體驗,比如電商行業的大紅大紫,社交行業的左右滑動等等,這類有著很明顯的行業屬性和大眾認知,一樣是B端設計中應該注意的點

          最經典的案例就是紅色綠色的定義區分,在數據產品認知中,綠色代表數據漲了,紅色代表數據跌了,比如GMV數據,DAU數據等,紅色為重點關注的數據;而在金融行業中,基金股票紅色代表漲了,綠色則代表跌了,所以設計的原則一定得是基于不同行業的用戶行為習慣



          信息層級

          B端產品的信息量一般是很龐大的,尤其是數據、表單、審批等B端產品,涉及到不同角色不同權限的開放等,所以用戶能否能一眼看清關鍵信息,能否幫助用戶快速達成目標,是交互層面針對信息層級的設計處理一個重要的環節

          之前很常見B端產品中信息處理的方法就是堆積處理,直接將信息、數據等平鋪展示,比如很久之前的某牛商家端后臺等老舊系統;現在很多新的B端產品都是以模塊化處理方法將信息層級區分,使得模塊之間間隔更明顯,信息處理的效率更高,宛若C端中的卡片式設計



          設計語言

          設計語言自然是B端設計中標題、字號、顏色等規范標準,早些年把B端產品組件化后且開源的自然是阿里老大哥了,當時最早的AntDesign、以及后來的ElementDesign組件庫,到現在都被很多中小企業甚至大廠某些產品一直使用中,但隨著B端產品的普及和發展,越來越多的企業開始將自己產品沉淀出完善成套的設計語言,并搭建出自己的組件庫投入使用了



          用戶體驗

          如何去衡量用戶體驗是否是好的,最客觀來講當然是通過數據去衡量,而數據往往在C端產品中很常見,不管是體驗數據還是表現數據,都是C端產品中最為關注的;然而在B端產品中,更多收集的一般都是業務表現數據,幾乎沒有衡量用戶使用平臺的相關數據,大多衡量體驗的方法都是依靠問卷反饋的形式;但在B端C化的過程中,用戶體驗的數據也逐漸被加入到B端產品當中來,成為體驗標準的考核之一:比如某個任務完成的時長,報錯出現的頻次、某某工具的使用率等



          視覺設計

          最后就是B端C化表現層的設計,包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中,使得B端產品不再追求簡單的“功能優先”和“能用就行”,而是像C端那樣追求更美觀的視覺,更極致的體驗



          為什么要B端C化

          總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗,越來越趨于人性考慮設計,越來越關注使用者的感受和反饋,因為說白了不管B端產品代替成本高不高,用戶是一群專業人士還是普通職員,使用者歸根到底還是“人”在使用產品,那么必然會帶來體驗相關的問題;所以B端C化會逐漸形成一種趨勢,在企業平臺資源支持的情況下,會將B端產品的功能放大,追趕市場競爭,逐利行業內卷,在體驗和視覺感官上也會更加的人性化,結果自然是產品設計者們更加的卷了(手動狗頭)


          總結

          無論是現在的B端C化還是將來其他多元的設計趨勢,隨著市場的競爭和行業內卷,已經反推著設計師們不單單局限于照顧自己的“三分田地”了,無論是之前視覺設計師開始學習3D建模,還是UI設計師嘗試接觸代碼設計,設計師最大的品質就是應該緊跟時代的趨勢變化,及時調整補充自己的能力,提升自我的競爭力,才是在當今環境下立足的根本

          作者:雨灰       來源:站酷 

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          想做好卡片設計,原來要注意這么多細節

          純純

          1、卡片的造型


          1)圓角


          不同的圓角,所帶來的氣質是不同的。圓角很小,視覺印象是硬朗,高冷,具有攻擊性的,多用于嚴肅、高端、沖突感強烈的設計中;而更大的圓角給人的感覺是有親和力,柔軟,安全的,多用于兒童產品、娛樂性強的設計中。


          在設計的時候,根據自己的產品屬性選擇氣質相符的圓角設計很有必要。


          undefined

          常見的卡片弧度形式有4類:直接、小圓角、大圓角、特殊圓角



          我一般喜歡用4的倍數來設置圓角,比如圓角大小為4px、8px、12px之類的。要注意的是,圓角越大,可用面積會越小,需要根據實際場景進行平衡,以視覺上舒服為宜。



          2)比例


          卡片的比例,我習慣遵循一些美感規律,比如黃金比例(1.618),白銀比例(1.414),青銅比例(1.732),正方形之類的比例。當然,實際設計需求中的比例,還是要結合內容的多少具體分析。


          我的經驗是,當比較接近這些美感比例其中之一時,就直接優化到這個比例。比如做了一個卡片,寬高比是1.5,比較接近于黃金比例,我就干脆讓它等于黃金比例。


          undefined



          3)異型


          除了正常的卡片樣式,還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力,所以會比較多的用在游戲或者運營相關的界面中,吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。


          undefined



          2、卡片的效果


          1)顏色


          卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準( https://contrast-grid.eightshapes.com/,這個網站可以直接查到可用性數值,只要不是DNP就是可以用的配色),以免影響內容本身的閱讀。如果拿不準的話,可以多用一些白色,比較不容易出錯。


          純色卡片設計會讓界面顯得冷靜高級,但對配色的要求相對較高,用不好的話會顯得單調,沉悶。如果你堅持要用這種卡片配色的話,建議搭配一些圖形紋理,會更容易把控,還能提升畫面細節。


          undefined

          純色卡片設計



          漸變色的卡片設計目前較為常見,層次細節更加豐富,畫面也顯得更活潑一些。


          undefined

          漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App



          有些朋友經常因為配色不好而發愁,其實是需要多去找一些參考來看的,實在擔心配色不好,直接去吸優秀的配色方案也是OK的,但要注意搭配合理。


          教大家一個方法,去dribbble上搜color或直接打開https://dribbble.com/search/color這個鏈接,就可以看到非常多的優秀配色方案了。


          undefined



          2)圖案


          卡片的設計還可以結合輔助圖形,以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸,讓品牌有更多的露出機會。


          undefined


          也可以是運用一些簡單的圖形,提升卡片的設計細節,以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值,自己平時有時間的話,也可以多做一些作為圖形的儲備。強烈建議收藏,真的可以很有用。


          undefined

          來源:https://dribbble.com/shots/10513966-Gradient-Bank-cards


          undefined

          來源:https://dribbble.com/shots/10498737-Dark-Bank-Application-Design


          undefined

          來源:https://dribbble.com/shots/11313260-Finance-App-Exploration


          undefined

          undefined

          來源:https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD


          這里彩云給大家找了非常多的卡片設計形式,可以從中參考學習配色和紋理造型。



          3)圖片、視頻


          卡片背景也可以用圖片和視頻的形式進行設計,圖片和視頻的選擇一般會偏暗色,以不影響內容閱讀為準。


          undefined


          undefined

          來源:https://dribbble.com/shots/5717917-Travel-Article-Application


          3、卡片的內容


          1)文字


          卡片上的文字不要太長,我的經驗是橫向不要超過42字(關于這個字數,有資料可以查,感興趣的可以找找看),縱向不要超過5行。過多的文本不建議使用卡片形式。


          undefined


          其實這張卡片的設計中,我也用到了黃金比例來指導自己的設計,方便快速確定文字比例關系。


          undefined


          2)間距(網格法)


          卡片上的文字間距最好有一定的規律,這里可以按網格法來規劃,比如8px網格,10px網格等等。網格的使用其實可以很靈活,比如我這里的卡片其實就用到了8px網格,各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。秩序產生美,而效率讓你早點下班。


          undefined


          3)減少線框


          卡片中盡量減少線框,多用留白來進行內容劃分。


          undefined


          4)層次清晰


          卡片中的內容層級要做好,標題和內容之間的差異要明顯。這里的層次主要是通過對比拉開的,做好對比的關鍵就是對比效果要強烈,決不能模棱兩可。


          比如下圖中左邊的案例只是在文字的字號上有一定的對比,但字號間相差不大,效果不明顯,就會讓人看第一時間不知道看哪。而右側的案例則用了加粗,大字號,大留白等,讓畫面有了強烈的對比,從而產生更好的信息層級。


          undefined


          5) 內容出界


          只在卡片的框框里做設計,有時候未免顯得太呆板,破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點,那內容出界的設計就是一個很好的提升設計亮點的手法。


          undefined

          彩云曾經做的一張banner就是運用了出界的手法


          undefined

          來源:dribbble。界面上的天氣圖標也用了出界的手法,讓畫面顯得更有亮點


          4、卡片的細節


          1)光感


          卡片中的光感細節能提升設計的質感。下面這張圖是我最近做的一張會員卡的背景設計,大家對比下,在卡片頂部加了1px高光線和斜面反光的細節前后的質感區別。


          undefined


          這個小細節,我經常會用到,執行簡單又容易出效果。


          undefined


          2)投影


          投影的細節,不要過重,但又要能與背景分離開。有2個小技巧:

          1.在取色的時候,可以選擇背景顏色的色相,然后略微加深一些,不要用純黑色來做投影,會顯臟。

          2.投影的距離不要太小,太小的投影會顯得不夠自然;也不能太大,太大會很浪費界面資源。


          undefined


          3)3D效果


          3D卡片的設計,因為不便于內容編排和閱讀,所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中,則可以帶來比較好的視覺沖擊力,可以嘗試運用。


          undefined

          圖片來自:Cradle

          作者:彩云Sky    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          圍繞應用生命周期的編排設計

          純純

          什么是圍繞應用生命周期的編排設計

          圍繞應用生命周期的編排設計是一種企業級技術產品設計策略。

          它的核心是要解決設計師很難上手企業級技術產品,且更加難以找到體驗設計機會點的問題。我們是一群工作在企業級技術產品領域里的設計師,同時也是掘金者,這篇分享即是我們在企業級技術產品領域里探索的一些方法總結。

           


          當設計遇上技術

          工作現狀

          在我們日常工作中,和技術產品 PD 聊需求是一件非常痛苦的事情,他們講的每一個字都認識,但是組合起來就不知道是干什么的了,因此設計師也很難去想象用戶是怎么在用這些功能。

          因此相較于 C 端產品來說,B 端的技術產品目前還處于基本可用的狀態,更談不上什么體驗了。

           

          分析原因

          究其原因,我們總結有三點:

          ① 這些產品大多數都是由技術來主導,功能優先

          ② 設計在整個流程中都處于非常被動的狀態

          ③ 設計與技術之間存在一定的專業壁壘,技術往往比較抽象難以理解

          同時,我們的用戶并不是客戶,用戶不能根據自己的意愿喜好選擇產品。用戶隱藏在企業內部,設計師日常中很難接觸到真實用戶。另一方面,用戶的技術專業背景與設計師的專業存在鴻溝,這使得設計師對用戶需求的理解也不夠深,所以說在這種環境隔離和語境不通的狀態下,設計師其實難以和用戶構建同理心。

           

          能做的事

          在這種狹小的設計發揮空間里,我們能做什么呢?

          其實我們設計師有明顯的優點:

          比較擅長找規律找方法,有破局意識,從而能夠發現設計的機會點。


           

          企業級技術產品設計探索

          發現規律

          所以我們回過頭看一下之前做過的這些產品和功能,從它們的作用對象、出現時間、用戶目標、用戶行為這四個維度對他們進行歸納和總結。

          我們發現這些產品具有很強的階段性,通過不同的產品來支撐各個階段下的用戶目標。用戶通過產品的功能來實現各種編排動作,例如對應用本身代碼的編排、對應用依賴的底層資源的編排,從而支撐用戶應用的生命周期。

          因此企業級技術產品具有以下四個特點:

          • 階段性

          • 驅動性

          • 流程性

          • 抽象性


          提出策略-圍繞應用生命周期的編排設計

          首先我們要針對這四個特性進行一輪判斷,了解這個產品的場景,場景下對應的角色,每個角色執行的是單線還是多線任務流,以及任務流是由哪些功能支撐。經過這層判斷之后再定位具體問題:

          ① 每個階段的目標是什么

          ② 階段下每個角色各自的小目標又是什么

          ③ 任務要對應用還是應用相關的內容進行編排

          ④ 產品的功能是如何實現的


          當找到這些問題的答案以后,我們就可以對產品的上下游場景進行編排,明確各階段的側重以及上下游場景的限制條件;對角色進行權限分配以及協作觸點的確定;將任務流從起點到過程再到結果進行梳理;以及最后通過對底層技術的理解,合理編排產品信息架構和界面內容。

          為了能夠更加高效的完成以上信息的收集和處理,我們沉淀了 CMTD 四個小工具。

           

          策略詳解

          C 是 Collaboration,協同場景,主要回答四個問題:When、What、Who、Where。

          ① When:用以明確產品所處階段以及上下游階段,以全鏈路的視角看用戶的完整使用場景,因為產品往往可能只是解決用戶部分場景的問題

          ② What:定義當前場景的階段目標以及要做的事情

          ③ Who:當前階段的事情由哪些角色參與

          ④ Where:這些角色在線上或線下是如何配合協作的

          例如我們要做一個技術產品,通過 Collaboration,我們知道它覆蓋了發布階段、日常運維階段,目的是把經過測試的應用發布上線并進行日常維護,主要是運維人員配合研發人員和發布經理完成線上的問題排查和線下配置文檔的交接,我們就能比較清楚的知道我們要做的是一個運維平臺。

           

          M 是 multi-role,多角色,主要用以分析產品是由哪些角色共同協同驅動的。

          與 C 端產品不同的是,我們除了對核心角色的自然人屬性進行洞察,還要定義清楚該角色的目標有哪些,目標對應的任務流以及支撐的功能和權限。并且企業級技術產品往往都不是一個角色就能完全執行完成,所以該角色的上下游角色也要摸清之間的協作觸點在哪里。

          多角色的信息我們可以通過在客戶現場或者用戶訪談來收集,并沉淀為用戶角色庫。

          基于收集來的用戶信息,來定義我們產品的角色:

           

          T 是 Task flow,任務流。任務流一定是基于一個用戶角色的某個目標,來定義任務的起點-過程-結果。

          起點就是界面上用戶的操作入口,過程需要包含觸發操作、自操作、條件判斷以及是否有協作角色參與進來,在結果處除了提供結果反饋還要提供下一任務的去向入口,幫助用戶把流程串聯起來。

          任務流可以借助現有流程的走查或按照 T 模型來梳理任務流信息,從而幫助我們更好的定義一條用戶的任務流是如何執行的。

          例如我們要做的運維平臺的產品,核心角色是運維,他其中的一個目標是為應用創建工作空間。按照 T 模型,我們可以很方便的將這條任務流定義出來。

           

          D 是 deep ,深化。主要從兩個維度展開:技術架構和邏輯原理。這是兩個在做技術產品的過程中經常會接觸到的兩個概念。

          在分析技術架構時,我們可以重點關注兩個點:看由哪些功能模塊構成,這些功能之間的靜態結構,是包含關系還是依賴關系。分析邏輯原理,一是了解這些功能產生的實例,是一對一的關系還是一對多的關系,信息或流量在這些功能模塊之間如何流轉。通過這些分析,我們可以把掌握的功能特征和邏輯規律。

          舉例來說,運維平臺的核心角色運維人員需要為應用創建工作空間,按照梳理出的任務流,用戶需要經過3次跳轉7步完成,那這個是否還有優化空間呢?

          我們可以從 Deep 深化的角度入手,看這條任務流是由哪幾塊功能支撐的。例如工作空間內包含網絡和安全組,安全組內包含負載均衡和虛擬機。就像我們了解汽車的制動裝置,看到裝置內包含氣室,氣室內包含活塞體、密封墊,密封墊連接在推桿上。

          再從邏輯原理圖入口,了解流量會先按照工作空間進行隔離,從工作空間走專有網絡還是經典網絡,網絡將流量分發到安全組,安全組里的負載均衡會負責調配流量到虛擬機。他們之間層層遞進互相依賴。就像汽油從油箱到達制動裝置,在發動機里和空氣一起被壓縮燃燒后能量轉化轉送到動力裝置一樣。

          通過上面的分析我們了解到這幾個功能其實是緊密關聯的,用戶沒有必要分散到不同的地方進行添加和創建,完全可以借助流程表單和抽屜把他們串聯在一起。

          因此我們找到優化體驗的機會點,把之前需要三次跳轉7步完成的任務流,優化到1個入口5步完成。

           


          總結回顧

          企業級技術產品有四個特性:階段性、驅動性、流程性、抽象性。通過 C、M、T、D 四個小工具來幫助我們收集和歸納信息,實現對上下游場景的編排、角色的定義、任務流的編排以及界面的編排。



          作者:Ant_Design    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          間距篇 | 設計師必看的保姆級間距控制規范!

          純純

          前言

          很多時候,我們發現自己精心設計的作品總是亂亂的感覺,究其根本,大部分都是文字、圖形、色彩處理不當,后續的優化調整也都圍繞著這幾點進行,這也是為什么設計師在制定設計規范的時候,會把文字(標題、正文、提示的字號)、色彩(主色、輔助、點綴、漸變的使用場景)規范分的很細。然而,有時候即便用好了規范,依然沒達到理想的視覺效果,這里就要提到設計規范中很少有人關注、且非常容易被忽視的「間距」問題。
          優秀的界面設計應該體現在每個維度,間距在設計中也是不可缺少的部分,尤其是界面元素較為密集時,需要對間距的使用掌握得當,合理的利用間距留白,能將信息更高效的傳達給用戶。
          文字、圖形、色彩是UI設計的三大組成元素,間距即是這幾種元素結合的媒介,如何通過間距給用戶帶來更舒適的視覺體驗是設計過程中極其重要的一環,那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用?筆者進行了整理總結,通過本篇文章揭曉。

          分享目錄

          一、間距在UI中的重要性
          二、定義文字間距
          三、定義元素/組件間距
          四、定義模塊間距
          五、間距的使用技巧及原則
          六、結語

          一、間距在UI中的重要性

          1.什么是間距?

          間距指的是界面各元素彼此相隔的距離,可以是文字自身的行距、與圖片、與組件、與模塊的間距,或是界面兩側的安全距離(如網頁的寬度為1920px,內容區為1400px,那么安全距離為兩側各260px)等。
          作為UI設計師,在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距,利用各間距之間的規律來組織界面內容,確保信息的節奏性,給用戶輕松、預約的瀏覽體驗。


          2.間距的實際作用

          間距可以讓界面信息更有節奏,提升內容的可讀性,還能通過不同的疏密程度來闡述各元素之間的關系,以吸引用戶的注意力,所以在控制界面間距時,一定要有“較真”的心態,任何一次的改動與調整都要先考慮清楚為什么,能給產品和用戶帶來什么。要做好間距,不能僅停留在視覺層面,需要進行多方面思考。
          設計師層面:規范的定義間距,不必每個元素都去考慮間距的大小,有效減少決策和思考時間,提升效率。
          開發層面:開發可以按照基礎間距去定義變量,長期如此,雖然不能煉成像素眼,但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量,在使用8px、16px、24px、32px、48px...等,開發直接使用基礎間距x1、x2、x3...,以此類推,在開發眼中,肉眼定然看不出1px的差別,但卻能區分出8px的差距,不必每次都去測量,還能減少誤差,高度還原設計效果。
          用戶層面:有節奏且具備一致性美感的界面效果,信息的有效傳遞變的輕松,用戶體驗能得到很大程度的提升。


          3.間距的統一性

          設計規范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理,間距也是設計規范中非常重要的一環,它作為規范中的最小單元,如果沒有遵循統一,將會直接影響界面整體的版式和布局,信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師,開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的,毫無規律可循。
          統一的間距能讓界面的視覺效果更有節奏,設計師在設計某些相似的模塊時可直接復用組件,即便是多人共同完成同個項目或更換成員,也不會因間距不統一的問題造成整個APP的風格混亂。
          對開發來說,如果清楚間距的使用規律,即便有小的誤差,也能自行更正,例如使用8px增量,8、16、24...按倍數規律以此類推,若出現9的間距,開發會更正為8、15則會更正為16,自行多退少補,雖然設計師需要細心、盡量不出現這種小的出入,但任何事情都沒法做到絕對,統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通,能進一步提高開發效率。


          ▲ 從上圖可以看出,間距不規范、信息就像一鍋粥,而規范的使用間距就能將信息自動分組。

          二、定義文字間距

          文字是UI設計中非常重要的信息元素,雖然大多數設計師對文字的屬性比較了解,但在真實設計中總會因其他信息的干擾不能合理運用,與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單,但實際上有很多因素要考慮,例如字間距、行高、段落等,下面帶大家一起了解。

          1.字符間距

          字符間距一般都是設計工具的默認數值,無需調整。當碰到多行文字需要避開頭尾的標點符號時,使用工具中的避頭尾功能即可自動調整字間距,如無此功能,則需手動調整,這里并沒有所謂的技巧與方法,頭尾避開標點符號即可。
          另外,在設計卡片、瓷片區的標題時,有時需要通過調整字符間距來提升界面的舒適度,間距數值自行定義,但相同層級的內容標題字間距一定要保持一致。


          2.文字行高

          行高是指上邊框+下邊框+字號的高度之和,這里主要針對多行文本。在平面設計中,行高沒有一定的標準,如無特別需要,使用系統默認的行高即可。
          在UI設計中,文字會有5~6個不同的等級,為便于用戶閱讀,一般會設定行高標準,尤其是新聞資訊類型的應用本身就以文字內容為主,不同的行高對文字的易讀性會產生較大的影響。
          文字行高一般會設定為字號的1.2~1.5倍,具體值跟字號有很大關系,文字越小,行高就越大。例如,我們可以設定字號32px為中間值(非絕對),小于或等于32的字體、行高為字號的1.5倍,大于32的為1.2倍。另外,也可以直接將所有行高固定在字號的1.5倍,不難發現,字體越大其折行的概率就越低,試想一下,如果將48px的文字折成幾行,界面還能剩下多少空間?


          3.文字段落

          文本段落間距的重要性在移動UI界面中并不明顯,更多體現在網頁設計中。需要著重糾正一點的是,部分設計師在設置段間距時習慣性的多敲一次回車鍵,這種方式并不可取,會造成間距過大、內容脫節。
          如有需要,一定要手動設置段間距,這里沒有固定的數值和規律,視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍,例如字號為30、段間距為15,字號為40、段間距為20,僅供參考。


          三、定義元素/組件間距

          定義間距其實并沒有一個絕對的標準,主要取決于最小單位,例如4px、5px、6px、8px都是可以的,到底使用哪個數值還得根據產品自身定位及內容組織形式,前提是所有間距都要遵循最小單位并基于倍數形成規律。
          在設計界面時,需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系,這就是為什么當我們打開新聞資訊、電商類應用會發現信息非常緊湊,而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎;基數越大、頁面的留白就越多,使用不同的基數,呈現出來的視覺效果也形態各異。
          筆者在工作中通常以8px作為基數,以此衍生出8、16、24、32、48、64這6個間距數值,完全能夠滿足絕大多數的使用場景。當然,針對信息較少的頁面也會使用到120、160、200...其他間距數值,例如缺省頁、登錄頁面等。不難看出,上述以8px為基數定義間距數值時,沒有40、56這兩個數值,難道他們不是8的倍數嗎?我們以8和16做對比,后者是前者的2倍,其間距的變化尤為明顯;但如果用56和64做對比,后者是前者的1.14倍,其間距的差別微乎其微。敲重點,設計師在定義間距時,需要遵循倍數規則,但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規則,當間距數值越大時,根據基數所跳躍的倍數就越大,其實設定字號也是相同的邏輯(后期詳解)。


          四、定義模塊間距

          從信息層級角度來看,等級權重越高、間距就越大,在現實世界中也是如此,一個物體周圍的空間越大,就越容易吸引人們的注意力。
          模塊間距分為塊內間距(同一模塊中不同元素或信息組之間的距離)和塊外間距(同一個頁面中不同模塊的之間的距離),為了更好的區分信息層級,塊外間距一定會大于塊內間距,也能保持塊內信息的親密性。
          如下圖所示,將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊,每個模塊內元素的間距都會比各模塊之間的間距小很多。


          五、間距的使用技巧及原則

          1.接近性原則

          需要通過各元素的間距來體現出信息的關聯性,格式塔原理中的“接近性”原則告訴我們,相互靠近的物體被認為比相互距離較遠的物體更有關聯性,因此,相關聯的元素之間靠的越近,用戶越能感知到信息的關聯,同時更能了解整個界面中各模塊信息的邏輯關系。


          2.利用留白強調

          很多時候,想讓一個元素變的突出,可以用加大字號、修改色值或后加粗等方式進行強調,但這并不是突出信息的唯一方式,當所有元素都變的突出,那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出,留白也是一種強調信息的方式,它能引導用戶將注意力集中在特定的內容上。

          3.使用柵格系統

          善用柵格系統(上述有詳細說明),通過最小間距值進行遞增,讓整個界面看起來更協調。柵格系統可以讓設計師在元素的親疏關系上更快作出決策,后續不管是迭代還是更換設計成員,都能保持統計的間距規范。


          4.文字行高規則

          這個問題在很多團隊中都是硬傷,甚至在設計驗收時還被直接忽略。在主流UI設計工具中,添加文本元素時,都會有默認行高,在前面的內容中有講過多行文本的行高為字號的1.2~1.5倍,那么單行文字的行高到底是需要手動設置還是遵循默認,筆者認為都是可以的,但一定要與開發保持一致。
          行高決定著文字邊緣與定界框的間距,而開發只能看到定界框與其他元素的間距。

          1)默認行高
          默認行高值會隨著字號的變化基于一定的倍數自動增減,需要將此規律或倍數告知開發,開發將此規則植入代碼方能最大化還原設計效果。另外在設計界面時,尤其是多組文字元素的上下間距,需要通過計算(文字邊緣到定界框的間距+文字元素間距=實際間距)或手動測量才能達到精準狀態,下圖為例:

          2)手動設置行高
          手動設置即字號是多少、就將行高設置為多少,確保文字邊緣緊貼定界框,在設計過程中調整間距時,無需計算,根據設計工具的智能提示調整即可。


          5.間距值數量設定

          在同一APP應用中,根據最小基數定義的間隔值數量不易過多,一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等,以5px的基數為5、10、15、25、40、60等。數量過多會導致界面不同元素、模塊的間距差異化不夠明顯,數量太少無法滿足多元素、模塊使用場景,也會導致間距跨度較大。


          6.明顯相鄰間距值

          設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時,用戶很難感知到界面中信息之間的邏輯關系,我們需要根據柵格系統中間距值的增大、設置更大的區間值,讓相鄰間距值之間的視覺差異更加明顯。


          7.跳出間距的束縛

          當界面中的信息較為密集、間距不足以滿足信息的突出程度時,需跳出純粹的間距規范束縛,換種方式或許更好。例如:給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等,需知「此消彼長」的道理。


          六、結語

          如果在處理界面信息層級時,改來改去還是覺得很亂,不防從間距角度出發,或許會有不一樣的收獲。雖然在剛開始的時候,規范間距帶來的效果甚微,但隨著團隊規模不斷擴大、界面數量越來越多、內容越來越復雜時就會發現,所有內容統一間距規范,不管是構建一致性界面視覺效果、還是對開發和設計師來說,既能提升用戶體驗、還能提高團隊的工作效率。
          間距是否規范使用,決定著界面是否規整、信息傳達是否清晰,即便如此,間距也只是解決信息層級方式的其中之一,切不可讓其限制設計師的發揮和思考空間。制定設計規范有助于項目的高效運轉,間距也好、色彩也罷,設計師依然需要從實際用戶場景出發,通過不斷的思考和經驗總結,打磨出更合理、更符合項目需求的設計規范。

          作者:大漠飛鷹CYSJ    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何通過空狀態留住用戶

          純純

          在交互設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( The Empty State ) 是許多應用程序設計開發過程中忽略的一點,卻也有著優化用戶體驗、改善應用程序的潛力。

           

          一.什么是空狀態?

          空狀態:顧名思義就是空白的狀態,空狀態是對沒有數據頁面的補充,一種對零數據的設計形式(如下圖所示:無網絡、訂單為空、沒有關注的人以及無法連接網絡等等這些頁面就是所謂的“空狀態”。)

          空狀態是APP設計中不可或缺的一部分,特別是新用戶初次接觸到產品APP時,必然會面對很多空狀態。

           

                 undefined     

          二:空狀態的分類

          第一:根據空狀態產生的路徑,可以將空狀態分為3類

           

          系統層:本地請求異常;如:無網絡、服務器異常等

          信息層:請求成功,數據異常;如內容已刪除、已下架等;

          空白層:請求成功,無數據;最常見的空頁面或空狀態;

           

                 undefined     

           

          第二:根據空狀態的出現場景又可以將其分為4大類:

           

          初體驗:初次注冊登錄的用戶很多功能都沒有熟悉

          無信息/無結果:某些功能還未使用過

          完成任務:完成某項功能后反饋的結果

          出錯:因為各種原因導致的錯誤頁面

           

                 undefined     

          初體驗時,根據不同的產品,我們可以為用戶提供不同的引導

          · 創作平臺→引導用戶創造內容、推薦相關內容、開啟權限……

          · 工具類app→介紹相關功能、添加相關人、相關功能……

          ·學習類app→收集用戶目標、推薦相關課……

                 undefined     

           

          無信息/無結果時,告知用戶該如何解決問題,或者給用戶其他選擇

          ·購物車為空時→讓用戶購買或者給用戶推薦商品

          ·無收藏時→應到用戶去收藏

          ·搜索為空時→告知用戶換一個詞試一試

          ·無評論時→讓用戶搶個沙發

                 undefined     

           

           

          任務完成后,鼓勵或獎勵用戶

          ·郵件全部回復完→祝用戶擁有美好的一天

          ·書看完時→讓眼睛放松一下

          ·打卡成功→獎勵用戶勛章等等

                 undefined     

           

          程序出錯后,緩解用戶情緒,告知用戶解決辦法

          ·網絡出錯→檢查網絡/刷新頁面

          ·404頁面→讓用戶反饋情況到后臺、報錯等

                 undefined     

          三:設計空狀態頁面的好處

           

          據調查顯示:“平均下來,APP在被下載之后的前3天時間里,日活躍用戶(DAU)數量下降了77個百分點。30天內,下降比例達到80%”。用戶會嘗試多個同類APP,然后在接下來的3到7天內決定其中的哪些不合適。這時候就需要通過更多好的設計和體驗來留住用戶

           

          當然一個產品的好與壞不能全靠空狀態,但是空狀態對于新用戶的留存是很重要的。

           

          Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說,空狀態是一個展示產品個性化的機會,因此,在進行空狀態設計時,需要認真考慮品牌用戶的目標和背景。

           

           

           

          四:空狀態設計原則


                 undefined     

          4.1基本原則 


          準確:空狀態需要清晰明確地將當前系統狀態傳達給用戶

          直觀:簡言之就是畫面要“小而美”→簡單

          高效:提供用戶快速有效地擺脫空狀態的方法

           

          準確

          準確原則要求在文字描述上做到清晰地闡述系統當前的狀態。

          下圖為例,如果僅以“獲取不到數據”作為收件箱空狀態提示文字,用戶不清楚是系統異常、網絡異常還是僅僅因為收件箱沒有郵件而出現當前狀態。準確地將系統狀態及操作結果告知用戶是空狀態設計中十分重要的目標。

                 undefined     

           

           

          特殊原因導致的空狀態,也可以在附加文字中告知用戶其原因,例如郵箱賬號未登錄而導致收件箱為空的情況。

           

          直觀:

          空狀態不僅要講究視覺的美感,還要講究體驗的“美感”,要讓用戶在不用思考的情況下,  獲得最大的價值,

                 undefined     

           

          高效

          若空狀態在系統中可以通過觸發操作離開,建議在空狀態的文字或操作上進行展現。

          以站內信空狀態為例,系統存在用戶可執行的解決方案,在設計上也要體現。上面提到的賬號未登錄導致站內信為空時,考慮附加文字提示‘登錄賬號即可開始’。若系統存在直接觸發操作的方案,可通過鏈接或按鈕的形式提供入口給用戶,便于用戶快速有效地回到功能主流程中。

                 undefined     

           

           

          4.2進階原則undefined       

          有趣:有趣又易用,符合用戶的心理預期

          品牌:介紹并強化品牌元素,通過恰當的方式、形式呈現

          記憶:有創意或幽默色彩,呈現形式新穎,體現專業同時創造正面情緒

           

          有趣

          空狀態的設計在滿足了基本的設計原則后,還可根據產品的品牌特征進行優化。一般對空狀態的圖片、文案來著手進行品牌化設計。

          采用含著關懷情感的文案“哎呀,網絡好像出了點問題”代替“網絡未連接”這樣冰冷無感情的提示文字,同樣達到告知用戶系統狀態的目的,但修改后的文案明顯更能貼合服務工具型軟件的品牌形象。

           

          同時結合文案主題,用有趣的插畫吸引用戶,達到緩解用戶焦慮、負面情緒的目的

          例如下圖的刷新一下試試,企業IP作為粉刷匠在刷新Wi-Fi,比起一個失聯的行星就更有意思

                 undefined品牌

          當空狀態滿足了用戶的基本需求后,就可以考慮如何樹立品牌形象了!

          目前最簡單且有效的辦法是——企業IP+插畫+文案,雖然被很多人吐槽套路、片面,但是作為剛起步的創業類的app,這不失為一種好辦法

           

                 undefined     

           

          設計專屬吉祥物形象,對產品進行擬人化表達,避免極其復雜的插畫,保障界面簡潔明快;

          由于插畫不可交互,盡量與背景融合為一部分,避免使用明亮的色彩,誤導用戶點擊。

           

           

          記憶

          文章的開頭講過,空狀態對留住新用戶有著很關鍵的作用,那么空狀態在用戶使用的幾秒鐘內一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶,所以空狀態一定要有新意,甚至是要給用戶出其不意的視覺感受,這個階段考慮的問題要更多一些,受眾人群的特點、品牌的調性、想要達到的效果、解決問題的手法、還要注意對用戶而言是否直接有效并且準確。

           

          阿里旗下“躺平”app的空狀態打破常規,非常優秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。

                 undefined     

          產品所有能傳遞情緒的場景都應該與品牌情緒一致。采用負面情緒的空狀態有一定風險,可能會起到消極作用。

          用戶更容易代入場景化的故事,產生情感共鳴。構思場景,需研究產品目標用戶群的特質,設計他們的共同回憶,將有關的場景、片段、元素進行拼貼、組合、關聯,再找到最能勾起情緒沖動的突破口,豐滿場景。

          避免正面刻板的形象(一眼就能看到底的設計),盡可能簡單有趣、不落俗套,讓用戶看到這個畫面后可以有更多想象的空間,從而吸引用戶,驅動用戶的好奇心。

           

          五、總結

          簡單總結了一些設計空狀態時整體的設計流程,如下:

           
          功能入口:提供相關功能的入口和動作按鈕,解釋服務的功能和優點,引導用戶到其他頁面查看內容

          1. 標題文案:說明當前狀態,解釋當前問題出現原因,介紹功能概要

          2. 解說文案:如何走出當前狀態,如何解決當前問題,補充說明功能的屬性

          3. 推薦數據:提供熱門數據、個性化推薦數據讓用戶選擇;如電商搜索無結果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉化率

          4. 操作引導:提供相關操作的示意和引導,讓用戶能刪除或替換內容

          5. 完成指導:送上任務達成的祝賀語,鞏固用戶的成就

           

          細節備注:

          文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達,更易調動觀者的心。

          科學合理的通過顏色吸引用戶、增加粘性

          純純

          沒有難看的顏色,只有難看的搭配每一種顏色有其獨特的作用,令人產生不同的情感。合理使用色彩可以取得宜人的效果。

          一、色彩的基本認知(本模塊設計小白可以了解一下,有基礎的略過)        undefined1、色彩由色相、飽和度、明度三要素構成

           色相(Hue)

          即各類色彩的相貌稱謂,如大紅、普蘭、檸檬黃等。色相是色彩的首要特征,是區別各種不同色彩的最準確的的標準。事實上任何黑白灰以外的顏色都有色相的屬性,而色相也是由原色、間色和復色來構成。

           

          飽和度(Saturation)

          飽和度是指色彩的鮮艷程度,也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大,飽和度越高;消色成分越大,飽和度越低。

           

          明度(Brightness)

          明度是眼睛對光源體和物體表面的明暗程度的感覺,主要有由光線強弱決定的一種視覺經驗。明度不僅取決于物體照明程度,而且取決于物體表現的反射系數。

           

          2、配色的基本認識

           

          基本色環(Color Wheel)

          按照光譜順序為:紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍、藍紫、紫、紫紅、紅和紫中間在加個中間色。在色相環的圓圈里,各種色調按照不同角度排列,則十二色相環每一色相距30度,24色相環每一色相距15度。

           

          同一色

          色相環中的任意色因明度變化而呈現的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統一色調,色彩的純度和明度是具有共同性,明度按照色相略有變化。

          同色系配色是指主色和輔色都在同一色相上,這種配色方法往往會給人頁面很一致化的感受

           

          同類色

          同類色又稱類似色。色相環原色起45度以內,含有較多共同的色彩元素的色彩,同類色指色相性質相同,但色度有深淺之分。

           

          相鄰色

          色相環中相距90度,或者相隔五六個數位的兩色,為鄰近色關系,屬中對比效果的色組。色相彼此近似,冷暖性質一致,色調統一和諧,感情特性一致。

          相鄰色不同于同一色的枯燥乏味。稍微跳動的的色彩也一樣保持著設計的穩定性,還能起到強調單獨作品的作用

           

          對比色

          指色相環上色相對比較大、純度較高的任意兩色。對比色之間無過多的共性,對比效果強烈。當對比的兩色具有相同的彩度和明度時,對比效果越明顯;兩色越接近補色,對比效果越強烈。

          主導的對比配色需要精準掌控色彩搭配和面積,其中主導色會帶動頁面的氣氛,產生激烈的心理感受。

           

          補色

          補色又稱互補色、余色,亦稱強度比色,就是兩種顏色(等量)混合后呈現黑灰色,那么這兩種顏色以定位互補色。色環的任何直徑兩端相對之色都稱為互補色

          補色對比由于色彩過于沖撞,很少用戶傳統網頁界面,一般用于活動 banner,起到吸引用戶眼球的作用。



          二、HSB色彩模型


          1、什么是HSB色彩模型

          如果你寫過HTML和CSS,那么肯定熟悉RGB,三個字母分別表示:R(紅)、G(綠)、B(藍)。這種方式對電腦來說非常直接明了,也是電腦理解顏色的默認方式。對電腦友好并不意味對人類易用,這也是HSB誕生的原因。

          HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness),又稱HSV,是一種更人性化的顏色描述方式。為什么這么講?因為它與人們描述顏色的自然方法一致。

           

          2、HSB色彩模式設置及優點undefined

          1)、比起 RGB 系統,HSB使用了更貼近人類感官直覺的方式來描述色彩 ,對于設計師來說更容易理解

           

          HSB 的概念很接近色彩學所常使用的色彩空間模型,由于是由三個屬性所組合而成,因此常以色立體表示,

          但由于我們常用的操作系統依然為二度空間的系統,因此在計算機系統的選色接口中常以不同的接口出現,我想其實大家都很熟悉,像是下圖為sketch中的選色器,可以看見一個全彩的色相條,和一個顏色的窗口,滑動色相條即可得到不一樣的顏色

           undefined

          2)、HSB可以更加科學地保證設計師所使用的不同顏色處于同一明度和飽和度,使用戶的視覺體驗感更好


          也許你會覺得 HSB 并沒有比較簡單,但是實際使用過就會發現,它是多么的好用。例如下圖的男女比例的背景色塊,如果用RGB調色只能通過設計師的眼睛和經驗來調整他們是否處于同樣的色調中,但是用HSB來調色,保持S和B值相同,只需要滑動色相條即可得到完全一樣的色調,省時省力還科學

                             

           

          三、色彩使用規則

           undefined      

          1、色調的分類

          色調(color tone)是不同色相但是具有同樣亮度和純度的顏色進行的分組,

          undefined     

           

          極淺vp(very pale)色調:

          是純度最低、亮度最高的,干凈清淡的顏色,給人清的,柔弱的,女性的,年輕的,淡的,可愛的印象。

           

          亮灰色lg(light grayish)色調:

          純度低,中高亮度的色調,給人高貴、安定、古樸的印象和輕柔的感覺。

           

          中灰色mg(medium grayish)色調:

          低純度中亮度,具有濁,不起眼,古樸,穩健,安定的氣氛。

           

          深灰dg(dark grayish)色調:

          低純度和中低亮度,給人漂亮、安定、自然的感覺。

           

          極暗vd(very dark)色調:

          是純度和亮度都最低的色調,具有厚重牢固的感覺,給人非常暗,陰暗,厚重,堅固、男性的印象。

           

          淺的pl(pale)色調:

          中純度和高亮度的色調,給人干凈、淺、爽朗的感覺。

           

          柔軟sf(soft)色調:

          中純度和中高亮度,給人穩健溫柔的感覺。相比淺色給人感覺更安定。

           

          晦暗dl(dull)色調:

          中純度和中亮度的色調,給人安心高雅的感覺,一般說的中間色就是晦暗色調。

           

          暗dk(dark)色調:

          中純度和低亮度的色調,具有結實,成熟,古樸的色調印象。

           

          亮It(light)色調: 

          高純度高亮度的色調,具有明亮、健康、活潑,年輕而穩定的印象。

           

          強st(strong)色調:

          高純度和中高亮度的色調,充滿活力,冗長,熱情,開放的印象。

           

          深dp(deep)色調:

          高純度和低亮度的色調,具有力量感和深度,給人深的,濃的,傳統的等印象。

           

          活潑VV(vivid)色調:

          高純度和中亮度的色調,較為鮮艷,鮮明,華麗,鮮艷,鮮活的印象。

           

          2、色調配色技巧

          同色相環配色技巧原理一樣,色調也有3種基本的配色技巧。

           

          1)同色調的配色:

          同色調的顏色幾乎沒有亮度和純度差,是比較容易統一和協調的配色。

          undefined     

           2)鄰近色調配色:

          具有一定的亮度和純度差但是差值不大,比較容易調和,容易傳達原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

          undefined     

          3)對比色調配色:

          亮度與純度差很大,是極具張力的配色方法。是色調圖上相隔很遠的色調的配色。自由選擇色相,有亮度對比、純度對比、亮度和純度對比這三種配色方式。

          undefined      


          配色網站推薦

          推薦是三個比較好用的、簡單操作的配色網站,有需要的可以收藏

          1、coolors.co

          2、designspiration.com

          3、materialpalette.com

          undefined

          四、常用色分析undefined


          除了醫療作用外,顏色還有一定的象征意義和社會屬性,對人類生活有著舉足輕重的影響。顏色心理學領域的佼佼者,美國羅切斯特大學安德魯.埃利奧特說,以前從來沒有人做過這種聯系。他表示:“顏色研究表明的是,我們的行為會受到我們沒有留意,習以為常的事物的影響。”

          據國外媒體報道,人們常常認為,穿著紅色服裝是自信的表現。同時,科學家們也認為,運動員身穿紅色運動服更容易取得好成績。然而,英國羅徹斯特大學的安德魯·埃里奧特等人開展的一項最新研究卻顯示,紅色會抑制人們思維的活躍性。

          埃里奧特和他的研究小組共對一些中學的高年級學生和部分大學生進行了四次研究。期間,他們向被測試者發放了一些用于進行智力水平測試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號。

          結果,凡是所持紙片上用紅色標明序號的學生,其所獲得的智力水平評分均明顯低于那些手持灰色或綠色序號紙片的學生。先前的研究已經證實,人們在日常生活中所接觸到的顏色會對人的潛意識產生影響,只不過這種影響非常短暫。

          埃里奧特教授認為,紅色首先會使人們聯想到錯誤和失敗。談到這一點,大多數人肯定都會想到老師在判卷時所使用的紅墨水。當然,有關禁止的信號通常也以紅色表示。而在自然界中,紅色則是一種警示色。隨后進行的另外兩項研究則證實,當受測試者眼看著紅色回答問題時,他們通常會選擇那些較為簡單的問題進行解答--這是人們在面對困難時所選擇的最經典的方法。

          與紅色相對的是,藍色能夠促進創新;黃色,則是最令人愉快的顏色,它被認為是愉快的象征,可以刺激神經系統和改善大腦功能,激發人的朝氣,令人思維敏捷。另外還有,橙色,是新思想和年輕的象征,令人感到溫暖、活潑和熱情,能啟發人的思維,可有效地激發人的情緒和促進消化功能。

          賞心悅目的色彩能夠通過視神經傳遞到大腦神經細胞,從而有利于促進人的智力發育。在和諧色彩中生活的少年兒童,其創造力高于普通環境中的成長者。若常處于讓人心情壓抑的色彩環境中,則會影響大腦神經細胞的發育,從而使智力下降。所以,我們在平時日常生活中,正確的應用色彩心理學,改善生活環境色彩,讓我們的心情更舒適,思維更敏銳。

          所以一定不要讓自己孩子在高考的時候穿什么紅色的外套,旗開得勝什么的,可能會影響思維活躍度,導致考試成績不理想

          undefined

          橙色稍稍混入黑色或白色,會變成一種穩重、含蓄又火熱的暖色,但混入較多的黑色,就成為一種燒焦的色;橙色中加入較多的白色會帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色,而其色感比紅色更暖,最飽和的橙色應該是色彩中感受最暖的顏色,能給人有莊嚴、尊貴、神秘等感覺,所以基本上屬于心理色性。歷史上許多權貴和宗教界都用以裝點自己,現代社會上往往作為標志色和宣傳色。不過也是容易造成視覺疲勞的色。

          英國埃塞克斯大學做了一項研究顯示,綠色是很特別的顏色,在四季分明之地方,如見到春天之樹木、有綠色的嫩葉,大自然的顏色。在綠色環境中鍛煉能提高情緒、活力和愉悅感。也就是說,戶外鍛煉有益身心。

          色彩心理學家早就指出,人們在高頻率顏色(如綠色,藍色和紫色)的環境下會產生平靜的感覺,而在中低頻率顏色(如紅色,橙色和黃色)的環境下更容易興奮和激動。這一現象可能是在人類進化的過程出現的。因為對于原始人類來說,綠色的環境意味著充足的食物和水源,對綠色的積極感覺在進化過程中融入大腦。

          英國埃塞克斯大學的研究者選取十四名男大學生,要求他們在室內固定單車上騎行5分鐘,并觀看關于森林的紀錄片。隨后,研究者將視頻背景由綠色轉換為黑色、白色和紅色,讓志愿者在觀看這3種顏色視頻的同時,又分別騎行了5分鐘。結果發現,他們在觀看綠色視頻時疲勞感低,情緒也能保持愉悅;而觀看紅色背景視頻時,他們更容易情緒不穩。


          紫色跨越了暖色和冷色,所以可以根據所結合的色彩創建與眾不同的情調。帶些紅色的深紫色可以產生一個暖色盤。淺紫色是較貴的,常常會聯想到浪漫。當結合玫紅色的時候,可以創建一個很女性化的色盤。一個比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對比色,可以創建強對比度的色盤。

               

          作者:木子淺談    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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