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

          首頁

          必讀!用戶體驗設計指南 - KIT組件庫一站式體驗搭建

          ui設計分享達人

          本文將從理論到實踐,從軟件到插件,再到不同應用場景拆解和團隊協同的重構,一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程,組件化設計的必備插件,目前國內還比較少有文章講到。手把手!嘴對嘴!堪稱全網最細保姆級教程!




          01. 什么是KIT組件庫?


          一個成熟的設計團隊,都會為產品制定設計規范,搭建產品KIT組件庫,組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致,讓團隊成員專注于深耕體驗和細節,實現設計向產品賦能。極大的節省設計和開發成本,優化用戶在界面流轉間的感知差異體驗。


          KIT組件庫本質上是一個集合的Sketch文件,由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。


          由Google推出的當時媲美蘋果全新設計語言的Material Design,Material Design也是最為經典組件庫設計?,F如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。



          02. 原子設計理論


          原子設計是將界面設計中最小元素——原子,組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。




          1.  原子 Atoms

          原子Atoms,我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割,但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成,所以原子是構成物質的最小粒子這就不對了。


          但在界面設計中我們所說的原子是構成界面的最小顆粒度元素,在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。

          2. 分子 Molecules

          由原子按照一定的規律和目的組成的部分為分子,在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等,可以理解為比較簡單的小組件。

          3. 組織 Organisms

          將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


          4. 模板 Templates

          將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖,產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。


          5. 頁面 Pages

          最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容,就得到了高保真設計界面。


          03. KIT組件庫搭建過程詳解


          以最近做的一個NFT項目為例子,展示具體搭建細節的全過程。




          1.  命名規范


          命名按照:一級分類 / 二級分類 / 三級分類 。例如:一級標題樣式/蘋方/常規/灰階0


          其中 “/” 為層級結構分隔符,Sketch會自動識別。組件庫的搭建需要按照層級規范命名,從最外層到最內層,就像一個抽屜,每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。




          2. 樣式


          (1)顏色樣式

          我們設計一般都需要定義顏色樣式,一般有主色調(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要創建樣式的顏色,點擊「外觀 - 創建」,在輸入框內輸入層級規范命名。



          (2)文字樣式

          定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點擊【外觀-新建】,在輸入框內輸入層級規范命名。




          (3)樣式切換

          當我們需要切換一個定義好的文字樣式時,比如從“閱讀文本樣式”更換為“一級標題樣式”,只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。




          (4)樣式修改 - 解綁與更新

          當我們需要對定義好的文字樣式進行修改時,比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點,為了優化閱讀體驗需要增大字號。


          1. 單個修改 - 解綁

          將文字調整更改為你需要的大小或字重,此時只對單個文本修改,不對其他文本產生影響,點擊解綁,便可與定義好的樣式分離。


          2. 整體同步 - 更新

          將文字調整更改為你需要的大小或字重,樣式名稱后會出現 "*" 星號,此時代表未保存,且更新按鈕激活,點擊更新按鈕則所有使用該樣式的字段都會更改,整體同步更新。




          3. 組件

          組件是將元素定義為標準化可復用的集合體,對組件進行規范的命名,形成高效設計的KIT組件庫。


          (1)文本組件

          選中我們需要定義的文本字段,注意!根據實際應用場景選擇合適的文本對齊方式,否則修改字段信息是會出錯。這里文本選擇左對齊,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。




          (2)標簽組件


          1. 單個標簽

          當設計完標簽后,對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對齊,步驟同上。將整個標簽打組,點擊 「創建控件」- 按照層級規范命名,選擇從左往右布局(這里注意!從左往右布局表示標簽在更改字段信息后,便簽左邊固定不動,從左往右自適應) - 在覆蓋層修改文本字段信息,庫存標簽組件自適應。




          2. 標簽修改           
                   

          如果我們覺得這個庫存標簽設計的不滿意,或者還需新增倒計時標簽、已售標簽,那怎樣又該怎么做的?


          第一步:這時我們新建一個Sketch文件,命名為「 *** KIT 組件庫」。選中標簽圖標復制,將圖標粘貼到新建文件內,注意!此時需要給圖標添加合適的畫板,并按規范命名。

          第二步:將Sketch文件保存到桌面,拖動到「首選項-組件庫」內。

          第三步:選中組件,回車可進入控件(組件)頁面,可直接調用定義好的控件,進行修改。





          Tips:這里畫板的作用是

          (1)畫板是用來規范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

          (2)畫板組件在創建后,調用時只固定大小和邊界。

          (2)如果只是做較少的界面,較少的復用的樣式,就可以不用做畫板。




          3. 多個標簽

          當頁面需要不止一個標簽時,就需要新增標簽,通常為左右或上下布局。若直接增加一個標簽修改字段,文本標簽不會自適應。 和之前操作一致,將新建的標簽新建組件后,可實現標簽文本自適應。




          4. Sketch素材調用

          繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。




          (3)容器組件整合

          將前面定義好的所有組件整合到容器中,形成可直接復用的商品信息容器組件。


          第一步:調用定義好的閱讀文本樣式,注意!直接拖過來即可,文本框的長度左右拉到合適的左右間距,這里不需要動文本框的高度,否則會出錯。將底部容器(卡片)的收起到合適的高度


          第二步:選中整體打組,創建組件。注意! 此時選擇從上向下布局。


          第三步:選中整體,在右側覆蓋層可對文本進行編輯,輸入文本字段,此時容器高度實現自適應。




          (4)組件的拆解與重構


          頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。




          (5)Anima插件


          如果上下同時有卡片的情況該怎么呢? 當然,我們完全可以將它們一起定義組件,但有沒有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會使得大家在搭建組件庫時變得更加靈活高效。


          Anima插件為一款在線自動響應式的插件,其中的STACK與PADDING功能簡直是Sketch設計必備,簡直逆天。




          1. PADDING功能

          新建一個文本,當點擊PADDING后,會自動生成一個底板,選中底板可對其進行編輯,更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式,左對齊一般適合標簽使用較多,而居中對齊適合一般的居中按鈕,如立即支付、立即報名等。




          2. STACK功能

          將三個標簽分別打組,再全選整體打一個組,點擊STACK,選擇左右排版和居中對齊,輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽,拖拽可改變排列順序,松手后還可以自適應。




          04. 為什么要搭建組件庫?


          (1)統一(Unified)


          1. 團隊不同成員或新來設計師之間協同配合,保證輸出的一致性和穩定性。


          2. 統一的組件庫樣式,會減輕用戶在頁面流轉間的疑惑感和理解成本,使用戶體驗得到了提高。



          (2)效率(Efficientcy)


          1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下,如果每一個都重新設計將是一個巨大的時間成本浪費。


          2. 如果從產品的全生命周期來看,搭建好設計中臺KIT組件庫,并與開發進行溝通,能減少前端開發樣式,將時間更多的放在功能交互體驗和項目推動上,極大提高了效率。



          (3)協同(Together)


          1. 建立完善的設計規范和KIT組件庫,提高組件庫優化迭代效率。組件庫團隊協同自動更新。


          2. KIT組件庫一鍵修改,也可通過組件分離功能(解綁)單獨對樣式進行修改,工作中需要對設計反復調整打磨,可進行批量一鍵更改,單個模塊的單獨修改。




          05. 什么時候搭建組件庫?


          什么時候時候搭建組件庫?先定義規范都是扯淡!所謂實踐才是檢驗真理的唯一標準,“在設計開始之前就制定設計規范,是不切實際的做法,你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。


















          并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情,如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。



          06. 團隊協同


          將組件都定義在新建的Sketch文件中,將文件發給你的團隊其他成員。步驟同上。


          第一步:新建一個Sketch文件,命名為「 *** KIT組件庫」,將組件都創建在新建文件內。

          第二步:將Sketch文件發送給團隊其他成員,拖動到Sketch「首選項-組件庫」內。

          第三步:直接調用定義好的組件。


          共享組件庫個人使用 Sketch Cloud,但組件庫有更新Sketch右上角會有提示,及時溝通更新即可。



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

          文章來源:站酷  作者:JI_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          情感化設計心理學:用戶心理定律及優秀案例分析

          ui設計分享達人

          將普遍存在的人性用戶心理規律運用于設計,增加設計的溫度。

          近來對用戶心理比較感興趣,去看相關設計資料的時候發現相關內容重復性較高,多方搜集資料結合自己的一些分析總結出一篇補充。

          定律是鑰匙,在遇到讓我們上癮,持續付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續的設計吸收。










          undefined

          undefined

          undefined

          undefined

          undefined

          最后想說,設計師的價值不僅僅在視覺,好的設計必是好用好看好懂用戶的??珙I域學習補充自己的視野,多思多想,掌握鑰匙,開啟用戶不同的心門。

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

          文章來源:站酷  作者:唐小蔥

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          交互設計中排行榜設計詳解

          ui設計分享達人

          “今天吃什么???”

          “不知道啊,看看大眾點評,哪家店比較靠前”

          “一會去看什么電影?”

          “我看豆瓣上,這部片子評分特別高,我們去看這個吧”

          當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時,會發現當你面對的選擇越多時卻越不知道該如何做決定,或者當下做了決定后會一直思考做的這個決定是不是最好的,這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式,幫助用戶做決定的同時,引導用戶購買目標產品,極大的降低了用戶的選擇成本,其中排行榜就是平臺的常用套路。用戶的選擇成本是什么?排行榜為什么能夠幫助用戶降低選擇成本?如果排行榜僅僅是用來降低用戶的選擇成本,為什么所有商家都對排行榜趨之若鶩?下面帶你了解為什么人人都愛排行榜,及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配!


          排行榜的本質是一個沒有感情的信息篩選機制,將所有相關的同類事物之間通過比較,從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可,比如我們買衣服會首選淘寶,電子類產品會首選京東,看電影會看豆瓣評分,這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選,由于錨定效應使得用戶降低自己的選擇成本,可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應,也會對上榜主體產生強烈的品牌認可,為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽,比如:B站的百大up主,各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名,那么這一切背后的原理是什么?


          一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分,俗話說屁股決定腦袋,不同的定位決定了排行對三大組成部分不同的作用,當然背后的原理也不盡相同。


          1.選擇類排行榜-降低用戶選擇成本

          在沒有各種應用前,當我們決定購買什么東西或去哪家消費時,前期需要花費大量的人力、物力去搜集相關的信息進行整理集合,對比集合信息后才能做出決定,也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后,做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本(前兩個階段發生的成本是交易費用,而不是選擇成本)。在備選集的建立過程中,包含的選擇越多,用戶選擇的難度就越大,選擇成本就會越高。

          選擇性排行榜在備選集建立完成后,利用沉錨效應在用戶心理建立潛意識的目標參照,幫助用戶完成擇優決策,降低用戶的選擇成本。(另一方面平臺在幫助用戶降低選擇成本的同時,也影響著用戶的最終選擇,在接下來的平臺側方面會有詳細的分析)。

          比如說:當我需要買個耳機時,如果在沒有各大應用的前提下,我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解,收集信息建立備選集,但由于京東在電子設備購物方面的權威性,我會優先查看京東的耳機類排行榜,也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立,而用戶出于對平臺權威性的信任,根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息,最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找,以及用戶對信息確定性的尋找過程。

          2.信息類排行榜-滿足社交需求

          在馬斯洛需求中,當個人的生理需求和安全需求被滿足時,與他人建立情感聯系或關系成為人們最強烈的需求,即社交需求。社交又分為:為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如:QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

          無論是“功利社交”還是“共情社交”首先需要的是溝通,溝通的本質則是信息的流通,但當雙方都沒有可以溝通的信息時則社交不成立,而類似:微博熱搜、今日頭條、澎湃新聞等信息類排行榜,則給有社交需求的用戶提供了可以展開話題相通的談資。

          選擇類排行榜中,提到的從眾心理(又稱羊群效應),是指人類由于對信息壓力規范壓力,會希望融入到群體中尋求安全感的特性,即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感,會熱衷于瀏覽此類排行榜來獲取實時信息,融入群體生活。每天早上,在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件,在上班電梯或工作間隙討論各自掌握的信息,及對事件的見解,甚至在與他人有相同的見解或之后,會對對方產生莫名的親近感等等,這些都是在滿足大眾自己的社交需求。

          3.分享類排行榜-自我確認需求

          過年期間各家app紛紛都推出了自己的用戶年度報告總結榜,不知道你有沒有參與到其中,并把這些報告的截圖分享到自己的朋友圈!在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序,人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外,還需要清楚自身在大數據下的自我確認,通過各種各樣自我測試類榜單,判斷自身的能力、情緒、價值等等,來達到自我認同,否則就會感到焦慮不安。

          加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺,人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程,我們想要呈現給觀眾怎樣的形象,需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己,為了維持自身的平衡防止崩潰,人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己,讓用戶更加清楚的認知自己,同時通過分享,滿足自我確認以及他人確認的需求。

          我目前只總結出這三種類型的排行榜,如果有小伙伴想到其他類型歡迎在評論區提出,大家一起參與討論。

          無論哪種排行榜,用戶信任的基礎都來自對平臺的信任,那么用戶為什么信任平臺?排行榜對平臺意味著什么?背后原理是什么?下面我們來討論排行中平臺的影響及背后的原因。


          對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性,選擇成本是品牌經濟學的核心,而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。

          1.平臺權威性—用戶側

          從我們記事起,我們對世界的認識來自我們的父母或老師,而這些教導我們什么是對、什么是錯的長輩或老師,對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家,比如:醫生、律師、教授等,認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠,可以幫助普通用戶節省研究這一領域問題的工作,做出更輕松的決定,雖然不一定是正確的

          搜索我們會第一時間想到百度,需要觀看影視、書籍會想到豆瓣,想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性,形成品牌號召力,推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源,比如京東會在排行榜頁面有明確的榜單說明,豆瓣根據平臺數據更新,汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明,減少用戶做出決定中的思考、猜測,獲得用戶的信任,增強平臺的權威性。那對于平臺來說權威性的建立意味著什么?

          2.平臺權威性—平臺側

          • 影響用戶的決策方向

          平臺權威性對用戶來說意味著說服力和影響力,在減輕用戶的決策壓力的同時,也影響著用戶做出平臺所需的決策方向

          • 平臺自帶話題性

          平臺本身的權威性也會為平臺承載的內容帶來討論的話題度,加大平臺承載內容的傳播范圍。比如,每年蘋果發布會都會帶來范圍極大的熱度討論,而app store內的熱門推薦自帶話題度和討論熱度。

          • 輸出口優化

          排行榜作為內容輸出口,在平臺權威性的背書下,產品優化自身的價值,而平臺也可以通過排行榜優化自身平臺價值。

          • 平臺盈利

          平臺權威性下,可以通過多種方式達到盈利,比如蘋果app store應用商店內的付費應用,百度的鳳巢系統、微博熱搜的第3、4位排名等。

          3.平臺權威性—廣告告知

          在平臺完成建立權威性后,部分平臺開始利用排行榜進行商業變現,比如百度、58的競價排名等,現在大部分應用會使用明顯的方式告知用戶,防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”,淘寶、小紅書推薦猜你喜歡的“廣告”。


          上榜主體作為整個排行榜的內容中心,由于排行榜自帶的競爭機制、篩選機制,使得上榜用戶會很樂于分享出去,比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。

          由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度,以及各種潛在資源,比如:流量、資源、人脈、某一領域影響力、平臺背書等等,這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感,比如bilibili不同粉絲量級會送出相對應的粉絲牌。

          而平臺方也利用上榜主體挖掘潛在的用戶,為平臺帶來更多的新用戶,加強平臺權威性,形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量,帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站,簽約西瓜視頻”,各大平臺也時不時會出現搶占流量up主的情況。

          排行榜資源的建立

          排行榜設計要達到用戶攀比的效果,很重要的充分條件就是相同需求好友基數足夠大,這樣才能構成排行榜設計成功的必要條件。

          • 同系同門資源導流

          對于已有成功產品的公司,可以借助平臺相互間的導流完成初試資源的搭建,比如:微信初期借助QQ好友流量,帶來好友初期的爆發;抖音最初的活躍借助今日頭條的流量輸入。

          • 自建用戶體系

          不斷推送已關注好友的信息流,當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交,你要先有這個人聯系方式才能要求好友,關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等,不斷社區建設推送動態信息流和好友卡片推薦。

          • 偽造

          當應用建立初期,沒有很多的資源和內容時,需要平臺自行填充內容,使得排行榜信息量大,增加用戶活躍,才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等,或是平臺pgc發布推送的內容。


          面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化,根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

          在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成,其他則根據不同產品類型及產品需求決定是否展示。

          1.頁面tab

          在首頁底部或頂部tab形式出現,多出現在以UGC或文字信息為核心的產品,以內容信息為主,常見以信息熱度為主要功能的資訊、新聞類應用。比如:知乎、今日頭條、36氪。

          知乎熱榜內容完全展開;36氪分為話題榜、人氣榜,話題榜僅展示前5條,人氣榜展示10條,僅在前5條有名次圖標,在36氪熱榜的中部還會出現收藏榜,綜合榜。

          而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”,點擊“查看更多”后,展開“頭條熱榜”及“今日關注”“北京熱榜”,整個交互形式類似微博熱搜。

          2.圖標入口

          首頁功能入口處明顯排行榜圖標,優先級較高,常見自帶推薦屬性,能夠幫助用戶快速選擇,減少選擇成本,比較依賴榜單的應用。比如:豆瓣、音樂類、騰訊動漫等應用。

          其中豆瓣、網易云音樂由于各種類型的排行榜很多,在圖標點擊開后,在當前頁面平鋪不同維度榜單類型,用戶進行點擊跳轉;騰訊動漫相對榜單類型較少,在左邊側邊欄切換不同的榜單。

          3.商品詳情頁榜單入口

          用戶查看商品詳情時,可能會希望能夠橫向對比同類商品,才能最終決定購買那件商品。常見于電商類應用,比如:京東、拼多多、得物等。點擊后進入不同的榜單頁面,獲取更多產品信息進行篩選。(淘寶的商品詳情頁沒有排行榜,但在首頁卻存在隱形排行榜,在隱形排行榜模塊會有詳細說明)。

          4.搜索-篩選(無明確搜索目的)

          當用戶沒有明確搜索目的時,搜索框的下方,平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶,比如:微博熱搜、淘寶熱賣、抖音熱榜等。


          沒有明顯排名及規則,但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前,位置越靠前,在用戶心目中的默認位置越靠前,比如淘寶的“有好貨”、編輯精選等。

          1.編輯推薦/小編推薦

          在平臺建立初期沒有特別的內容供平臺呈現,這時候就需要平臺人工有目的的推薦一些內容,不同于“猜你喜歡”建立在用戶的行為數據下,編輯推薦更多的平臺希望用戶看到的內容,一方面作為平臺內容的輸出口引導用戶,另一方面內容是平臺自己發布內容,也可以保證內容的高質量。

          2.猜你喜歡/相關推薦

          平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期,并且存在大量的平臺用戶使用數據,“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性,各大應用平臺適用性強,一般出現在首頁部分。

          3.年度總結排行榜

          朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜,這些其實是用戶自己確定了解自己,且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓,清楚的認識自己。

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦,這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜,從眾多選擇中選擇出部分答案,給出理由,而用戶只需在已被篩選過的內容中進行決定,節省選擇成本,比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定,但可以迎合用戶對確定性需求的各種盤點性質的排行榜,比如抖音的TOP榜哥就是盤點各種內容,人物。

          5.搜索-篩選(有明確搜索目的)

          相比其他排行榜,篩選后的內容已經體現了用戶的具體需求,高效明確的給用戶提供選項,引導用戶快速選擇。


          排行榜一般由必需的榜單頭部、上榜主體,及非必需的榜單規則、更新信息構成;而上榜主體由必需的主體信息、排序,以及非必需的推薦理由、排名變化、熱度信息構成。

          好的榜單能夠快速吸引用戶快速找到自己的需求點,引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。

          1.唯一性榜單頭部

          當排行榜在整個應用中有且只有一個時,通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出,增加平臺的品牌權威性。

          2.可復用性榜單頭部

          有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況,為了平臺的統一性、降低后期的維護成本,一般會使用可復用的榜單頭部,如豆瓣、京東、QQ音樂等。

          得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配,但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案;馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式,通過更換文案底圖達到適用不同主題;京東就相對比較簡單,只是更換標題的文案達到多主題適配。


          排行榜上榜主體由于不同的場景業務需求,一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式,其中主體信息及排序為排行榜必須信息,而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

          1.純文字形式

          純文字的排行榜一般是以內容(或標題)加排名的形式出現,常見以信息為主的排行榜,比如微博、知乎、今日頭條等以信息為主要關注點的應用,或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準,因此會在標題及排位外,增加各種突出熱度信息的表現形式,如關注熱度人數,或是“熱”“新”“爆”等等表示熱度的標簽,如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

          2.圖文結合形式

          相對于純文字形式,圖文結合的排行榜因為圖片信息的增加,使整個榜單主體占居更多的空間也可以展示更多的產品信息,輔助用戶進行選擇。

          • 圖片形式

          上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式,延續了用戶閱讀新聞類資訊的習慣;而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖,因此沿用至線上使用的也是豎版圖片形式;而京東、大眾點評、馬蜂窩則使用方版的圖片形式,大概是因為產品的多樣性需要考慮多種圖片的適配問題。(視頻、游戲類由于使用場景大部分采用橫版圖片形式;但由于游戲封面、宣傳海報也會有豎版的形式,比如:游民星空、小黑盒)。

          • 左文右圖VS左圖右文

          每當設計圖文結合的部分,首先要考慮到底是采用左圖右文還是左文右圖的形式呢?可能很多人會說這兩種形式沒有什么大的區別啊,有什么可糾結的!或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的,因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

          人類對畫面的閱讀及掃描方式通常為三種布局方式,包括:古騰堡圖(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中產品列表頁中最常使用的就是F型布局模式,F型布局是雅各布·尼爾森(Jacob Nielsen)在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是,眼睛從上/左,水平移動到上/右,然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后,向右掃動的次數會越來越少,并且會隨著向下移動,眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面,即自左向右自上而下的閱讀模式,越向下信息獲取效率會越低。

          因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式,比如:騰訊動漫、愛奇藝、得物等等。

          3.橫排+列表表現形式

          說到排行榜我們一般第一個會想到領獎臺,很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜,平臺用戶的注意力大部分集中在第一名,而領獎臺的形式模仿現實生活中的獎勵形式和儀式感,將整個排行榜的關注范圍從第一名擴展至3名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到)


          榜單規則是排行榜規則的描述,是平臺權威性的體現。榜單規則有些平臺本身具有數據庫,會有相關的平臺數據支持如京東;而汽車之家則依靠“汽車工業協會”外部的數據支持,增加平臺的權威性及榜單的可信度;

          信息更新一般存在在榜單頭部和上榜主體的中間,有些是固定時間更新,也有類似微博熱搜是實時更新的模式,而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。


          排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案,但歸根到底因為人們對于不確定性的懼怕,無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式,結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同,排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯,以及用戶操作行為背后的思考及心理效應,提出合理的設計,幫助用戶了解產品功能,滿足用戶需求。


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

          文章來源:站酷  作者:9號自習室
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          案例分享 PM/UX 必看 [用戶體驗]

          ui設計分享達人


           

          講User Research | 用戶研究 之前,有必要先介紹下“用戶體驗”。這兩者是密切關聯的。

           


          作為一枚互聯網老兵,先說一下歷史吧。

           

          N年前,UX Designer還不怎么流行。

           

          隨著喬幫主iphone4的橫空出世,驚為天人,徹底改變了整個手機生態。于是在中國市場,各種熱錢涌入,到處都是創業公司(start-up),各類APP紛紛孵出(我在上海)。這是整個移動互聯網行業野蠻生長的年代。公司那么多了,那么UI,iOS開發,Android 開發等等都是供不應求的。

           

           

          當然,那么多創業公司,90%都會在一年內,在天使輪的階段死掉。能活下來的,都是壯士!現在你看看你手機上裝的啥耳熟能詳的APP,基本也就是那些了。

           

          題外話:我當時的公司樓上是一家知名網游公司。某天我很快樂(KU B)的去上班(Make Money),結果就看到新聞說那家創始人CEO昨天半夜心臟病發,人沒了。隔天就看到他家公司門口貼訃告了。(此處默哀?。﹦摌I不易,真心能活下來的都是壯士!

           

          野蠻生長的年代,對于崗位要求不會那么精細。做UI的,最好你什么都會,十項全能。平面/手繪/App UI/ Web UI/H5/交互/動效/前端最好也懂一些/其他。。。


          那時候少有交互崗,因為交互崗通常會被產品崗,或者UI崗兼了。但隨著這些年WEB/APP越來越成熟,用戶對于體驗的要求越來越高。另外,隨著各類海歸人才帶回來的國外先進設計理念。各路大中小廠對于UX交互也就越來越重視。

           

          于是,就有了UX Design | 交互設計的專門崗位,有些也叫User Experience Design | 用戶體驗設計,在互聯網行業,兩者基本一個意思。

          (我們這里不討論用戶體驗的五個層次,戰略層、結構層、表現層之類的。這些太理論,大概知道就行了,多說我也困。真要硬掰,那交互設計實際算是用戶體驗中的結構層。但在國外專業文獻中,UX Design=User Experience Design。不要硬剛。 :P)

           

          人類總是情緒化的,總是對他們世界里的產品做出情緒化的反應

          -艾倫·庫珀,Cooper公司總裁,Visual Basic之父

           

           

          一.什么是 User Experience | 用戶體驗?


          通常來說,“用戶體驗”就是人們在使用產品時候的感受。用戶體驗并不僅限于互聯網行業,各行各業都有。


          用戶體驗更關注的是人和物的交互(Human-Objects Interaction)之間的聯系。


          “物”在互聯網產品中的應用可以是Web,APP,System等。

           

          舉個生活中的例子,迪斯尼。

          迪斯尼,娛樂行業吧?但它更是一家徹徹底底的體驗公司,極其注重體驗管理。


          迪斯尼樂園為小朋友們,大朋友們筑造了一個夢。迪斯尼的體驗管理,就是從造夢這個目的出發的。


          對于服務人員、演職人員的要求,干凈、禮貌都是最基本的。


          迪斯尼對演員的要求是,你不是演米老鼠,你就是米老鼠。用戶體驗細致到如下:

          只要有賓客在,演員就不能把頭套摘下。之前有新聞說演員中暑了,也堅持不取下頭套。(這里我們不討論勞工權益之類的問題)因為不能毀滅孩子們的夢。

          在同一個視野里,不能有兩個同樣的米老鼠。因為對于孩子來說,米老鼠只有一個!

          全世界演米老鼠的演員,都要苦練簽名。因為對于孩子來說,全世界只有一個米老鼠,簽名當然是一摸一樣的。


          這只是演員,還有其他工作人員,還有工作以外的服務。此處不再延申討論了。


           

          二.什么是 User Experience Design | 用戶體驗設計(即UX Design | 交互設計)?


          用戶體驗設計,顧名思義,就是為產品/服務設計一個良好的體驗。用戶體驗設計同樣并不僅限于互聯網行業,各行各業都有。

           

          舉個生活中的例子,麥當勞的打包袋設計。


          傳統設計是這樣的。

          漢堡薯條什么的全部裝紙袋,沒有提手,每次都捏到我手指抽筋。飲料再另外裝個塑料袋。

          一個捏,一個提。其實是不舒服也不方便的。

           

          用戶體驗好的設計可以是這樣的。方便快捷,節約資源,解放手指。

          (gif動圖,刷新頁面重播)

           

          我們這里想說的用戶體驗設計,特指互聯網行業。


          早期的Web頁,幾乎就是個靜態網頁,就提供些信息展示。那時候用的還是asp, php, .net技術,快捷點的話有個模板套套,新聞/產品就能后臺維護了。


          從大概2010年以后,Web就開始越來越復雜了,APP也開始越來越精細和規范了。這對于交互的要求就越來越高,需要有一個良好的用戶體驗設計。

           

          舉個APP的例子。

          淘寶最近對“確認收貨方式”做了優化(大致在2021.9),不知道你發現了嗎?


          淘寶購物時,首先,在買東西付款的時候,就需要輸入第1次支付密碼。


          最后,在收貨確認時,

          Before: 原來,還需要再輸入第2次支付密碼。

          Now: 現在,只需要點擊“確認”就行了,不需要再輸入一次支付密碼了。此次優化,就是簡化用戶的操作,提升用戶體驗。

           

          如下圖為最新優化后的截圖:


           

          如圖,

          Before: 原來,在Step 3中,原來還需要再輸入第2次密碼。

          Now:現在,在Setp3中,直接從Setp3——>Setp4.


          三.為什么UX Design | 交互設計很重要呢?

           

          產品成功與否,涉及到太多方面了。戰略決策、產品、內容、用戶體驗、技術、運營、服務、競品情況,資金投入、運氣等等,缺一不可。而用戶體驗/交互是其中重要的一環。


          專注于用戶的交互設計,大大增加了項目成功的機會。因為產品是給人用的,尤其是互聯網產品,用戶不會因為產品是知名品牌,就堅定不移的支持它,買它,用它。


          要是產品不好用,那放棄它,也是遲早的事情了。


          畢竟,能讓大家都喜愛的,還不管怎么樣都愛到死的,也只有RMB人民幣了。

           

           

          四.什么是 UX Designer | 交互設計師?


           

          交互設計師,需要通過調查和分析等用戶研究方法來設計產品,或者對產品做優化改進,以保證用戶能有一個良好的用戶體驗。


           

          五.UX 和UI的區別?


          UI,純粹的UI,通俗來說,就是負責好看。把產品做好看了,做精致了,讓用戶看得賞心悅目,心情舒暢。這是美學意義上的工作。

           

          UX,通俗來說,就是負責好用。讓整個產品流程簡單又便利,用戶使用產品不會有停頓和疑問,讓用戶使用產品的感受非常好。最終目的是為了增加用戶的粘性,提高產品的流量,促進產品的轉化率,為公司帶來直接或間接的收益增長。

           

          UX是產品中的重要一環。

           

          當然,在實際工作中,如果產品——長得好看+體驗好。那就是王者~

          這也應該是做產品的要求和標準,也應該是設計師對自己的要求和標準。

           

           

          舉個兩者結合的例子,摩拜單車。

          (雖然他欠用戶押金,雖然他已經沒了,成為了美團單車。但是他的故事還是可以講一講的)

           

          設計方面,

          摩拜單車的聯合創始人王曉峰(負責具體的研發、運營及市場工作)回憶當年做摩拜單車的時候,首先考慮的是產品和服務要讓消費者有面子。


          前期他做了很多市場調研(看,用戶研究),當年在校園外騎車的只有三種:除了專業騎賽車的,就是藍領工人和老年人。


          想讓白領階層都愿意騎自行車,就必須要讓他們覺得有面子。如果讓一個白領,騎著五花八門,甚至還叮當帶響的自行車上路,那是很沒面子的,這種生意一定會失敗。


          于是,摩拜就設計出一輛金屬感十足的橙色自行車,好看又酷炫。

           

          用戶體驗方面,

          摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑,比如車身結實、開鎖方便、損壞率低。但是,在夸贊的后面,用戶們往往會補刀:「好是好,就是太重了?!梗ǖ谝淮亓繛?5公斤,是普通自行車重量的2倍。)


          于是,為了改善用戶體驗(看,基于用戶反饋。又是用戶研究。),第二代摩拜單車在確保安全和耐用的前提下對每個零件減重,整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。


          這還僅僅是車身重量,其他各方面,輪胎,鎖,鏈條,車座等等,全部做了優化改進。此處不再延申討論。

           

           


          回到做WEB或者APP的設計上。


          中國的互聯網行業并不羞于抄襲對手,現在產品同質化這么嚴重,靠單純的產品創意早已經無法取勝了。


          現在產品更多的核心優勢是ABC——人工智能(AI)、大數據(BIG DATA)和云計算(CLOUD)。我們頂尖的算法工程師們(Data Scientist)好不容易對數據做了識別、分析和精準有效的輸出。


          結果在交互這一環沒做好,用戶找不到,看不懂,不會用這些產品/內容。你做設計的良心會不會痛?


           

          六.用戶體驗設計就是需要“以用戶為中心”(user-centered)而設計


          不要拍腦袋決定,不要自己YY。

          不然只能設計出一個你自己想要的,或者是你老板想要的產品。

           

          舉個反面案例:生活中的例子,廁所標識。

           

          用戶體驗—— 正常

          這張圖,好理解吧,廁所標志。就算右邊那個清朝的個性了點,那也是設計得不錯,能看懂。


           

          用戶體驗—— 差

          這張圖,額。雞?讓我想想,哪個是公雞,哪個是母雞?只要我努力辨認,我還是有機會成功上廁所的。


           

          用戶體驗—— 極品差

          這就是設計師自己YY的結果。


          這張圖,這都是什么玩意兒?大象?長頸鹿?什么意思?設計師,你給我出來,你信不信我打不死你?


          這樣的廁所標志,我猜都猜不出來,我只能跑到廁所門口張望,當個女流氓,看看廁所里的坑位是什么樣的,我才有指望上廁所。

           

          好了,那位設計師現身說法了,他的靈感源于動物習慣,大家弄不清楚的原因是他們不了解動物的具體習性。


          長頸鹿在噓噓時會張開雙腿,這標志著女廁所,而大象則用象鼻噴水,這標志著男廁所。他的靈感在大部分人看來太牽強,因為一般人對于這些動物習慣一無所知,用大象和長頸鹿來分辨廁所之間的區別是不是很無語?


          這設計師就光顧自己玩創意了,自己YY。廁所是為了給大家帶來方便的,好的設計創意是一回事,但最大的問題也是要方便眾人使用的。

           



          舉個正面案例:APP的例子, AR(增強現實)。


          現在AR技術已經相對成熟了,導航,家居,翻譯,試妝,試鞋,地球儀都有AR。

           

          拿AR試鞋舉例子。

          Before: N年前,AR試鞋還是把鞋子投到地面上,看個大致效果。(左側Before截圖大概是我3年前截的)

          Now: 現在,AR技術做強了,AR試鞋就直接投到腳上,能夠看到鞋子上腳的效果。對用戶而言,體驗更好。對商家而言,轉化率會更高。

           

          好了,用戶體驗就講到這了,是不是很輕松,看看故事就有些體會了?


           

          最后,

          今年是喬幫主逝世10周年,緬懷下!原來,他已經離開這么久了。

           

          I skate to where the puck is going to be, not where it has been. 

          - Wayne Douglas Gretzky

          這句話簡單來說,就是預判形勢,提前準備。

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

          文章來源:站酷  作者:Lu傾傾
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          B端產品界面高屏效初探

          ui設計分享達人

          背景

          在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。


          undefined


          「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。


          為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐?!钙列А箤n}探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確??梢蚤_箱即用。


          undefined


          探索階段-為誰在何時何地設計

          用戶聲音|不同的故事相似的訴求

          面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。


          undefined


          外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。


          undefined


          通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:


          undefined



          案例收集|發現問題,大膽假設

          縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:


          undefined


          視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

          綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決

          視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。

          基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。


          競品分析|尋找實踐證據,謹慎驗證

          我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?,決定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。


          undefined


          以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。

          直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)


          undefined


          通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。


          緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。


          除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。


          文字陷阱:中英文字高不等于字號


          舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。


          undefined


          原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。


          論文查閱|尋找理論證據,謹慎驗證

          研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好

          參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

          對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。


          認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒牵敵鲂适强陀^的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。


          假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。


          undefined


          面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。


          undefined



          實踐階段-如何設計

          通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。


          undefined


          基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。


          如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。


          undefined


          下面以視覺、交互、信息三個層次解剖設計過程背后的思考。


          視覺層|高密度-克制的留白

          眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》


          undefined


          如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。


          undefined



          交互層|低跳轉-高頻信息前置

          理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大??;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律


          undefined


          表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。


          undefined



          信息層|有效性-信息重組織

          理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》


          undefined


          用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。


          undefined


          結語

          設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。

          文章來源:站酷  作者:An t_design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          從體驗層面出發,分析App搜索框設計的要點

          ui設計分享達人

          搜索動作在App中依靠搜索框來完成,好用的搜索框很大程度上決定了產品的搜索體驗如何。大多數搜索框存在相似性,但真正好的搜索框會在細節上為用戶帶來差異化的反饋,帶來很暖很貼心的感覺。


          1、搜索框結構分析 

          從體驗層面上看,一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為:

          使用前-找到搜索框入口;使用中-點擊輸入內容;使用后-展示搜索結果。

          其中使用中會涉及到跳轉和輸入兩種不同的狀態,在下面的文章里我會展開來分析。


          2、搜索框的常見類型 

          回想常用App的搜索框,好像它們的樣式看起來差別并不是很大,但其實每個搜索框的細節都是經過精心設計的,下面總結了幾種常見的搜索框類型。

          搜索圖標

          頁面上只提供一個放大鏡圖標,通常需要用戶點擊圖標后才能跳轉到搜索頁面,例如小紅書就將搜索圖標放置在頁面右上角。

          基本搜索框

          基本的搜索框組成包括放大鏡圖標、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式,文字提示為搜索,簡潔清晰。

          文字提示類搜索框

          和基本搜索框的唯一不同的地方在于,這類搜索框中的文字提示部分不再是搜索兩個字,而是根據產品需求支持預置多組文字提示并在搜索框內循環展示。

          ▲ 在大眾點評的頂部搜索框中,文字提示部分循環展示了三組不同的內容,引導用戶快速檢索到好吃和好玩的。

          功能類搜索框

          之所以叫做功能類搜索框,是在文字提示類搜索框的基礎上根據產品功能的需要額外添加了常用的功能性圖標,如掃碼圖標、拍照圖標、語音圖標等,賦予搜索框更多的功能屬性。

          ▲ 經常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標,點擊之后可以快速掃描圖書條碼或二維碼,快速識別書的內容,省去檢索的麻煩。

          ▲ 淘寶搜索框的組成更復雜,除了支持掃碼外還有相機圖標,方便用戶拍照識別商品。 


          3、搜索框設計狀態分析 

          使用搜索框搜索的過程總體可以分為四部分:搜索前、點擊搜索框、輸入中、搜索后。設計分析過程中我們要先理清整體的搜索流程,再考慮每個狀態對應的交互細節及反饋,這樣才能保持邏輯清晰。

          搜索前-默認狀態

          位置

          大多數搜索框出現在頁面頂部,作為一個大的觸摸目標更符合用戶的認知習慣,更容易被用戶發現和使用。

          ▲ 在蘋果自帶的地圖應用中,搜索框放在頁面中部偏下的位置,相比于頂部搜索框,這樣的位置分布更方便用戶單手操作。

          樣式

          搜索前的狀態除了前面講的幾種常見的搜索框樣式外,有些產品會直接在搜索框增加“搜索”按鈕。

          ▲ 阿里系產品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕,相比于點擊搜索框再點擊鍵盤搜索內容推薦,直接點擊按鈕簡化了搜索流程。

          點擊后-獲取焦點

          搜索框

          點擊搜索框后,框內的放大鏡圖標會消失,出現閃爍的光標引導用戶輸入,搜索框右側會出現“取消”按鈕。

          ▲ 點擊大眾點評的搜索框后,搜索頁會出現三個選項,點擊每一個選項,搜索框內的文字提示都會改變,有效幫助用戶提升搜索準確度,雖然是很小的點但做的很用心。

          鍵盤

          點擊搜索框后會彈起鍵盤,在不輸入內容的情況下,點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內容。

          搜索頁

          搜索頁的內容通常包括歷史搜索、搜索發現、熱門推薦等版塊,記錄用戶的搜索行為,推薦目標商品或服務,提高轉化率。

          ▲ 豆瓣將最熱門的內容都展現在搜索頁中,包括實時更新的熱門書影音榜單、熱門小組、熱門話題等,為用戶提供有效的引導。

          關于歷史搜索我們還可以繼續深入分析,思考這些記錄怎么排序、最多顯示幾條記錄……

          ▲ 網易云音樂的歷史搜索最多可以保留10條,采用橫向滑動的手勢交互可以節省屏幕空間。根據內容長短一屏一次可以顯示2-3條記錄,這會導致排在后面的歷史記錄不容易被用戶快速發現。

          ▲ 淘寶的歷史搜索可以容納更多的數量,當搜索記錄超過兩行時會有一個小的展開按鈕,點擊按鈕可以查看早期的記錄,這樣既能節省屏幕空間也能最大化容納歷史記錄。

          搜索中-輸入內容

          刪除/取消

          當開始輸入內容時,在搜索框的右側會出現刪除圖標,方便用戶一鍵刪除輸入的內容,這里要注意區分刪除和取消的區別。

          ▲ 在淘寶中點擊“刪除”圖標,頁面會返回到上一級也就是搜索頁;

          ▲ 點擊“取消”按鈕,頁面會直接返回到主頁也就是搜索前的狀態。

          搜索提示

          在用戶輸入內容時,產品會根據用戶輸入的內容提供相對應的搜索推薦,這是搜索框的必備的交互反饋。

          通過合理的詞條推薦能極大降低用戶的思考時間,提高搜索效率,同時省去再次點擊搜索按鈕的流程,降低用戶的操作步驟。

          字數限制

          目前我所知道的大多數App在搜索時都沒有字數限制問題。

          回顧一下搜索使用場景會發現用戶在搜索框內輸入任何內容都是有可能的,盡量不要約束用戶的輸入內容。無論用戶輸入多少內容,點擊都可以完成基本的搜索操作,這樣整個流程才完整。

          ▲ 在百度中輸入過多字符時,會提示查詢限制在38個漢字以內,多的字符會被忽略,雖然給出了提示但并未打斷用戶的操作流程,可以讓用戶繼續完成搜索。

          搜索后-展示結果

          符合預期

          搜索的理想狀態是搜索到的結果符合用戶的預期,滿足用戶的搜索需求,并把最吻合的搜索結果排在前面,為用戶帶來清晰的結果展示。

          智能提示

          智能提示是對用戶輸入內容上的一種提示或糾正,如果用戶輸入的內容有問題或不夠標準,在搜索結果中會能給最貼切的搜索結果。

          ▲ 在淘寶中輸入“shouji”或“souji”,淘寶會根據拼音給出“手機”的搜索結果,但仍保留原標簽,方便用戶再次點擊搜索;輸入“手ji”時,會直接給出“手機”標簽,這種差異化的反饋能更好的為用戶服務。

          無結果提示

          如果沒有搜索到用戶輸入的內容,搜索頁會顯示一個空狀態,提示用戶沒有搜索結果。關于空狀態如何設計可以看我之前寫的一篇文章——如何做好「空狀態」設計?來看資深設計師的總結!詳細分析了空狀態的設計方法。

          ▲ 相比于直接顯示搜索無結果的狀態,拼多多的搜索結果首先會標明相關商品較少,然后將搜索內容拆分成不同的標簽進一步引導用戶來發現內容。

          文章來源:站酷  作者:Clippp
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          掌握這20條用戶體驗設計原則,助力設計成長!

          ui設計分享達人

          文章整理了20條用戶體驗設計原則,希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領域有一個初步的概覽和了解。

          1.以用戶為中心 

          這是最常被提及的用戶體驗設計基礎,當涉及到產品設計決策時,提醒我們要學會使用同理心,而不是僅憑個人的想法或意見。

          真正好的用戶體驗設計是為用戶量身打造的,用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要,所以在項目初始階段需要投入大量的時間和精力去了解用戶。

          用戶體驗研究重點是了解用戶,為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求,區分了設計任何人都可以使用的產品和為目標用戶設計的產品。


          一款特定的產品需要面對不同的目標群體,前期研究中需要了解目標人群需要什么并在產品中反映出來,這是針對性很強的設計研究。 


          2.了解信息架構

          可能很多人對信息架構的定義很模糊,這里舉個例子來具象說明一下信息架構的含義。

          例如在一款產品中,如果把所有內容都堆到一個列表或頁面中,可能我們將無法使用這款產品,所以我們看到大多數的App和網站都包含很多的導航和頁面結構,按照內容重要程度有序地來組織內容。

          信息體系結構的最終目標是幫助用戶理解他們在看什么,并幫助他們找到需要尋找的內容。

          信息架構在制作線框圖或原型之前完成,因為它是產品的基礎,有助于設計師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

          這種結構與產品的導航設計密切相關,有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。


          信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容,點擊任何元素都沒有反應,會給用戶帶來很糟糕的使用體驗。 


          3.考慮使用場景

          沒有場景,任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。


          這條原則有助于設計師考慮還有哪些因素會影響用戶和產品,很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。 
          例如在設計表單時,會盡可能的添加 輸入提示,最大程度地減少用戶出錯的機會。 


          4.了解一致性及其重要性

          保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受,因為用戶不需要再次學習如何操作,他們會回憶起之前的操作習慣并將其作為指導,這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

          保持一致意味著在需要時可以重復使用某些UI組件,并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時,所以按鈕的狀態應該是一致的。


          從邏輯上講,產品越大,這種一致性會變得越來越有挑戰性,這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡,放棄的用戶就會越多,在市場營銷中,這通常被稱為銷售漏斗中的漏洞。 


          5.給予用戶適當的控制權

          這條原則意味著用戶希望能控制產品,無論是完成任務還是定制滿足他們需求的內容。

          在設計過程中一直試圖給用戶盡可能多的控制權,例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等中。


          需要注意的是,當提供太多選項或用戶太依賴于自己的選擇時,用戶可能會不知所措,造成所謂的 選擇悖論。所以在設計時要了解用戶樂于掌控的余地,不能讓用戶感到使用壓力。 


          6.把可用性放在首位

          在整體上看,建立高標準的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。


          可用性的重要之處在于要理解可用性的靈活性和重要性。 


          7.了解用戶測試

          結合可用性的概念,我們還要進行用戶測試,這是設計師對工作進行測試的方式,對新的產品來說至關重要。

          當設計思想和理念被轉化為有形的原型時,設計師要觀察真實的用戶是如何與之交互的,可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。


          測試通常分幾輪進行,團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現,設計也隨之發生了變化。 
          如果發生更改,將會進行新一輪的測試,通過這個過程,設計團隊可以改進他們的工作,直到達到可用性標準。 


          8.少即是多

          在創造力和創造獨特事物的渴望中,很多設計師很容易無意中弄亂產品界面甚至產品本身。

          功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊,但也會給用戶帶來負面體驗,在設計時要學會克制并優先考慮真正關鍵的部分很重要。


          另外手機端的屏幕空間非常小,創建一個有效的布局,想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。 


          9.視覺層次

          視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動,并立即了解最重要的內容以及這些內容與其他部分的關系。

          視覺層次結構與布局設計緊密相連,幫助用戶消化所接觸到的信息。


          創建層次結構從概念的草圖開始,一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色,而次要按鈕會顯示為灰色或與背景混合,并顯示“撤消”或“返回”。 


          10.了解用戶的心智模型

          為用戶創建心智模型是嘗試使用同理心的一種方式,是幫助設計師從用戶的角度看待問題的工具。

          正確使用意味著用戶無需投入精力就可以使用的直觀產品,而錯誤的思維模型會導致一些問題,例如界面混亂、高昂的交互成本。


          為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見的方法包括 卡片分類、決策樹、對用戶行為的密切觀察,或者使用大量的數據來建立關鍵用戶的心理模型。 


          11.設計中的講故事

          講故事的方式更加直觀,利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感,給用戶留下持久的印象。


          想出一種可視化的方式來傳達復雜的內容具有挑戰性,但同時也是有益的,可以更好地接近用戶并將其作為提高產品可學習性的方法。 


          12.不要直接跳到高保真原型上

          高保真原型是設計項目的最終目標,但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。


          避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下,一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。 


          13.可訪問性測試很重要

          不僅要檢查關鍵用戶是否可以流暢地使用產品,還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。


          事實上,殘疾人和其他用戶一樣需要數字產品,但很多產品在設計時并沒有考慮到這些群體,但這也提供了一個機會,為所有用戶提供一個可以依賴的好產品。 


          14.熟悉并在用戶體驗設計中使用

          我們知道為用戶提供一致的設計有助于克服學習曲線,同時為用戶提供熟悉的東西也有助于縮短學習曲線。

          例如,大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

          使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失,有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計,同時也是直觀的,不需要太多努力就可以使用。


          設計一個完全不依賴熟悉度的產品可能是具有風險的行為,因為它很容易讓那些不熟悉產品的用戶超負荷,形成巨大的學習曲線,增加用戶負擔。 


          15.了解交付成果的力量

          可交付成果是可以在整個團隊中交付的內容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現。

          可交付成果是用戶體驗設計原則,可以幫助設計團隊和其他利益相關者理解和交流概念。

          ▲ 用戶畫像可以捕捉理想用戶,并提供可以相關聯的真實面孔,是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟,有助于確保這些步驟確實可以輕松執行,并且整個過程很流暢。


          這些交付成果服務于關鍵功能,設計師需要在整個項目中都依賴它們,不斷轉換為用戶可以與之交互的真實有形的設計。 


          16.專業的原型設計工具

          用戶體驗設計的過程不是線性的,而是一個循環。無論創建什么樣的產品,都需要專業的原型工具,將基本框架放在一起,然后添加可能需要的所有細節。


          從邏輯上講,設計團隊的具體需求會因團隊而異,但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等,對于大多數團隊來說是必要的。 


          17.精心管理產品需求

          一切都從收集需求開始,然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易,但隨著項目的進展,要保持列表的條理性確實是一個挑戰。


          除了創建需求和檢查復選框之外,還有一個問題就是調整需求,需要從 設計、技術和業務各個方面來處理各種需求,還要確保這些需求之間沒有相互矛盾。  


          18.了解移動和網絡產品之間的差異

          網頁端和移動端產品最明顯的區別是屏幕尺寸,這意味著所有的視覺層次結構和信息架構都將將從Web到App發生變化。


          移動端產品會有更多影響設計決策的因素,例如設備的操作系統、使用產品的環境等。了解移動端產品在 導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。 


          19.利用UX設計模式

          幾乎所有的產品都專注于設計模式,它們可靠、易于查找并通過減少設計時間來為項目增加實用性。


          ▲ 當用戶在谷歌搜索中輸入的內容有問題時,谷歌會提供一個相關的搜索提示,輔助用戶進行精確地搜索,解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。 


          20.使用合適的工具才能有效

          擁有單一的內容來源可以為團隊帶來清晰性和高效性,如果線框和原型分散在多個渠道中,這種內容的集合就會變得很難達成。


          通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題,防止產品細節沒有表現出來或者被忽略。 


          最后

          通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

          沒有人知道用戶體驗設計在未來會引領我們走向哪里,不過我們可以確定,無論它帶給我們什么,肯定都會很有趣。

          慢慢來比較快,希望對你有所幫助~

          文章來源:站酷  作者:Clippp
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          交互深耕-B端設計師要懂的信息架構

          ui設計分享達人

          信息架構這篇是本人在現階段覺得較難學習與闡述的知識點,網上關于信息架構的知識內容也是參差不齊。在學習與探究的過程中查閱了很多資料,反復修改多次,盡量用直白的語言結合實例來闡述信息架構。目錄如下:

          大家可以根據上述目錄來進行選擇性閱讀,當然全文閱讀也是極好的~





          1.1 前言

          這篇文章的起源,來源于最近看到的話題“B端設計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設計依靠組件庫就能夠快速搭建。


          那么在這種情況下,B端設計師存在的意義和價值到底體現在哪里呢?其實B端設計的重點并不在頁面的視覺上,視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現在做「正確的設計」,比如以下幾個方面:

          1.這個設計能否完成對應的商業目標和產品目標;

          2.我們的信息呈現是否合理以及能否解決當前需求;

          3.用戶能否在頁面上快速找到想要的信息;

          而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發現其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知,這能夠幫助我們做出正確且出色的設計。


          1.2信息架構概念

          關于信息架構的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

          相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構拆分為信息與架構去理解。

          信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來,然后呈現出來。其本質就是研究信息的表達與傳遞。

          通俗點講,信息架構就是讓用戶可以更容易的理解我們的產品,讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現形式,它更多的是體現在產品設計的各方面。具體主要表現為組織系統、標簽系統、導航系統和搜索系統。





          為什么需要信息架構?我們都知道B端產品設計的核心是「降本提效」,在設計這一側的可以將其理解為降低認知成本,提升使用效率。

          降低認知成本需要我們更好的表達信息,讓用戶能看明白我們的產品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


          而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產品陷入難以上手或者不知道怎么用的尷尬境地。

          一個強大信息架構是產品質量的保證,是作為設計支撐點的骨架,它會減少可用性問題,提升整體導航行,創造對用戶友好的體驗。比如舉一個工具層面的例子:

          PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側且只出現當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。


          可以說良好的信息架構是高效用戶體驗的基礎。視覺元素,功能,交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計,我們就需要參與到信息架構這個過程中來,和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。


          如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結構搭建,內部有哪些系統,以及最后呈現的模樣。


          那么信息架構也同理,我們首先需要知道信息是為了什么目標服務,然后我們通過怎樣的結構來組織這些信息,以及過程中會用到的信息元素,最后如何呈現它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環節沒有做好或者沒有了解透徹,那么在輸出信息架構時往往會出現方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現的。


          3.1 信息獲取:先理解業務,再談架構

          B端行業對于業務理解的要求是比較高的,只有在理解業務的基礎上,將業務需求轉化為對應的設計目標,我們才能夠輸出合理的信息架構方案。

          個人認為理解業務的基礎,就是能夠用一句話講清楚當前設計的產品。這句話可以描述為:誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產品服務。


          雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標。因此我們在分析和梳理業務的過程中首先要弄清楚的就是這三個要素。


          3.1.1用戶:分清購買者與使用者

          用戶永遠是排在第一位的,也是我們首先需要弄清楚的。在B端設計中,本質上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業微信,購買客戶是企業,實際用戶是員工。

          對于企業:「我想要有一款軟件可以更好的管理員工」

          對于員工:「我想要這款軟件能夠更好地提高工作效率」

          客戶決定了我們產品的購買(部分情況下也兼顧使用),而用戶則決定了后續產品的復購率。因此在業務理解中,我們需要弄清楚當前產品所處的服務階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產品的使用體驗又會偏向于用戶。


          因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務,這也就決定了我們在設計信息架構時對應的不同側重點。


          3.1.2場景:需求源于場景

          場景是指需求產生的某種條件,這個條件包括但不限于環境、時間、地點、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產生該問題的原因

          比如當用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因為外界環境冷。這兩種場景涉及到的解決方案是完全不一樣的。


          在平日的工作中我們可以通過以下兩種方式來更好的了解業務場景:

          1.通過業務方文檔進行業務背景的初步理解。業務文檔中一般都會包括需求背景,我們可以通過文檔進行初步了解。

          2.通過業務溝通進一步加深業務背景的理解。由于很多B端業務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業務方或產品多次溝通來挖掘最底層的背景。

          畢竟需求背景是理解業務的重要步驟,我們只有知道需求產生的原因,才能夠針對性的給出解決方案。


          3.1.3目標:業務目標和設計目標

          目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業務目標,而我們要做的就是將業務目標轉化為我們此次的設計目標。


          A.業務目標

          業務目標就是此次業務想要解決的實際問題,它通常是一個宏觀上的描述。比如打車軟件的業務目標簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。


          B.設計目標

          設計目標是我們基于業務目標而給出的設計策略,是一種更具體的實現方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配,并通過超時補貼紅包的方案來降低用戶焦慮。從而實現業務目標。而這一過程涉及到的信息點就有:司機位置、乘客位置、等車時間、補貼金額等元素,并需要思考它們之間的關系和呈現方式。


          可以發現從業務目標轉化到設計目標這個過程,實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。


          3.2信息架構核心:信息組織

          從前文可以看出我們會在整體設計過程中出現很多的信息元素。如果不經過對應的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調用。比如下方:

          而右側圖片信息的組織過程可以理解為通過將零散的數據信息進行分類,再以某種結構化的形式將它們重新組合排布的過程,直白一點就是先分類,再結構化呈現。我用一張圖來表明這個過程:

          那么這個過程中「信息組織」和「結構呈現」到底應該怎么做,也就是接下來要講的組織方式和結構類型。


          3.2.1組織方式:模糊分類和精確分類

          組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類,比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的:

          而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類,比如我們常用的APP商城是按照不同的主題類別來進行區分的。

          但在很多時候,產品傾向于將兩種組織方式結合起來形成復合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

          其實在大部分B端產品中,大都按照模糊分類來進行處理,比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊,比如創建時間和文件大小等。


          歸根結底,我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標,這樣才能讓我們的分類更具說服力。


          3.2.2組織結構:選擇合適的結構類型

          當信息按照分類維度組織后,我們接下來就是把整體信息進行結構化,這樣才可以將信息整體連接起來并呈現出來。一般分為以下四種組織方式:


          A.層級結構(最重要的結構)

          這是信息架構中最為常見的結構,也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節點的形式一層一層延展。

          層級結構的優勢就在于可以承載復雜的多層級內容,通過層級遞進的方式將復雜的多層級拆解得更簡潔。


          但我們需要把控好內容的廣度和深度,廣度指的是在層級結構中每一層的數目,最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內容的負擔。深度為縱向結構,建議一般3層,最多不超過5層。過深的層級會讓用戶點擊很多次,且不容易被用戶發現。比如飛書的基本信息架構也是主要以層級結構來進行的。


          B.矩陣結構(多維度結構)

          矩陣結構是各個節點都相互連接的一種信息架構方式,通俗來講就是用戶既可以通過多個維度去觸達同一信息,也可以從單個維度連接多種信息。

          這種結構其實就更類似于我們在做相關功能時:比如當你進入電影全屏時想要退出時,既可以通過點擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點觸達同一操作。


          又比如我們的聯系人功能,我們既可以通過輸入數字撥打電話,也可以查找聯系人進行撥打,還可以查詢電話記錄進行回撥。

          矩陣結構最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


          C.自然結構(隨機性)

          自然結構不遵循任何一致的模式,節點都是被逐一連接起來的。

          自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺,你很難猜到剛進入看到的是什么。

          但一般自然結構不會單獨存在,比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。


          D.線性結構(單一性)

          線性結構是非常單一的一個結構,整體是一層一層向下遞進。比較強調先后順序的一種結構。


          這種結構通常用于我們常見的軟件安裝程序等,也可以用于部分功能結構,比如網站的視頻發布,一般都是經過上傳-編輯-發布這三個步驟來依次進行。

          大家可以發現在進行信息架構時,我們在很多情況下可能會運用多種組織結構方式,我們需要根據對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


          3.2.3注意事項:關注用戶心智模型

          在信息的組織過程中,我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯網產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣,這都屬于用戶的心智模型的內容。


          因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

          這樣會導致用戶難以發現該功能。因為用戶接觸新的信息時,會以最初接觸的局部信息為依據展開并形成初步認知,用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。


          雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業術語,我們需要通過靈活有效的提示(比如標記注釋等)來引導用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應用場景其實是用于抖音官網后臺登錄,且在后臺登錄時已經給出了對應提示,那么這樣的設計也是合理的。


          3.3信息架構支撐:標簽、導航和搜索

          當經過上面的信息組織,其實我們已經能夠歸納出一個大體的信息架構框架。但在信息組織之外,我們還需要關注以下三點:標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。


          3.3.1 標簽系統:讓信息識別更通用

          標簽系統,通俗來講就是要我們對當前整個系統信息節點的命名,從而讓信息的呈現更容易識別。拿個最簡單的例子來進行說明:

          可以看到左側和右側關于衛生間的信息標示,可能左邊你能一眼區分,右邊可能就需要反應半天才能猜出到底代表什么含義了。


          這其實就是關于我們的信息命名是否能夠被大多數用戶所接受的場景,也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽,都需要考慮用戶對該信息命名的認知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢,這里需要注意2個方面:


          A.優先選用被行業廣泛接受的詞或圖標

          在進行標簽定義的時候,盡量選擇已經被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經被運用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設計軟件中,很多圖標和功能名稱都是通用的:

          這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業,哪些名詞已經達成了共識,就無需再造新名詞。


          B.不確定的詞語可以參考競品或調研來決策

          當某類功能或場景的標簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業的領頭羊(比如聊天工具的巨頭微信),那么在進行標簽定義的時候,可以參考它的命名體系。因為它已經替我們教育了一部分用戶,會間接降低學習成本。


          如果某些標簽在上述過程中還是無法確定,那么我們結合自己經驗或者與咨詢業務相關人員來進行討論,在必要時候可以在標簽旁邊添加注釋來進一步說明。


          3.3.2 導航系統:讓用戶不迷路

          導航系統其實應該是大家比較熟知的一個系統了。就像使用導航系統來規劃行程一樣,導航系統都會存在于每個網站中。比如我們常見的側邊導航、頂部導航等。

          因為網上關于導航系統已經有很多資料的講解了,在這里闡述下四類導航的含義:

          1.全局導航:位于頁面最上層的導航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導航系統;

          2.局部導航:位于最高導航的下級子類導航,子類導航并不是必須的導航,根據場景進行取舍;

          3.情景式導航:通過點擊文字鏈接進行跳轉的導航,比如在個人資料里面植入其它網站的鏈接地址;

          4.輔助導航:這里包括網站地圖,網站索引,網站指南等輔助類型的導航。


          輔助導航的網站指南包括新手引導和演示教程等?,F階段更巧妙的功能引導,是當用戶在進行某些功能的操作時及時進行提示,這樣不僅達到了為用戶引導的效果,還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后,只有當你調用組件功能時,才會及時進行提醒。


          3.3.3 搜索系統:讓用戶輕松找信息

          搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點:

          1:內容復雜度:當前頁面承載的內容復雜度如果較少,對于簡單內容頁面往往不需要搜索;

          2:內容性質:當前頁面的性質是偏向于用戶瀏覽還是查找,根據用戶行為來決定是否需要搜索;

          3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內容很復雜,我們還可以搜索結合篩選來更好的查找信息;


          上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節點,比如搜索規則和搜索結果等,在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


          3.4信息架構表達:視覺化你的架構

          我們通過上述方法已經知道如何梳理信息架構了,那么我們應該如何呈現它呢。這部分其實也是很多資料中比較模糊的點。

          在學習的過程中,發現部分資料認為信息架構就是單純的指思維導圖,但實際上信息架構并不能單純只用思維導圖就能夠完全表示。

          因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現形式,其可以幫助我們在思考階段梳理整體產品的信息構成。


          這里拋出一個很有意思的觀點,那就是「功能結構圖」和「信息架構圖」到底什么關系,這里用兩張圖示例:

          可以看到,功能結構圖更多體現的形式是功能闡述,一般形式為名詞+動詞,比如頭像設置;而信息架構圖重點呈現的應該都為信息元素,一般為名詞,比如頭像圖片。

          但在大多數時候我們看到的產品架構圖,其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。


          因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現形式并沒有特別的限制,只要能夠幫助你清晰表達產品整體結構就行?!缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現形式這一塊進行嚴苛的定義,其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現形式,其表達如下:

          可以看到其表達形式包括思維導圖和流程圖等形式:思維導圖的優勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優勢則更能夠表達整體的邏輯關系。


          因此信息架構的呈現需要根據你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發揮,而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果(類似于中間態),我們需要借助它來更好的闡述思路與溝通想法。


          3.5信息架構之后:讓信息具像化

          在輸出信息架構之后,其實這里想聊一聊頁面的呈現。因為當梳理好大的框架后,剩余的頁面細節其實都需要通過原型圖來進行體現。這個過程是從框架到頁面的階段,其實對于設計師來說也是很重要的部分。在這里根據自己的理解列出了以下幾方面的注意點:

          A.頁面能夠讓用戶看懂

          這其實就是涉及到我們的信息組織和標簽系統。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息,反思一下是在哪個方面做得不好。是標簽系統含義模糊呢,還是信息的組織分類方式不對。從頁面呈現倒推信息架構。

          綜合來說就是設計時的排列要考慮用戶的心智模型(比如網頁的常規排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的,但我們可以盡量減少其學習成本。


          B.考慮用戶的視覺動線

          當我們在進行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

          F模型和Z模型的使用區分其實就是在使用場景上,對于內容頁面來說F模型會更為合適(比如文章或者搜索結果),適合文本類的內容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導用戶的視線。


          C.掌控好適度的信息層級

          B端由于在視覺的發揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。

          不管是原型圖還是視覺,整體的視覺層級要體現得更為清晰。按理說最好的視覺層級控制在三級左右。如果發現視覺層級過多,需要考慮是不是因為信息架構設計時縱向層級過深,通過調整架構的形式來更好的呈現信息。以及對同頁面的信息進行重要程度分級。


          當我們做完或者聽別人闡述對應的信息架構時,該如何評判呢,到底怎樣的信息架構才算優秀呢。個人認為可以從3方面去進行判斷:

          業務層:

          1.設計目標合理:能平衡商業目標和用戶的目標,保證客戶和用戶都有較為良好的體驗;

          2.核心任務目標:能夠讓用戶順利完成產品的核心任務,需要通過用戶測試來進行驗證

          結構層:

          1.平衡廣度和深度:在進行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

          2.保證拓展性:當前信息架構在面對未來新增或者刪減信息時能夠穩定拓展

          體驗層:

          1.保證易讀性:用戶不經過介紹,通過頁面信息呈現能夠看懂該產品是用來做什么的

          2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


          合理的信息架構需要具備以上條件,我們需要在做設計呈現時也盡量保證以上條件。但在很多情況下其實并不能完全滿足,這個時候我們需要根據業務目標的重要性來選擇某些點進行滿足。


          梳理一下整體文章的架構,其實是按照「是什么-為什么-怎么做」的形式來進行拆分的:

          這篇文章想要表達的觀點,不是讓設計師獨立去梳理整體信息架構,而是讓設計師擁有信息架構意識,了解其是如何進行并產生的。這樣你在看到整體架構時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認知去理解和改進不好的地方。


          當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出「正確的設計」,避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。

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

          文章來源:站酷  作者:進擊的M

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          從用戶體驗的角度了解按鈕

          ui設計分享達人

          按鈕的點擊率低,用戶在放置按鈕的頁面上花費了大量時間,這可能是由于按鈕不直觀和混亂。

          我們將從用戶體驗的角度詳細解釋直觀且易于用戶理解的按鈕,例如內容中按鈕的排列、按鈕的形狀以及基于內容的配色方案。

          什么是用戶友好按鈕?

          您擁有的按鈕越多,做出決定所需的時間就越長。用戶使用每個按鈕以確定需要哪個按鈕來實現目標。對按鈕的不確定性會導致對按鈕不做任何操作。

          為防止出現這種情況,請直觀地確定每個操作的優先級。用戶一旦知道哪些按鈕對其任務很重要,就可以立即采取行動。

          1. 按視覺掃描模式排列按鈕

          應用程序中最常見的錯誤就是按與用戶自然掃描模式不同的順序排列按鈕。優先級最高的按鈕放在最前面,以便用戶首先注意到它。然而,通過視覺加權,用戶會以任何順序注意到按鈕。

          按鈕的順序不是為了提高可見度,而是為了提高效率。首先放置高優先級按鈕會使掃描方向從上到下顛倒,從而破壞視線的自然流動。

          它不是強制用戶重新掃描按鈕,而是允許用戶在單向掃描中執行高優先級操作。這允許用戶在做出決定之前依次掃描按鈕所需的所有信息。

          將最高優先級的動作放在底部使其成為視覺阻力最小的路徑,并且可以快速輕松地點擊。此外,底部位置是手指最容易觸及的位置,進一步提高了效率。

          2. 使用形狀區分按鈕和文本

          應用程序中的另一個常見錯誤是使用文本來表示按鈕。設計師使用文本按鈕來表明它們的優先級低于其他操作。但是,這對于操作按鈕來說是不合適的選擇。文本看起來不像按鈕。通過使用文本按鈕,用戶可以忽略操作而只看到主要操作。

          文本按鈕也會使得用戶對內容是按鈕還是信息而引起混淆。這種不確定性會導致這些按鈕被跳過。

          文本按鈕不僅令人困惑,而且還是難以點擊的小目標。將文本標簽放置在按鈕形狀內可以更輕松地調用操作并點擊它。

          按鈕形狀是抑制優先級低于文本按鈕的操作的好方法。使用戶更容易識別以他們喜歡的方式實現目標的所有選項。

          3. 為漸進式動作添加顏色

          高優先級操作是最容易看到的。此操作與用戶的目標直接相關。如果您不確定其余的操作,請考慮哪些操作將用戶推向目標,哪些操作正在遠離目標。

          在上面的例子中,“結帳”是優先的,這是用戶達到目標的一個動作。但是,尚不清楚“查看購物車”或“繼續購物”操作是否具有中等優先級。

          “查看購物車”操作允許用戶查看他們添加到購物車中的產品,這會促進結帳?!袄^續購物”操作將用戶從結賬返回到產品頁面。

          通過查看每個操作,很明顯“查看購物車”具有中等優先級,而“繼續購物”具有低優先級。

          按鈕顏色從文本顏色中脫穎而出并吸引用戶的注意力,因此它是顯示漸進式動作的有效方式。如果按鈕顏色與文字顏色相同,則信號不是很強。為漸進式動作添加不同的顏色意味著用戶應該采取的動作。

          如果您為每個漸進式動作使用相同的顏色,則用戶無法確定哪個具有更高的優先級。此外,為每種顏色使用不同的顏色只會使用戶感到困惑,并且不會理解不同的顏色。并且,您還會在每個按鈕上感受到相同的視覺重量。

          設計的訣竅是使用相同的色調,但改變中等優先級動作的飽和度和亮度,使其看起來比高優先級動作更亮。現在按鈕權重不沖突,很明顯哪個突出。

          對比以增強對比度。主要按鈕使用深色背景上的淺色文字,次要按鈕使用淺色背景上的深色文字。這為高優先級操作提供了更亮的文本標簽和最佳對比度。

          4. 改變標簽上文字的粗細

          到目前為止,應用這些技術足以區分優先級,但您還可以做更多的事情。按鈕越直觀,用戶就越不需要考慮它。

          對每個標簽上的文本使用相同的粗體可以賦予該文本相同的強調量。因此,建議根據優先級分別強調每個標簽的文本。更改文本的粗細,使高優先級按鈕最厚重,低優先級按鈕相對單薄。這樣,當用戶閱讀文本標簽時,文本的權重表示優先級。

          在上面的例子中,“結賬”標簽比其他標簽更厚更亮。“查看購物車”標簽為半粗體,“繼續購物”標簽為中等。因此,文本標簽反映了每個動作的視覺權重。“查看購物車”標簽上指示“3件商品”的文字沒有加粗,因為它是補充信息,并不代表所執行的操作。

          5. 為高優先級操作提供圖標

          最后一種技術是讓色盲用戶可以訪問您的按鈕。色盲用戶無法通過顏色區分重量差異。因此,我們需要的東西是不是顏色作為一個視覺線索。

          為高優先級操作添加圖標將進一步強調它以使其脫穎而出。用戶瀏覽時,用戶通常關注視覺元素而不是文本。該圖標將使所有用戶更加關注高優先級操作。

          用戶仍然可以通過移除顏色和標簽來識別結賬按鈕。

          總結

          如果用戶在操作屏幕上花費大量時間,或者點擊率較低,可能就是按鈕設計的不直觀。在這種情況下,可以使用這些技術來增強按鈕顯示并有利于突顯優先級。

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

          文章來源:站酷  作者:對啊設計君

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          5個方面改善用戶體驗

          ui設計分享達人

          當你在一個既定的服務領域工作,但想要進行革新時


          1.詳細研究當前的用戶體驗


          分析當前的服務體驗,解讀用戶旅程中涉及到的行為,接觸點,出現的痛點。構建現有的體驗旅程圖可以捕捉到服務體驗的全貌,立即發現需要重新設計的關鍵問題,促進組織內部的一致性。對于這種復雜的服務,根據分析結果建立服務藍圖也大有好處,可以捕捉到流程中的關鍵問題還有不同接觸點的關系中的重要方面。

          建議:
          自己進行嘗試,能夠有效地發現細節,涵蓋分析中的所有步驟。


          2.分析服務構建


          體驗和過程只是服務的一部分:在分析現有服務時,我們也要考慮底層系統是如何搭建組件和動態結構的。只有對系統進行全面理解,我們才能發現連接缺失,精力和資源的潛在浪費和重復。創建一個系統地圖有助于讓團隊成員明確這些問題,討論潛在的改善機會。

          建議:
          我們需要將系統中的所有行為者聯系在一起,全面理解系統過程,減少重復,彌補差距。


          3.設定具體的目標,指導設想


          在開始構思之前,花些時間來思考系統和體驗的分析結果,并通過重新設計確定自己達到的關鍵目標。目標可以是橫向的(比如 “優化整個旅程中的信息流”),也可以是非常具體的(比如 “入職:從填寫表格到熱情的歡迎會”)。最重要的是,我們首先要詳細了解現狀,才能設定目標,制定正確的方法,同時意識到急需解決的潛在局限性和障礙。

          建議:
          我們也可以將期待體驗設定為目標旅程,為體驗中的每一步設定一個具體目標。


          4.創造新點子和解決辦法


          提出新的想法,解決旅程中所有已知痛點或系統中的差距,以及抓住有趣的機會。這些想法包括既稍微改進一些特定功能,也可以影響整個服務模式的寬泛概念。在這個階段,不要限制自己的想法數量,更不用考慮可行性:捕捉每一個想法,與其他團隊成員分享,并在彼此的思考之上建立一個新想法。

          建議:
          快速構思是一種頭腦風暴的練習,團隊中的每個人都寫下他們心中的每一個想法,然后再進行小組討論。


          5.確定最有可能實現的概念


          收集所有想法,確定下一步的行動計劃。如果項目很簡單,我們可以簡單地將所有的想法整合成一個重新設計方案,逐步發展。在其他情況下,你可能最終得到50多個想法,對當前的服務體驗進行創新,但顯然我們不能訴諸于每個想法,那么……從哪著手呢?我們可以建立一個評估矩陣,確定標準,分析每個概念(例如,對用戶的價值,實施成本,獨特性等),并對它們進行相應的評分。這樣我們就可以篩選出最有可能實現的想法,創造較大的價值(這些想法可能是最先開發的)。簡略的概念可以很好地改善部分服務,但不會產生較大的影響(容易實現的目標);而較復雜的概念從長遠來看會對服務體驗產生更積極影響,但需要投入大量的時間和精力。

          建議:
          我們需要考慮的最核心內容是新概念給用戶和組織帶來的價值,而不是實施的可行性或復雜性-但這可以根據具體環境而改變。

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

          文章來源:站酷  作者:馬克筆設計留學

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          日歷

          鏈接

          個人資料

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

          存檔

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