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

          首頁

          B端交互設計過程中的思考

          seo達人


          前言

          寫這篇文章的初衷是由于工作中帶新人發現他們從拿到一個需求不知道如何下手開展自己的工作,即使開展了也是丟三落四,需要反復回爐重造。希望通過這篇文章可以對他們有一些幫助的同時也是對自己工作的一個思考總結。有什么不足之處還請各位見諒,也可以和我一起探討一下。
           
          由于我的工作內容基本都是設計一些B端產品,并且團隊項目中沒有產品經理的崗位,經常的情況就是直接對接客戶,接觸最原始的需求,這些需求很可能是客戶的一段話,也可能是一個需求文檔,所以對于我們設計人員理解需求的要求就比較高了。我常常跟別人說,一定要多思考。因為設計師所有的產出物都依賴于我們的思維。在動手之前一定要多動腦。

           

          01.B端產品設計原則  

          B端產品最重要的價值應該就是降本增效了。那么我們設計師如何通過專業的角度,去發現問題,解決問題,實現企業通過產品達到降本增效的目的呢?
           
          我總結了十個設計原則:可用性、易用性、可見性、明確性、一致性、合理性、習慣性、便捷性、高效性、擴展性。
           
          可用性:我們做的任何產品和需求都是給人使用,解決某人在某種場景下的某個問題的,那就要可實現可用。舉個例子:小明是個光頭,你走過去跟他說,洗剪吹了解一下。那他一定不會搭理你。對他來說當下你的建議沒有可用性。
           
          易用性:我們經常會說這個東西太好用了,這個東西設計的反人類,太難用了。這就是易用性的價值。直接影響用戶體驗的問題。
           
          可見性:我認為可見性的問題就是信息結構分類分層的問題,重要的信息是否清晰可見,可以快速引導用戶當前在什么場景能做什么事。
           
          圖片
           
          明確性:產品信息內容的準確表達,用詞明確。
          圖片
           
          一致性:產品的跳轉邏輯,交互方式,結構布局,語言體系都要保持統一,并且和品牌形象保持一致,創建用戶的認知和使用習慣。減少用戶的學習成本。
          圖片
           
          合理性:業務流程符合操作邏輯,交互設計和視覺設計層符合規范,遵循一定的現實物理特性。
           
          習慣性 : B端產品很大一部分需求是將一些線下流程的線上化處理,所以在設計業務流程的時候要考慮用戶處理流程的習慣性問題以及用戶使用平臺操作的習慣性問題。比如我們習慣把五角星的圖標識別為收藏功能。就不要打破用戶的這種認知習慣。
           
          便捷性:基于B端產品的業務復雜性,我們要適當的在某些地方提供快捷操作,提高用戶的操作便捷性。比如導航的快捷搜索功能。
           
          高效性:B端產品里用戶的使用目標就是高效處理任務。所以平臺在功能設計上要盡量簡化操作,能一步完成的事一定不用二步,提高用戶的工作效率。
          圖片
           
          擴展性:在設計框架和內容的過程中要考慮后續擴展的可能性,有些框架內容如果有增加或者修改要怎么處理和展現。
           
          接下來我們就結合B端產品的特點圍繞這十個原則,講述一下交互設計過程中的思考總結。
           
           

          02.設計目的和業務邏輯的理解  

          積極有效的溝通貫穿整個設計過程!一定要溝通!溝通!溝通!我們設計的過程要與項目組的很多角色對接,客戶,需求,開發,測試,每個角色站的角度不同,考慮問題的方向就不同,積極有效的溝通可以避免走很多彎路。一定不要自己悶頭想當然,你以為的并不是你以為的!簡單說就是有疑問就找相關負責人溝通?!按蚱粕冲亞柕降住痹谶@里非常適用。
           
          首先我們要了解需求(也可能是產品,這里就拿需求來講)的背景,結構和內容。

           

          1.為什么做這個需求?

          這個需求從何而來?這個問題有助于我們了解它產生的原因,挖掘真實的需求。它是為解決什么問題而產生的,跟它所關聯的內容有哪些?這個需求是屬于新增的還是優化的,還是bug修復?如果是優化的需求,是什么原因要做這個優化?方便我們快速找到問題,做出優化方案。比如我們發現有一些需求是隸屬于某一個系統下的,那么我們設計的時候就要遵循一下以往的設計規范與原則。保留用戶的操作習慣等等一些繼承的問題。

           

          2.這個需求有什么功能?

          大概了解一下這個需求要實現哪些功能?這些功能的復雜程度是怎樣的?(這里需要跟開發人員也溝通一下大概實現的難度和周期。)實現的周期是多少(我們要根據周期制定我們設計的方案)?要在哪些終端上展現?權限是怎樣劃分的?用戶角色有哪些?

           

          3.怎么實現這些功能?

          這些功能要通過哪些技術手段實現?實現的方法有很多,我們要判斷在資源,時間,成本,實現難度,用戶體驗等等的各種因素下用那種實現方案更優?這個階段需要跟各方人員共同商議出一個解決方案。當然這是一個比較概括的方案。我們往往會制定幾套方案,在實際執行的過程中隨時調整這個方案。

           

          結構梳理

          這里就需要用到思維導圖了。我們要對整個需求的信息架構做梳理。包括功能結構,業務流程,跳轉邏輯。

           

          1.功能結構

          功能結構其實就是對整個需求的框架結構的呈現。根據需求功能劃分框架結構。主要分為樹形結構,矩形結構,線性結構,信息結構。
           
          樹形結構:從上到下的信息架構完整地容納需求的所有內容。基本單位是節點。比如個人設置是一個大的模塊單元,里面包含基本信息設置/賬號密碼設置等。適用于層級較深,每個單元模塊之間保持一定的獨立性,呈樹形結構的信息內容系統。
          矩形結構:這種結構用戶可以帶著不同的需求快速找到自己想要的內容。不同分類下的內容相互穿插。適用于內容的標簽分類篩選系統。例如表格頁面的標簽分類篩選功能。
           
          線性結構:單向流程結構。適用于專注度高,業務流程單一的結構,用戶在當前頁要么返回,要么下一步,只能沿著一條線往下進行。例如注冊,新建內容等場景。
          信息結構:適合簡單的信息呈現,按照信息的重要程度做分層處理,劃分出結構。

           

          2.業務流程

          這一步需要畫出業務流程圖。
          業務處理的每一步過程去向,下一步的處理邏輯和反饋結果,返回路徑,業務角色權限劃分,操作流程路徑是否一致?異常情況,例如中斷的處理與提示。
          圖片

           

          3.跳轉邏輯

          在分析跳轉邏輯之前要明確業務功能之間的關聯,是上下級關聯關系,還是分屬同級模塊?或者是頁面操作的新增,修改,編輯,詳情等內容?頁面層級關系決定跳轉邏輯,同樣層級關系的跳轉邏輯&跳轉方式要保持一致。業務流程如何跳轉才能清晰引導用戶?一個頁面中操作會不會有關聯或沖突?這些問題都要在這一步考慮清楚。
           
          常見的跳轉方式有直接跳轉、左右跳轉、上下跳轉,側滑,彈窗等,在設計時需要考慮好其中的關聯性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設計。具體的跳轉方式的使用這里就不詳細講解了。網上有很多相關的教程。

           

           03.交互設計  

          這一步我們需要交付交互設計文檔和線框圖。這一步一邊做一邊也要及時跟開發和需求去溝通,一方面確認自己的業務理解和展現形式符合業務邏輯和客戶的要求。一方面確認你的設計方案開發可以有效高效地實現(很多設計小伙伴說我的設計方案很好呀,只是開發沒能力實現。emmm….)。每個公司的開發團隊能力都不一樣,要根據團隊里的實際情況去做設計推動項目的落地。畢竟我們做的設計還是要讓人用起來的呀。所以懂一些開發知識是很有必要的,到底真的是開發哥哥想偷懶,還是真的有難度,豈能躲過我們的火眼金睛??!
           
          交互設計這件事如果展開說恐怕要說三天三夜也說不完。我這里只給大家提供一個設計思路,大致需要注意的一些關鍵點。詳細的交互設計知識,還需要大家慢慢了解學習。尤其是想專注做交互設計的伙伴們。
           
          我們在輸出交互設計的過程,大致要從信息載體,信息設計,導航設計,權限設計,圖表設計,組件設計,反饋機制,語言設計,特殊場景,動效設計這幾個方面去考慮。
           
          注意設計過程中交互時的操作狀態是否明確合理,交互效果是否可以實現以及不同終端的設計規范和原則。

           

          1.信息載體

          我們要清楚我們做的需求是要在哪些終端上展現?不同的終端有不同的交互方式。是pc端還是移動端或者是車載設備,電子屏幕?是ios系統還是安卓系統?我們的設計要符合不同系統和平臺的設計規范。橫豎屏幕要如何展現?分辨率都有哪些?如何適配不同分辨率下的展現效果?是否需要版本適配?是否需要硬件交互:話筒,藍牙,定位,相機等。是否需要硬件聯動:打印機,出票機等。

           

          2.信息設計

          B端的信息設計包括信息來源,信息分類,信息狀態,信息顯示等。
          信息來源:我們要明確信息的來源是哪里?后臺傳輸還是前臺展示還是用戶錄入。
          信息獲取的方式是什么?自動更新還是操作觸發?刷新的方式是手動還是自動?
          信息分類:根據業務需求,劃分信息類型,顯示層級,由高到低,按照設計原則規劃信息展現的比重和方式,把數據結構化。
          圖片
           
          信息狀態:要考慮信息的默認狀態,為空狀態,常規狀態,內容過期狀態下應該怎么顯示和布局。
           
          信息顯示:信息的顯示要考慮信息的極限值,非最優展示效果,重復或短缺(顯示不全怎么辦)情況,異常顯示:敏感詞,內容違規,數據獲取異常,加載時間過長等情況。

           

          3.導航設計

          導航的結構決定了整個需求的架構系統,頁面層級。簡單清晰的導航可以讓用戶快速清晰地獲取整個需求的功能和內容概覽。一般根據導航層級和內容的不同,我們會分為橫向導航,豎向導航,標簽導航,組合導航等方式去安排布局。功能復雜的導航應提供搜索與快捷菜單。

           

          4.權限設計

          角色權限影響功能和數據的展現。要注意角色類型的清晰劃分。角色能不能轉變?怎么創建角色轉變的系統感知?

           

          5.圖表設計

          圖表的內容分為:標題,指標,指標值。我們要根據業務需要選擇合適的圖表形式展現圖表的內容。比如柱狀圖一般適合表示各個指標之間的對比關系,折線圖一般適合一段時間內的指標變化趨勢。還要根據頁面布局空間大小選擇合適的展現形式。確定指標的枚舉值,指標值的范圍。圖表之間的關聯性等。

           

          6.組件設計

          這里就不一一列舉了,具體的分類和使用方法可以在ANTD的官網查看一下就知道了。
          https://ant.design/docs/spec/overview-cn
          組件的交互形式按照使用場景,保證功能的全面性,避免漏掉組件交互狀態。
          這部分我會在以后的文章里詳細總結。

           

          7.反饋機制

          反饋分為系統反饋給用戶的,用戶對系統的主動反饋,系統通知。
          用戶反饋要設置好入口與方式。防止反饋對用戶的干擾,簡化反饋流程。
          系統的通知要確認好方式,是郵件,信息還是其他。通知時間,內容格式的統一規范。
           
          操作后的結果反饋時間,方式,位置的設定。操作異常的提示,公告引導的提示,錯誤糾正。
           
          反饋機制要做到簡單明確,輕重得當,前后統一。既防止用戶的誤操作,又做到人性化的提醒作用。

           

          8.語言設計

          平臺的語言表述要統一,提示用語,稱謂,菜單與命令用語,標點格式,產品和功能名稱要保持一致性,符合操作場景,能明確引導下一步操作,要有一定的人性化表達。以人為本,風格恰當。B端產品的語言體系要區別于其他產品,大眾化詞語難以達到業務術語的精煉效果,強制大眾化反而不易理解。

           

          9.特殊場景

          注意一些極端情況下的設計,比如惡意使用的場景考慮,我們的使用場景和規則都是基于正常的使用場景去做設計,但是不能排除就是有些人想跟你唱反調,我就是要這么做,系統該怎么反應?如何處理這種操作?內容缺省異常狀態該怎么設計?中斷情況,比如硬件故障,斷網,用戶退出,系統該如何處理當前的場景?設計的過程中不要漏掉這部分的容錯和防錯機制。
           
          還有一些其他因素的考慮,比如一些情感趣味性,品牌傳達,商業性的融合設計。

           

          10.動效設計

          在設計這部分內容的時候主要考慮轉場過渡方式的選擇以及節奏的把控。具體的設計方法筆者會在以后的分享里跟大家碎碎念,一起來探討。也會出一部分動效的作品給大家。希望大家到時候能關注。筆芯~

           

           04.視覺設計  

          這部分想聊一個問題:總是會有非設計人員對你的界面指指點點,我相信幾乎每個設計師都會遇到這個問題。我們要用專業的視角去告訴別人,你為什么這么做?而不是憑感覺做設計,哪怕是界面上的一根線,也要做到有理有據。給予別人專業的建議,一個圓和一個方形,那個更適合放在界面當中,為什么?會讓人更理解你的設計。我們要具有解釋設計作品的能力。
           
          視覺設計要運用到很多相關的知識體系。
          比如人的視覺焦點:會沿著f曲線運動,人的大腦處理圖形的速度遠大于文字。
          注意設計過程中的對比和一致性,配色,排版,文字,間距,圖形的運用。
          比如柵格系統,可以使你的界面布局保持一致,整潔和規范。
           
          B端系統的配色要注意紅綠色的使用。因為一般會用這種顏色區分一些業務等級,隨便的使用可能會造成一定的誤解。整套的配色方案應該和品牌形象結合在一起,根據顏色的性格,明確主色,輔色,點綴色,注意不同色塊體積的運用。
          排版要做適當的留白,對齊。文字的顏色、大小,字重區分層級,間距。
          整個系統的視覺表達風格統一。 

           

          原文地址:墨染動效(公眾號)

          作者:喬公子

          轉載請注明:學UI網》B端交互設計過程中的思考

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          從微信朋友驗證功能迭代,看交互設計對產品的價值

          seo達人


          一、功能背景

          隨著社交網絡的擴大,用戶網絡好友越來越多,但是這些好友并不是真正的朋友。久而久之用戶開始陷入社交恐慌,不愿意發朋友圈或者發朋友圈時反復斟酌。
          于是微信在添加朋友和朋友驗證時增加了關系分級設置,有利于減少用戶發圈的心理壓力,提高發圈積極性。
          其實該功能并不是新功能,微信7.0.9版本已經上線了,只不過功能并沒有植入在朋友驗證頁面,信息層級比較深,導致用戶可能不知道或者懶得設置。
          圖片
          從8.0版本開始,該功能添加到了朋友和朋友驗證頁面,強化了曝光展示,方便用戶快速完成朋友權限設置。

           

          二、設計迭代

          1、初始版本
          最初上線時,“朋友權限”功能需要用戶手動選擇,并將“僅聊天”作為了首選項。用戶選擇了“朋友圈”選項,會展示關聯信息設置。
          “完成”按鈕延續了7.0版本的布局,放置在右上角,根據選項是否選擇,增加了按鈕狀態區分。
          圖片

           

          但是無論組件形式還是視覺表現,用戶都不太容易感知到朋友權限是可操作項和必選項。加之7.0版本培養的行為習慣,用戶不會主動瀏覽完所有內容后再進行操作,而是直接點擊右上角“完成”按鈕。
          用戶的行為過程就變成了“點擊按鈕>>發現錯誤提示信息>>完成權限選擇>>二次點擊按鈕“,無形之中增加了用戶交互成本。
          圖片

           

          對于好友數量少的用戶,或許沒有切身體會。但是對于一些引流號,每天都要添加好友時,則增加了操作步驟,影響了行為效率。
          下面是我從網絡上找到的一些用戶反饋,雖然用戶數量不多,但是代表了部分用戶的心聲。
          圖片

           

          2、版本迭代記錄
          緊接著朋友驗證頁面開始了密集更新,粗略估計已經迭代了3~4個版本。

           

          版本迭代1
          圖片

           

          1)增加標簽功能,提高用戶效率
          為了更好的管理好友關系,朋友驗證頁面增加了“標簽”功能,并將標簽平鋪展示開來,方便用戶快速選擇。

           

          2)優化布局
          “完成”按鈕從右上角轉移到了頁面下方,用戶視覺動線更加順暢,有利于引導用戶完成內容瀏覽,操作更加便捷。
          從產品角度出發,朋友友權限首選項調整為了“朋友圈”。因為作為一款社交產品,還是希望用戶更多的交流互動。

           

          版本迭代2
          圖片

           

          1)精簡頁面信息
          或許是數據顯示設置標簽的用戶數量并不多,平鋪展示反而增加了頁面的信息量?;蛟S是考慮到小屏幕手機空間有限,標簽平鋪影響到“完成”按鈕在一屏內露出,需要上下滾動才能完全查看屏幕內容,增加了用戶的行為成本。
          于是標簽功能弱化為入口和選擇結果展示,引導用戶跳轉二級頁面操作,減少了頁面的信息負荷。

           

          2)統一展示樣式,強化功能引導
          朋友權限調整了視覺樣式,背景色與其他可操作項統一,增加必選說明和操作選擇框,引導用戶做出選擇。但是必選功能還是讓用戶無法理解,為什么聯系人較多,就要手動設定權限呢?

           

          3)增加防錯設計,減少用戶錯誤幾率
          用戶未進行出朋友權限選擇時,“完成”按鈕處于不可用狀態,有效防止用戶直接點擊的錯誤。

           

          版本迭代3
          圖片
          經過一段時間的學習,用戶已經形成了功能認知。最終微信將“手動設置”調整為了“默認選擇”。既保留了用戶的選擇權,又簡化用戶操作,并且精簡了選項信息內容,與朋友權限頁面文案保持一致,便于用戶瀏覽和理解。

           

          三、設計總結

          1)產品設計不一定必須一步到位
          為什么微信在初始版本中不采用系統默認選擇,提高用戶效率呢?是設計師沒想到嗎?
          我個人認為“系統默認選擇”必然是最初的設計方案之一,之所以初始版本強制用戶做出選擇,或許是產品為了收集用戶真實行為數據、培養用戶對新功能的認知而制定的發展策略。所以交互設計需要服務于整個產品發展策略和目標。

           

          2)用戶是懶的
          大多數用戶喜歡簡單,對于某些信息會“視而不見”。因此某些場景下,需要增加一定的行為障礙點,引起用戶的關注,培養用戶認知。當然前提是用戶對你的產品有足夠的依賴性,否則就可能放棄你的產品了。

           

          3)設計是不斷試錯迭代的
          設計師可以通過各種設計策略去影響用戶行為,但是需要充分考慮用戶認知、行為習慣、操作效率、學習成本等多方面的因素。只有通過不斷地迭代,才能找到真正滿足用戶需求的設計方案,即使是一個小功能。

           

          寫在最后
          說到功能本身,對于我個人而言確實挺雞肋的。我不是朋友圈的重度用戶,也不會去設置朋友圈的權限。但是每次通過好友驗證時,都要面對著一行行的內容信息,忍不住會多看幾眼,生怕出現什么設置項變動,影響到好友關系。
          大家是怎么這個功能的呢?歡迎留言評論交流~

           

          原文地址:子牧UXD(公眾號)
          作者:子牧先生
             

          轉載請注明:學UI網》從微信朋友驗證功能迭代,看交互設計對產品的價值

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          詳解|交互設計中的色彩搭配,這樣更有效!

          seo達人

          圖片

          △ 豆瓣 App 電影榜單卡片

           

          顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多,本文會告訴你,顏色如何挑選會更有規律,并保證基本和諧。

           

          1. 色彩學概念淺談

          想要做好色彩的搭配,需了解一些色彩學概念。色彩學將顏色分為:同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色,如下圖所示:

          圖片

          任意顏色都可以作為基色,每一個基色都有其相對應的同類色、對比色、互補色等等。

          通常情況下,相鄰的兩個顏色,選擇基色和鄰近色之間的顏色,也就是與基色之間的角度 ≤ 60° 的顏色,會讓頁面的顏色顯得和諧統一。

          圖片

          △ 得到 App 服務內容卡片

           

          圖片

          △ QQ 音樂 App 榜單卡片

           

          如果選用對比色和互補色,則需要控制顏色的面積,比如以紅色為主的頁面中可以出現藍色,但藍色的面積占比最好不要超過 20%。

          除了色相上的變化,顏色還有明度純度上的變化,對于顏色的影響也至關重要。這三個詞匯的概念如下:

          • 色相 Hue:也稱色調,是指色彩的相貌
          • 純度 Saturation:也稱飽和度,是指色彩的鮮艷程度
          • 明度 Brightness:也稱亮度,是指顏色的明暗程度

          色相、純度、明度三者構成了色立體的概念,讓色相環由二維變成了三維的概念。

          圖片

           

          2. HSB 色彩模式

          RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念,在實際工作中我們也可以借鑒 HSB 色彩模式進行調色和選擇顏色。

          在 sketch 和 PS 的 HSB 色板界面如下圖:

          圖片

          其中:

          • 色相 Hue (H):取值在 0-360 度之間
          • 純度 Saturation (S):取值在 0-100 之間,數值越高色彩就越純艷
          • 明度 Brightness (B):取值在 0-100 之間,數值越高色彩就越明亮

          圖片

          由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間,因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。

          具體怎么使用這些數值,我們用案例來說明:

           

          案例  

          某 PC 端產品功能卡片需要做配色設計:

          圖片

          已知產品的品牌色是以下兩個顏色,其 HSB 色值如下圖所示:

          – 顏色 A:H=233,S=74,B=100(主色)

          – 顏色 B:H=267,S=79,B=100(輔色)

          圖片

          因此卡片的衍生色我們可以使用:藍色調 + 臨近色,且臨近色的顏色最好介于藍色和紫色之間,會使產品頁面顏色的搭配更加和諧統一。

          于是我們可以先根據品牌主色:

          – 顏色 A:H=233,S=74,B=100

          來確定初步顏色,我們只改變色相(H)的數值,分別在 233 的基礎上進行 +10 和 -10,由此可以得到三個顏色 A1、A2、A3,呈現效果如下圖:

          – 顏色 A1:H=253,S=74,B=100

          – 顏色 A2:H=243,S=74,B=100

          – 顏色 A3:H=223,S=74,B=100

          圖片

          現在的卡片顏色略顯單薄,我們可以再給每一張卡片加一個顏色,做出過渡色效果。于是我們在數值 A1、A2、A3的基礎上,保持色相(H)不變,只改變這三個數值的明度(B)和純度(S)的數值。以顏色 A1 為例:

          – 顏色 A1:H=253,S=74,B=100

          現在,我們想要得到一個比 A1 更深一點的顏色 A1-1,根據色彩學理論,我們可以降低明度(B)的數值,這樣顏色會變深,同時增加純度(S)的數值,這樣顏色會更沉穩純正,為了保證數值可控,我們將明度(B)降低 26,將純度(S)提高 26,所以可以得到顏色 A1-1 的色值:

          – 顏色 A1-1:H=253,S=100,B=74

          A1 和 A1-1 的顏色效果如下圖:

           

          圖片

          按照此方法,我們可以得到兩組顏色和其數值:

          圖片

          所以我們的卡片可以使用漸變色:

          圖片

          這樣卡片的顏色就基本確定下來了,我們可以再調整下卡片的細節,比如增加相關的背景插圖,調整卡片上的文字排版等等,這組 PC 端卡片最后的效果如下圖:

          圖片

           

          3. 補充說明

          一個頁面中元素的色彩選擇有很多影響因素,比如:產品的品牌色、頁面的功能、頁面的內容、氛圍等等,所以還是要具體情況具體分析,綜合考慮選擇顏色。

          當然,以上提出的這些數值只是參考,為的是給你的顏色選擇提供理論支撐。在實際應用中,也還是需要設計師根據具體情況,以及人眼視覺感知的效果,酌情做顏色上的優化處理。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》詳解|交互設計中的色彩搭配,這樣更有效!

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          漸進式披露!交互設計領域獨有的設計方法論

          seo達人


          一、什么是漸進式披露?      

          在產品設計中常常能聽到這樣的說法:把控制權給用戶,確保用戶明白一切都在自己的掌控之中。

          雖然更多的選擇會讓用戶興奮,但問題是過多的選擇也會讓用戶無法輕易的作出決定,反而造成體驗上的負擔。

          圖片

          漸進式披露不再是簡單地給用戶提供大量的信息和選擇,而是將這個過程分解成幾部分,讓用戶集中注意力在當前的事件上,從易到難地引導用戶。

          這樣不僅可以確保用戶不會被新信息淹沒,還可以分解用戶不想做的任務。例如將一個特別長的表單分成三或四個步驟,分步進行填寫,同時還能單獨查看每個步驟的內容。

          圖片

           

          二、漸進式披露的優勢

          想象一下這樣的場景,我們剛下載了一款新游戲,進入游戲后發現里面有各種各樣的游戲規則和操作細節,如果只是簡單地將所有游戲信息推送出來,那么我們可能就會淹沒在各種規則和細節里,根本記不下這么多規則,甚至會影響游戲體驗。

          產品設計也是如此,以一種漸進的方式呈現信息,可以讓用戶在深入了解產品細節前就投入到產品的使用中。

          圖片

          對新用戶來說,漸進式披露讓他們有足夠的時間熟悉產品的基本知識,然后再進行更復雜的功能或任務,這樣可以讓整個產品更易于探索并提升可用性。

          漸進式披露可以讓用戶的整個體驗更加高效,改善用戶對設計的第一印象,并幫助他們克服學習曲線。

           

          三、漸進式披露設計準則

          劃分主次和優先級

          漸進式披露主要的目的是將用戶注意力集中在重要的事情上,尤其是在一開始的時候。

          在設計時,我們要考慮導航菜單以及選項的優先級,信息和功能的呈現也必須如此,通過漸進式披露能讓用戶首先體驗產品最核心的功能和信息。

          圖片

          將注意力集中在關鍵功能上。比如進入電商App,重點是引導用戶如何完成從看到買的整個過程,至于用戶是從主頁購買、搜索購買,還是從直播購買,這些等待用戶慢慢去發現。

           

          從主要內容向次要內容過渡

          對于想要了解產品中每個功能的用戶來說,除了明顯的主要內容,次要內容的呈現也變得很重要。

          通過好的按鈕設計或可點擊的鏈接來實現從主要內容向次要內容過渡。

          圖片

           

          四、漸進式披露案例分析

          Noom

          Noom不會一上來就向新用戶介紹眾多的功能,而是隨著用戶不斷滑動查看產品,一次推出一個功能。

          圖片

          Noom通過這種讓人感覺比較自然的方式來完成信息的呈現,從整體上提升了用戶體驗。

           

          谷歌瀏覽器

          谷歌瀏覽器的導航支持個性化設置,這樣用戶就可以把常用的內容設置到上面,通過點擊主導航欄上的更改就可以輕松定義內容。

          圖片

          谷歌瀏覽器的高級設置包含了大多數用戶不需要觸摸的內容。這些內容不是立即可見的,但在用戶需要的時候仍然很容易就可以找到。

           

          刺客信條

          在《刺客信條》創建的游戲世界中,玩家不會從一開始就被各種信息轟炸,而是隨著他們深入游戲時,在動畫和對話框中獲得更多的游戲信息。

          圖片

          游戲中信息披露的一個好處是,玩家只會收到與當前玩游戲時相關的信息。這讓玩家盡情享受當前的游戲,不用擔心會忘掉各種規則。

           

          多鄰國

          學習一門全新的語言多少有點困難,需要在開始的時候記住太多的細節和信息。多鄰國可以幫助用戶掌握每節課上的一些關鍵概念,不會給人們帶來大量的細節或復雜的短語。

          圖片

          渡過新手期后,多鄰國會在主頁逐步披露課程內容,因此用戶調整自己的學習節奏慢慢來,避免產生畏懼心理。

           

          最后

          漸進式披露在體驗設計中扮演著重要角色,可以有效改善用戶的初次體驗,縮短學習曲線,并幫助用戶通過產品實現目標。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》漸進式披露!交互設計領域獨有的設計方法論

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          干貨|交互設計中的「有效反饋」7大準則!

          seo達人


          準則 1.  Timely —— 找準時機,即時反饋

          在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣,或糾正用戶的不當操作。

          如果反饋內容需要較長時間的加載,也可以給用戶設計一些有特點的 / 情感化的加載狀態,緩解用戶等待的不耐煩,又可以傳達一定的品牌調性。

          例如:知乎 App 在加載內容的過程中,增加了 IP 形象的動態效果:

          圖片

           

          準則 2.  Specific —— 具體分析,差異對待

          在設計交互反饋時,不僅僅要給出正確或錯誤的判斷結果,同時也應該考慮到用戶的個性化需求,針對不同類型、場景、地區的用戶提供差異性引導和服務。

          例如:大眾點評、高德地圖可以根據用戶的位置,在用戶開始使用產品時就推送個性化信息:

          圖片

           

          準則 3.  Balanced —— 正負反饋,穿插結合

          通常來說,正面的反饋會激發用戶的自信等積極情緒,因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候,我們可以在其中穿插一些正面的消息,減少或緩解用戶的因負面反饋帶來的消極情緒。

          這就好像是別人跟你說:“ 壞消息是……,但是,這樣做的好處是…… ”,壞消息不可避免,但加上一點轉折,就會讓他人心里稍微舒服一些。

          例如:美團單車在你騎完車之后,需要支付費用時提示你可以購買單車套餐,雖然是在勸用戶花錢,但看上去依舊很友善,其中的話術包括:“本次騎行免費”,“當前已是最優價格”:

          圖片

           

          準則 4.  Instructive —— 提示下步,指引行動

          有效的反饋會主動多引導一步,對用戶的下一步行動給出清晰的、正確的、指導性的意見,有助于驅動用戶繼續做出有效操作。

          很多 App 在截屏之后都會給出下一步分享的路徑引導:

          圖片

           

          準則 5.  Emotional —— 情感屬性,引起共鳴

          有科學依據證實,人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋,從而也更有可能改變其行為方式。

          例如:雖然只是一個提醒彈窗,QQ 音樂會員到期的續費提醒文案卻經過精心的設計,由各類歌名組成的一句話,每天的到期提醒都不同:

          圖片

           

          準則 6.  Traceable —— 可被溯源,可供反饋

          一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因,可以提供給用戶進行申訴和詢問的渠道,供用戶進行反饋。

          例如:電商平臺和外賣平臺都會在用戶下單或退單之后,提供商品物流的詳細信息,在查看購買的商品的當前狀態時,并可以追溯到商品所在的各個歷史環節:

          圖片

          再比如,高德打車如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道:

          圖片

           

          準則 7.  Less is more —— 質量優先,減少數量

          在這個信息過載而注意力稀缺的時代,好的反饋在于質量,不在于數量。有時數量越多,反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品,而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

          以上這 7 大準則,來源于我們日常工作中的積累和沉淀,對于設計產品的交互反饋具備較高的指導意義,希望對你有啟發。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》干貨|交互設計中的「有效反饋」7大準則!

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          B端交互設計在產品需求全周期中的質量保證

          seo達人



          為什么需要設計質量保證

          在設計中,最常見的質量保證方式就是在產品驗收環節進行「設計走查」。不過因為是上線前的最后驗收環節之一,經常會出現因臨近上線時間,且交互和UI類的問題在修改優先級中一般都是較低的,最后只能修改部分設計上的「bug」,其他只能舍棄或放入永遠不會開工的下次迭代再改。設計師在各種來回扯皮之間筋疲力盡,看不到設計價值在需求中的體現,各種“這里設計不好”的鍋一不小心也接了一堆。更嚴重的問題在于,用戶得不到更優秀的體驗,輕則耗費更多時間,重則放棄使用功能。不管哪種結果,對于產品整體滿意度都會有不同程度的影響。

          由此可見,設計質量保證僅靠最后臨門一腳的設計走查遠遠是不夠的。在需求全周期中各個環節都可以加入對設計質量的把控(Design QA)。Design QA的概念來源于研發流程中測試環節。質量保證縮寫為QA(Quality Assurance),是產品交付流程中非常重要的一環,一般就是大家了解的測試工程師的崗位職責內容。在這個環節中,測試人員需要對產品功能進行仔細認證,確認是否滿足了產品需求并且可以正常使用。但與測試不同,設計QA須加入到產品需求全周期的各個環節中,最終形成與產品設計并行的一個流程,才能有效保證質量。

           

          設計QA實施步驟和方案

          步驟1: 需求分級,確定是否需要設計QA

          要保證設計質量,在B端設計中不是易事。我們經常會聽到:

          · “這個功能能用就行”:公司/團隊不理解或不夠認同設計價值是什么,不明白為什么體驗會在每一處未還原的設計稿上慢慢丟失

          · “這還原的不挺好,和你設計稿我看一樣啊”:非專業的同事無法分辨設計稿與研發實現稿的細微差異

          · “沒時間改了,下次再說吧”:設計質量保證低于功能質量保證,或者團隊必須在有限的時間交付需求

           

          在接到需求后可以根據以往經驗或與產品經理的溝通,確定本次需求設計等級:

          • A:公司級和部門級重點、設計周期長內容多、設計可沉淀輸出的內容多的需求
          • B:正常迭代、量級一般的需求
          • C:時間緊迫倒逼排期、無前端研發資源、少量調整、評估不需要設計的需求

          在確認等級后,作為設計師可以有一定的心理預期。對于A類可能各個環節都需要詳細的進行QA,而對于C類有可能連設計走查都沒有預留時間,只能靠后續線上的直接驗證了。后面的幾個步驟可針對不同的等級選取全部或部分進行實施。

           

          步驟2:交互設計中,考慮極限下的正確展示

          B端交互設計中,很重要卻經常制作不到位的就是極限情況。看起來都是各種表格,簡單的給定一個寬度即可,但在上線后經常發現,填充了真實商家數據的表格,總有意想不到的錯位折行和重要信息截斷,用戶的可閱讀性降低。

          圖片

                                                       左:重要信息被截斷;右:折行錯位

           

          步驟3: 設計評審與交付,交互說明與UI標注一體化

          在完成制作后一定要進行評審,對功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實現性與開發成本進行評估。項目相關利益人都需要參加,尤其是測試同事需要參與評審,保證后續測試用例編寫質量。在交互與UI全部評審完成并通過后,交付給研發的設計稿最好可以做到交互說明文檔與UI標注一體化,方便研發同事查看。避免在交互說明與UI標注中來回切換,導致交互或UI細節遺漏。這里推薦一個sketch插件:NoteBook Pro (需要付費,lite版大約¥76),方便在sketch中添加交互說明標注,在上傳到可以在線查看UI標注的平臺,比如Zeplin/Relay等。

          圖片

          交互說明+UI標注在一個頁面上同時呈現

           

          步驟4: 參加測試用例評審,確保測試用例涵蓋所有交互細節

          一般來說,交互稿與UI稿交付給研發同學后,設計師就要開始忙下一個需求了。直到通知設計走查前,設計師暫時不會再隨時跟進需求進展,而是交接到產品或項目經理手中。而在這個從設計稿到研發實現的過程中,設計師也需要在關鍵節點參與其中,確保設計質量。測試用例是其中一個設計師可以參與的環節。其實有時候很多交互文檔中的內容會被用作測試用例,所以需要再次和研發與測試同學對齊所有交互內容,保證交互設計內容不會在此階段被降級甚至直接去掉。

           

          步驟5:設計走查,輸出并記錄結果

          此環節很重要的一點就是走查文檔或記錄。未完成修改的內容,建議研發給出一個解釋,并以文檔的方式記錄下來抄送給相關利益人,標明可能帶來的風險。同時嘗試與產品或項目經理溝通,推動迭代優化的具體時間,避免「下次一定」的無效承諾。

           

          總結

          設計QA是貫穿整個產品需求全周期的設計流程,在以往的點狀設計走查之外,需要與團隊上下游通力合作溝通,才能確保優秀的產品呈現在用戶面前。

          圖片

          參考文獻:

          https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

          https://www.nngroup.com/articles/quality-assurance-ux/

          https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

          https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

          https://owl.tools/notebook-sketch-plugin

           

          原文地址:京東設計中心JDC(公眾號)

          作者:唐朋博、李小猛

          轉載請注明:學UI網》B端交互設計在產品需求全周期中的質量保證

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          案例錦囊|交互設計中「情感化」設計優秀案例(二)

          seo達人


          1.  本能層 —— 感官刺激

          對于本能層,設計師需要在符合功能需求的前提下,盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激,極力去促成用戶與產品的 “一見鐘情”。

           

          案例 1  App Store 的卡片推薦做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名為:熊幫手。

          圖片

           

          案例 2  微博長按點贊按鈕,可以選擇不同的點贊狀態。圖標還是動態的,很有趣。

          圖片

           

          案例 3  淘寶雙十一預熱,首頁的 icon 變成了 “今晚 20 點雙 11 搶預售”的字樣,烘托氛圍又打了廣告。

          圖片

           

          案例 4  微信撥打語音的界面,在等待好友接聽的過程中,可以看到好友朋友圈的圖片,緩解用戶等待時的無聊,也為即將進行的語音聊天提供了話題。

          圖片

           

          2. 行為層 —— 細節引導

          對于行為層,設計師需對用戶的行為進行預判和引導,利用細節處理打動用戶,讓用戶對產品產生信任感和依賴感。

           

          案例 1  :當蘋果公司發現用戶最近在官方渠道購買了新的 iPhone ,老 iPhone 的設置頁面就會給出提示,讓用戶為新的 iPhone 做好數據遷移準備。

          圖片

           

          案例 2  iOS 系統后臺在看縮略效果時,會將用戶的敏感、私密的信息的 App 頁面進行模糊處理,保護用戶的隱私安全。

          圖片

           

          案例 3  :在屏幕很暗的情況下,打開微信支付二維碼,屏幕會瞬間亮起,便于商家掃碼付款。

          圖片

           

          案例 4  貨拉拉在展示搬家車輛詳細信息時,使用了剖面圖,并模擬了不同搬家場景下的家具內容,讓用戶更好估算車輛空間。

          圖片

           

          3. 反思層 —— 認知共鳴

          對于反思層,設計師要調動用戶最深層的記憶和感知,將視覺效果、產品功能和用戶認知緊密結合,形成用戶對于產品和品牌的深刻認知。

           

          案例 1  FigJam 是一款來自 Figma 的多人協作在線白板工具,可以進行頭腦風暴、繪制流程、多人協同標記等。里面也有很多人性化的小功能,比如:當兩個人同時長按 “H” 鍵時,就會出現 highfive(擊掌的動效),非常適合當設計師達成共識時使用:

          圖片

           

          案例 2  小睡眠 App 發現學生時代的我們經常會在枯燥的課堂上睡覺,所以準備了各種課堂講解、校長發言、領導開會的聲音作為催眠、助眠的音樂,讓人會心一笑。

          圖片

           

          案例 3  餓了么在異常天氣下通過在界面上增加天氣的元素,讓用戶看到外賣小哥的辛苦,使用視覺和內容共情,喚起用戶的同理心,降低用戶因外賣遲到而做的投訴和差評。

          圖片

           

          案例 4  QQ音樂上線了寵物功能,一共有五個品種的寵物讓用戶可以選擇領取,多聽歌能喂飽寵物,然后送它出去參加演唱會或者和好友進行互動。

          圖片

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》案例錦囊|交互設計中「情感化」設計優秀案例(二)

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          聊聊狀態開關按鈕如何設計

          純純

          我遇到的這個例子,和“概念模型”有關,在這里分享給大家。


          這個酒店房間的開關是這樣的:


          酒店床頭開關



          酒店客廳開關



          這個開關是觸控式的,開關本身有亮/暗兩個狀態;大家迅速看一眼,我想請問大家,你們認為,亮著的開關(圖1的5個燈,圖2的右上、左下2個燈)對應的狀態應該是打開的還是關閉的?




          如果心中有了答案了,繼續往下看。




          之前在文章從交互維度量化用戶體驗中我說過一次我個人理解的最小交互模型,大概是下面這段話:


          狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產品,環境,服務等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著一定的心理預期施加一個行為,然后客體會根據這個行為給與一個反饋(沒有反饋本質也是一個反饋),而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示(紅先黑后):


          那隨之而來的另一個問題就產生了,人進行交互行為時的心理預期是從哪兒來的?


          人初生的時候都是一張白紙,每天重復的交互行為產生的心理預期會隨著不同的教育、家庭進行變化;今年我們家在廣州過年,我第一次見到兩歲的小侄子,通過這一周對小侄子的觀察更能體會出人其實是有某些說不清的潛能在里面的,舉個例子,有一天小侄子生病了,要吃兩種藥,一種是甜的,一種是苦的;吃甜藥的時候小侄子很開心,愉快的呀呀的說這藥是甜的,而吃苦藥的時候小侄子也是皺著說這藥好苦,關鍵的問題是,出生兩年來,家人從來沒有對他描述過苦味是什么,也沒有明確告訴他這兩種藥有一種是“苦味”的,但是兩歲的小孩子就能嘗到苦味的藥在沒有接觸過“苦”這個詞的時候就講得出來這是“苦”。


          再舉個例子,還是我的小侄子,我們貴州人過年一般都會真金白銀的打麻將,小侄子目睹了幾天我們在麻將桌上用大把的零錢來支付,有一天我們去公園玩,遇到一個熟人給小孩子了一個紅包,我們就問他“錢是干什么的呀”? 我小侄子脫口而出:“錢是用來打麻將的呀!”


          為什么會發生這樣的現象呢?


          大概是現在的人買東西都用微信支付寶支付,所以對于小孩子的認知來說,他們由于沒有見到過紙幣參與交易的行為,而這幾天不斷被我們麻將桌上的現金沖擊視覺,才會突然脫口而出這句話。


          可能在我小侄子的認知里,手機才是用來買東西的。


          我們互聯網圈的設計行業其實能形成理論的東西不多的,大多數時候為了佐證某些東西,我們需要從心理學、社會學、行為學中找到一些理論支撐。我在做產品設計的過程中,最長這么時間一直使用的一種方法是思考用戶在這個頁面的心理預期。(比如在商品詳情頁,業務目標肯定是引導用戶購買,但是用戶心理上之所以點進了這個商品的詳情,無非是在有購買意愿的基礎上,需要一些信息去輔助決策,這時候如果你仔細思考并模擬一下你自己在購買時候點擊詳情頁的行為,其實會發現其實影響決策的信息大多不是價格(因為價格在上一級的列表頁已經標明了),更多的可能是產品描述和用戶口碑等等)


          在做尤其是app設計的時候,能明確每一個頁面的業務目標和用戶點進來的預期,其實是一件非常重要的事情,大家可以多留心在這兩點上。



          好的扯遠了,回到狀態開關的事情上來,還記得剛剛的那個圖么?


          酒店床頭開關



          酒店客廳開關


          我相信絕大對數的人第一反應都是,亮著的開關對應的燈應該是亮的,因為這個符合常識,但是如果這個酒店也是這樣的話,我就不會舉這個例子了,沒錯,上面開關亮著的燈是關的,沒有亮的開關對應的燈是打開狀態。


          我相信設計這個開關的人是為了讓用戶在夜晚起夜的時候使用方便,但是他完全可以用更加高明的辦法,比如換成夜光材質之類的。這種設計師很愚蠢的,我觀察這么多天下來,我們所有親戚每次開關燈幾乎都會誤觸,因為我們的心智一直一直認為的是亮著的開關亮著的燈。


          這里就牽扯出一個問題,我們在app設計中如何去設計狀態開關的問題。


          首先需要明確,最無歧義的狀態開關一定是需要具備兩個意符:

          其一是表征當前狀態

          其二是表征用戶點擊之后的狀態。

          而現在市面上很多app在這兩個意符上是混的,一般都知道用icon的樣式來表征當前狀態,但是下面的輔助文字則是表征當前狀態的和點擊之后狀態的都有。


          這就會讓用戶很蒙。


          比如相機app、短視頻app、K歌app中就比較明顯會有很多狀態按鈕,如下圖所示是某相機app的截圖,這樣的設計就是“有歧義的設計”,比如“延時關閉”和“補光燈關閉”這兩個文案,會很容易讓人困惑這文案指代的是當前狀態呢還是點擊之后的狀態呢?


          給大家提供一個我個人的小tips:


          設計狀態按鈕,盡量把當前狀態和點擊行為拉出兩個層級關系來設計。


          當前狀態可以體現在icon上,但是不能只體現在icon上(比如他這個延時關閉的圖標有一個x,但是補光燈關閉又沒有x,這就更加歧義了)


          比如如果是我去設計它這個按鈕,我會這么設計:



          這樣的話,確實,用戶操作復雜度上會多一級(之前直接點icon,現在點icon之后需要再點開關),但是用戶完全沒有認知成本。


          這就是我說的把當前狀態和點擊行為拉出兩個層級關系來設計。其實這個犧牲交互成本減少用戶認知成本的方法在交互設計工作中經常被我們使用,當我們遇到一個問題實在是一步很難理清的時候,不妨可以多嘗試這種思路。不過這種提高復雜度的減少認知的方法,不適用于業務強指引型頁面(比如購買、導航之類)


          文章來源:站酷   作者:Seany

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


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

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



          如何設計好消費向app產品

          純純

          本文算是一篇產品分享文吧,主要科普一下消費向內容在KillTime方面都是怎么玩的。



          Part I - 消費向產品及其發展科普

          大家看上面那句英文,我用的是“Spend Oriented”,Spend這個詞本身是一個偏中性的詞,不光有花錢的意思。“消費”一詞其實如果大家去查它的原始定義是指“利用社會產品來滿足人們各種需要的過程”今天在這里說到的其實是“用戶在上面消費內容”的app產品,這個內容可能是圖文,可能是流媒體。也就是說,今天講的app都和“Kill Time”有關。

          那我們不妨先來看下面三頁ppt:


          1.消費向產品的演變:

          我大概把今天要講的消費向產品分為四類,第一類游戲略過就還剩三類:

          a.圖文Feed類app產品:

          這一類產品其實是經歷了從門戶到app的演變的,早期互聯網時代,所有的圖文內容都在門戶網站上,這時候的門戶網站比如新浪搜狐網易,他們其實是內容為中心,用戶圍著內容轉,用戶會自己去挑選甄別自己想消費的內容進行消費。


          然后從門戶到app的過程中,最開始比如搜狐新聞app他其實是一個從門戶到app的純移植,他的本質沒有變化,還是以內容為中心,用戶圍著內容轉,不過后來隨著移動互聯網的發展,因為移動端的特性是“高頻多次”,他就不像門戶我只能上班的時候坐在電腦面前看,移動端的特性決定了我無論拉屎還是乘車,隨時隨地打開都可以看,那這個時候如果還是內容為中心,用戶每次進來都需要進行一個很長時間的甄選內容的過程,真正消費內容的時間就相應的會被壓縮,這時候就有了整個新聞移動端app產品從“內容為中心”到“用戶為中心”的轉型。第一次有了用戶中心的概念,比如有了賬號系統,用戶可以收藏點贊(Mark)一些的自己感興趣的內容,然后通過用戶的點贊閱讀點擊行為進行推送和訂閱:

          除了新聞門戶之外,還有一類圖文產品就是興趣聚合,最開始大家會發現都是一個產品主公一個方向,大家想看什么內容就去相應的地方:比如天涯貓撲就是一個講故事和段子社區,榕樹下主攻青年文學,虎撲是體育相關。大家在自己垂直的領域發展,互相也不怎么干涉。但是這些UGC平臺的本質還是生產者,是人,隨著每個平臺都有自己的大V出現之后,網易推出了博客,這是一個以人為中心的分發結構的產品,除了以人為中心的分發結構外,百度心里想,不是之前的門戶都很垂直么,那我是不是可以建一個平臺,讓各種興趣在我這里以”吧“的形式聚合?于是就有了一個興趣內容聚合平臺”貼吧“,然后隨著發展,大家發現博客這種東西用戶消費成本太高了,一個大V一篇文章好幾千字,生產內容也費盡,用戶看著也費盡,那不如就做一個微型博客更多的讓人發聲就好了,于是有了微博。

          △.既然說到這個了,在這里多扯遠一點,其實互聯網發展的進程都是這樣,繞不開平臺和垂直,大家想想五六年前的電商產品是不是一個道理,當年只有淘寶一家是平臺,其他的,比如京東主攻家電,一號店是零食,聚美是化妝品,美麗說蘑菇街則是衣服(蘑菇街主打職場美麗說主打校園)


          b.泛娛樂類類產品 & c.工具類產品:

          泛娛樂類產品我這個框子畫的很大,大概最初的原型是為了解決我們“聽歌”和”看視頻“的需求,然后最開始的幾大門戶大家都知道優酷土豆、騰訊視頻、愛奇藝、搜狐視頻、樂視等等。最開始那幾年互聯網基礎建設不行嘛,科技也沒發展到位,所以那時候視頻清晰度都好低,而且下載率非常高,大家一般消費內容會采用”在家wifi先下好然后再看“這樣的辦法,但是隨著基礎設施的加固,大家發現流量好便宜,這時候在15年才開始有網紅直播這一塊的業務出來(游戲直播是很早就有的哈),我個人會認為催生網紅直播產品的歸因是科技進步流量不花錢了。隨著網紅直播類興起的另一類產品就是短視頻類,我個人認為短視頻產品的出現本質歸因除了流量不花錢了之外,更多的是解決之前門戶視頻網站內容消費成本過高的問題,眾所周知,現在人越來越懶了,一集電視劇40分鐘,很難坐得住不分心的看完,所以現在視頻app出了倍速播放。這本質的原因是用戶消費內容的High點(達到滿足的點)越來越高了。

          再說聽歌這條線的演變,最開始聽歌,然后唱吧、全民K歌,國外的Starmaker等等出來做了唱歌app,這時候的app本質是一個工具,但是用戶UGC內容的時候沉淀了很多作品在這些工具app里,所以這一類產品就開始做去工具化,變成了一半社交一半工具的產物。另外K歌產品火了之后,才有的FM類產品,因為都是消費音頻和音頻直播嘛有共性在這里就不展開了。最后就是這類音頻產品不滿足只做音頻,所以就開始做視頻了,這就導致你現在打開全民K歌或者唱吧或者國外的好多app,你會發現只要是娛樂產品都有短視頻的原因。


          2.消費向產品的核心目標:

          GNT是一個羅振宇2016年年終演講時候提出的詞,我們假設平均每個人每天8點到家到晚上12點的時間是可支配時間,那中國網民每年新增數量(今年是1000w)已經穩定在和出生數量一樣了,所以我們認為網名總數不太會有啥變化,比如之前我用三個小時在優酷騰訊愛奇藝上看電視劇,一個小時聽網易云音樂,現在我大概只用一個小時看電視劇其他三個小時都在刷抖音,這時候,大家會發現消費向產品的決戰維度就不是自身的垂直領域了,之前我們會認為視頻門戶哪家片源優質哪家就牛逼,現在不是的,現在的產品除了垂直比較之外更多的競爭是在時間維度的較量,這是為什么抖音這種產品突然一下很火的原因,我稍后會著重說抖音這里就先略過了。

          3.為了占用更多的用戶時間,設計師可以發力的點:

          內容源是否優質(這里的”優質“指的是內容和用戶的March值)其實是用戶是否消費的最大的一個指標,因為內容源和用戶的March值主要反映在下面的前兩個問題中:

          給用戶展示什么內容?

          這些內容的優先級是怎樣的?

          這兩個問題一般我們設計師并不能控制,關于什么時間什么環境下給用戶展現什么內容,往往跟用戶歷史行為和算法有關,如果大家看了頭條的算法公開課大家會知道頭條的推薦算法其實是有三大類(內容維度、用戶側特征、環境特征)幾千萬個向量特征去控制的,如果不是純算法推薦也會有運營去干預內容的露出,所以這部分其實設計師可以干預的比較少,我們真正可以干預的東西是后兩個問題:

          如何讓用戶迅速找到自己感興趣的內容進行消費?

          ——這就涉及到內容源呈現方式的抉擇問題。

          如何盡可能的降低用戶消費內容時的交互成本?

          ——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


          Part 2 - 消費向內容的主流呈現形式:Feed Flow

          △.誰能告訴我一下Feed Flow(我們工作中所說的”Feed流“中文怎么翻譯?Orz...)


          1.RSS vs Facebook's New Feed

          如果大家是一個早期互聯網民,一定聽說過RSS的概念:

          RSS (Really Simple Syndication簡易信息聚合協議)是一種的工具,使得用戶可以在客戶端借助于支持RSS的聚合工具軟件,在不打開網站內容頁面的情況下閱讀支持RSS輸出的網站內容。舉個栗子:如下圖所示,小張在pc時代,每天會定時打開華爾街日報網,ChinaDaily,王老三的博客看里面的內容,但是每天都打開三個網站讓小張覺得很煩,這時候借助RSS工具,他可以把三個(支持RSS協議的)內容源聚合到一個第三方的RSS工具上,這樣他就不用每天反復打開三個網站了,除了獲取這三個網站的陳舊內容之外,這三個網站每天的更新內容也會被實時呈現在這個RSS中:

          一個RSS聚合工具內,每一個單條內容源,就稱為Feed(取的是滋養的意思,就是源源不斷的滿足用戶消費需求的含義),那早期的Feed序列大家也看到了是從RSS衍生出來的概念,Feed流的排序也是用戶定義的,比如可以按照Timeline排序,或者是按照用戶自定義Tag聚合,或者是按照interest標簽(收藏,喜歡,點贊都屬于泛意義上的interest),那大家就明白了,RSS里的Feed流本質上是一個用戶自定的,關于內容收集的工具而已。

          到了2006年,我們的爸爸Facebook開始做社交,因為Facebook是人和人的關系聚合,其實當時Facebook就借用了Feed的概念,創造出了以“關注Follow”為核心的新型Feed,在書上(我忘記是哪本書了)把它稱為Facebook‘s New Feed,它其實有三個特征:

          1、內容源從URL到人的狀態(其實本質也是一個一個URL序列)。

          2、不僅僅是Timeline的基礎排序,更多的指標參與進來決定內容排序

          3、訂閱內容中夾雜費非訂閱內容(參考微博),讓用戶永遠刷不完沒有盡頭的消費

          上圖是RSS和Feed的對比。

          到了今天,其實幾乎市面上所有消費向產品(新聞類、微博、Instagram、Snapchat、短視頻、等等),都在Facebook New Feed的基礎上進行了改進,所以今天我們把這種New Feed更習慣的叫做Feed,大家可以去PM社區之類的搜Feed能發現一堆文章可以閱讀,在這里就不贅述了。


          Part 3 - 匹配、分發與消費

          知道Feed的概念能方便我們理解接下去的問題,還記得接下去是什么問題嗎?

          1、如何讓用戶迅速找到自己感興趣的內容進行消費?

          ——這就涉及到內容源呈現方式的抉擇問題。

          2、如何盡可能的降低用戶消費內容時的交互成本?

          ——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


          1.先分發,再消費的app模型:

          我們不妨先來看主流的Feed分流的兩種模式:

          一種是微博這樣的關注序列插入非關注序列(推薦、廣告等),另一種就是關注序列瀏覽完用戶拉不出新Feed的時候有個分流按鈕提示,別小瞧這個小提示,往往能帶來每天5-7%(我自己的工作經驗數據)的新模塊引流。


          再說用戶迅速找到自己感興趣的內容進行消費的問題,這里就涉及到內容源的呈現方式。我之前唱吧的那篇文章舉過這樣一個例子:

          唱吧7.0到8.6的三次改版犧牲了展示效率(從7到5)HighLight了文字信息,是因為我們發現圖片信息不足以讓用戶做興趣判斷,大家看下圖就明白了:

          快手的圖片本身就是內容的簡略呈現形式,大家可以基本通過圖片來得知里面的內容大概是什么,如果遇到用戶難以判斷的,快手在用戶上傳視頻的時候鼓勵用戶打字說明,比如大家能看到圖中的紅字,就是說明視頻內容的。這樣的話,用戶通過圖片能清晰得到點擊之后的內容預期,比較符合用戶心智。大家再來看唱吧,大家會發現圖一圖二圖三都是漂亮的小姐姐,這個就沒辦法告知用戶里面的內容究竟是啥樣的,那支撐用戶點擊進去的除了顏值之外,更多的可能是歌名,和這個人的歌手等級,收聽量這樣的數據才能支撐用戶點擊。唱吧這么改之后我印象中模塊CTR是有明顯的提升的,但是具體數據我離職太久忘記了...

          所以其實內容源的呈現方式本質上和內容相關,這里的UI應該以“如何讓用戶迅速找到自己感興趣的內容”為核心設計目標去設計,具體問題具體分析咯~


          再來說常見的消費向內容的交互模式,最常見的就是Push&Back的模式:

          所謂Push&Back就是用戶一次點擊進到詳情頁消費內容,看完之后再點擊返回回到Feed列表,然后繼續在列表里尋找下一個想要消費的內容的模式,比如下圖:

          傳統的Push&Back交互成本太高,用戶看完之后需要點擊返回,然后瀏覽內容列表選擇自己想看的,然后再次點擊進入。這種就是很難達到沉浸式消費,用戶跳出率和關閉率都比較高。

          于是有了另一種模式就是讓用戶不跳出,直接挨個在當前Feed下的內容:

          舉個例子就是知乎的“下一個回答”點擊按鈕和下拉交互,以及微博的視頻關燈流:

          這種模式使得用戶在消費內容的時候交互極其便捷,輕輕滑動或者一次點擊就可以消費下一個內容,大大增加了沉浸的消費體驗:

          關于如何盡可能的降低用戶消費內容時的交互成本這個問題,上面這一種辦法,其實還有另一種,就是所謂的交叉推廣,大家看下面這個圖,前兩張是頭條Feed,后三張是陌陌:

          頭條點擊一個視頻后,下面會給你推和這個視頻相關的一些視頻(可能是內容維度相同都是做飯的,可能是用戶側特征相同都是美女做飯,可能是環境特征相同都是教你明天中秋節怎么做月餅)讓你去觀看(而且你發現沒頭條iOS版本和抖音iOS版本都是默認隱藏statusbar的,你看不到當下幾點了,為的就是讓你一直看下去...)。

          陌陌這款產品就更有意思了,比如我點擊第二個入口(右1)進去,這時候有個上下滑動切換的交互,app的指示意是:“切換到下一個主播”,那按照常理來說,我松手之后,應該消費的是第三個入口(左2)的內容沒錯吧?但是你會發現事實并不是這樣,它其實跳轉到了一個全新的Feed序列,所以交叉推廣的概念如下圖所示:


          2.直接消費的app模型:

          上面我們講的都是先分發再消費的模型,它一定要有一個內容承載的Feed頁,然后用戶根據自己興趣去選擇性的消費內容。那本著:“降低用戶消費內容時的交互成本”這個思路,有沒有可能去掉分發這個步驟,不要內容承載頁,直接上來就讓用戶消費呢?這就是大家熟悉的抖音:

          Musical.ly(后改名Muse然后被抖音抄然后被抖音收購)這款app創造了一種直接消費內容的產品模型,這種模型有什么特征呢?

          1、交互成本最低,打開即消費,一次上下滑動即分流,左右滑動(或一次點擊)即分流,極強的沉浸性。

          2、依靠算法把很多Feed序列整合成了一個無窮盡的Feed,完全依賴算法和用戶行為數據、短視頻數據判斷展示優先級。

          我們不妨來對比一下“先分發再消費”和“直接消費”的兩種產品吧:

          “先分發再消費”類的產品,由于有一個內容承載頁,用戶可以選擇性的點擊消費,比較尊重用戶。而抖音這類產品呢,直接把內容強制用戶消費,本質上是帶有一定脅迫性質的。直接讓用戶消費內容的比如抖音類產品,不給用戶自主選擇的機會,脅迫用戶消費產品提供的內容,如果內容足夠優質的話會有奇效,如果內容差強人意,戳不中用戶的High點,則有可能適得其反。


          我認為抖音這種直接讓用戶消費內容的產品模型本身是一把雙刃劍。


          大家玩了這么多app應該也能發現了,市面上殼子抄抖音的產品現在特別多,大家會發現只有抖音好看,別的都是看一兩個就看不下去了想關掉,這里的原因就是因為用戶被脅迫消費你提供的內容。

          我們假設你是一家內容實在不怎么行的app,如果強行用抖音的模式,你第一個內容是一坨屎,用戶吃了一半滑動跳過了,這時候他發現第二個內容還是一坨屎要給他吃,用戶意愿會下降得特別厲害,甚至一兩個視頻過后就直接關掉了。但是如果是先分發的模型,里面都是一堆屎,但是我告訴你了,第一坨屎是草莓味的,第二坨屎是橘子味的,這時候用戶自己想消費哪一坨內容是他自己的點擊選擇,和你無關,你app設計者不用承擔脅迫用戶消費的風險,自然用戶對自己選擇的內容的容忍度也會高一些,可能不會看一兩個就關掉了,沒準兒會看四五個。這樣是不是瀏覽時長就增加了?


          給大家講一個理論性的東西吧,抖音內容的理想時間模型(名字是我自己隨便取的):如下圖所示

          我們假設理想狀況下這個用戶沒別的事不會被中途打斷,只要想刷可以一直刷一輩子抖音,然后我們來研究內容質量和用戶瀏覽時長的關系:我們假設,每一個個體用戶都有一條平均匹配線Marchline(這個匹配可能是內容維度的比如我喜歡看dota不喜歡看lol,喜歡科普不喜歡雞湯等等),內容只要比匹配線高,對于我們的心智就是一個正向刺激(Positive)。

          我們假設每個視頻都是15s,大家會發現你們每天打開抖音的第一條視頻總是很優質(其實抖音最初冷啟動的時候準備的視頻都是1500-3000一條買的優質腳本之類的,花了幾千萬呢,所以這些優質視頻源奠定了第一波龍湖留存),如果第一個視頻總是很優質,用戶很喜歡,那心智就會上升,是一個正反饋,然后第二個視頻如果也很精彩,那就會把用戶推向high點,如果這時候第三個視頻一下子推了一個特別爛的或者沒算準給用戶推了一個用戶不是很中意的,理論上用戶交互成本很低,可能只看了一半劃過就行了,但是如果連續兩三次都給用戶推了很爛的內容,那用戶的負向刺激(Negative)越來越多,一半兩到三次就退出了。

          在這里面有一個我總結的思考就是,用戶的Marchline其實是浮動的:

          Marchline(new) = Marchline(old) + △Willing

          用戶每次打開app到關閉app的過程中正負向刺激的向量和。

          所以本質上抖音這種點開即消費的短視頻設計方法,是對自家內容極度自信之后的產物,記住抖音模型是把雙刃劍,如果你不是對自家內容那么自信或者不愿意花錢來砸內容,就盡量不要用抖音這種交互,很容易塞用戶一嘴屎得不償失!




          3.一邊消費一邊分發的app模型:

          上文已經講過了快手(先分發再消費)和抖音(直接消費)兩種產品模型。

          他們各有利弊,但是在最近半年,熱愛創新的產品設計師們在短視頻領域讓我見到了眼前一亮的第三種模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一個獨立的IGTV app),它采用的是一種創新的一邊消費一邊分發的模式,可以說這個創新是很亮眼了,大家有空可以去下載體驗一下:


          這款產品默認打開是圖1所示,后邊的視頻是在播放的,這就滿足了直接消費,但是下面有一個推薦列表可以滑動選擇,滿足了分發,然后如果需要沉浸的觀看某個視頻,手指在圖1上下滑就會變成圖二,這就變成了一個完全沉浸式的抖音,和抖音的區別是抖音采用上下切換,IGTV采用左右切換,它最絕的地方是把消費屬性做到了極致,甚至在搜索或者在發評論的時候,后面的視頻也依然在播放。

          這就很好的解了交互效率和分發的問題,大膽預測IGTV的交互模式是明年短視頻、視頻直播、視頻社交抄的重點。(其實現在已經看到Azer之類的產品在大量采用這種交互了)

          總結一下吧,其實設計的本身在解決問題,只不過隨著時間的推進,大家的認知層次會逐漸升高,最初我們認為快手這種分發效率過低,于是抖音出來了之后大家都抄抖音,但是別的app沒有抖音這么好的內容,于是取了折中有了我個人認為更合適的IGTV這種交互模型。

          其實今天這篇文章想要闡述的一個思想是“目標導向的設計”,我們為了解決一個又一個的問題,在不斷解決問題的過程中交互一次一次的微創新,微創新到一定量就會變成一個大的創新。每次看到很多有創新的產品都會感覺到欣喜,作為設計師大家也可以多看一些app產品,大量的試用不同的app產品,然后歸類總結一下,相信也會有所收獲。


          文章來源:站酷   作者:Seany

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


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

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


          app中的交互手勢和意符設計

          純純


          PART 1 - 唐納德諾曼關于交互設計的可視性的基本原則


          唐納德·諾曼所著《設計心理學1-4》一直被認為是設計行業經典,我在讀這一套書的時候最令我感到共鳴的不是后來被大家大書特書第四本《情感化設計》,而是第一本《日常的設計》,這本第一本書最精華的內容是闡述了交互設計的基本原則,這個原則無論是對工業設計中的人和物件交互,還是說是建筑中的人和空間交互都有很深刻的指導意義。

          作為一名app產品設計,對于這幾個含義理解之后,融匯到app設計的情境下,會讓你對之前工作流中的『交互設計』有全新的認識。

          眾所周知,交互設計借鑒了心理學/設計/藝術和情感等基本原則來保證用戶得到積極愉悅的使用、情感和操作體驗。交互設計之所以可以成為一門學科,本質在于可交互,而可交互的前提,是可以被感知(這個我在app的視覺美成因分析那篇文章里面已經說到過了),那么被感知的方式,往往是和人的五感有關。

          觸覺,聽覺,視覺,味覺,嗅覺。只要能被人的五感所感知到,不論是和空間,和機器,和生活中的物件還是和人,只要發生五感的共情,我們就說是可以被交互的。(注意,本文中不考慮復雜多感交互,并且只考慮交互的一方是正常生物人。)

          在人的五感之中,本文依舊著重討論視覺,因為科學研究表明,在人五感的感知信息中,視覺視覺占比達到了驚人的83%。(其中聽覺11%,嗅覺、觸覺、味覺機加起來占比6%),而不管是什么設計,如果可視性不佳,都不能算得上優秀。

          唐納德·諾曼將交互的可視性原則歸納為和五種基本心理概念相關,這五中基本概念分別是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反饋(Feedback)和概念模型(Conceptual Models)。


          i.示能(Affordance)

          示能的概念和內涵來源于吉普森(J. J. Gibson)。此外,關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。

          "示能"這個詞,狹義的理解一下,是從可視性的角度明確了一個物理對象與人之間的關系。示能是物品的特性與決定物品預設用途的主體的能力之間的關系。示能的體現,由物品的品質同與之交互的主體的能力共同決定。示能的存在與否取決于物品和主體的屬性。

          還是舉那個諾曼最經典的例子,如下圖所示:

          從視覺上看這張圖,我們從以往的生活經驗聯想一種方形的,帶紋路的黃色物質,再配合長期的視覺線索,我們會知道這張圖上是一個木塊,那從我們的視覺線索上,知道這個木板很細,(應該)能夠輕易被折斷;而且很輕,(應該)可以輕易被搬走。這些就是我們通過視覺判斷這張圖上呈現的"示能",而明確的我們和圖上這個木材的交互關系。

          那再看這張圖:

          我們通過生活經驗的聯想可以知道這是一個木門,為什么會區別這是木門而不是上面的木材呢?主要原因是因為這上面有個『把手』。在人的視覺中,有時候觀測物體的某項"示能"是清晰可見的,比如上圖那個木材可以被輕易搬動,而有很多物品的"示能"是不可輕易被感知的,比如上面那張木材的圖,我們就不能感知到這個木材是可以被『軸轉動』的。

          而這張門的圖上,大家想象自己是一個什么都不知道的野人,看到上面這個圖,只有一塊特別顯眼的『把手』,你作為高智慧生物,是不是應該去觸摸一下,并且企圖能夠與『把手』進行互動?

          所以總結一下,如果這個門上沒有把手,作為我們人類的認知而言,可能會認為這個門不能從外面被打開,但是如果這就是一個能從外面被打開的門,但是忘記設計外面的把手,那就意味著,這個物體"示能"的視覺通道被堵塞。(視覺通道被堵塞的"示能"可以被認為是一種"反示能"),"反示能"對交互作用是起到抵制作用的。也就是說,如果這個門是可以從外面被打開,但是我為了不讓大家從外面打開,我在設計之初不加從外面打開的把手,一定程度上就可以抑制大家從外面打開的這種行為。

          大家明白了么?

          所以為了更有效的展現某些物體的視覺可交互,示能和反示能都必須被揭示出來,即可被覺察到。如果示能和反示能不能夠被覺察到,就需要人為的把它們都標識出來,我們聽過一些有效的手段就可以做到,比如在直立的木頭一側加上一個『把手』,這個把手就是"木頭這種物體可以被人軸轉動"這種"示能"的一個提示線索,你只需要旋轉把手,稍加用力即可發現這個"示能"。

          所以,我們把這種揭示"示能"的符號、提示功能、線索、稱為『意符』


          ii.意符(Signifiers)

          劃重點:示能決定可能進行哪些操作。意符則點名操作的位置。

          在我的文章《交互閑談02丨app中的非必要功能和用戶界面上的流量法則》中,我對app中的意符進行了自己的定義:

          用戶界面上的意義符號,簡而言之,就是一切用戶感知中可以點擊產生反饋的功能集合。

          但是這是在以屏幕為介質的用戶界面中我個人下的定義,但是在實際生活中,人們尋找蛛絲馬跡,尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號都顯得非常重要。人們所需要的和設計師必須提供的視覺線索,就是意符。

          這就是為什么蘋果第一代手機出來的時候會被大家奉為圭臬的原因,他在視覺上示能和意符都及其突出,一塊屏幕和一個按鈕,屏幕用戶點擊滑動交互,按鈕用于點擊交互,學習成本很低。大家試想一下之前的塞班系統,左上角和右上角兩個按鈕是和屏幕左下方的功能和右下方的功能映射,雖然也很易于理解,但是當大家看到蘋果這么簡單的手機的時候,相信所有人都是驚訝的:



          △.示能和意符的關系

          示能揭示了世界上作為主體的人(這里只考慮人),如何與其他東西進行互動的可能性。

          一些示能是可視覺感知的,一些則是需要視覺之后聯想感知(即不可直接感知)的。

          意符指示能操作的位置。

          一些意符是生活中的符號、標簽和圖樣,如門上用符號標記的“推”、“拉”或“出口”,或指示所要采取行動的箭頭和圖示,或是朝向某個方向的手勢,或其他的說明。一些意符僅僅是預設用途,譬如門的把手,或某個開關的物理結構。

          劃重點:在設計中,(尤其是UI設計中)意符比示能更重要。

          示能和意符是本文中最重要的,下文會說到在app中的意符設計。


          后面的映射,反饋和概念模型內容我簡略說:

          iii.映射(Mapping)

          有一些自然映射是生物本能的或者是文化賦予的,比如如按照通常的習慣向上移動手勢意思是增加,向下移動意味著減少,。當一系列可能的操作是可見的,當控制和顯示契合自然映射時,設備就會容易使用。(具體參考我寫的交互閑談丨01里面那個視頻手勢的例子)

          iv.反饋(Feedback)

          反饋是控制論、信息論的著名概念。當我們做出了一個操作的時候,內心的預期是需要獲得反饋的,如果在一個該獲得反饋的地方沒有獲得反饋,人就會很疑惑,比如如果一個app的按鈕點擊之后沒有跳轉或者沒有新的變化,那么人就會呆滯,如果反饋不及時,人還有可能會放棄。(比如網絡不好導致的跳出率,比如一個不可點擊的按鈕做得太逼真用戶瘋狂點擊發現沒反應之類的 = =)

          過多的反饋可能比過少的反饋更惱人。設計拙劣的反饋可能是旨在降低成本,最糟糕的是不恰當的無法解釋的反饋。指手畫腳的人通常是正確的,但他們的評論和意見如此之多,嘮叨不停,會令人分心,而不是給予幫助。我記得很多年前(大概是2010年左右),還曾經見到過一款應用,用戶但凡點擊無效位置就會彈出一個Error的模態框,簡直是令我絕望。 = =

          v.概念模型(Conceptual Models)

          概念模型通常是高度簡化的使用說明,告訴你事物是如何工作的。概念模型只要有用就行,不必完整或準確。概念模型通??梢詮脑O備本身推斷出來,一些模型通過人與人相授,還有一些來自手冊。(比如app新版本中那些半透明箭頭加上文字的功能指引就是概念模型的一種,手游中一開始的新手指引也是。)




          PART 2 - 屏幕的示能與基本的交互方式


          一個人和一塊(未通電的)觸摸屏幕,在不借助道具的情況下到底能衍生出多少種交互方式?從五感出發去深入剖析的話大概分為:

          嗅覺:用鼻子聞一聞這塊屏。(發現并沒有味道)

          聽覺:用耳朵聽那塊屏發出的聲音。(發現并聽不到什么聲音)

          味覺:用舌頭舔一舔這塊屏。(誒有點咸?)

          視覺:用眼睛去看這塊屏。(這是一塊光滑的類似于玻璃的物體)

          你們發現了么,對于一個原始的屏幕設備,比如手機,我們忽略按鈕什么的物理按鍵,光思考那塊沒用通電的屏幕,如果你作為一個心智未開化的人(或者現在假設你就是一只猴),你真正對屏幕有建設的交互一定是在觸覺上,我這么說大家能理解吧。我們不妨換位思考一下下,你現在是20年一個準備做概念手機的交互專家,你去窮舉任何人和屏幕的交互,唯一有『肢體接觸』的方法就是用手指(或者腳趾)去觸摸,還有就是用舌頭舔。用舌頭舔會有口水,不利于屏幕的識別,萬一漏電了畫面太美不敢想。

          所以,結論是,人類看到一塊屏幕設備,這塊屏幕設備的視覺示能最終導向了,人和屏幕的交互手段被定位在觸覺上,而腳趾相對于人類來說沒有手指靈活,所以最終我們把交互規定到手與屏幕的交互(簡稱交互手勢)。

          觸覺:

          我們來窮舉一下手指和屏幕的交互方式:(圖片來自Graphicpear,中文是我自己加上的。)


          不要糾結于圖,往下看,其實現今的所有的手勢交互,我們基本操作分為:

          一根手指:單擊、雙擊、長按、拖動、上下滑、左右滑。

          兩根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。

          三根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。

          四根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。

          五根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉、捏按。

          雙手雙指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。

          雙手十指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉。

          (上面寫的雙手雙指是指每只手出一個手指,比如你們在手機修圖時候的某些旋轉操作)

          其實你如果還要窮舉的話,還有雙手每只手一個指頭、雙手每只手兩個指頭、雙手每只手三個指頭、雙手每只手四個指頭這些奇怪的情況,但是由于現階段手勢足夠完成日常操作,所以日常的人和屏幕交互并沒有引入這些別的奇怪的方案。

          我相信隨著科技的進步和發展,其他的雙手的交互操作也會大面積的被引入進來,起碼我個人在看類似于黑鏡啊還有別的歐美科幻片的時候,不止一次見到了這樣的畫面。(我印象最深的是黑鏡第三季06,女主角操控手機方式是四指橫滑,然后胖大叔操作無人駕駛的騎車的時候是雙手旋轉打開一個屏幕,然后再通過指頭拖動目標完成導航交互。)這些電影里面反應的人的未來科技中蘊含了很多交互方法,大家可以看電影的時候多留意一下。

          有點扯遠了,回到手機app的交互手勢,(除開游戲以外)一般單指雙指即可解決。而先現今科技下,相對于大屏幕一些的平板電腦,無論是ipad還是Andriod廠商,都會引入三指,四指甚至五指的部分交互手勢。

          由于今天的主題是手機app,那我們下一部分就著重主要來說說手機app的交互。

          PART 3 - 手機app中的意符分析


          在設計中,尤其是UI設計中,意符比示能更重要。

          理解這句話的本質是因為一塊屏幕上人需要設計圖形、按鈕、內容。去讓他完成一些具體事情,所以在屏幕顯示的軟件中的意義符號就需要有很深的引導性。

          還記得之前我的定義么?用戶界面上的意義符號,簡而言之,就是一切用戶感知中可以點擊產生反饋的功能集合。

          我們閑言少敘,先來看一個例子:

          如圖是喜馬拉雅FM的app首頁UI,我將從功能屬性、視覺焦點兩個角度,一排一排的進行分析:


          角度一、首先從功能屬性上進行分析:

          第一層:NavigationBar上的意符為『消息』、『搜索框』、『歷史』和『下載』,本質上是以功能名字命名的意符,其意符的表現形式為圖片+文字。沒啥好說的,每一項映射到自己的功能詳情。

          第二層:Tab的分類共有『熱門』、『分類』、『康永來了』、『直播』和『廣播』,其意符的表現形式為文字,這里大家看到『熱門』標簽本身變成橘黃色且下面有一個橘黃色細線,這是兩個符號是通過這么多年的用戶教育之后形成的意義共識,意義為:當前頁面狀態。這里我有一個小問題,大家猜如果這時候我右滑界面(采取的交互手勢是單指向左輕滑),會發生什么事情?提供兩個選項:

          A、到『分類』頁面。
          B、到『訂閱』頁面。

          詳細絕大多數人都能答對,這里的正確答案是A,滑動到下一個tab『分類』。大家只知其所以然,感覺這里的tab本身就是靠滑動手勢來控制的,但是更深層次的原因呢?為什么?

          這里涉及到一個滑動切換tab的遍歷解構,關于這個,我的網友@HoZiN老法師(大霧)的《淺議滑動Flick切換Tab導航 - 知乎專欄》這篇文章寫得很棒,大家可以去看看。在這里我做粗淺的解釋,在喜馬拉雅這個app中,『首頁』UI中的TabBar上的『熱門』、『分類』、『康永來了』、『直播』和『廣播』都是歸屬于當前BottomBar『首頁』的,所以我們在滑動操作的時候應從當前深度的最近層開始交互。

          如@HoZiN的下圖所示:


          如果用戶滑動這個頁面只能在首頁的5個tab之間切換,我們認為他是下圖的第一種,也即是在單一Bottom模塊下切換(Hozin將其命名為獨立Sub Navi切換,Sub Navi的意思其實也就是底部的Bottom navigation bar的意思,我上文中就直接簡稱BottomBar了,個人命名習慣而已大家能懂是這個意思就行),而另一種情況是有些app當滑動到最后一個tab,再右滑屏幕會進入到第二個Bottom模塊,既是下圖第二種的b-C和f-G的過程。雖然現在這種設計方式已經鮮有app在繼續使用了,但是我在2017年的今天仍然是遇到了一些。并且有個特別而精彩的地方在于,一般情況下,b-C和f-G的滑動切換Bottom模塊的這個交互往往是不可逆的。這點就比較有趣了,關于這個更深層次的原因可能是開發的原因,可能是產品沒法做到每一個Bottom都有tab,也可能是因為別的app信息架構方面的原因,在這里就不展開了。

          我們再繼續單獨看這個第二層:

          215b59510beda8012193a31bbb4d.jpg

          是不是發現有一個奇怪的格格不入的叫做『康永來了』的東西混了進來?這里我就必須吐槽一下喜馬拉雅的產品設計團隊了,作為一個普通用戶,我本能的以為這個tab下一定是和康永來了有關的內容整合,放在這里是因為運營需要,這個其實在內容平臺上很常見,大家看QQ視頻和愛奇藝他們不也經常這么干,本身是一件無可厚非的產品推廣的入口常態,然后我滑過去了發現其實他是『每日優選』的一個頻道,只不過最近主推蔡康永的這擋音頻節目:

          如上圖所示,這個奇怪的『康永來了』的tab歸屬到的不是康永來了的音頻詳情頁,而是一個『每日優選』的列表頁,那我就認為這個設計是欠妥的。

          我為什么說這樣的設計欠妥,其原因如下:

          因為我確實是有幾個月沒有使用過喜馬拉雅了,我不記得『康永來了』這個位置之前是不是叫『每日優選』,還是之前首頁只有四個tag,這個希望有關注的讀者下方給我留言確認一下。

          那既然我不確定,我們不妨分兩種情況去分析:

          第一種情況:之前首頁只有四個tag,而新加了一個以具體內容ip產品名(比如康永來了也好,或者明天老羅來了也罷)作為顯示,實則是每日優選的一個強視覺tag,為的是引導用戶點擊具體ip產品之后看到每日優選的這個列表,從而為別的每日優選這個列表頁導流。(我認為對于一個成熟的產品團隊,不太可能是這種情況)

          第二種情況:之前首頁就有『每日優選』這個tag,只不過后來為了運營或者強視覺需求,改成了具體ip產品名。(我傾向于第二種假設)

          我猜測喜馬拉雅的團隊本質上是希望借助類似于康永來了這樣大的ip露出,通過從視覺上的突出(視覺突出這一點確實做得很好)從而博取用戶流量,然后讓用戶通過查看『康永來了』這個具象的興趣點tab,進入每日優選的這個列表,從而為別的每日優選產品導流。

          從文案層面來說『康永來了』確實比『每日優選』更吸引人,但是如果是我來設計這個地方的話,我個人傾向還是放一個每日優選的tag,畢竟這是所有用戶都能懂的語言,而康永是誰?這個問題畢竟不是所有人都知道的。

          如果實在是通過數據或者產品運營需求表示,我們需要強調『每日優選』的話,那我會把每日優選的視覺也做得像現在康永來了一樣突出,但是名字不能變,還得叫『每日優選』。

          那如果康永來了這個ip市場運營那邊吩咐了,確實需要持久強推怎么辦?

          辦法有,比如banner位就可以直接推,而且banner位可以直接跳轉到具體ip的詳情頁,路徑更加簡短,用戶馬上就可以購買,不像現在跳到的是一個每日優選的列表,用戶還得通過一次點擊才能進入詳情。

          還有另一種極端的情況,如果有一天運營同學告訴我,banner位不允許一直放康永來了,但是市場同學又告訴我康永來了這個ip很重要,需要長時間強推。那我的辦法可能是有以下兩種:

          第一種辦法是在第三層的最前面(必聽榜的前面)加一個獨立的康永來了tag,這樣的做法是開發成本簡單易行,但是不夠優雅。但是你連『小雅音響』這種智能硬件購買頁入口都放在上面了,多放一個運營強推ip也沒毛病啊。_(:зゝ∠)_

          第二種辦法雖然比較decent一些,是在第四層和第無層的中間開辟一塊很小的次banner位去放,如下圖所示:

          但是我個人是不推薦這種做法的,哪怕未來這個次banner可以擴展為多個次banner輪播我也不推薦,因為如果是這樣的話,用戶首頁第一屏留給『猜你喜歡』的內容展示就很有限了。

          總而言之吧,第二層tab的『康永來了』一定是一個待埋點考量的爭議設計。我只是提出我個人的見解,不一定對,大家切勿偏聽偏信。好了我們繼續往下看。

          第三層和第四層:圖片banner和分類頻道icon,其意符的表現形式為純圖片/圖像+文字,banner嘛這個沒啥好說的,通過自動左右切換的圖片告知用戶一些產品需要告訴用戶的信息而已。分類頻道icon我之前的幾篇文章里面都有提到一些,記得在我的文章里我說到的格式塔原理么,大家打眼一看這個分類頻道icon就知道右側還有一些,是可以滑動的。

          第五層和第六層:這個就更沒啥好說的了,就是一個常規的帶圖片的宮格列表(我習慣這么叫他們,你們想怎么叫都行)頁,其意符的表現形式為圖片+文字,右上角有點擊更多有一個向右的圖標表明是可以點擊跳頁的(具體參看我寫的分割線那篇文章)。到一個內容更豐富的item列表頁。那么我問大家一個問題,為什么猜你喜歡的這個圖片不也做成左右滑動的而要做成這樣固定展示6張的呢?

          這里主要是有兩方面的原因,第一是做成左右滑的話,屏幕空間最多只能展現三張半,不如現在這個展示6張露出得多。第二是有一個很有趣的交互上需要注意的點,大家看如下圖所示:

          我標記藍色線框的部分大家看到了沒,這個banner也是可以滑動,分類頻道icon也是可以滑動的,整個頁面Tab也是可以點擊跳轉的。這也就意味著,如果要執行tab滑動跳轉這個交互手勢,我想能采用的滑動熱如右圖紅色所示,區域本身就已經很小了。如果下面猜你喜歡也做成可以左右滑動的話,那么Tab的滑動手勢熱區面積更小了。如果真是那樣的話,那這個Tab就不該設計成可以滑動加載的。

          所以說嘛,app中的意義符號設計直接決定了這個app的易用性。不要亂來。

          第七層:這就是bottombar具體沒什么好講的了,也就是五個圖形意符,各自表示著自己的意義映射?,F在很多app中大家會發現有些底部是只有icon沒有文字的,有些是帶了icon也帶了文字的,帶文字的目的也是為了解決圖形聯想帶來的意義映射路徑多的情況。這個不多說了。來看第二個角度。


          角度二、從視覺上進行分析:

          按照視覺強弱來看,『康永來了』、『banner』、『猜你喜歡』是頁面最重的視覺部分,其次是頻道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、歷史和下載。從視覺上看,其實作為內容平臺的喜馬拉雅設計的很贊,沒有任何問題。內容產品本身占有最強視覺強度,功能意符占有較弱視覺強度。這就是為什么猜你喜歡要用圖片+文字的宮格列表,不用類似于item之類的原因,因為比如這里的每一個節目都換成是一個item,那視覺只集中左邊的圖片上,而不像現在三張圖片這樣聚焦。

          最后拋出一個視覺上BottomBar的問題,現在很多app會在實心icon還是線性icon上面糾結,知乎的BottomBar一直采用實心icon,而Airbnb一直采用線性icon,到底為什么?

          我會在下一期的交互閑談里面說這個問題,大家也可以想一想,其實(如果我理解的沒錯的話)答案就在我上面這段論述中。



          PART 4 - 手機app中的意符設計需要辯證的幾小點


          一個擅長app中意符設計的人,本質就是對appUI設計有十足把握的人,關于這里的幾點辯證只是提出來說一下,具體的UI設計過程中這樣的問題不勝枚舉,大家可以留言交流。


          一、BottomBar上的意符到底要不要加文字?

          手機中可供點擊反饋的意符設計分為很多種,有純圖片的(比如banner),有圖形+文字的(比如BpttomBar上的那些),有純文字的(不如上文中喜馬拉雅的切換tab,比如『點擊查看更多』、『點擊展開』、『滑動加載』之類具有誘導性的文案),還有純圖形的『比如像『一個One』這樣的app底部BottomBar是只有圖片不帶文字的』,還有一些是按鈕形式的。

          在這些意符的設計中,意義識別是尤其需要被設計的。如果一個圖形無法表現他應有的意義,那就一定要在附近加上文字形成一個完整的意符。

          舉個例子:已下載這個icon已經被所有app用爛了,大家一聽就知道應該包含一個向下的箭頭,比如歷史記錄也是,大家都能想到是一個時鐘,這就是長期教育用戶之后用戶產生的意義聯想。所以喜馬拉雅和騰訊視頻中的這兩個意符設計,一個是帶文字,一個是不帶文字,都不影響用戶識別體驗。

          但是比如再舉一個例,『我的』圖標,現在大家都習慣用一個『人頭像』,而一切新奇的產品比如說『氧氣app』,才用的是一個圓圈,那么這個時候如果是意義識別為主導的產品(比如電商啊或者用戶不是那么年輕的)就會選擇在下面加上一行中文。這樣的話在圖形上發揮得再不易識別,也可以借助文字瞬間映射到。

          那比如像『一個One』、『Medium』和『500px』這樣的眾多app,他們的BottomBar都是一個純圖形:

          純圖形帶來的其實是一種新奇感和簡潔的設計感。相對的,和用戶需要花更長時間的視覺判斷,比如第一張圖是『一個One』,第2,3,4個icon其實很易識別:一本書,一個音符和一個播放三角能夠很簡潔的代表文章,音樂和視頻。第二張圖相對就沒有那么容易識別了,尤其是第三個圖標,意義指向不明確,但是由于Medium是一個國外設計師聚集的網站,所以其實也還好,設計感在一定程度上會優于識別也沒問題。圖3是500px,這5個icon就更易識別了。

          所以,如果你采取無文字的BottomBar,那么請UI設計師用心設計你的icons。


          二、設置引導用戶點擊加載的意符應該如何設計?

          有一個app需要設計這樣一個功能:文字默認折疊展示3行,但是點擊之后需要(非跳頁)加載全文,那么請問需要設置怎樣的意符引導用戶點擊?

          傳統的大概是三種方案:

          第一是在文字第三行的前四個字用其他顏色(比如藍色)標記為『加載更多』,用戶一點之后加載全部(早期知乎的做法)。

          第二種是在文字第三行結束之后再第四行的位置居中放一個『點擊加載更多』,用戶點擊之后加載全部。

          第三種是在文字第三行結束的位置放一個省略號即可,用戶閱讀之后發現沒讀完,自己會嘗試點擊。

          顯然,第三種方法僅適合社區類app或者貼吧或者問答類app,因為一般用戶讀都很難讀完,更別說給你點擊一下了。第一種和第二種也是見仁見智,一般情況下我個人推薦第一種,因為需要文字折疊成三行的頁面就說明本身畫面排布很緊張,就不要另起一個第四行放『點擊加載更多』了。


          三、app中的按鈕設計,什么時候應該有push色,什么時候應該沒有?

          這是我的微信公眾號后臺有一個小伙伴的提問,push色這個東西在網頁上有別的更多作用,但是在app中,一般就只用來反饋行為。

          有兩種情況:

          第一種是你點擊某個意符,這個意符發生變化(顏色或樣式變化)同時跳轉。

          第二種是你點擊某個意符,這個意符完全不發生變化但是頁面跳轉。

          從用戶期待每次行為都得到反饋的心理上來說,我們當然希望所有的意符都能呈現及時反饋以證明你的點擊行為是有效的(也就是上面的第一種)。但是有時候由于反饋動效我們寫得不盡如人意問題,我們看到冗長(哪怕只有半秒)切重復的的反饋內心就會就會很煩。

          舉個例子比如原生安卓的Material Design點擊每個item都會出現一個水波動效反饋,當然原生Material Design的動效是足夠優秀的,所以我們會覺得很有新奇感。但是你們如果試試把安卓的這個動效拉長別說一倍,拉長三分之一。你們一定會崩潰的相信我。



          PART 4 - 總結


          1、app產品設計和UI的設計中,意符的設計是當眾最重要的一環,因為每一個意符作為產品的功能入口和行為入口,它們不光光是產品的流量節點。更是app產品信息架構的核心提現。

          2、在設計app的意符的時候,要更多的考慮到意符所蘊含的具體交互手勢(比如喜馬拉雅的tab bar就包含了滑動和點擊)以及具體的對用戶行為的思辨。

          3、app中意符的設計一定是框架層面的設計,他的本身視覺層級不易過高,最好不能超過app主體信息。

          4、意符的意義映射要盡可能的單一,最好能讓用戶一眼就了解這個意符是代表什么功能什么意義。

          5、app意符的觀察、分析、設計是一個長期的過程,大家可以試著多問自己一些為什么。




          文章來源:站酷   作者:Seany

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


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

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



          日歷

          鏈接

          個人資料

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

          存檔

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