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

          設計師必備的場景化思維

          2019-11-5    資深UI設計者

          本文從什么是場景化、場景化設計的案例、為什么要基于場景化做設計和如何進行場景化設計 4 個方面為你完整梳理場景化設計思維的知識點。

          什么是場景化設計

          「場景」在百度百科里的定義是:戲劇、電影中的場面,泛指情景。情景又指:

          • 感情與景色
          • 情形、景象
          • 環境:假設是在這個情景。

          在戲劇或影視劇里,場景由人物,時空,事件(行為),環境(社會環境和自然環境)等要素構成。

          互聯網中的「場景」我把它分為兩類,一類是為了實現用戶目標而產生的場景,這種類型的場景需要明確用戶目標,可能并不需要涵蓋用戶是怎么實現目標的。這類場景指根據用戶的精準需求,為其提供精準服務,用明確的差異化服務給用戶提供一個使用產品的動機。比如微博和微信,微信定位是熟人社交,微博則是陌生人社交。另一類是更加精細化的場景,這類場景需要明確用戶操作流程。本文主要針對第二類場景展開。

          場景化設計指基于對場景的分析,得出用戶痛點與需求,結合前后場景預判用戶目標,通過設計提高用戶效率,給予用戶驚喜與感動。

          場景要素包括:4W+1H,即Who人、When時間、Where地點、What事件 、How環境,什么人,在什么時候,在什么地方,做了什么事情,所處的環境如何。其中 Where 又包括線上地點和線下地點,線下指現實中的定位,可以通過手機信號塔數據(GPS),Wifi 連接等獲??;線上指用戶所處的具體頁面。

          如:用戶(who)早上上班(when)在地鐵上(where)看電子書(what),地鐵上人多嘈雜且操作不方便(how)。再比如用戶(who)中午(when)在辦公室里(where)點外賣(what),肚子很餓還不知道吃什么(how)。五要素就像口訣,幫助我們全面快速地描述場景。

          有哪些場景化設計的例子

          為幫助大家更好的理解場景化設計,這里基于上面提到的場景五要素舉一些例子。

          人是變量:用戶不同,看到的信息不同。隨著大數據和智能推薦技術的普及,越來越多的產品通過挖掘不同用戶的喜好,生成用戶畫像,為每位用戶提供「千人千面」的個性化內容。這樣的產品大家都很熟悉,比如抖音,淘寶,微博,今日頭條。

          時間是變量:時間不同,看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」,當在出行類 app 上定好行程后,MIUI11 就會自動將該行程記錄在負一屏顯示并同步日歷,同時會根據出行的時間點,在通知欄實時更新提示:

          再比如在 Google Maps 的 app 里開啟導航時,如果目的地在預計到達時間還沒有開門,或者快要/已經關門了的話,會有個彈窗提醒。

          還有螞蟻森林的頁面會根據用戶打開的時間進行變化(白天與夜晚模式)等等,這些都是充分考慮了場景中時間這一變量,才有如此暖心的設計。

          地點是變量:同一個用戶,在不同地點看到的信息不同。比如,大眾點評APP當用戶從常住地北京(where)定位成非常住地杭州(where)時,根據用戶的上個場景與當前場景預測用戶可能處于旅游狀態,從而預測用戶下一步的目標是在杭州「吃喝玩樂」,所以首頁和攻略頁的內容都發生了變化,為用戶推薦旅行地的「吃喝玩樂」。

          環境是變量:不同環境看到的信息不同,比如設備環境發生變化時:iOS13 中的備忘錄頁面,將「添加」按鈕移到了右下角。為什么?因為手機屏幕越來越大,把按鈕從右上角移到右下角,更有利于用戶單手操作。

          再比如:我們在駕駛環境下,要保持注意力集中,避免或減少分心駕駛導致的交通事故,所以基于駕駛環境,iOS11 上線了駕駛模式功能。當 iphone 與車內的 USB 或藍牙連接,或 iphone 感知到人的移動速度時,iphone 就會自動進入駕駛模式,在該模式下,任何人發短信,我們都不會收到提示,對方會收到「我正在駕駛,稍后回復您」的自動回復。同時,iphone 會追加一條短信,提示對方只要回復「緊急」關鍵詞,我們就能立刻接收到他們的消息提示。

          為什么要基于場景做設計?

          通過上面的舉例想必大家已經了解到了基于場景做設計的好處。由于與用戶的空間相隔,設計師無法感知用戶在真實場景中使用產品的具體情況。通過場景化設計的方法,對用戶使用場景進行分析與預期,可以幫助設計師找到用戶與場景的內在聯系,探索新的功能及交互方式。

          怎么進行場景化設計

          可以概括為以下四步。

          1. 根據用戶使用流程和行為路徑窮盡場景

          根據用戶的使用流程和行為路徑列舉場景,這里以乘坐飛機(手機購票)為例,列舉乘坐飛機涉及到的關鍵場景:

          • 乘客(who)在航旅縱橫頁面(where)購票(what),航班多查找起來麻煩(how)。
          • 乘客(who)起大早拖著疲憊的身體(how)在去往機場的路上(where),又遇到早高峰堵車,內心焦躁煩悶(how)。
          • 起飛前(when)乘客(who)在機場(where)過安檢(what),安檢流程復雜,又檢測出不符合登機規定的物品,讓人心煩,手忙腳亂(how)。
          • 起飛前(when),乘客(who)在候機口(where)候機(what),人多嘈雜,沒有座位,還背著繁重的行李,還要時刻關注航班信息(how)。
          • 起飛前40分鐘(when),乘客(who)背著行李排著隊(how),將登機牌(紙質/電子)和身份證出示給工作人員(what),工作人員(who)站在入口處(where)開始檢查每位乘客的登機牌和身份證(what)。
          • 檢完票后(when),乘客(who)拿著身份證和登機牌,背著行李(how)乘坐擺渡車(what),擺渡車上嘈雜、擁擠(how)。
          • 下擺渡車后(when),乘客拿出登機牌,背著行李(how)排隊檢票登機(what),工作人員(who)站在飛機前(where)開始檢查每位乘客的登機牌(what)。
          • 在起飛前30分鐘(when),乘客(who)登機(what),背著行李在狹窄擁擠的通道里(how)尋找自己的座位(what)。找到座位后,將沉重的行李艱難的(how)放到上方的置物架上(what)。放好行李后,坐到自己的座位上(what),系好安全帶(what),調節座椅靠背(what),等待飛機起飛(what)。
          • 飛行過程中(when),氣流導致飛機顛簸,乘客感到恐慌不適(how)。飛行過程中,乘客通過看電影,看書,睡覺打發時間(what)。
          • 到達目的地(when),乘客(who)從高處置物架上(how)取下行李(what),拿著沉重的行李(how)排隊下飛機(what)。此時乘客對目的地的天氣等其他情況都不清楚。
          • 乘客走出飛機到達航站樓后,在陌生的機場(where),跟著標牌指示艱難的找到自己的行李(what)。拿著行李跟著指示牌(how)困難的找出口(what)。

          通過對關鍵場景的詳細描述,我們將摸不著的用戶場景像過電影一樣在眼前一一呈現,有利于我們發現很多想不到或者通過調研得不到的細節,幫助我們發現用戶真正的痛點與需求,洞察設計機會點。

          2. 根據場景挖掘機會點

          完成了第一步的場景列舉,我們對流程中涉及的場景有了深刻的了解。下一步就是對場景的判斷與分析,挖掘機會點。機會點挖掘有兩個方向,一是通過分析當前場景存在的痛點和需求挖掘機會點,二是通過對用戶下一步目標的預判尋找機會點。

          通過分析當前場景存在的痛點和需求挖掘機會點

          支付寶「朋友」界面,當用戶輸入某數值時,輸入框上方會自動顯示「給對方轉賬***元」按鈕,用戶可點擊該按鈕完成轉賬。這是因為經常有用戶誤以為輸入數值發送即完成了轉賬,導致很多尷尬的狀況出現?;谠搱鼍跋碌耐袋c與需求,支付寶做了這個改進,貼心又好用。

          iOS 系統在切換 APP 操作時,會將一些金融類 APP 虛化,以此來保證用戶信息安全。這一設計細節也是充分考慮了用戶在切換 APP 時的場景,解除了用戶在公告場合擔心被窺屏而泄露個人財富信息的擔憂。

          還有,當我們用耳機聽音樂或播放視頻時,拔下耳機,聲音就會自動停掉,這樣就算在安靜的場合聽音樂或者看視頻,耳機不小心掉下來也不會發出尷尬的聲音,這些都是充分考慮了用戶當前使用時的場景,才做出如此貼心的設計。

          通過對用戶下一步目標的預判尋找機會點

          第二個方法是通過對用戶當前場景的分析,預判用戶下一步的行為與目標,從而尋找當前場景的機會點。

          如何預期用戶下一步目標?有三個方法:

          • 通過成組動作進行預期,如復制→粘貼,編輯→保存。
          • 通過用戶認知流程預判,如,瀏覽時反向滑動→結束瀏覽/回到頂部;再比如谷歌翻譯在發音時,第一遍是正常語速,第二遍語速變慢,第三遍又恢復到常速。是不是很貼心,很符合用戶期望?
          • 通過產品使用流程進行預期,如訂外賣→取外賣→評價。

          在谷歌瀏覽器,當我們打開多個瀏覽窗口時,通常需要手動一個個地關閉標簽頁。chrome 充分考慮到了用戶的使用場景,當用戶關閉一個標簽頁時,預期用戶會關閉下一個標簽頁,所以當關閉一個標簽時,相鄰標簽會自動靠近,保證關閉的按鈕始終位于鼠標的當前位置,這樣用戶就不用移動鼠標關閉下一個標簽頁,提高了用戶的使用效率。

          3. 機會點轉化為落地的設計方案

          在將機會點轉化為具體的設計時,有兩個可作為依據的設計原則,分別為,情感化。

          實現有以下幾個方法:

          行動點前置

          通過對用戶下一目標的預測,將用戶目標在當前場景展示,縮短操作流程,達到的目標。如淘寶首頁的 tab 欄會根據每個用戶的瀏覽記錄預測用戶目標,千人千面個性化展現,縮短了用戶查找商品的路徑,提高商品購買效率。

          行動點置換

          還是拿淘寶舉例,淘寶底部的第一個導航,當用戶滑動首頁下方的商品流時,該按鈕由首頁變成置頂。

          行動點相關提示

          意思是根據用戶當前目標或下一步目標進行相關的提示。如支付寶朋友頁面,當上滑時,會出現「找人轉賬」的提示,點擊進入朋友列表的純凈模式(去掉了服務通知等跟轉賬無用的列表),提高了用戶尋找的效率。

          再比如,網易郵箱,當郵件中提到附件,但是沒有上傳附件時,點擊發送后,系統彈出下方的提示,解決了用戶常常忘記添加附件的困擾。

          突出行動點

          根據用戶當前目標或下一步目標突出關鍵按鈕,幫助用戶快速找到關鍵操作,吸引用戶點擊,降低了用戶思考成本,提升效率。運用這個方法進行設計的例子太多了,比如淘寶的商品詳情頁用紅色突出購買按鈕等。

          直接執行

          根據用戶當前目標或下一步目標直接執行。比如滴滴的掃一掃界面,當檢測到光線較暗時,手電筒會自動打開,提高了掃一掃的效率。

          情感化

          唐納德·諾曼在《情感化設計》中提到設計的三個層次,分別為:本能的設計,行為的設計,反思的設計。情感化設計是能打動人的,它能傳遞感情,勾起回憶,給人驚喜,情感化設計是幫助產品與用戶之間建立情感的紐帶,能強化用戶對品牌的認知,培養對品牌的忠誠度。

          情感化設計的步驟依次為:提煉影響產品的的情感指標→聚焦用戶對產品的情感訴求→產出設計方案→驗證設計價值(來源于周姮—知乎螞蟻金服體驗技術部的一次分享)。

          在谷歌表格每列的開頭依次輸入「Pride」五個字母后,表格會變成彩虹樣式。

          網易云音樂在用戶生日時會變成「生日快樂」的蛋糕樣式,點擊進去的音樂列表,第一首歌是生日歌,讓人心里暖暖的。

          4. 設計檢驗

          最后一步就是設計方案的驗證,設計方案能否幫助用戶縮短操作流程?降低用戶思考成本?幫助用戶地完成任務?是否能打動用戶給他們帶來驚喜與溫暖?通過可用性測試及上線后的數據反饋,幫助我們更好的優化設計方案。

          總結

          1. 什么是場景化設計?

          場景五要素:4W+1H,即Who人、When時間、Where地點、What事件 、How環境,什么人,在什么時候,在什么地方,做了什么事情,所處的環境如何。

          2. 有哪些場景化設計的例子?

          3. 為什么要進行場景化設計?

          4. 怎么進行場景化設計?

          • 根據使用流程和行為路徑窮盡場景
          • 根據場景挖掘設計機會點
          • 將機會點轉化為落地的設計方案
          • 設計檢驗

          日歷

          鏈接

          個人資料

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

          存檔

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