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

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

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

          首頁

          數據滯漲,交互如何破局

          ui設計分享達人

          作為設計師,日常工作中我們經常要思考如何吸引用戶轉化。如果僅把“界面設計美觀”作為設計的發力點,很難形成完整的判斷鏈條,完成預期的商業目標。因此,在交互行為層面嘗試“破解”用戶行為發生的背后原因,通過科學的方法“設計用戶行為”就變得更加重要。

          行為設計領域有三個非常重要的模型:福格行為模型,成癮性模型以及峰終效應。其中福格模型在輔助我們做行為預判的過程中扮演了重要角色。

          福格模型是以耶魯大學教師 Fogg,2009 年發表的一篇論文為中心,闡述了任何一個行為的發生,都需要滿足以下三個要素:


          任何一個行為的發生,都離不開3要素:動機、能力和觸發器。因此在設計時需要考慮:

          人們是否有產生行為的動機、發生行為的能力,以及一個合適的觸發點。

          • 高動機高能力

          這類用戶有付費動機且熟悉產品使用流程,屬于高價值用戶,是產品的真愛粉。在后續設計過程中,我們可以收集用戶反饋,并針對問題改善體驗就行。

          • 高動機低能力

          這類用戶需要降低門檻,必要時可以提供幫助和引導。提高操作能力,優化用戶體驗。例如一些應用為低能力群體設計“專屬版”,如針對老年人,推出適老版應用,精簡用戶操作步驟,突出核心功能,便于這部分用戶完成產品主流程操作。

          • 低動機高能力

          這類用戶需要提高動機,可以結合馬斯洛需求層次理論找出用戶不同階段的需求。分析用戶需求,挖掘用戶痛點,尋找用戶動機。例如“分享領取大額優惠券”、“每日簽到送積分”、“走路得能量”等,我們可以同過激勵來增強用戶動機。

          • 低動機低能力

          這類用戶需要適當放棄,投入產出比較低,不屬于我們的目標用戶。



          本次將以 “為家人購買保險” 的優化過程為例,分享運用福格模型把行為設計和商業場景聯系在一起。通過設計引導用戶行為進而助力產品轉化。


          • 背景:

          用戶在為自己成功投保“醫療險”后,會為本人再推薦一份其他險種的產品,打造“完善雙重保障”的概念。但某年齡段歲下的用戶因保費過低,在收入來源中屬于ROI較低的群體。

          • 產品目標:

          希望該年齡群體在為自己購買完保險后,優先推薦為“家人購買”,因其所獲得的商業價值效益更大。預期通過為家人購買保險,拉動這部分用戶的整體ROI。

          • 設計目標:

          引導用戶為“家人購買”一份“醫療險”

          用戶已經為自己購買過一單保險的情況下。大部分用戶具有健康保障需求,其本身也有購買保險的動機。在模型中偏向于“高動機”人群,

          本次設計的發力點:強化這部分用戶“為家人購買”的動機,降低購買保險的行為成本,同時在適當場景給予用戶觸發提醒。


          我們一般通過兩種途徑增強用戶的行為動機:心理刺激和物質刺激。

          心理刺激

          1.營造稀缺性:通過限時限量等方式營造稀缺性。

          2.強化“家庭健康保障”需求。安全需求是人的基本型需求。通過“父母有保障,我更安心”等文案迎合用戶對安全生活的向往。

          3.顯示社會認同信息。尋求社會認同是更好一層的心理需求。通過標簽外露承保公司名稱,尋求社會認同,并側面透傳出專業性,建立用戶信任感。


          物質刺激

          “物超所值”,便會促進行動。在頂部向用戶宣傳為家人買的“產品優勢”,增強付費動機



          我們可以通過降低用戶門檻,來提高用戶完成這件事的能力。

          1.降低門檻—降低用戶成本(金錢)

          1元為父母升級,降低用戶參與成本。

          2.降低門檻-降低操作成本—簡化選擇(時間)

          根據業務目標,指定最優推薦策略。如本次流程最優推薦策略是為父母購買,去掉可能影響用戶決策的其他選擇項,改為僅顯示最優推薦策略下的唯一指定模塊。

          3.降低門檻-降低認知成本—結合圖像(精力)

          “ 產品適用群體圖片+文字”的表達,在當前情景下可快速傳遞信息。便于用戶快速理解當前流程是在“為誰購買保險”,從而降低以往用戶將“家人身份信息填寫錯誤”的情況發生。這樣設計減輕了用戶的認知成本,提?了信息傳遞的效率。


          1.觸發器“醒目”

          • 膠囊形狀的「提交訂單」按鈕在“方形卡片”上十分醒目,是觸發用戶行動的視覺提醒。

          • 簡潔按鈕文案設計,如“限時升級”,將有助于加速用戶的決策,從而促進轉化。




          在日常工作中,可以借助福格行為模型解決商業目標中的引導、轉化、留存等問題。在做設計時,我們首先也需要思考設計目標 : “我們想要用戶發生什么行為?”

          我們可以通過福格模型從“動機、能力、觸發因素”等角度進行設計思考,更加深入的理解用戶行為背后發生的原因和影響用戶決策的因素,幫助我們更好的完成產品優化和體驗升級,最終達到商業目標。


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

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

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

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


          引誘整理的藝術——交互設計助力優質的用戶體驗

          ui設計分享達人

          我們生活在一個信息大爆炸的數據化時代,隨著網絡科技的飛速發展,產品和用戶之間的互動也日趨復雜,新功能不斷涌現,帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下,人們對交互設計的需求就越來越大,市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創建、用戶滿意度以及回頭率等方面的影響。那么,什么是交互?交互設計應該做什么?希望今天這篇文章,能夠加強你對交互的理解。




          undefined

          交互就是與另一個人或者物進行交流互動,比如你說話或按動鼠標,對方給你反饋,這就是交互。對于設計師們來講,交互多指用戶與計算機、手機等產品進行的交互。


          undefined



          undefined

          交互設計是一個頁面或者一個界面的內容規劃,例如哪里放圖片,哪里放按鈕,哪里出現文字;或者說是一個龐大網站以及產品的整體邏輯梳理,例如如何安排信息層級,如何讓用戶更輕松地找到自己想要了解的信息,如何讓整個網站或產品更加合理、有效地運轉。


          一個城市有合理的規劃交通才會便利,城市里面的人才會覺得更加舒適,而一個合理的交互設計也直接影響著一個網站、一個產品甚至一個品牌。



          undefined

          視覺設計是感性的,更注重一切表象的東西,比如顏色、版式、形狀、調性等,視覺設計最終的成品是視覺的效果圖設計稿。


          交互設計相對來說更加理性,交互設計更加注重用戶是誰,通過需求分析得出問題、解決問題,交互設計的最終成品是原型圖。



          undefined

          看過了文字解釋,再讓我們一起來看看生活中無處不在的交互設計。


          疊貓貓、蓋樓、星秀貓……每年雙11,天貓都會創新活動,激發用戶對雙11購物節的期待,營造蓄勢。


          今年的雙11的主題為喵糖總動員,用戶通過組隊一起做任務賺喵糖,通過擲骰子的方式獲取糖果數,占領格子,擊敗對手。獲取喵糖的過程中,營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外,最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計,可以引導用戶瀏覽會場店鋪或各品類商品,最大程度地完成各個淘寶店鋪的曝光需求。


          undefined undefined

          天貓雙11-喵糖總動員活動頁面


          新冠疫情還在持續蔓延,飛豬App貼心的在行程頁面,添加了防疫工具引導欄,通過點擊按鈕,可跳轉至支付寶中行程碼、核酸預約等界面,為用戶出行提供便捷的準備工作。


          用戶在滑動頁面時該導航欄會被隱藏,靜態時則顯示兩個應用,點擊展開才能查看更多。設計采用浮層式引導,提供便利的同時,且不會對用戶產生干擾。


          undefined undefined

          飛豬App界面


          一切交互設計所要達到的效果就是形成良好的用戶體驗,讓用戶在使用界面時更方便找到自己感興趣的東西。


          通過地圖及定位,通過氣泡及icon的區別,把附近的美食等進行排名,讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。


          undefined undefined

          美團App界面


          “優秀的設計是考慮周到且不放過每個細節”。往往在那些不易被察覺的細微之處,傾注了設計師的諸多巧思與心血,嗶哩嗶哩在設計中做了以下一個有趣的小細節。


          在賬號登陸頁面,當我們輸入賬號或者手機號的時候,頁面插畫中的22和33是睜大眼睛的,而當我們輸入密碼或者驗證碼的時候,他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。



          undefined undefined

          嗶哩嗶哩App界面


          當你使用百度搜索物品,查看圖片時,左右滑動即可切換下一張圖片,上劃即可關閉圖片,這樣的操作手勢,更加方便快捷。


          在查看物品圖片時,下方還會出現商品推薦購買鏈接,仿佛“一站式”購物的貼心服務。


          undefined undefined

          百度App界面


          交互設計的核心目的是信息的傳遞,無論如何設計交互圖、如何設計交互流程,我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收,反之用戶也能用最簡單的方式找到自己想要的信息。


          這些信息包括內容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。


          那么,如何才能讓信息更好地進行傳遞?我們要搞明白信息傳遞時需要營造什么樣的氛圍,哪些信息元素需要突出,目標用戶是誰,根據這些才能以一個正確的方向有邏輯地進行交互設計,而這一切的最終結果就是實現一個良好的用戶體驗。

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

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

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

          藍藍設計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放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫?,F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



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

          資深UI設計者

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

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





          1.1 前言

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


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

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

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

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

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


          1.2信息架構概念

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

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

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

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





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

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


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

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

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


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


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


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


          3.1 信息獲?。合壤斫鈽I務,再談架構

          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.輔助導航:這里包括網站地圖,網站索引,網站指南等輔助類型的導航。


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


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

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

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

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

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


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


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

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

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

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


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

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

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


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

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


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


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

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

          A.頁面能夠讓用戶看懂

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

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


          B.考慮用戶的視覺動線

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

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


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

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

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


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

          業務層:

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

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

          結構層:

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

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

          體驗層:

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

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


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


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

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


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


          注:文章中不可避免會存在不足之處,如果對文章中內容有更好建議,歡迎隨時交流。


            參考資料:

          《web信息架構》第四版

          《信息焦慮》

          《用戶體驗要素》

          《信息架構設計》

          「從設計前/設計中階段,了解信息架構知識點」

          「互聯網產品如何搭建信息架構」

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

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

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

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

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

          交互設計師該如何高效地分析問題

          ui設計分享達人

          一. 明確和理解問題

          明確和理解問題就是要看透這個問題的本質是什么,明確要解決這個問題可以用到的資源都有哪些。

          理解問題的重要步驟:1.問題痛點梳理;2.產品功能流程圖梳理;3、用戶畫像分析;4.數據分析(熱力分析、留存分析、事件流分析)


          二. 拆分問題

          拆分問題就是問題痛點的出現核心問題,拆分問題涉及的維度的關聯性拓展有哪些。

          拆分問題的重要步驟:1.用戶的核心行為路徑分析;2.功能頭腦風暴;3.解決方案的探討


          案例:配送管理的業務組件【打印交互組件重構】

          【背景】

          配送的打印功能主要服務于行政管理人員,每天對配送模塊的訂單和司機管理,進行打印操作,打印前會頻繁配置不同打印需求

          【現有問題】

          1、滿足功能上,體驗上缺乏引導,導致用戶學習成本較高;

          2、歷史包袱,隨著功能需求不停迭代,功能層級劃分混亂,導致用戶操作理解時間成本較高;

          【前期準備】

          理解問題模塊—問題的梳理:

          交互上:操作復雜,交互組件錯誤使用,體驗感差,難用

          功能上:功能臃腫,層級劃分混亂,難理解

          【理解問題模塊—功能流程圖梳理】



          【解決問題模塊—數據分析(熱力分析、留存分析、事件流分析)】


          1.熱力分析(GIO)

          配置的需求基本上30天數據反饋可以看出,沒必要進行“配置頁”為主路徑。


          這里可得出:是否存在每次打印設置的需求,為以后的交互迭代提供快捷配置的可能性。


          2.拆分問題—用戶的核心行為路徑分析:

          主路徑:查看列表——批量打印——打印完畢(80%)



          特殊:查看列表——批量打印——設置模版——打印完畢(20%)



          3.拆分問題—解決方案的探討:【核心:以人為中心 解決問題】

          交互上:操作復雜,體驗感差,難用

          功能上:功能臃腫,層級劃分混亂,難理解


          【功能層:功能梳理重組】

          【交互層:信息關聯】

          1.交互關聯性更強,現在是聯級反饋,解決點擊一級內容不知道二級內容的編輯的可視區域;

          2.功能信息更直觀,布局界面可看出功能邏輯,勾選后及時反饋,解決經常忘記勾選打印的選項;



          【方案輸出】

          方案一:配置頁的構想,假設在設置模塊有單獨承載打印配置的區塊,而當前對話框的勾選內容是便捷選項,如需要更深設置,需跳轉到打印配置區塊

          方案二:列表的打印功能添加,全局設置,與當前對話框選擇設置進行協助配置,如:列表全局的打印功能設置“不再彈出窗口”設置,點擊當前的對話框,是直接打印操作


          【可用性測試】

          采用行為觀察法。


          【迭代成果】


                 迭代前                                                                      迭代后




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

          文章來源:站酷   作者:麥海欣

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

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

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



          如何與利益攸關方合作進行醫療設計項目?

          ui設計分享達人

          一些有用的建議和工具幫助你與患者、醫生、醫院管理人員和其他醫療保健利益相關者一起進行設計。

          近年來,醫療保健組織開始使用“設計師”方法進行創新,以提高患者和護理人員在設計和提供醫療服務的參與度。然而,將設計方法引入醫療部門也是困難重重:思維方式的差異可能導致雙方關系緊張,同時我們仍需要提供更多的證據,證明設計實踐會給醫療保健部門帶來更多的價值。


          1.調整所有人的目標


          在處理服務設計項目時,無論是參與式還是共創式,我們需要從一開始確保所有利益相關者的目標和期望一致,以促進合作順利有效,產生有意義的成果。


          所以我們可以用到Expectation Map或者the Alignment Canvas這兩個工具可以幫助理解人類的愿景和優先排序,從而使團隊對項目的理解同步起來。


          這兩個工具在項目初期調整成員目標,構想用戶對服務的期待,建立同理心,全面地呈現了不同的觀點。


          這個工具包提供的帆布是個簡單的表格,幫助確定每個涉眾的價值和目標,突出公共點和交叉點,利用不同角色不同價值的可視化卡片填充畫布。


          建議

          -每個利益相關者可以從卡片中選擇自己的價值觀或添加價值觀,討論相同點和沖突點,制定共同目標。
          -如果項目涉及三個以上的利益相關者,可以采用相同的概念模型來反映所有價值觀和共同點。


          2.了解項目生態系統


          醫療服務中有各類行為者,行為者之間以及行為者與用戶之間存在特殊的關系。因此,我們必須清楚當前設計服務的影響人,以及影響程度。


          使用利益相關者地圖反映不同行為者的角色和責任,以便更清楚地了解你正在設計的服務生態系統。


          利益相關者地圖不僅有助于可視化服務系統和用戶體驗中的不同利益相關者,還可以可視化相關者與主要用戶的互動程度。這個模版將醫療領域的利益相關者分為三類:醫療經營者,輔助人員和大型病人群體。


          建議

          -將代表主要用戶或利益相關者的行為者卡片放在中心位置。
          -將行為者卡片按照利益相關者群體進行分類,并將卡片放在畫布的相應區域。
          -將那些與主要利益相關者互動程度較高的行為者放在內圈;除了醫療系統外,還要考慮的更廣闊的生態系統。


          3.反應不同的用戶類型


          研究項目背景,收集服務生態系統中人們的行為、動機和特點等第一手資料。構建角色有助于更好地了解設計醫療服務中的病人和醫生(或其他醫療經營者)的需求、習慣和態度。


          為了更好地促進這一階段的分析,工具包中的角色模板記錄了病人和醫生簡歷上的一些具體的醫療信息,如疾病類型和醫療知識。


          建議

          -對于病人角色,首先選擇病人和疾病類型。
          -對于醫生角色,首先選擇醫生簡歷,記錄痛點。
          -利用卡片,選擇與角色互動的環境和行為者,喜歡的互動渠道,價值觀和經歷的情感。


          4.分析經歷 構想更好的服務流程


          我們都清楚,用戶旅程是一個強大的工具,能夠繪制服務體驗,包括現有服務和待設計的服務。


          我們也可以與病人或醫療行業的其他利益相關者共同繪制用戶旅程,建立對用戶體驗的理解。


          你也可以直接與利益相關者合作,確定具體痛點和在服務中可能造成摩擦的其他因素。


          這套工具所建議的醫療旅程圖可以用來分析病人和/或醫療操作者的體驗并進行可視化,涉及到體驗的所有成分:角色,行為,方式以及在接受或執行醫療服務時所經歷的感情變化。


          建議

          -寫出用戶旅程地圖需要的人物簡歷。

          -卡片用為觸發材料,促進病人和醫療相關人員分享經驗,講述故事。

          -選擇每個動作所經歷的情緒,并將其垂直投射在相應的動作上。

          -患者的用戶旅程可以按照整個治療過程繪制,有助于理解不同醫療步驟之間和相關部門之間的交叉點,以及可能出現的問題,形成一個全面的體驗觀。


          5.通過評估 確定想法的優先性


          在建立背景框架,分析了觀點和體驗之后,我們開始設計解決方案。讓不同的利益相關者參與概念生成,方便作出改變或促進相關方接受新服務。


          一旦確定了解決方案,接下來就要挑選最有潛力或最合適的解決方案,這項任務也十分困難,尤其是在復雜的環境中,比如與醫療有關的環境中。

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

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

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

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

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


          10條你絕對不能打破的交互設計規則

          ui設計分享達人

            在生活中,有一些規則是你絕對不能打破的,如果你打破了,將會付出慘痛的代價。在用戶界面設計中,也有一些必須遵守的規則。它們被稱為“啟發式”或提高用戶界面可用性的一般原則。這些是經過了長時間測試的可重復的模式,可以幫助用戶更好地瀏覽界面。一個良好的設計一定會考慮到以下原則,一個不那么好的設計總是會缺少其中的一個或多個原則,那么作為一個UI設計師,為什么要忽略這些原則讓你的用戶如此頭疼呢?

          1.系統狀態的可見性

          該系統應在合理的時間內通過適當的反饋使用戶了解正在發生的事情。

          你要不斷地給你的用戶展示適當的信息、提示和背景,使他們在任何時候都知道他們在系統中的位置。這可以讓用戶感覺自己處于控制之中,知道下一步該做什么。這個項目被添加到購物車了嗎?編輯的內容被保存了嗎?這個過程需要多長時間?我的訂單的狀態是什么?現在正在發生什么?不斷地為用戶回答這樣的問題,不要讓他們猜測或蒙在鼓里。

          2.將系統與現實世界相匹配

          你設計的系統應該使用用戶熟悉的語言,使用用戶熟悉的單詞、短語和概念,而不是使用專業地術語。你要遵循現實世界的慣例,使信息以自然和邏輯的順序出現。

          使用熟悉的詞語和語言,不要讓措辭過于復雜。屏幕上的單詞或圖標的含義應該對目標受眾清晰易懂。人們還帶有心理模型和經驗,可以讓他們解釋圖標。

          技術的最大進步之一是圖形用戶界面的出現。在圖形用戶界面之前,計算機屏幕上只有晦澀難懂的文字命令,每當你想執行一個動作時都要記住并重復。然后,一切都改變了。屏幕上顯示的是文件夾和文件的小圖像以及一個手形光標。這些都是人們能夠立即理解的視覺符號。不需要解釋,因為它引用了現實世界的心理模型。


          3.一致性和標準

          用戶不應懷疑不同的詞語、情況或行動是否意味著同樣的事情。

          有兩種類型的一致性:內部和外部。內部一致性是指你的網站或應用程序中的模式要一致。這很簡單,比如在所有的頁面上保持相同顏色的鏈接,或者在每個屏幕上對相同的概念使用相同的圖標,比如HOME。外部一致性是指大多數人使用的其他軟件和系統中的慣例,如購物車。大多數人都熟悉購物車的使用方式。你不需要重新發明什么東西。如果你這樣做,你可能會讓你的用戶更難學會你的購物車如何工作。保持一致,為用戶節省不必要的混亂。


          4.用戶控制&自由

          用戶經常會錯誤地選擇系統功能,并且需要一個明確的“緊急出口”提示才能離開不需要的狀態,并且無需通過擴展對話就能支持撤銷和重做。


          始終為用戶提供一條出路。不要強迫用戶執行他們不需要的功能,或者把他們引向死胡同。例如,如果你正在設計一個結賬流程,如果用戶愿意,就讓他們繼續購物。如果他們試圖在一個應用程序上執行一個動作,當他們在最后一刻不確定是否要繼續時,就讓用戶取消。


          5.錯誤預防

          比起錯誤提示信息更好的是一個精心的設計,它可以從一開始就防止問題的發生。要么消除容易出錯的條件,要么檢查這些條件,并在用戶承諾行動之前向他們提供一個確認選項。


          當系統操作到很關鍵的一步時,如刪除文件或向1000個收件人發送電子郵件,要確保用戶知道他們將做一些重大的事情。向他們展示確認對話或提供額外的信息,清楚地定義在行動之后將發生什么。這將防止他們在不確定自己的行動時進一步行動。這也將為他們省去大量的遺憾。


          6.利用識別而減少回憶

          通過使對象、行動和選項可見,盡量減少用戶的記憶負荷。用戶不應該記住從對話的一個部分到另一個部分的信息。在適當的時候,系統的使用說明應該是可見的或容易檢索的。


          作為UI設計師,我們的目標之一是減少用戶的認知負荷。記憶以兩種方式工作:識別和回憶。識別是指你立即熟悉的東西。比如一個人的臉。你看著一個朋友的臉,你馬上就知道你以前見過他們?;貞浀淖饔脛t不同。它是你必須從記憶中檢索出來的東西,比如一個人的名字?;貞浲ǔP枰嗟臅r間和工作,因為你的大腦必須處理更多的信息來破譯它所看到的東西。

          另一方面,識別是即時的。我們希望在我們的用戶界面上具有更多的識別,而減少回憶。實踐這個原則的一個很好的例子是使用普遍可識別的按鈕和圖標來表示功能,例如用房子表示 "家",用鉛筆表示 "編輯"。如果你必須為你的用戶界面設計新的圖標,而大多數人以前從未見過這些圖標,那么請使用文本描述符來澄清并減少認知的負擔。


          7.使用的靈活性和效率

          新手用戶看不到的加速器通??梢约铀偕疃扔脩舻慕换?,這樣系統就可以同時滿足沒有經驗和有經驗的用戶的需求。允許用戶定制頻繁的操作。


          當某些任務在你的應用或系統中反復出現時,你可能想讓用戶更有效地進行互動。例如,使用滑動手勢來保存或刪除移動應用程序上列表中的項目。刪除一個項目的正常方式是打開一個項目,然后按下刪除按鈕。專業的方式(也是更有效的方式)是通過簡單的滑動并立即從列表中刪除項目。


          8.極簡主義的設計和審美

          對話不應包含不相關或很少需要的信息。對話中每一個額外的信息單元都會與相關的信息單元競爭,并降低它們的相對可見度。


          當為藝術而設計時,如果我們走巴洛克風格,可以用人工制品、紋理和圖像填滿屏幕。但是當為交互而設計時,我們的目標是降低信噪比。這樣做會使我們的界面對用戶來說更容易理解。你可以應用這個原則,把屏幕上顯示的內容減少到最低限度,不管是圖像還是文字,這樣用戶就可以專注于手頭的工作而不會分心。


          9.幫助用戶識別、診斷和恢復錯誤

          錯誤信息應該用簡單的語言表達,精確地指出問題,并建設性地提出解決方案。

          錯誤會發生,那是不可避免的。用戶遇到錯誤后發生什么是UI設計師的責任。因此,我們應設計可以理解的錯誤頁面和提醒來幫助用戶,并提供解決問題的選項或方案。例如,讓我們來看看無處不在的404頁面。作為設計者,我們知道錯誤的404頁面意味著什么,但用戶一般都不知道。為了幫助用戶,我們必須把404翻譯成簡單的語言,加入一些文案,使其清楚地知道剛剛發生了什么,比如 "對不起,我們找不到你要找的頁面。這里有一些具有類似內容的頁面建議......"。


          10.幫助&文件

          盡管系統不需要說明就能使用的話會更好,但可能還是有必要提供幫助和說明。任何這樣的信息都應該易于搜索,集中在用戶的任務上,列出要執行的具體步驟,而且不要太多。


          始終讓人們能便捷地獲得幫助,把幫助放在頂欄或主導航區的顯要位置。當用戶遇到問題而不能輕易找到解決方案時,他們必須被引導到一個可以解決問題的地方。這可以采取FAQ頁面的形式,用一個搜索框提供可能的建議和答案。在沒有答案的情況下,系統必須有一個選項,可以通過支持在線詢問或電子郵件或電話,直接與支持部門聯系以獲得額外的幫助。

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

          文章來源:站酷   作者:磨刀modao

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

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

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

          淘寶不“淘”了 | 淘寶的內容設計

          ui設計分享達人

          文章大綱:

          1. 淘寶為什么不淘了

          2. 淘寶的基礎內容設施

          3. 淘寶沒有種草經濟

          4. 讓人逛下去的產品設計

          5. 逛逛和小紅書的設計區別

          6. 寫在最后



          1. 淘寶為什么不淘了


          1.1  “淘” 歷史


          淘寶成立于2003年5月,當時最早的slogan是:“淘你喜歡”,這句話的主體是以平臺角度出發,對用戶說的,意思是讓用戶來平臺選購商品。


          隨后2005年,slogan變成了“淘我喜歡”,主體從平臺轉變成了用戶,意思是讓用戶自主選擇來平臺購物。


          在最近的2021年,淘寶的slogan變為了“太好逛了吧”。代表性的是淘寶app打開的啟動圖從玲瑯滿目的商品圖,換成了新的slogan:


          圖:淘寶啟動頁變化


          圖:淘寶的slogan變化




          1.2 需求的類型


          淘,又有“篩選”的意思,而篩選行為是要對某具體目標進行的,不可能憑空篩選,這個目標產生的過程,就是我們常說的“用戶需求”。


          “用戶需求”的產生一般分為兩種:有目的的需求和無目的的需求。


          有目的的需求:需求產生的過程有戶外廣告、朋友推薦等。以這種方式產生的需求,用戶會帶著明確目標,這時用戶直接打開軟件,通過搜索,直接縮小商品范圍,更快觸達目標商品,在這種場景下,用戶明顯沒有“逛”的心情。


          無目的的需求:當用戶在沒有明確目標的情況下打開軟件時,用戶購物意向都是比較模糊的,沒有明確選擇區間。此時,如何讓用戶產生購買欲望,是產品設計時必須要重點思考的。



          圖:需求產生的類型



          我們都知道,淘寶最開始的定位是“淘”,主打的是以導購型社區為目標,主要解決“用戶來平臺需要買什么”的問題,也就是有目的的消費需求。


          針對這類用戶,最簡單的思路就是“讓用戶買到想要的東西”,基于這一思路,淘寶推出了“千人千面”的算法機制。


          隨著淘寶算法越來越精準,用戶購買越來越效率,導致很多用戶對于淘寶的使用心智固定在了購物平臺,而不是內容消費平臺。


          但是算法是有一定的滯后性的,只有在用戶產生數據后才能夠進行精準推薦。(這個數據可以是在淘寶平臺產生的,也可以是在其他平臺產生的,比如說通過搜狗輸入法輸入了某個商品名)


          所以單純的靠精準的算法推薦,并不能解決用戶的潛在需求。



          圖:不同需求類型的解決方案




          1.3  商家的流量成本


          在淘寶店鋪的運營中,有一項重要的指標叫UV價值,指的是平均每個客戶在店鋪的銷售額,數字越高說明訪客的轉化率越高,轉化高就代表最終的GMV會高。


          而根據淘寶的數據統計,店鋪粉絲級別越高,對店鋪的粘性越強,UV價值也就越高。最終反映在淘寶數據上就是GMV高,既利于平臺,也利于商家。


          粉絲的積累需要流量,而淘寶店鋪的流量來源一般分為:淘寶站內、淘寶站外,其中有包括淘寶推廣、搜索競價、淘寶客、直通車等方式,但這些流量通常是不穩定的,免費流量自不用說,付費流量的投入成本也對店鋪的資金有一定要求。


          所以店鋪需要把這些吸引的流量,轉化成店鋪的粉絲。


          舉個例子,在很多電商平臺上,店鋪會有自己的引流款,這些商品不是為了毛利。只是起到為店鋪引流的作用。


          因為對于平臺的店鋪來說,持續不斷且穩定的流量增長,不僅可以推動銷售的穩定增長,也利于長期的發展方向。



          圖:淘寶流量來源




          2. 淘寶的基礎內容建設


          2.1  內容整合成社區和去中心化


          早在2015年,當時淘寶內部孵化淘寶頭條,分享優質的消費類資訊內容,當時淘頭條的MAU(月活躍用戶)過億。但隨著視頻內容的崛起,圖文形式逐漸走下坡路,淘寶看準了直播帶貨的賽道,開始逐漸布局淘寶直播的內容形式。期間也相繼加入了微淘、有好貨、買家秀、好物點評團等內容形式。


          但是這些內容一直分散在淘寶各個功能模塊中,沒有形成一個整體的社區化。



          圖:淘寶的內容矩陣


          其中最成功的應該就屬淘寶直播了,根據淘寶直播2021年度報告:2020年淘寶直播帶來的GMV超過人民幣4000億元。


          但是,直播的內容形式注定是以主播自上而下中心化的,用戶是跟著主播走的,一旦主播下播以后,這些觀眾也會失去購買目標。


          并且由于直播屬于一對多的形式,越大的主播,觀眾越多,這時候主播和觀眾的互動率是很低的,久而久之,用戶的互動積極性也會受打壓。



          圖:以主播為中心化的淘寶直播


          除了淘寶直播,近年來另一個改動比較大的應該就是微淘的出現了,在逛逛出現之前,一直占據底部欄的二號位,它的內容形式主要以店鋪上新、直播、福利為主。


          這也是淘寶在店鋪私域流量運營上做的一次嘗試,目的是為了讓用戶更容易和店鋪產生連接。但是實際上,由于微淘的內容形式之間關聯性不大,業務場景混亂,一些剛起步的商家也沒有資源拓展多業務場景,導致內容質量參差不齊,影響轉化。


          淘寶做微淘中做內容的目的是為了讓用戶有東西可以逛,但是逛內容就代表著用戶購買需求不明確,這又與營銷場景相沖突(營銷場景是為了讓用戶快速下單完成購買),所以微淘也一直被詬病轉化率低。



          圖:微淘主要的三個問題




          2.2  信息流時代


          后來在2020年年底的時候,淘寶迎來了另一個比較大的改版,猜你喜歡變成了縱向的信息流,點擊猜你喜歡進入的是一個流量的中轉站。比如說點擊一件衣服,下面全是衣服的推薦。


          新版猜你喜歡的特點很明顯,犧牲轉化率,增加用戶使用時長。在實際點擊進入信息流中,用戶總感覺下面有新的內容,這時候用戶的心態普遍是浮躁的,會使用很短,甚至一兩秒的時間決定是否深入了解產品。如果不喜歡,就會滑到下一個產品,無形中增加了用戶在平臺的停留時長。


          據淘寶官方數據表示,此次猜你喜歡的大改版,淘寶用戶的點擊率和用戶時長都提升了20%。



          圖:猜你喜歡改版,通過犧牲轉化來提高使用時長





          2.3  “逛逛”來了


          逛逛是以UGC內容形式為主的種草平臺,顧名思義,就是消費者在無聊的時候,可以到處逛逛。


          如果說信息流是縱向的內容推薦,那么逛逛就是通過大數據,橫向的推薦內容,最終向商品引流。豐富的內容為其他消費者帶來沉浸式購物體驗,類比線下商圈,就是逛著逛著就把東西買了。





          3. 淘寶沒有種草經濟


          3.1  從AISAS模式到SICAS模式


          AISAS模型是一種用戶決策分析模型,由電通公司(日本第一大廣告公司)提出,是消費者行為學領域很成熟的理論模型之一。


          AISAS模式將消費者從產生需求到最終完成購買的路徑分成了五個階段,既Attention(注意) - Interest(興趣) - Search(搜索) - Action(行動) - Share(分享)。其中消費者在注意商品并產生興趣之后的信息搜集(Search),以及產生購買行動之后的信息分享(Share),是當下互聯網消費時代尤其重要的兩個階段。


          搜索就是當用戶對某商品產生興趣之后,消費者會通過線上或者線下渠道來收集相關產品的信息,比如說評價、打分等。分享是在購買路徑完成后,用戶自發向身邊人推薦商品的階段,也就是口碑裂變,當然也有可能變成商品吐槽大會。


          但是,在前文也提到了,搜索是在有明確對某個商品產生興趣之后才會產生的動作,整個消費路徑是單向進程的,缺少信息的互動與交換,用戶很難有效辨別信息真偽,用戶與商家依然存在信任問題,最終的購買壁壘依然存在。



          圖:AISAS消費模型的流程


          隨后,DCCI(互聯網數據中心)在AISAS的基礎上,提出了新的SICAS行為消費模型:


          既 Sense(品牌與用戶相互感知) - Interest&Interactive(產生興趣并形成互動) -  Connect&Communicate(建立聯系并交互溝通) -  Action(行動) - Share(分享)。


          Sense,感知:品牌(商家) - 用戶相互感知,通過多觸點,在商家個用戶之間建立感知,對用戶來說,關注、分享、訂閱、推送等,都是有效的感知行為,而商家要做的,就是想辦法,通過什么樣的方式或內容,讓用戶有效使用他們的感知行為(分享、點贊、訂閱等行為)。


          Interest&Interactive,產生興趣和互動。在產生興趣上,隨著用戶對傳統的廣告曝光和廣告產生的印象的敏感度在降低,理解并響應用戶的需求正在成為關鍵。站在用戶的角度,觀察用戶真正想要的內容,衡量內容的指標不再是廣告的傳播率、曝光率,而是變成了點擊率、點贊數、好評度等。


          Connect&Communication,建立連接和產生溝通。在用戶產生興趣之后,通過平臺提供的服務:客服,問大家,好評團等形式,完成用戶信任的積累,幫助用戶完成購買決策。


          剩下的Action(購買行動)和Share(體驗分享)與AISAS模式一樣,就不展開說了。



          圖:SICAS消費模型的流程,以及和AISAS消費模型的區別


          綜上,SICAS模式前三點的核心觀點是建立聯系,也就是互動,這也與時下流行的種草經濟不謀而合。





          3.2  基于社交的種草經濟


          種草行為本質上是人與人之間的一種互動關系,互動天然的容易產生強關系鏈,而強關系也意味著情感聯結和信任,最終會形成社群關系。隨著越來越多擁有相同消費偏好的用戶聚攏,用戶消費習慣逐漸圈層化,在各垂直的消費圈層中得到身份認同感。


          在這種社群氛圍的烘托下,用戶更容易表現出高表達欲和參與度,既用戶不僅是內容的消費者,同時也會發展為內容的生產者。



          圖:逛逛想打造的種草生態



          綜上結合淘寶的問題以及消費模式的轉變,我們可以得出淘寶近期瘋狂改版的思路:


          圖:淘寶改版思路



          4. 讓人逛下去的產品設


          在了解上述淘寶自身的問題和新消費類型帶來的沖擊后,可以總結淘寶最近經常改版的戰略可以分為兩個方向:轉化的歸轉化,內容的歸內容。



          4.1 微淘升級為訂閱


          淘寶第一個改版是將原來的微淘升級為了訂閱,并且放在首頁上的tab,與推薦并列。此次改版,最大的改變就是拆分了店鋪運營的內容,讓不擅長做內容的商家可以專注自家的店鋪運營。



          圖:首頁專注商品轉化,逛逛專注內容消費


          新版訂閱的精選一欄中:包括上新、買家、評測等,這些內容一起構成商家和粉絲的互動模式,吸引新客快速轉粉,同時也增加了老客戶的黏性。


          在之前微淘的版本,用戶需要點擊微淘-點擊店鋪-點擊訂閱,升級后的訂閱路徑變成了左滑進入訂閱頁面-直接訂閱店鋪。點擊直播可以直接進入直播間

          更短的觸達路徑加上私域流量的運營,優化之前微淘轉化率低的問題。



          圖:路徑圖,直接進入直播間,直接訂閱店鋪



          圖:提高直播入口權重




          4.2 “買家秀”社區升級成為“逛逛”


          另一個重要改版是“買家秀”社區升級成為“逛逛”,為了弱化逛逛的購物屬性,強化社區氛圍,逛逛在產品的商業化設計上十分克制,主要圍繞引導用戶進行內容消費和互動為目的進行設計。


          在內容分發形式上,分為了以平臺推薦為主的“發現流”和以社交關系鏈主導的“關注流”,更加注重內容垂直和精細化。



          圖:逛逛的內容分類


          逛逛的發現模塊與小紅書類似,都屬于種草型內容社區。內容主要以穿搭、彩妝等淘寶擅長的領域為主。


          頁面的布局形式和首頁的商品流一樣,以雙列信息流呈現,和單列相比,一方面,給用戶提供多樣化的選擇,承載不同的內容形式(短視頻、圖文),延長用戶在平臺的停留時長,同時也為其他內容引流,模擬更真實的線下“逛街”體驗。


          另一方面,和首頁注重轉化率的算法機制不同,影響發現流推薦算法的因素除了本身的內容質量,還會受到用戶瀏覽行為的影響,比如瀏覽內容時產生的關注、收藏、點贊、評論等互動行為。



          圖:表現內容互動率的互動指標


          逛逛相比首頁推薦,去中心化的機制也更加明顯,舉例來說,小米官方店的號,粉絲量達到了千萬級,但是內容的互動率很低,點贊評論甚至不超過個位數。


          個人認為是因為品牌天然的自帶營銷屬性,用戶在看到品牌賬號時,很容易形成品牌注冊賬號是為了賣產品給我的刻板印象。


          這也反映了逛逛的流量重點落在消費者的內容上,以消費者視角為突破口,擺脫和商品相關的品牌屬性,注重普通用戶對商品的真實評價,而不是圍繞IP賬號產生的內容消費。



          圖:小米賬號和個人賬號互動率對比


          在用戶路徑的引導上,發現頁并不支持點擊頭像進入用戶主頁,只能先點擊進入內容詳情頁然后才可以進行關注等操作,先看內容,再關注人。



          圖:更關注內容轉化率


          另外一個人關注流的動態則加強調社交關系的轉化,因為是經過用戶主動“關注”過后篩選出來的內容,是內容生產者和內容消費者相互選擇的關系,所以在產品設計上以單列大圖為展現形式,幫助用戶消費內容。為了防止讓用戶感受到廣告的營銷感,產品設計上特地強調了分享、點贊、收藏、評論等按鈕,弱化商品鏈接。


          和其他的社區一樣,關注信息流中也會推薦一些“你可能感興趣的人”,但不同的是,用戶無法直接關注推薦的博主,需要先“查看TA”,進入博主的個人頁后才可以進行關注操作,這樣的目的主要是為了讓用戶了解達人的領域內容之后,再決定是否關注,這樣的關注更加有效,粘性更強。



          圖:“關注流”視覺設計的思路


          “逛逛”的內容形式很好地彌補了淘寶缺乏用戶導購的問題(俗稱種草),依托KOL產出的優質內容,與消費者產生情感上的價值鏈接,創造出用戶的潛在需求。




          5. 逛逛和小紅書的產品設計區別


          這次改版之后,很多人說這是小紅書。關注、發現、垂直分類欄,都和小紅書很相似。



          5.1 內容起家和電商起家



          淘寶和小紅書對內容的分發模式是不同,小紅書默認分類欄處于收起狀態,只有主動下拉的時候太會出現,由此可以看出小紅書對自己的內容推薦還是比較有信心的,由于一開始就是做內容起家,所以對自身平臺用戶的喜好是有所了解的。


          但是淘寶是一個電商起家的平臺,在內容方面,缺乏對用戶的偏好判斷,所以逛逛的導航欄下方,會加入了“官方話題欄目”和“官方出品的內容”,利用精選話題引導社區內容的方向,一定程度上也可以通過話題數據了解平臺用戶的偏好。



          圖:小紅書比淘寶更懂用戶喜歡什么內容



          5.2 內容導向不同


          小紅書等平臺不光有購物種草,還有學習、音樂、科普等內容也相對成熟。和淘寶轉型社區內容一樣,小紅書也在進行圖文、視頻向直播內容擴展的戰略方向。所以我們會發現,在小紅書的編輯內容上,視頻和直播是強露出的,且不支持位置更換。


          再來看逛逛的內容,以穿搭、彩妝為首的消費品內容,這些都是淘寶擅長的領域,容易產出優質內容,反過來說,這些內容最終也都是可以在淘寶上可以消費到的,最終還是以平臺商品轉化為目的。



          圖:內容形式對平臺戰略的影響




          5.3  小紅書互動率更高,淘寶內容消費效率更高


          小紅書在內容消費形式上,比逛逛更加注重互動:首頁瀑布流點擊進入二級的內容頁后,可以直觀的看到博主全部的文本簡介,以及下方的用戶評論內容,用戶消費的不光是圖文本身的內容,也是其他用戶評論產生的內容,更容易產生社交關系鏈。


          逛逛則更注重內容本身的消費效率:產品設計上使用沉浸式的下滑體驗,用戶點擊產品圖后,進入的是同系列產品的瀑布流,如果想要查看評論的話,需要點擊評論icon進行二次跳轉,此時用戶會一直專注于內容的消費,容易忽略其他用戶評價等內容。



          圖:提高互動率的產品設計



           6. 寫在最后的一些思考


          此次淘寶做內容社區的優勢之處在于,淘寶將社交關系融入到了商品的消費鏈路中,消費者通過商品體驗、測評、種草等方式,和平臺產生互動,建立聯系。


          而淘寶最不缺的就是商品,并且擁有8億多的消費者,和其他平臺相比,更容易產生垂直領域的優質內容和專業的KOL,但是要想經營一個優質社群,除了需要一批優質的內容創造者,還需要考慮后續涌現的用戶是否會對現有社群模式產生沖擊。(比如知乎開放用戶注冊后,導致內容注水的現象)


          因為淘寶本身相當于一個巨型供貨方,大大縮短了帶貨變現的路徑和難度,不同于小紅書這類平臺,它們最開始是沒有帶貨模式的,常常需要通過接推廣給其他商品引流來變現。


          過短的變現路徑必然會吸引一些用戶或者機構抱著獲利的心態涌入社群,這種逐利的心態,也有可能會影響專業KOL的創作心態。

          文章來源:站酷   作者:抓馬橋分橋

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

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

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


          編寫一份友好的交互說明文檔要注意哪些

          ui設計分享達人

          最近有設計小伙伴咨詢,怎么樣的交互說明才是最好的,是大家都喜歡的。最近他寫的交互說明文檔提交給需求評審會的成員審核時,大家都建議他再寫的合理些,這讓他傷透了腦筋。 

          我告訴他: 
          第一、崗位對象不同:沒有一份十全十美的交互說明可以打動所有人,讓所有人為之驚嘆。畢竟,由于閱讀交互說明文檔的對象不同,他們會對交互說明文檔有不同的要求,這是崗位屬性導致的結果。例如前端開發希望詳細到字段、初始默認值、數據調取接口等,而領導只要看保證業務方向沒有錯誤的大交互鏈路。 

          第二、同崗位不同認知:同一崗位不同成員的認知、從業經歷、個人喜好、性格脾性等也會導致不可能有完美適配所有人的交互說明文檔。例如在一個行業已經深耕多年的前端工程師,即使你的交互說明文檔寫的沒有那么詳細,他也可以從你現有的文字中推敲出其他方面,同時還能幫你補充完善;而針對剛入行的前端工程師,你要是寫的不詳細,他就會抓狂,項目時間緊急的時候還會自己腦補交互細節。之后你走查時候也會抓狂,但是沒用呀,誰讓自己沒有寫明白交互細節,遺漏了呢。 

          第三、使用場合不同:不同場合需要的交互說明文檔也不同。例如與對方面對面溝通,交互說明文檔可以少寫點;但是通過線上工具與對方溝通,就需要寫的盡可能詳細;如果是會議型的評審,那就要方方面面都做足功課了。簡單來說就像準備一份ppt:針對同一個主題的ppt,在外部演講和在公司內部演講,同一份ppt會需要設計兩個版本,一個是內部版,一個是外部版,原因在于使用場合不同。 

          第四、產品階段不同:交互說明文檔闡述的是一個產品的交互,而不是闡述其他的。如果產品所處階段為成熟期,那往往產品的交互文檔已經沉淀了很多通用法則,可以被復用,那么現在的交互說明文檔少寫點,問題也不大;但產品處于探索期或成長期,通常來說可復用性的交互資產是不存在的,那交互說明文檔就需要準備的相對完善。 


          有些設計小伙伴就說了,既然不可能滿足所有人,那我就按照自己的想法隨意寫好了。這可不行哦,畢竟我們的主要工作有一部分是撰寫交互說明文檔,這就必須要有認真、嚴謹、專業的工作態度,把這部分工作做好。那我們來看看,編寫一份友好的交互說明文檔要注意哪些。 


          什么是交互說明文檔
          交互說明文檔是用來告訴參與產品研發的團隊成員頁面交互相關細節的一個說明文檔,包括頁面間的邏輯跳轉、頁面內模塊的交互、頁面功能的狀態等。交互說明文檔寫的越詳細越有利于參與產品研發各方的正確執行。 


          有待改進的交互說明文檔
          我匯總了一些日常工作中有待改進的交互說明文檔形式,看看都存在哪些問題。 

          1、文字密密麻麻,無結構
          幾乎所有剛初入職場的設計師,在編寫交互文檔時,會怕自己寫少了別人覺得自己不專業,怕寫的不全沒辦法表達頁面細節,導致交互文檔密密麻麻都是文字,這讓閱讀者幾乎無法閱讀,找不到視覺落腳點。 


          2、描述簡單,不完整
          有幾年工作經驗的設計師,由于很多通用交互法則已了然于心,他們在編寫交互說明文檔時就比較簡單,一些交互就沒有寫在文檔上,這導致開發在開發時,忽略了某些交互。 


          3、數據太假,沒有邏輯
          交互稿數據沒有邏輯,是很多設計師經常會出現的問題,一部分原因可能在于產品經理沒有理順產品邏輯和細節就提交設計師畫圖了,另一部分原因可能在于設計時間緊張,來不及對交互稿中所有的數據都做到邏輯合理。 

          曾經遇到過的情況有,關聯數值關聯不上,表格中字段對應的值對不上,表單填寫的數據和實際情況不符。 
          建議大家在時間允許或有條件反推產品經理協助完善數據的情況下,盡量數據展現的真實與符合邏輯,如此有助于開發及相關閱讀者高效理解。 


          4、圖文太遠,找不到
          有幾次我注意到設計師提交上來的交互說明會標注“見圖X"這樣的文字。也就是一段說明讀完了,還得去頁面的某個角落尋找對應的圖,這種體驗非常不好。 

          在交互設計原則中有一項為“足不出戶”?!白悴怀鰬簟钡囊馑际侵改茉诋斍绊撁娼鉀Q的事情,不要去其他頁面;能在就近完成的事情,不要距離過遠。頻繁的切換和跳轉會導致用戶心流被打斷,容易引起用戶思緒中斷、思考不劉暢,甚至可能對產品產生反感。 

          同理,我們交互說明文檔中的圖文也應盡量相鄰,通過一眼文字一眼圖,讓用戶看的順暢、舒適,理解的快速。 


          5、零散,東一句西一句
          東一句西一句是指交互說明文檔中本該成為一體去描述的文字,被分成了好幾個部分去闡述,這對看文檔的人來說簡直是災難,他需要自己重新梳理交互思路,將交互規則串聯起來。 


          我們自己在編寫交互說明文檔時,盡量規避上述常見的問題。 


          什么是好的交互說明文檔
          對于什么是好的交互說明文檔,網上一搜一大把,這里我根據自己的經驗,和大家分享下什么是好的交互說明文檔。 

          首先我們來明確下,什么是好,有了好的標準以后,再來談談如何做到好。 

          1、什么是好
          通常情況下,交互文檔會給產品經理看,用來評審設計方案是否滿足需求;給視覺設計師看,用來指導視覺方案的呈現;給前后端開發人員看,用來指導開發邏輯;給測試工程師看,用來協助測試編寫測試用例?;诖耍玫慕换フf明文檔關系著設計方案是否可被最大程度的實現。并且如果交互文檔文字冗長、邏輯不清晰,不僅看的人吃力,還會需要增加額外的時間來和開發工程師溝通。好的交互文檔,我認為至少需要具備以下7點: 
          (1)明確價值 
          (2)考慮全面 
          (3)通俗易懂 
          (4)結構清晰 
          (5)圖文并茂 
          (6)僅此一份 
          (7)修訂記錄 

          2、如何做到好
          為了讓大家一邊學習一遍實踐,我使用“表單校驗”的交互案例給大家進行講解。 

          (1)明確價值
          能協助項目成員通過文檔更順利地完成工作任務,能幫助用戶解決問題,能達成產品目標,則是好的交互說明文檔。文檔對各方有價值,是一份好的交互說明文檔的起點。那么,如何編寫才能達到上述結果呢? 

          一方面是將此次文檔的價值寫清楚,包括寫明此次交互設計的背景與需求來源、需求清單,標明交互設計的理論依據,可以給用戶帶來的價值等。另一方面要和成員宣導這些內容,讓成員感受自己要做的工作是有價值的。 

          “表單校驗”上場: 


          (2)考慮全面
          拋開文檔閱讀對象等相關影響因素,通常來說交互需要考慮到以下幾方面: 

          a、整體交互流程
          整體交互流程是指產品頁面與頁面之間的交互邏輯。 

          b、頁面模塊交互說明
          頁面模塊交互說明是指模塊自身的交互說明,或同頁面內獨立模塊之間的交互邏輯,或不同頁面模塊之間的交互邏輯。例如點擊導航樹節點會聯動右側表格內容刷新;點擊banner跳轉到對應的商品詳情頁,且定位到頁面1/2位置。 

          c、頁面功能交互說明
          頁面功能交互說明是指單個功能的各種情況闡述。例如搜索框內輸入文字,通過enter觸發對應頁面跳轉。 

          d、盡量真實的數據展示
          雖然是交互說明,我們也盡量做到模擬真實數據,否則很容易讓閱讀者產生錯誤判斷。并不是所有人都會一字一句的去閱讀文檔,因此,盡量真實的數據,有利于閱讀者更有效的了解。 

          e、特殊情況額外補充說明
          很多情況下,會因為某些原因出現極端交互情況,此時也需要補充完整。 

          f、通用交互一處即可
          建議交互團隊為產品建立通用型交互說明庫,遇到類似的情況,直接調取即可。 

          實際上我們在編寫交互說明的時候,不太會分得那么細,很多說明是混合在一起表達的。 

          “表單校驗”上場: 

          (3)通俗易懂
          通俗易懂是指要讓文字、語言、圖片等做到讓受眾易于理解和感知,從而在信息傳遞過程中盡量少的出現損耗,這一點同時也與人類的理解能力有關。 

          百度百科是這么解釋理解能力的: 

          “理解能力是指一個人對事物乃至對知識的理解的一種記憶能力。 
          理解,有三級水平: 
          低級水平的理解是指:知覺水平的理解,就是能辨認和識別對象,并且能對對象命名,知道它“是什么”; 
          中級水平的理解是:在知覺水平理解的基礎上,對事物的本質與內在聯系的揭露,主要表現為能夠理解概念、原理和法則的內涵,知道它是“怎么樣”; 
          高級水平的理解屬于間接理解,是指:在概念理解的基礎上,進一步達到系統化和具體化,重新建立或者調整認知結構,達到知識的融會貫通,并使知識得到廣泛的遷移,知道它是“為什么”?!?nbsp;

          當我們了解了人類的理解能力水平是參差不齊后,我們就要盡量在工作中將專業知識化繁為簡(也可以針對人群化繁為簡),增強溝通效果,最終達到完成團隊目標的結果。 

          交互文檔盡量做到講人話,不要講一堆專業術語。記得之前有個交互設計師在會議上闡述自己的交互方案時,提到用了“提供邀請”原則。由于與會成員是開發工程師和產品經理,他們問到什么是“提供邀請”原則,并且在這個問題上大家討論了很久。 

          由此可見,表達通俗易懂,是很必要的。 


          (4)結構清晰
          交互說明文檔除了要表達通俗易懂外,還需要結構清晰。 

          結構清晰的內容不僅使閱讀者一目了然、理解成本低,還可以讓閱讀者了解撰寫者的意圖。要做到文檔結構清晰,除了需要遵守一些規則外,也不能脫離當前文檔的實際情況。 

          “表單校驗”上場(把文字進行分段處理,并取出關鍵詞): 
          (5)圖文并茂
          圖片和文字相得益彰可以加深閱讀者對文字的理解,同時避免閱讀者去想象文字對應的結果。由于人們對同一段文字的理解不完全相同,因此建議設計師盡量安排交互說明對應圖解。 

          “表單校驗”上場(左圖右文): 
          (6)僅此一份
          僅此一份是說交付給團隊交互說明文檔的時候不要多份。之前我們的前端小伙伴拿到了兩份交互文檔,一份是純原型交互文檔,一份是視覺稿交互文檔,兩者描述的信息大同小異。此時,建議交互文檔的信息做合并,只提交一份完整的給前端小伙伴,讓前端小伙伴能專心致志理解一份。 


          (7)修訂記錄
          建議交互說明文檔留存修訂記錄,一方面可以了解交互文檔的變更歷史,另一方面有利于回溯和查找信息。修訂記錄一般包括修訂人、修訂時間和修訂內容。 


          總結
          由于項目進度、業務復雜程度等不同,我們不可能每次都能寫出一份最好的交互說明文檔,但我們可以想辦法寫出一份相對可讀性高、可理解性高的友好的交互說明文檔。我們常說自己是做用戶體驗的,那交互說明文檔就是體現我們交互能力一個方面。 

          除了完成交互說明文檔,想要讓開發小伙伴真正理解交互說明,還需親自和開發溝通,千萬不要認為我寫的很詳細了,他怎么還是實現的有偏差。事實上,就如開篇所說:同一崗位不同人的認知理解、從業經歷、個人喜好、性格脾性等也會導致理解不同。特別是對于一些我們非常創新的、特殊的交互點,需要重點和開發說明。 

          并且,交互說明文檔基于業務的發展,也會不斷的迭代,我們要抱著多聽、多想、多思考、多接受的態度去不斷優化我們的文檔,盡力寫出一份友好的交互說明文檔。 

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

          文章來源:站酷   作者:
          知果日記

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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