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

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

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

          首頁

          費茨定律如何指導界面設計

          seo達人

          什么是費茨定律

          費茨定律是人類運動的預測模型,主要用于人機交互和人體工程學。該法則預測光標/手指從一個起始位置移動到一個最終目標所需的時間(T)由到目標的距離(D)和目標的大?。╓)所決定,用數學公式表達為時間 T =a + b log2 ( D /W + 1 )。其中a、b是經驗常數,a代表手指開始到停止的時間,b代表手指的移動速度。

          舉個生活中一個開燈的例子:

          早期的開關只有一個手指大,每次開燈的時候都需要將手移動到開關上方,然后伸出手指調整到適合位置然后在按下。由于按鈕小,在沒開燈的時候你根本不知道它在哪里,需要不停的摸,所需時間就比較長。后期大家意識到了這個問題,將開關按鈕設計變大,人們操作時只需要將手移動到按鈕上方,由于面積大不需要調整直接按下即可,所需時間就比較短。

           

          如何指導界面設計

          費茨定律應用比較廣泛,其在移動界面設計中也有很好的啟發意義,結合費茨定律公式可以得出指導我們設計的三個要點:

          1. 按鈕越大,所需時間越短

          根據公式,當到目標的距離(D)一定時,目標大小(W)越大,所需時間越短,反之越長。下面以支付寶的登錄流程為例,如下圖所示:

          左圖是支付寶初始頁,該頁面主要讓用戶選擇合適自己的操作方式。因此在設計上采用登錄和注冊按鈕并排的方式,目標區域較小,給用戶充分選擇的時間。

          中圖和右圖,界面中僅僅只有一個按鈕,其他注冊、遇到問題都可弱化用文字高亮的樣式展示,用戶在操作時基本不用想就知道點擊下一步按鈕。大大的減少了操作時間,讓用戶可以專注于登錄上。

           

          2. 距離越遠,所需時間越長

          當按鈕大小一定時,手到目標的距離越遠,所需時間就越長,反之越短。但是這里就發現一個問題,移動端如何判斷手到目標的距離呢?這里我們可以借用拇指熱區來進行判斷。隨著手機越來越大,不同機型的拇指熱區會有所差異,以iPhone6右手操作為例,它的拇指熱區。如下圖所示:

          根據圖例可知綠色區域是我們手指最容易輕松達到的,橙色是伸長手指才能觸達,操作相對較難,紅色區域為難以觸及的區域。我們可以判斷手指到綠色區域的時間最短,到紅色區域的時間最長。因此在設計時我們需要將重要層級高的按鈕放到拇指熱區的綠色部分中,讓目標離手指越近,從而提高操作速度。如下圖所示:

          以上兩個案例均是Feed流界面,在卡片中露出功能有點贊、評論、分享這三個按鈕,其中大眾點評這三個中點贊的重要性層級最高,因此將其放在綠色最易觸達區域,單手操作離手指距離最近,而分享和評論次之,因此將其放在了紅色和橙色區域,單手操作離手指更遠。

          其中微信讀書這三個中分享的重要層級最高,因此將其放在最易觸達的綠色區域,單手操作更近。

           

          3. 手移動越快,越易錯誤操作

          其實不管你手的速度有多快,當距離較遠、按鈕較小時,當手移動到按鈕上方就會停下來進行定位然后才能準確得進行操作,如果只要求速度,手移動過來直接點擊有可能就點中不了按鈕,容易進行錯誤操作。

          因此在UI設計中,如果我們想要用戶能夠快速操作,可以為用戶打破距離和大小帶來的限制,結合手勢操作來進行設計。如下圖所示:

          以微信為例,在微信列表中為了讓用戶能夠快速操作列表,引入了手勢操作(安卓長按、iOS側滑),當長按或側滑列表時,就會在當前位置出現操作內容,提高操作效率。

           

          在移動端界面中的應用

          在實際交互設計中,合理使用費茨定律,可以讓我們的界面使用更流暢,錯誤率更低。下面我們一起來看看費茨定律的四大應用場景。

          1. 來電顯示場景——不同狀態,不同設計方式

          iOS的來電提示在鎖屏和蘇醒狀態分別采用滑動接聽和點擊接聽,可以很好的用費茨定律來解釋。如下圖所示:

          鎖屏時:用戶手機場景不確定,很容易意外點擊。在設計時就需要增加操作距離、延長操作時間,防止誤操作的情況,采用滑動解鎖就可以增加操作的距離,放在該場景中使用較為合適。

          蘇醒時:用戶正在使用手機,這時候采用滑動操作距離太長了,因此設計為按鈕的樣式,用戶可快速點擊接聽或拒絕,進而提高用戶操作效率。

           

          2. 將返回浮于底部操作欄中——縮短操作距離和時間

          隨著屏幕越來越大,拇指熱區也發生了變化,你會發現左上角的返回按鈕單手操作越來越不可能,尤其是Plus、iPhoneX的出現返回按鈕顯得有點雞肋。不過在體驗資訊類的產品時發現,部分界面他們將返回按鈕放到類界面底部左下角的位置,下面將這兩種進行對比下。如下圖所示:

          以今日頭條的詳情為例,返回按鈕在常規的左上角。結合拇指熱區你會發現左上角的區域單手是很難到達的。對于資訊類APP需要不斷切換看的文章,返回鍵在左上角無疑加重了操作難度。

          以虎嗅為例,他們將返回按鈕移動到了底部左下角,結合拇指熱區你會發現左下角的區域單手是可以輕松到達的,將返回按鈕放在底部,大大的節約了用戶操作時間。

          需要注意的是,盡管通過分析,返回按鈕在左下角單手更好操作,但是有時候習慣真的是一件可怕的事情,比如我在華西醫院的微信小程序時,很少能夠記住點擊底部的前進和后退鍵,每次想返回上一級,就習慣性的點左上角,結果就直接退出小程序。如下圖所示:

          、

          面對頂部返回鍵單手不方便點擊、底部返回鍵又老是記不住點,同時在當前規范下又不適合大面積的使用,怎么樣才能幫助用戶操作呢?其實iOS按住左側屏幕邊緣向右滑既可以返回上一步,安卓自帶虛擬返回鍵都是較為快捷的操作方式。

           

          3. 合理利用手勢操作——提高用戶操作速度

          安卓的長按和iOS的側滑編輯大家都比較熟悉,他們多用在列表頁的編輯狀態,用戶長按或側滑列表,操作按鈕就顯示在當前位置,操作效率比較高,如下圖所示:

          以天貓購物車為例,大家知道長按是安卓端常用的功能,側滑是iOS端的功能,然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機時,可能不知道側滑的功能,因此在購物車的編輯中還加入了長按功能,讓用戶能夠更快捷的操作。

           

          4. 將操作按鈕進行收納——阻礙用戶操作

          在設計時如果控制不經常使用,或者想阻礙用戶操作時,就可以把操作按鈕放遠一點,同時在設計上可以將其收納,加大用戶到操作難度。如下圖所示:

          以大眾點評詳情為例,在右上角并沒有直接放舉報到按鈕,而是放到更多到按鈕,一個原因是為了方便后期的拓展,另外很重要到一個原因是不想讓用戶舉報加深用戶的操作難度。

           

          總結

          本文主要分享了費茨定律在UI界面中的應用,結合今天的分析,總結起來主要有四個要點:

          • 1、我們想要更容易點擊到目標,就需要將一個頁面的主操作按鈕放大。
          • 2、我們想要讓用戶快速點擊目標,操作更方便,可以將目標放于拇指熱區輕松觸達區域。
          • 3、我們想要讓用戶快速移動時,就可以利用手勢操作,它打破距離和大小的限制,從而讓用戶可以快速操作。
          • 4、我們不想要用戶操作或不常用的控件時,就可以將按鈕進行收納,加大用戶操作距離,從而增長用戶的操作時間。

           

          參考文獻:

          Technical Artist的不歸路 —— 費茨定律(Fitts’s Law)在UI設計中的使用  

          設計法則: Fitts’ Law / 費茨定律(費茨法則)

          《通用設計法則》立德威爾著   朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版

           

          原文地址:海鹽社(公眾號)

          作者:風箏KK

          轉載請注明:學UI網》費茨定律如何指導界面設計

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

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

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

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

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



          界面設計中的三維設計法

          seo達人


          隨著當今越來越多的信息需要被展示、曝光,而移動設備的屏幕空間又有限,為了減少用戶在使用應用時的跳轉,減少用戶的路徑,設計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達,從二維到三維,這樣更能有效利用手機屏幕上的有限空間,這也是以后界面設計的大趨勢。

          這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。(以下簡稱MD)

           

          Depth(深度):

          Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.

          在MD的設計規范中,用Depth來說明界面設計中的深度,既而在界面設計中引入了Z軸的設計思維,將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態,定義除了各種信息層級以及常用狀態的表達方式。

          再來看看,如今iOS的最新版本iOS 12,也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用:股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。

          三維設計法,在界面設計當中,主要分為兩個方向來運用,視覺設計和交互設計。

          人們通過雙眼能夠分辨出物體遠近大小的形態,因此如果利用這樣的視覺規律,便可以在畫面中呈現出真實的效果,突出視覺的立體化。

          因為使畫面產生三維的模擬真實的效果,可以畫面更具有吸引力,我們之所以能夠看清楚物體,是因為有光的存在,現實生活的影子是因光而產生的,才是一個真實立體形。如果能恰當運用光影的效果,那將會讓圖形在進行三維空間轉換時變得更加凸顯。

          當今,在界面的視覺設計方面,通過層疊、卡片化和投影的設計手法來對界面的內容進行處理,可以增加界面的層次感。在如今同質化嚴重的扁平化設計下,能給人煥然一新的感覺,同時也給人一種內容呼之欲出的感覺,加強了點擊的欲望。這樣的設計手法讓界面的Z軸空間得以加強,必將是下一個新的趨勢。

          例如:KEEP、潮汐、蝦米音樂

           

          例如:Dribbble 和 Behance

          圖片來源于網絡

           

          而在交互設計方面,想同時展示多種內容時,假設對一個需求有著很強的曝光要求,或者是想讓用戶知道有這項內容的存在,但又不想讓頁面內容過長,導致被忽略或難以找到時,可以采用頁面Z軸層級覆蓋的表現形式。

          采用了Z軸層級覆蓋的架構形式,用戶主要的交互操作變為上拉、下拉來閱讀信息,減少了點擊跳轉這一類的操作,減少了用戶的操作成本。且滑動手勢,是以后人機交互發展中的一個必然趨勢。

          在一些APP中有所表現的有:豆瓣FM、豆瓣詳情頁等。(大家可以從這些APP上獲取設計靈感)

          豆瓣FM

           

          豆瓣(電影詳情頁)

           

          例如:

          上圖是京東(APP)的商品詳情頁,這時候我們接到的需求是將上圖的文案放進這個界面中。

          要知道在寸土寸金的APP界面中,每一個位置都是十分的寶貴,一但放置不佳,就會給用戶的視覺流造成一定的影響,使得用戶體驗下降。況且,還是京東這樣流量巨大的電商APP,位置便顯得更加寶貴,而上圖中的紅色標記范圍就是我們的限制區域,下面我們先來看一個不合理的做法。

          上圖我們是直接加了一個界面,將這個模塊設定為可以進行跳轉,從而達到顯示完整(文案)的需求。

          這樣做,不僅增加了用戶的路徑,而且還會給來回切換的用戶造成一定的困擾,消耗了手機的資源的同時,下面的留白也顯得很浪費、空曠,視覺上就很不美觀。

          那么,京東是怎么做的呢?

          京東采用了一個浮層設計(Z軸),將全跳轉改為半跳轉,這便是在界面設計中的Z軸運用,這樣既可以達到文案所要求的曝光,也能最大利用讓界面的空間,實現與原場景的完美銜接。

          通過在 Z 軸上進行分層設計,模擬物理世界中人與物的真實的交互模式,幫助用戶理解產品設計,將信息更好的淺層化,這樣可以給設計師們帶來更多發揮的空間。

          在使用這個思維來做設計時,可以事先考慮以下幾點:

          • 根據用戶使用體驗,來判斷是否需要使用Z軸分層交互。
          • 這樣做是否能幫助用戶更好的理解你所做的設計?
          • 空間感設計主要意義是能正確的引導用戶,并建立起對產品的使用邏輯。
          • 每一個界面層級只需要表現一件事。
          • 當你想要在界面中加入一個菜單欄但發現沒有空間?這時候可以考慮使用Z軸的設計。
          • 謹慎使用Z軸層級交互,因為它會增加空間關系的復雜度。
          • 多參考現實世界中的真實交互,它給你的預期和感受,在互聯網設計中的很多靈感都來自于對真實世界的理解。

           

          總結:

          我們在做設計時,可以把當前的界面可以想象成一個的三維世界——分作X軸,Y軸,與Z軸,在這三個坐標軸上,可以進行思維上拓展。

          在交互設計當中,減少跳轉便是減少用戶路徑,就是使用各種方法在三維空間中,用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。

           

          原文地址:站酷

          作者:ChrisIce

           轉載請注明:學UI網》界面設計中的三維設計法

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

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

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

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

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



          合理預設:如何為用戶提前設置好默認值

          ui設計分享達人

          What 是什么

          「合理預設」是指系統提供默認選項,這些默認選項不需要用戶做任何操作,可以節省用戶完成表單的時間和精力。

          這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。


          案例 釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶默認填寫時間,減少用戶的操作時長:

          相關模式 :語句填空


          Why 為什么

          系統通過提供合理的默認信息和答案,分擔了用戶思考和輸入信息的工作,減少時間,提高效率。

          而就算預設信息不是用戶想要的,也為用戶提供了一個示例來說明答案應該是什么樣子的。這一點也可以節約用戶幾秒的思考時間,或者避免輸入錯誤的信息。


          另外,合理的默認值還可以幫助用戶應對一些“難題”。如果用戶跳過了一塊字段,那么可能是這個問題沒有引起他的注意。用戶可能是不理解這個問題、或是默認值的含義。輸入答案,選擇值,或單擊按鈕的動作會迫使用戶有意識地面對這個問題。


          比如疫情期間,大部分公司都需要做健康打卡,下圖中有一些選項是直接填了默認值,但是有些就沒有填。比如下圖的左圖中,有關于“請假未到崗”這些問題,因為沒有填默認值,用戶就會對這個問題有印象。然后比如“今日是否有發熱癥狀”,“是否有咳嗽”這些,因為被系統默認填了,用戶很容易就忽略過去了。

          所以一些刻意希望被關注的問題,其實最好不要提供預設值,這樣可以讓用戶感知到這個重要信息的存在,進而加深對內容的認知。



          When 什么時候使用

          當產品要求用戶提供類似表單的信息輸入(例如文本框或單選按鈕),并希望減少用戶填寫時長時,可以使用提供默認設置。


          但是當問題的答案會很敏感或是與政治相關時,最好不要提供默認值,例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內容信息,如“請給我發送廣告郵件”等。


          使用條件

          · 用戶需要做類似表單的信息輸入操作;

          · 系統希望減少用戶需要做的工作;

          · 系統希望確保用戶填寫的準確性和一致性;

          · 可能用戶并不知道或者不關心答案,不需要引起用戶的重視;

          · 問題的答案不屬于敏感信息或是與政治無關。


          How 如何使用

          設定「合理預設」有兩種普遍的用法:

          1、使用一個通用的、常識性的、滿足大部分用戶需求的默認值,預先填寫輸入框;

          2、可以調用用戶早些時候提供給系統的信息來動態地設置默認值。例如,某個用戶提供了一個中國的郵政編碼,系統可以從這個編碼推導出用戶所在的省,甚至市和區的名稱。


          除此之外要注意幾點應用原則:

          · 使用預設的默認值不僅僅是為了防止用戶留下空白的輸入區域;

          · 要充分的了解你的用戶,默認值的設定要有絕對合理的理由 —— 否則,系統會給所有人帶來額外的工作量。


          Example 案例

          案例一:唯品會小程序在購買服飾類選擇 SKU

          用戶需求:購買服裝時需要選擇尺碼


          唯品會小程序在購買服飾類選擇 SKU 時,每個尺碼點擊后會顯示對應的衣服參數,用戶不再需要去商品描述中的尺碼表格中再找,也可以是設置好自己的身材數據,平臺會默認選中適合你的尺碼。

          案例二:螞蟻鏈實人認證表單

          用戶需求:需要根據表單內容填寫和上傳文件

          螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。

          案例三:Photoshop 創建新文件

          用戶需求:創建新文件,調整畫布大小

          在 Photoshop CC 中創建新的圖像文件時,默認情況下會從操作系統剪切板開始。這里的假設是用戶剛剛創建了一個屏幕截圖,并且正在編輯該圖像。因此,Photoshop 在剪貼板中獲取圖像的寬度和高度,并使用它們來預先填充創建新文件的尺寸,這是一種節省時間的聰明方法。不用擔心圖像和畫布會有尺寸不匹配的情況。


          當用戶想要調整畫布大小時,原先畫布的長寬尺寸會預設出現在新的畫布大小里面,方便用戶進一步進行尺寸調整。


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

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

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



          按鈕組 Button Groups:大量的操作按鈕如何排布與設計?

          ui設計分享達人

          What 是什么

          簡介: 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊,并采用相似的視覺設計。如果超過三個或四個動作,往往會采取多個分組。

          例子: 語雀編輯器的頂部工具欄

          undefined


          Why 為什么

          按鈕組可以讓界面不言自明。在復雜的布局中,被精心安排過的按鈕組會很容易被用戶感知和使用。一方面,它們在界面上往往非常明顯,用戶能夠一眼看到有這些功能可以進行相關操作。


          大家所熟知的格式塔原則(Gestalt principles)也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近,因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的,不同的按鈕分組往往暗示著不同的功能類型,因此彼此間應該保持間距,或用不同的形狀,或用分割線進行區分。


          When 什么時候使用


          如果你需要在界面上展示許多操作按鈕,且需要確保它們隨時在界面上可見。但同時,你又需要用圖形化的方式組織它們,以使它們看起來不會特別散亂。

          這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果,比如,它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。

          按鈕組可以用在對產品全局有效的操作上(例如「打開」和「選項」操作),或特定的一些通用操作(「保存」、「編輯」和「刪除」),或特定的某些操作(例如布局的「對齊」、「分布」)。不同范圍的操作不應當被到一個組中。


          使用條件:

          · 存在大量操作按鈕;

          · 希望用圖形化的方式組織這些按鈕;

          · 操作按鈕間存在功能相關性和差異性;


          How 如何使用

          這個模式的總結簡單到像是一句廢話:把相關的操作按鈕分成一組。


          但如果詳細展開就會有更多的介紹。比如:


          · 如果需要包含文本說明,盡量使用兩個字或三個字的動詞短語,不要使用專業術語。

          · 不要把不同功能范圍的按鈕放在一個組,應當將它們分成不同的分組。

          · 同一組的按鈕應該有同樣的視覺設計:邊框、顏色、高度或寬度、圖標風格、動態效果等。

          · 在空間排布上,可以將它們并排起來作為橫排放置,如果空間不太適用的話,也可以考慮一列縱列放置(例如Photoshop的左側工具欄)。

          · 如果某一個動作是核心動作,可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要(或期待)執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。

          · 如果按鈕足夠多,而且它們都有小圖標,你也可以把它們放在工具條或者像工具條那樣的狹長條上,放置在頁面的頂部。


          通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂,也可以避免一長串冗長的動作列表看起來毫無關聯或區別。

          通過這一模式,你可以創建一個較為清晰的元素層級結構:用戶可以一眼看出哪些動作是彼此相關的,哪些是重要的。


          Example 案例

          案例一:Sketch 的頂部按鈕工具區

          用戶需求:編輯設計文件中的對象


          Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個, 有很多要理解和追查。 但是得益于精心的視覺和語義組織,界面按鈕始終保持一定的可理解性。

          undefined


          案例二:macOS Finder

          用戶需求:按自己需求對文件進行顯示修改和操作


          這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統,按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間,文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。

          undefined


          案例三:WebStorm 頂部操作區

          用戶需求:項目執行相關操作


          這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式,將項目執行的相關操作和Git相關的操作聚合在一起,中間使用了分割線進行了區分。

          undefined

          文章來源:站酷  作者:Ant_Design

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

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

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



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

          純純

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


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


          酒店床頭開關



          酒店客廳開關



          這個開關是觸控式的,開關本身有亮/暗兩個狀態;大家迅速看一眼,我想請問大家,你們認為,亮著的開關(圖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中的交互手勢和意符設計

          純純


          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          設計師如何高效溝通需求

          ui設計分享達人

          前言

          ——————————

          溝通是為了完成設定的目標,把信息、思想和感情,在個人和群體之間傳遞,并達成協議的過程。溝通目的一般分為:說明事物、表達感情、建立關系、達成目標。


          需求溝通是設計師和團隊圍繞需求目標,信息傳遞的過程,是設計師展開設計工作的起點,貫穿整個設計過程,溝通質量直接影響設計和項目質量。但因溝通復雜性、開放性,對很多新手設計師來說,在需求溝通過程中,可能會碰到一些共同的溝通問題,比如前期需求不明確導致設計頻繁修改、產品和體驗發生沖突時無法說服產品、溝通過程中陷入情緒爭吵、溝通中雞同鴨講等等。


          針對這些問題,本文嘗試梳理需求溝通過程中幾種典型場景和方法,以期幫助新手設計師快速識別需求溝通中的常見問題;提升溝通效率,快速達成共識;掌握溝通竅門,更精準高效的產出需求。


          本文主要分成2個部分,第1部分主要聚焦在需求溝通過程中的不同階段,面對的典型溝通問題和解決方案;第2部分主要介紹溝通中一些常見的技巧和方法。



          Chapter 1

          ——————————

          需求溝通的目標和方法


          1.1 設計師在不同需求階段的溝通目標

          通常設計師在處理需求的流程大致可以分成4個部分:了解需求->分析需求->探索方案->實現方案。在不同的階段,設計師要解決的核心問題不同:


          了解需求階段,設計師和產品針對需求目標進行討論,并和團隊就產品目標達成共識;


          分析需求階段,設計師和產品針對產品策略合理性進行討論,并提出體驗訴求;


          探索方案階段,設計師探索設計方案,并和產品就商業目標和體驗目標達成平衡;


          實現方案階段,設計師和產品協調優先級,調整方案,確保方案最大程度實現還原;




          1.2 如何更好的了解需求,明確目標,達成共識

          在了解需求階段,設計師需要了解需求來源、背景、要解決的問題和目標。總結來看需求可大致分為2類:一類是需求目標較明確,產品有明確要解決的問題,如提升產品體驗、滿足某個用戶明確需求、完成某個產品目標;一類是需求目標較模糊,比如挖掘用戶潛在需求,探索新的業務方向。



          對于目標較明確的需求,在了解需求背景、解決標準、需求邊界、限制條件和責任人等問題后,即可進入需求分析,策略討論階段。


          但對于方向探索類需求,如何協助產品探索目標,和團隊達成關于目標的共識,是這階段的溝通重點。以一個創業的項目為例,產品想做一個圖片社區,原因是目前國內沒有頭部圖片社區。還原項目初期的溝通過程如下:



          在產品的催促和時間壓力下,設計并沒有圍繞產品定位、用戶群、產品目標進行充分討論,也沒有和團隊成員達成共識。在這種情況下,選擇跟隨產品的節奏,陷入了被動執行。由于前期并沒有針對需求進行細致的推敲討論,方案的輸出過程變成了試錯的過程。產品方向修改頻繁,這種被動的溝通方式,導致整個團隊目標感不清晰、理解混亂。



          經過反思和問題總結,設計師發起了主動溝通,運用設計方法協助產品明確需求,提升方向說服力,探索如何就目標和團隊達成共識。首先,需要和產品明確用戶群,并尋找用研協助,或發起快速訪談了解用戶其次,組織團隊相關成員發起關于產品目標的討論,圍繞產品決策人給出的產品初步方向,團隊成員每人寫下對產品的期待,提煉總結團隊成員的想法,提煉總結產品目標;再次,根據用戶訪談材料,利用親和圖法,提取關鍵詞,從用戶訴求中洞察提煉用戶目標。最終,產品目標得以明確,團隊也取得了關于目標的共識,同時通過快速demo,來驗證優化,項目得以順利進行。




          1.3 如何更好的分析需求,確保產品策略合理性

          在了解需求背景、用戶群體,明確了需求目標后,進入需求分析階段,通常產品會給一個商業假設:假如做了xxxx,用戶就會xxxxx,產品可以達成xxxx目標。以一個需求為例子:產品想做一個任務體系,通過福利吸引用戶做任務,從而拉動產品活躍。


          如果設計師完全按產品給的商業假設輸出,方案產出過程貌似很順利,但可能隱藏了很多問題。以本需求為例,產品的商業假設邏輯是:用戶被福利吸引->用戶為拿到福利做任務->用戶獲得福利->產品完成目標訴求;


          但這個假設是正確的嗎?設計師的價值就在于,這個時候要能找出產品假設中的問題。通過對用戶的了解和洞察,還原用戶的實際使用過程可能會發生的問題。找到這些關鍵問題并通過和產品溝通協調解決掉這些問題,才能順利實現產品目標。


          通過對用戶實際參與過程的分析,用戶在看到任務獎勵后,實際需要權衡的內容很多,如福利吸引力夠不夠大、有沒有關系親密的好友可邀請、好友要完成的任務難度大不大?分析需求過程關鍵就是找到這些問題的對應策略,強化用戶參與的動力,降低參與難度。




          1.4方案探索階段,如何平衡商業和體驗訴求

          在方案輸出階段,設計師和產品最常發生的爭執是商業目標和體驗之間的沖突。產品為了達成商業目標,很多時候希望把達成商業目標的手段做的很強;



          當發生圍繞商業目標和體驗問題,誰都無法說服對方的情境時,設計師該如何溝通呢?


          首先,作為設計師要擺正溝通立場,理解商業化是任何產品的根本目標,體驗也是實現商業化手段之一,我們反對的不是商業化,而是簡單粗暴的商業化方式,商業化的前提是對目標用戶有足夠的了解和盈利模式的清晰判斷。


          其次,應能夠識別對于曝光越多越好,越直接越有效的這種思維方式,通常是一種鳥槍法的投機心理。在沒有更巧妙的解決方式時,最節省力氣的做法就是提升曝光等方式達成目標。


          當發生爭執時,如果僅僅站在設計立場上,用設計理論說服對方,通常效果有限。嘗試找到產品實現商業化目標背后的邏輯,不要用手段代替目的,探索更好的實現商業化方式的可能性,比如嘗試在合適的路徑上推薦,或探索用戶更容易接受的內容形式。




          1.5 方案實現階段,如何協調優先級,推動方案最大程度還原

          在方案實現階段,很多時候由于時間緊張,產品僅完成最核心功能,部分體驗相關功能一直無法得到優化。


          通常如果方案產品認可,但推進意愿不高時,可能的原因是:1.當前方案不是核心KPI,產品要優先保證對kpi影響最大部分完成;2.投入產出比不劃算,方案在產品看來投入的人力/時間/資源過大,并不值得;3.方案改動可能引發數據風險,產品并無法確保改動一定能帶來數據的成長;4.資源緊張,產品也很想實現方案,但項目時間/人力/資源真的很緊張。



          這種情況下,首先,要和產品夠分溝通他們的疑慮和擔心,到底是哪類問題;其次,從心態上也不用急于一時,做好長期推動的準備;還有,充分優化方案,消除產品疑慮,尋找合適時機進行推動。在項目逐漸迭代的過程中,對需要推動體驗優化點持續關注,盡可能放大方案價值,結合新的需求點,思考能否從價值拓展角度,如提升品牌價值、擴展性等角度提升方案說服力;同時,從縮小成本和打消產品疑慮角度,做足準備,推動方案。



          Chapter 2

          ——————————

          溝通技巧的問題

          溝通的過程是一個信息螺旋傳遞的過程,表達者的信息傳遞到接收者時,因為背景、環境、理解能力、傳遞完整度等差異,接收者僅能接收部分信息,而接收者在理解消化后,再將自己的信息傳遞出去,這個過程循環往復,會導致兩個最常見的溝通問題:目標偏離以及信息衰減。學習適當的溝通技巧,可以有效減緩目標偏離和信息衰減。


          2.1 如何防止溝通目標偏離

          要防止溝通目標偏離,首先要理解什么會導致目標偏離?1.目標不清晰,比如本來想找產品聊下某功能體驗不合理,但因為產品一直說項目時間緊,被傾訴了一通苦水后,忘記了本來要溝通的問題,轉移到了其他話題上,最后不了了之;2.缺乏同理心,比如當發生爭執時雙方不能互換角度,產品一直在說實現目標手段和現階段問題難點,設計在說體驗問題和設計規范,雙方互不妥協,陷入爭吵;3.陷入情緒,表達觀點時陷入情緒化的爭執。


          針對這三個會導致溝通目標偏離的問題,可使用以下技巧:


          ① 設定溝通目標并保持關注:在每次溝通前想清楚自己的目標和底線,嘗試用全局視角分析自己設定目標的合理性;在溝通過程中要經常反思當前溝通的問題是否已偏離了目標,對達成目標是否有幫助;發現目標偏離可嘗試改變節奏,思考接下來說什么有助于達成目標;


          ② 換位思考:能夠傾聽對方的問題和困難,嘗試尋找解決問題的辦法,而不是一直表達訴求,無助于問題的解決和推進;


          ③ 控制/傾聽情緒:美國心理學家埃利斯創建的ABC情緒理論,拆解了事件發生和情緒之間的關系,指出事件的發生并不是導致情緒的直接原因,我們持有的信念才是。因此在溝通中不要加入太多內心戲,過度解讀事件。比如產品讓設計反復改稿時,可能會解讀為產品在故意刁難,嘗試了解反復修改背后的原因,可能對解決問題更有幫助。



          2.2 如何減少溝通過程的信息損耗

          溝通過程中表達者的模糊表達和接收者的理解偏差,會導致溝通過程中的信息損耗。比如經常會聽見產品有以下類似的表達:“設計稿盡快輸出”、“頁面太結構化了,想要更社交化一點”、“能不能做得更有創意一點,更有趣點”當出現這些類似的溝通語句時,可以嘗試通過具體化方式,進行確認。



          對于可能會出現理解偏差的問題,重要的信息用自己的語言組織后再次確認“你的意思是xxxx嗎?”;重要的溝通后,可梳理溝通記錄,企業微信同步周知確認;方案的溝通過程可以快速畫草稿確認;盡可能的減少因為理解不一致導致的溝通問題。



          總結

          在需求溝通過程中,我們要對不同階段的溝通目標有清晰的認識,圍繞目標進行充分準備,運用設計方法了解用戶、了解產品核心訴求,做到知己知彼,才能進行有效的溝通。


          在溝通過程中保持對目標的關注,始終牢記溝通是為了解決問題服務的。適當學習溝通技巧較少溝通過程中的信息損耗。


          溝通是解決問題,共同協作的重要方式。如果你覺得自己不善于溝通,可能要反思下溝通前是否想清楚自己的溝通目標,對于解決問題的過程、方法是否熟悉,準備是否充分?當我們能做到知己知彼、胸有丘壑時,溝通可能就變得簡單起來。


          文章來源:站酷 作者:騰訊ISUX

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

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

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


          競品分析,如何助力設計洞察

          ui設計分享達人

          設計本身是建立在對用戶、場景、問題的深刻洞察之上,而競品分析是設計師耳熟能詳的設計思維及方法。在自身的階段性成長中,競品分析也為久喬及工作帶來了顯著的增益。

          關于競品分析,大家聊了太多的“如何做”,而我想和大家聊聊“為什么做”。深究競品分析存在的意義,在實踐中設計思路及側重點將更清晰明確,游刃有魚。



          1.  遵循用戶認知


          競品分析能夠幫助產品設計,遵循存在已久的用戶心智模型和產品實現模型——啟發于 《雅各布定律》。


          1.1  看似陌生的《雅各布定律》


          《雅各布定律》由尼爾森十大原則的創立者、尼爾森諾曼集團的創始人之一,雅各布·尼爾森(Jakob Nielsen)提出。

          他認為雅各布定律更像是一種自然規律,只是在描述一個事實,而這個事實就是用戶在其他千千萬萬個網站(產品)上積累經驗,學會如何使用網站,當一個網站跟其他網站一致的時候用戶會立刻知道該如何操作,但如果違反了雅各布定律,那么用戶會毫不猶豫地離開。

          簡而言之,產品設計需要盡可能降低用戶的學習成本,依據用戶存在已久的用戶心里模型及產品實現模型,進行任務和流程設計。

          因為用戶已經將大部分時間花在行業頭部的產品,這意味如果你希望他們能夠愉悅并持續的使用你的產品,那么你的產品需要跟別人的有相同的操作方法和使用模式。


          「 YouTube2017年改版前后的對比,在新版中,網站框架和功能上幾乎沒動,只是在UI上做了順應新的設計準則,比如調整字體大小、顏色、欄目間距等。整體上和舊版沒太大區別,而且還給用戶提供了舊版的選擇?!?



          1.2  潛移默化的影響


          遵循用戶認知,對互聯網產品有著潛移默化的影響,也印證了尼爾森的《雅各布定律》。這些“影響”在競品中隨處可見,并且符合設計原則及心理學。


          1)一致的概念模型


          同類型產品給用戶的心理暗示趨于一致,相近的產品實現模型,讓用戶快速理解產品是如何工作的。


          「 社交App合理的概念模型,將會暗示用戶如何發展好友關系:精準搜索 → 發送好友申請→ 建立好友關系 → 即時聊天 → 關注動態... 」


          用戶深受行業頭部產品,實現模型的教育,建立了認知及行為習慣。所以我們會發現,行業誕生的新產品及迭代的頭部產品遵循著一致的概念模型,規避重新教育用戶的成本。



          2)一致的交互示能


          我們在不同類型的產品上都進行順暢的操作,是因為產品向我們示意了一致的可交互能力,簡稱“示能”。


          「 文字末位帶有箭頭,表示可點擊查看更多信息;圖片帶有數字角標,暗示我們可以左右滑動切換... 」


          保證產品示能與行業競品一致,為用戶沉浸式體驗建立基礎,避免用戶使用時產生疑惑二次思考。



          3)一致的頁面映射


          當頁面映射關系是用戶所熟悉的,已存在的認知便可讓用戶觸達目標,免去學習成本。


          「 協同軟件的消息頁面,頁面結構及功能分布大同小異,明確地傳遞各元素之間的映射關系:選中聊天列表的對象,右側會出現對應的聊天窗口,窗口下方的輸入框可以發送新的消息?!?



          4)一致的視覺意符


          主要體現在產品表現層的視覺符號,傳達給用戶的意義一致。


          「 小紅點表示有未處理的信息;“筆”代表可填寫或修改?!?




          2.  打破思維邊界


          為自身產品尋求體驗及商業的更多可能,打破既定的思維,是競品分析的關鍵。圍繞不同類型的競品,直接競品及間接競品,設計師的分析側重點及借鑒取舍也有所不同。


          2.1  取長補短


          對于產品目標、核心功能、用戶群體高度一致的直接競品,設計師在明確目標后,梳理核心功能設計與競品之間存在的差異,取長補短。

          剖析競品體驗層比自身產品出色的原因是什么,如何更好地解決用戶的痛點;當然也需要反觀自身產品存在優勢的關鍵,能否通過數據、反饋再進一步拉開差距。以及如何規避短處...


          「 2月登頂免費社交榜的“啫喱”App,通過創造的潮玩虛擬形象的新型社交產品,可進行各類有趣的虛擬形象互動。同樣布局虛擬社交的大廠,字節跳動也推出了“派對島”App,潮玩形象可結合實景化的實時線上活動社區,可以說是各有千秋。

          二者便是典型的直接競品,將會不斷的迭代,共同期待他們相互的“取長補短”吧!」



          2.2  尋找跳板


          由于互聯網的信息透明,直接競品趨于同質化,給與設計師的啟發也有限。因此,將目光轉向間接競品是非常有必要的。

          尋找產品目標、用戶群體相近但存在差異,但業務場景及功能也有一定相似性的競品,作為思維的跳板,或許能為止步不前的現狀注入靈感。


          「 Chrome 最近上新的插件 Jam,這款插件可以在直接網頁上打標記、錄制gif、評論,并且和項目管理工具 Linaer 打通,可及時將信息同步給項目人員,提高項目協作效率。

          在企業協作平臺中,視頻會議、線上協作等協同產品的在線標記功能,完全可以對“Jam”這款插件進行分析,來實現對于關鍵內容的信息傳遞流程和用戶體驗的提升!」



          2.3  擁抱變化


          盡管有些產品在業務及用戶上與自身產品沒有重合,但是在行業理念、實現技術、交互行為層面,極具前瞻性。在合適的時機,嘗試將前沿的“變化”,融入自身產品,轉化為產品設計的亮點。當然這取決于設計師平時對科技、行業的關注及積累。


          「 21年飛書妙計上線,令人眼前一亮:飛書可將會議中的音視頻內容,實時生成文本形式的會議紀要!

          ToB業務中,多人交流協作的場景,比如客戶接洽、人選面試,如果相關業務功能加持音視頻自動轉文字的能力,用戶記錄內容的體驗及效率想必也會有所提升?!?




          3.  驗證設計思路


          借助競品分析,能夠幫助設計師發散思維、尋找設計突破點。在設計思路聚焦的環節,我們也能通過競品分析進行驗證。


          3.1  源于五要素


          資源允許的情況下,設計師可以基于《用戶體驗要素》中的五要素:戰略層、范圍層、結構層、框架層、表現層,對競品進行全方面的競品分析。

          戰略層分析主要圍繞“為什么開發產品”,我們可以了解競品的產品目標、用戶需求,以及二者結合的商業目標。為了達成最大化商業效益,競品進行了哪些成功的業務、商業化設計。

          自家產品的戰略層目標,與競品的是否有共同點或者相似性。如果有,已制定的設計策略與競品成功的解決方案是否存在差異,能否解決產品目標及用戶需求,在競品分析中能得到初步驗證。


          「 鼓勵“先進團隊,先用飛書”的企業協作平臺,飛書桌面端在團隊切換后數據隔離展示。也正因如此,左側導航在常用功能區下方,預留特定區域便于用戶快捷切換團隊,提高效率;

          然而釘釘桌面端在同一個信息容器,展示多團隊的協作信息(如即時通訊),將團隊切換的功能入口隱藏至二級菜單,盡管有“串場”風險,還是將更多的空間留給常用功能,“讓工作學習更簡單”。

          顯然二者的差異化設計,歸根于各自的戰略層考慮,用于達成特定的產品目標和用戶需求?!?


          范圍層等其他幾個要素,都能夠驗證相應的設計思路。



          3.2  考證可行性


          為了提高團隊產研效率及商業效率,設計創新或借鑒都會相對謹慎,避免沉沒成本。

          所以在一些資源相對緊張的項目中,為了及時驗證多個設計方案的可行性,可對競品類似的功能設計進行分析,再結合現有的資源(排期、開發投入),從多個設計方案中確定解決方案。


          「 在系統表單設計中,提交前用戶存在多次編輯的訴求。為了給用戶提供更靈活高效的體驗,關于表單的保存,我們團隊預想了3個,在用戶體驗、技術實現上有較大的差異的設計方向:

          • 1)用戶主動觸發保存

          • 2)用戶離開詢問保存

          • 3)系統自動實時保存

          顯然自動實時保存的體驗最佳,也是團隊傾向推動的方向。但B端系統中的使用相對少見,考慮用戶的學習成本及技術實現,落地及項目收益存疑。

          但發現間接競品,云文檔(語雀、飛書文檔、印象筆記)的內容實時保存功能,非常貼近我們的體驗預設。

          最終敲定方向 1,圍繞用戶構建自動保存的體驗認知。間接云文檔的實現方式做降級處理,數據僅僅保存在前端瀏覽器緩存,而不是像云文檔一樣直接存儲至云端服務器。項目落地設計目標,并沒有暫用過多的開發資源,項目也如期推進?!?


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

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

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


          用戶體驗設計發展簡史你知道嗎?

          seo達人



          history-of-ux

          是什么讓你選擇這家餐館?剛進去的時候,餐館給你的第一印象是什么?服務員是否讓你在等候一陣子之后領你去合適的座位?菜單放在桌子上的什么位置?瀏覽體驗如何?你點了哪些菜?上菜的速度夠快么?味道地道么?服務員夠不夠勤快體貼?你是否還想去這家餐館吃?

          所有的這些問題都關乎你對于這家餐館印象的好壞,也直指這家餐館的用戶體驗本身。

          當然,我們通常所說的用戶體驗(UX)所針對的對象大多是數字和科技產品或服務。這也就意味著,用戶體驗設計本身至少有著進一步提升的可能性。

          現如今,用戶體驗設計已經成為了一門重要的學科,快速地發展,并且擁有極大的成長空間。雖然這是一門擁有多學科背景的新興學科,但是向上追溯它的發展歷程之時,我們會發現早在文藝復興時期之前它就已經存在了。

          在爭論用戶體驗設計會帶領我們走向何方這種大命題之前,回顧一下用戶體驗設計發展史上的精彩瞬間,應該能給我們許多啟發。

          公元1430左右:達芬奇的“廚房噩夢”

          Michael Gelb 在他的著作《如何像達芬奇一樣思考》(How to Think like Leonardo da Vinci)中講述了米蘭公爵委托達芬奇為高端宴會設計專屬廚房的故事。這位偉大的藝術大師將他一貫的創造性天賦運用在這次廚房設計中,他將技術和用戶體驗設計融入到整個廚房的細節里面,比如傳送帶輸送食物,也首次在廚房的安全設計中加入了噴水滅火系統。

          davinci

          有意思的是,達芬奇的設計很多開創性的設計一樣,不足也非常明顯。傳送帶是純人工操作,工作不太正常,更麻煩的問題出在噴水滅火系統上,失靈的設計捎帶手毀了不少食物。

          當然,雖然達芬奇的這次嘗試令廚房化身為噩夢,但是作為用戶體驗設計的早期實踐,卻有著無比重要的歷史意義。

          20世紀初:Taylorism 和工業革命

          Henry_Ford_and_Barney_Oldfield_with_Old_999_1902

          作為最早的管理顧問之一,機械工程師 Frederick Winslow Taylor 撰寫了《科學管理原理》一文,深刻地影響了工程效率領域的研究。隨著Henry Ford的福特汽車實現大規模生產,Taylor和他的支持者們也逐漸完善出了勞動者和工具之間高效協同交互的早期模式。

          1948:豐田人性化的生產系統

          toyota-commemorative

          和福特一樣,豐田不僅在設計和生產效率上非常重視,而且對于人工輸出效率也非常關心。生產過程中裝配工人受到了更多的重視,幾乎不亞于對技術的關注。精益生產模式的巨大成功,使得人與技術之間的交互得到了更多的重視。

          1955:Dreyfuss ,為人的設計

          美國著名工業設計師Henry Dreyfuss 在這一年寫下了著名的設計書《為人的設計》(Designing for People)。

          dreyfuss-01-458-2

          在書中,他寫道:

          當產品和用戶之間的連接點變成了摩擦點,那么工業設計師的設計就是失敗的。

          相反,如果產品能讓人們感覺更安全,更舒適,更樂于購買,更加高效,甚至只是讓人們單純地更加快樂,那么此處的設計師是成功的。

          隨著人與產品的接觸越來越多,他在書中所講述的許多設計規則,被大家越來越多地引用。

          1966:迪士尼和開心效應

          Magic_Kingdom_Construction_08-19711

          在迪士尼世界早期建設階段,Walt Disney 在公告中是這樣描述它的:“…它(迪士尼世界)會成為一個堅持使用最新的技術改善人們生活的地方…”他的想象力和技術的結合,為全世界所有人帶來了無限的開心和喜悅,并激勵著設計師們(尤其是用戶體驗設計師)前行。

          1970s:施樂PARC和個人電腦

          pa_alto2

          作為施樂最出名的研究機構,PARC為隨后大范圍普及的個人電腦的設計型態和交互邏輯定下了基調。Bob Taylor,作為一名訓練有素的心理學家和工程師,帶領著他的團隊構建出了人機交互領域最重要也是最普及的工具,包括圖形化界面(GUI)和鼠標。(隨后喬布斯和蓋茨先后訪問了PARC,參考了施樂之星的設計,為今天的蘋果和微軟開辟了通向未來的道路。)

          1995: Don Norman,第一個用戶體驗專家

          身為電氣工程師和認知科學家的Don Norman加盟蘋果公司之后,幫助這家傳奇企業對他們以人為核心的產品線進行研究和設計。而他的職位則被命名為“用戶體驗架構師”(User Experience Architect),這也是首個用戶體驗職位。

          11484403695_e95d161896_b

          在這個階段,Don Norman 還撰寫了經典的設計書《設計心理學》(The Design of Everyday Things),直到今天它依然是設計師的必讀書。

          2007: iPhone

          2007年MacWorld上,喬布斯發布了iPhone,稱其為“跨越式產品”,并承諾它會比市面上任何智能手機都要易用。隨后,iPhone不僅兌現了喬布斯的承諾,而且徹底改變了智能設備領域的格局,蘋果公司再一次登頂,成為世界上最成功的公司之一。

          only-starter-iphone-jobs-pic-131004

          iPhone的絕妙之處在于,它融合了當前最卓越的軟件和硬件系統,借助革命性的電容觸摸屏而非傳統的物理鍵盤來同用戶進行交互??梢哉f,初代的iPhone所提供的用戶體驗,遠遠優于同時代的任何手機。

          這也在無意中讓智能設備的軟硬件研發和相關領域將重心放到用戶體驗上來。蘋果公司強調他們是通過提供出色的用戶體驗贏得市場成功和無上榮譽,其他人自然而然就跟隨這他們的腳步前進。

          用戶體驗的未來

          用戶體驗設計發展史上的每一個重要里程碑,都源自技術和人性的碰撞?;ヂ摼W和新興技術正在越來越多的介入我們的生活,我們可以遇見到用戶體驗設計會來接下來的日子里,一日千里地發展前進。只是這種發展也越來越多地需要專業技能,跨領域協作,多學科實踐,比如用戶研究、圖形設計、客戶支持、軟件開發等等等等。根據 indeed.com 網站的統計數據,在用戶體驗設計告訴發展的今天,單過去的15天里,就有超過6000個相關職位的招聘需求發布在網上。

          the-disciplines-of-user-experience-design_51029d505f014_w587

          互聯網不再單純的局限于我們的筆記本電腦和智能手機,可穿戴設備,智能汽車和智能醫療設備也都會接入網絡。全球互聯的時代賦予專業的用戶體驗從業者更重大的責任,用戶體驗設計也不再局限于屏幕和像素,超出外形,關乎生活每個細節的用戶體驗設計無時無刻無處不存在。

          所以,不論你是達芬奇還是福特,是泰勒還是喬布斯,你都擁有著無限的可能性和海量的機會,改善用戶體驗,創造更美好的世界。


           

          文章來源:優設
          優設譯者:@陳子木

          轉載請注明:學UI網》用戶體驗設計發展簡史你知道嗎?

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

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

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

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

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



          了解什么是用戶體驗設計?

          seo達人


           

          1. 什么是設計?

          一說到設計,很多人都會想到天馬行空的插畫,各種漂亮的手稿等。那么設計就是單純的漂亮的外形嘛?設計等于藝術嘛,我們首先來看一副畢加索的作品。

          單看這幅畫,你能從中感受到什么?你能理解作者想表達的什么含義?每個人看到的可能都會有不同的理解,甚至有的人會說“我完全看不懂”。那么接下來在看另外一副作品,這是某用戶體驗設計師的作品。

           

          undefined

          內容包含草圖(線框圖),頁面流程,簡單的交互說明等。他看起來簡單明了,所有的用戶一看都基本能了解簡單的操作流程,它是專業而理性的作品。由此可見,藝術是感性的,而設計師相對理性、精密的。它是居于大量用戶數據而分析出來的最適合、最合理的方案。

           

          2.如何做好用戶體驗設計?

          那什么是好的設計那?不讓用戶思考,趣味橫生的那就是好的設計。

          那怎么做到以上的這些點那?我們就需要了解“人”,觀察“人”。做設計,歸根結底就是為了解決“人”的問題,是為了讓“人”從中獲得良好的體驗。那么這就需要了解“人”的想法、行為、習慣等,學會換位思考。多注意觀察“人”的日常行為是一個號的習慣,但是注意不要以偏概全,而是多思考背后的原因,多歸納人的共性。

          舉個例子,比如淘寶的收藏夾和購物車頁面,它們的內容其實是相似的,都是包含圖片、商品名稱、價格等元素。(如下圖)

           

           

           

          如果按照正常邏輯,這2個頁面展示的東西一致,那么設計的界面也會類似,有的其他網站甚至把這2個頁面做成了相同的頁面樣式。但是為什么淘寶會把2個頁面區分開來,做成不同的樣式那?這正是考慮到用戶的使用情景和心里感受。購物車里面的商品都是用戶購買意愿比較強的商品,所以不做強調處理,只做簡單的信息展示排列處理,簡潔明了,不過多干預用戶,方便用戶迅速下單。而收藏夾的商品是用戶不急于購買的商品,所以收藏夾的設計會突出圖片、評論、人氣等內容,吸引用去購買的欲望,那收藏夾就達到了它的目的。所以展示同樣信息的頁面,根據用戶使用情景不同,頁面設計也會有所不同。

          在此基礎上,設計師還需多聽用戶的反饋意見。很多時候你對這個產品太過熟悉,很多東西已經習以為常,而用戶卻可能并不了解。多聽聽用戶的反饋意見,才能更快發現設計上的問題以及用戶的困惑,做出更受用戶喜愛,用戶體驗良好的產品,這也是設計師的工作的目的所在。

           

          那么所有的用戶的反饋意見都要采納嘛?事實并非如此,用戶說的不一定是心中所想的、用戶沒有表達出自己真實的需求、用戶的意見不專業。這就需要設計師去思考用戶需求的本質,只是盲目的順著用戶的要求走,那么最終呈現的也不是最合理、最嚴謹的設計方案。

          福特汽車公司的建立者亨利·福特曾說過這么一句話:“如果我問我的用戶,他們可能只會說要一匹更快的馬”。如果福特沒有思考用戶需求的本質,那么就不會有后來偉大的福特公司了。

          交互設計師接到PRD需求往往可能是一個蘋果,但是他們可能更需要個橘子,那設計師就需要把蘋果換成橘子,在進行加工榨成橘子汁提供給用戶。(如下圖)

           

          undefined

           

          由此可見,設計師需要傾聽用戶的意見。但也不能一味的跟著用戶的節奏,被用戶牽著走,而是應該理性對待用戶的需求,分析用戶的根本目的,解決深層次的問題,而不是停留在表面。

           

          3. 設計規劃

          在我們順利理清需求以后,我們便從需求階段順利過渡到界面階段,并可以在此基礎上繼續細化界面。

          人們在處理信息,學習規章和記憶細節方面的能力是有限的。選項越多,步驟越長,用戶需要耗費的注意力和理解力就越多。所以設計師在此基礎上要減少多余的步驟和干擾項、優化操作過程,做到操作前可以預知、操作中有反饋、操作后可撤銷。

          情感化的設計更能快速的捕獲用戶的芳心,建立符合用戶心理模型的設計,能讓用戶快速上手使用產品,不用進行過多的思考或花時間精力來學習如何使用該產品。如下圖所示的2款天氣的應用軟件。

           

          undefined

           

          單從界面邏輯上看,第一款的應用在邏輯上更為清晰,用戶理解起來不存在任何問題。但是用戶看到這個界面的時候可以直觀的感受帶今天是不是很熱,明天是不是很熱,在感受上不會那么直接。而第二款應用,通過顏色的變化和數字的高低,能讓用戶更貼切的感受到天氣的變化。所以,設計不僅要邏輯清晰合理,更要能夠令其產生認同感和情緒體驗,與界面產生情感互動,從而能引導用戶積極操作。

           

          4. 結果

          從上面的各項例子中可以看出,好的設計首先是要解決用戶在某個實際場景應用下發生的問題,會讓這個產品更易用,更受歡迎,最后會給用戶留下美好的體驗。視覺體驗只是整體體驗的一部分,它并不是設計的全部。

          因此,用戶體驗設計首先應該是理性的,其次才是感性的。只要你的方案能夠解決用戶的實際問題,又能帶給他好的感受,用戶就容易感到滿意。


           

          作者:流年

           轉載請注明:學UI網》了解什么是用戶體驗設計?


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

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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