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

          首頁

          交互設計之探索GUI和VUI

          周周

          本文主要探討GUI和VUI的交互設計 。

          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確。例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋。



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量?。∪绻鸵曨l播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王。灰色則表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通??梢酝ㄟ^一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。

          文章來源:站酷      作者:應駿

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

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

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



          日期與時間的一點點設計細節

          ui設計分享達人

          絕對時間與相對時間


          絕對時間

          絕對時間包含:年月日、時刻

          絕對時間適用于對時間精確度要求較高的時候,比如說訂單創建時間、某項活動開始/結束時間、特定節假日簡稱等。絕對時間在信息表達上更加精準、正式,給人確定感和安全感;但是內容顯示過長,占用的空間較大。


          相對時間

          相對時間的展示形式:剛剛、XX分鐘前/后、XX小時前/后、X天前、昨天、明天、今天等

          相對時間適用于對時間精確度要求不高的時候,比如說消息、通知類功能、Feed流。采用相對時間對用戶來說理解成本低,不用去往前推算出發布的具體時間點;但是不夠精確、并很難衡量兩個時間點的臨近性。



          日期與標點符號


          目前主流App上,年月日的常見的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ~ 2022-12-30”,那這些日期格式是否都正確呢,日期的連接應該使用什么標點符號?


          《中華人民共和國國家標準GB/T15834-2011標點符號用法》中對于連接號、點號、分隔號的使用場景有明確規定。

          連接號(短橫線“-”、一字線“—”、波浪號“~”):標示某些相關聯成分之間的連接;

          點號(.):作用是點斷,主要表示停頓和語氣;

          分隔號(/):標號的一種,標示詩行、節拍及某些相關文字的分隔。


          表示具體日期

          基于國標對于連接號、點號、分割號的使用場景說明,用阿拉伯數字表示年月日時應采用短橫線“-”。在比較正式的文件、公告中,日期一般不用分隔符連接,而是直接采用中文的年月日連接。


          表示日期范圍

          Antdesign規定日期范圍需要在日期或時間范圍之間顯示波浪號 (前后需要空格),這種方式是不符合標點符號的使用規范的。



          在標示時間的起止時,應該使用一字線“”,而非波浪號“~”,波浪號主要用于標示數值范圍而非日期的起止。日期帶有分隔號橫短線“-”時,可以采用“至”作為連接符;日期不帶有分隔號橫短線“-”時,可以采用一字線“—”作為連接符。注意日期與連接符之間用「空格」隔開。



          時間

          時間計時方法包含十二小時制、二十四小時制。在設計過程中注意區分十二小時制,上/下午和A/PM的位置區別。


          日期與時間組合使用

          當日期和時間連在一起時,兩者之間用「空格」隔開,如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。


          涉及到周的時,可以將周放在日期與時刻之間,用「空格」隔開,如:“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。


          涉及到日期和時間范圍時,可在表示日期范圍的基礎上添加時間,如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。



          專有名詞


          以月、日為標志的事件或節日,用漢字數字表示時,只在一、十一和十二月后用間隔號;當直接用阿拉伯數字表示時,月、日之間均用間隔號。



          文章來源:站酷      作者:吳大只

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

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

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


          你好,我是《用戶體驗四維度》

          ui設計分享達人

          你好,我是《用戶體驗四維度》,一本關于用戶體驗的新書,今天正式上市了。


          具體內容方面,我選擇了聚焦于“人”——主要探討了人與界面、人與內容、人與人和人與品牌的交互體驗——大部分話題既有宏觀上的綱領,也有微觀上的實現細節。這四類交互體驗,下文的提及會使用簡稱,所以先看下簡稱及對應的全稱。

           

          HI X:Human Interface Experience,人與界面的交互體驗;

          HC X:Human Content Experience,人與內容的交互體驗;

          HH X:Human Human Experience,人與人的交互體驗;

          HB X:Human Brand Experience,人與品牌的交互體驗。



          下面把時間交給作者李瀟,由他來做一些分享。

           

          你好,我是作者李瀟。我主要分享兩點,第一點是這本書的來龍去脈,第二點是這本書的主要特點。

           

           

          01 《用戶體驗四維度》的緣起

           

          2019 年 7 月 15 日,我在個人公眾號上發表了第一篇設計類文章《淺談 Keep 的 UI 設計》,轉到朋友圈后有很多人點贊,也有朋友說寫得不錯,轉到站酷后也有很多設計師留言稱贊。算是一個還行的開頭,這給了我信心。

           

          之所以會寫公眾號,是因為當時我成立了一個個人的設計工作室,希望借公眾號的文章引來一些客流。之所以第一篇文章會寫 Keep,一方面是因為 Keep 比較知名,另一方面是因為我比較喜歡 Keep,也是 Keep 比較忠實的用戶。

           

          當時的計劃就是挑一些個人比較喜歡的、具有一定知名度的產品來寫,每款產品至少寫兩篇文章,一篇寫 UI 設計,一篇寫交互設計,或許還可以就產品功能再寫一篇。因為我分別從事過產品經理和 UI 設計的工作,同時也兼任過交互設計的工作,有這些方面的經驗。

           

          按照計劃,第二篇文章很自然地就是關于 Keep 的交互設計,不過名字是《淺談 Keep 的用戶體驗》。因為所寫內容已經超出了“交互設計”的范疇,而“用戶體驗”恰好是一個更合適的主題。這篇文章的反響依然還行。另外,有趣的是,根據使用感受,我發現 Keep 這個擁有課程和社區的運動品牌,它的用戶體驗可以用四個維度來描述,它們分別是:人與界面、人與內容(課程)、人與人(社區)、人與品牌。沒錯,這就是本書最原始的雛形了。

           

          再加上也有讀者朋友反饋說“用戶體驗的四維度”挺不錯,有啟發。于是第三篇文章就“拐彎”了——沒寫 Keep 的產品功能,也沒寫其他產品,而是把“用戶體驗的四維度”單獨寫成了一篇文章:《淺談用戶體驗的 4 個維度》。

           

          某種程度上,第三篇文章的反響好過前兩篇,因為當時有 3 個業內比較知名的公眾號(分別是 MicroUX、應謀鬼計、UXPA,在此向他們致以謝意)轉載了這篇文章,且有一名立志成為產品經理的大學生根據這篇文章的觀點寫了一篇分析 QQ 和微信用戶體驗的文章:《從微信與 QQ 的交互比較中談用戶體驗》。另外,當時在跟一些朋友聊起我寫公眾號的近況時,有兩位設計師朋友都提了句“可以寫書/出書”。

           

          不知說者是否有意,但是聽者有心,朋友的話更加堅定了我內心逐漸萌發的寫書的想法。第三篇文章之后,我就開始認真考慮寫書這件事了:首先,“用戶體驗的四維度”這個概念比較新,或許可以作為書的框架;其次,個人對用戶體驗非常感興趣,也就是對這個潛在的書的框架非常感興趣;第三,發在網上的文章,包括“用戶體驗的四維度”這個概念,反響都還行;第四,公眾號我是全職在寫,為了質量寫得很慢(平均兩周一篇 4000 多字的文章),時間成本已然很高,還不如再增加點時間成本來寫書。

           

          所以,是不是真的可以把“用戶體驗的四維度”寫成一本書?

           

          試試才知道。于是,在參考很多書的大綱以后,2019 年 8 月下旬,我就為“用戶體驗的四維度”列好了一個初步的大綱。

           

          之后發在網上的所有文章,也就是從第四篇開始,就是按照這個大綱來寫的。也就是說,我是先把書稿寫成了網文,這種網文的更新一直持續到第 2 章 HI X(人與界面的交互體驗)的尾聲,隨后斷更。因為那時已和出版社簽好合同了,按照約定,書里的內容不再發到網上。對于那些曾在網上追過我文章的讀者朋友,在此我要說聲抱歉,請見諒。

           

          順便說下書稿和網文的主要區別。歷經編輯的指導與建議、作者的反復修改、審校流程的打磨,與網文相比:

          一,書稿的邏輯與結構更加嚴謹、合理,內容和語言也比網文精簡;

          二,書稿更加體系化,相互之間(如 HI X 部分的根需求、功能架構和信息架構)盡可能做到了“環環相扣”,章節之間的起承轉合也更加連貫、自然;

          三,書稿在內容層面進行了一定程度的修改和優化,個別章節(第 1 章的四維度,第 2 章的根需求、功能架構等)則是進行了極大程度的修改和優化。

          四,書稿在產品案例和生活案例方面也進行了一定程度的調優。

           

          以上就是這本書的一個簡單緣由,接下來分享下它的主要特點。

           

           

          02 《用戶體驗四維度》的特點

           

          這本書主要有四個特點,它們分別是:追求深度、追求卓越、展望未來、兼顧大小。當然,我也很期待你去發現這本書的其他特點,包括它的缺點。



          1 追求深度
           
          無論是宏觀上的大綱(用戶體驗四維度),還是微觀上的具體內容(根需求、功能架構、UI 設計、HH X 等),本書都著力于深挖本質。
           
          先以根需求為例。在日常工作中,“需求”是一個高頻詞匯:大到上線一個大功能,小到改一下字體顏色,都被我們稱之為“需求”。面對大大小小、林林總總的“需求”,是不是有必要關注下根需求(本質需求)?因為根需求是一切需求的根本。如果根需求有問題,往往意味著用戶的根需求沒有完全得到滿足,那由此衍生出來的一系列大小需求都會有問題;如果根需求有問題,就意味著這個行業的類似產品,依然有機會,直到用戶的根需求完全得到滿足為止。所以本書就以幾乎人人都會用的資訊產品為例,比較深入地探討了兩類用戶(生產型用戶和消費型用戶)的根需求。
           
          再以 UI 設計為例。關于 UI 設計,最近幾年出現了一些“商業化設計”“增長設計”的概念,也就是說,UI 設計的肩膀上多了“增長”“商業化”這些擔子。這不禁使人擔心,未來會不會有新的擔子,繼續加在 UI 設計的肩膀上?另外,術業有專攻,職能亦有分工,這些擔子,UI 設計擔負得起嗎?我認為未必擔負得起。就像于動物的生命而言,心肝肺各有分工、各有貢獻,總不能讓心臟負責呼吸、肝臟負責跳動、肺負責造血。于心肝肺而言,做好分內的事情就是最大的擔當與貢獻;于 UI 設計、交互設計、信息架構、產品功能等而言,情況亦然。那 UI 設計的分內事是什么?是它的本質,這便是本書關于 UI 設計的探討視角。
           
          2 追求卓越
           
          在本書中,有些話題有嘗試深挖本質,有些話題沒有。不管有沒有深挖本質,最終目的都是落腳于“如何做到更好”,也就是追求卓越。
           
          以交互設計為例,在規劃它的大綱時,我嘗試過不同的切入點:大的設計原則(iOS Human Interface Guidelines, 尼爾森十大交互原則等)、小的交互細節(微交互)、設計哲學(3-4 個要點)、設計目的(人人喜愛)。仔細斟酌之后,我發現要想實現“人人喜愛”這個設計目的,“設計哲學”這個方法的可能性是最大的,而且設計哲學本身是足夠“海納百川”足夠“獨立成章”的,所以最終果斷摒棄了其他切入點,而只保留了“設計哲學”這個切入點。具體而言,這個設計哲學就是:周到,品質,驚喜,善意。想象一下,一個為人周到、能力(品質)卓越、時不時會給身邊人帶來驚喜、同時又很善良的人,自然會受到身邊人的喜愛。類似的交互設計,同樣會受到用戶的喜愛。

          3 展望未來
           
          內容“扎根生活”是本書的追求之一。但是當探討到目前面臨困境并存在諸多不足的話題時——比如 UGC 產品(HC X 部分)——本書則會更多地展望一下未來。
           
          UGC 產品面臨什么困境,存在什么不足?
           
          以文章類 UGC 產品為例:各行各業的從業者——比如教師和律師——都有自我充電(如看到本行業高品質的深度文章)的需求,這個需求基本上能在公眾號里得到滿足;但是,不管一篇深度文章的品質有多高,公眾號這個包含各類信息的平臺,都是像黑洞一樣將其“吞噬”和“湮沒”,而不是像書店、圖書館一樣將其“陳列”和“流傳”下去。再以極其熱門的短視頻類 UGC 產品為例:得益于簡單易用等諸多優勢,短視頻類 UGC 產品在“信息和知識的大眾普惠”(尤其是針對老年人)上做出了重要貢獻;但是,短視頻類 UGC 產品也存在一定不足,比如容易使人上癮、沉迷,比如上面的信息和知識一定程度上缺乏質量保障。
           
          未來更好,或更受歡迎和尊重的 UGC 產品,會是什么樣子?
           
          個人觀點,首先是簡單清晰的分類,也即 UGC 產品需要分成知識型 UGC 和信息型 UGC,前者以知識為主,后者會包含前者。實際上這個分類目前是存在的,比如站酷、人人都是產品經理、CSDN 等社區就屬于知識型 UGC,公眾號、B 站、抖音等平臺則屬于信息型 UGC。
           
          篇幅所限,這里僅說下信息型 UGC。以短視頻類的信息型 UGC 產品為例,雖然大熱,但也飽受爭議,甚至飽受詬病。什么樣的信息型 UGC,在廣受歡迎的同時還受人尊重,甚至受人喜愛?據個人觀察,有兩大類。一類是像公眾號這樣足夠多元的“真實世界”,另一類是像 B 站、Instagram 這樣在某些方面比較美好的“理想世界”?!罢鎸嵤澜纭焙汀袄硐胧澜纭保档盟行畔⑿?UGC 來學習。

          關于信息型 UGC,怎么建立更多“真實世界”和“理想世界”?關于知識型 UGC,未來更好的產品會是什么樣子?這些問題,本書都嘗試進行了探討,以供參考。

          4 兼顧大小
           
          用戶體驗的四個維度,交互設計的設計哲學,知識型 UGC 和信息型 UGC,都是比較宏觀的大話題。本書不光有這些大話題,還有與之對應的關乎“怎么實現”的小細節。
           
          還以交互設計為例,周到的、高品質的、給人驚喜的、帶有善意的交互設計會受人喜愛,那交互設計如何做到周到、品質、驚喜和善意呢?自然而然地,本書就這四個問題進行了比較深入的探討。以“驚喜”為例,本書先是將交互設計的“驚喜”分為“小驚喜”和“大驚喜”,簡單給出了定義和示例,然后又就“如何做到驚喜”分別給出了針對短期(可以立馬實現,更適合“小驚喜”)和長期(需要長期積累,更適合“大驚喜”)的建議。
           
          于 UI 設計、信息架構、功能架構、HH X 等話題而言,也是同樣的或類似的寫作手法。


          分享完主要特點,接下來請允許我簡單介紹下這本書適合哪些讀者,供你參考。
           
          5 適宜人群
           
          得益于以上幾個主要特點,再加上本書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI 設計,也有更進一步的 HC X(人與內容的交互體驗)、HH X(人與人的交互體驗)和 HB X(人與品牌的交互體驗),個人觀點:
           
          本書既適合一線從業者(產品經理、交互設計師、UI 設計師等),也適合相關從業者(技術人員、運營人員、市場人員等);
          既適合創業者(“根需求”“功能架構”以及“知識型 UGC”“信息型 UGC”等部分或許會使你發現更多新的機會),也適合學生。
           
          希望你能在書中找到自己需要的、或自己感興趣的內容。
           
          以上就是我的分享,接下來把時間交給《用戶體驗四維度》。
           
           
          結語
           
          好的,謝謝作者李瀟的分享,讓我意識到我的出生似乎是個意外;也謝謝李瀟把我夸得這么好,但我還是要補充一句,他的夸獎僅供參考,一切以自己的切身感受為準。
           
          用戶即人,談用戶體驗,自然離不開對人的關注。人作為高級動物,自然有其強大和理智的一面;人作為動物本身——置身于高速發展的現代社會,置身于“亂花業已迷人眼”的智能化信息社會,置身于既相互溫暖也相互競爭甚至還相互“傷害”的同類中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


          是最堅強的人,是最脆弱的人   
          是最理智的人,是最敏感的人   
          固若金湯的人,語無倫次的人   
          不過,血肉之身   


           
          同樣作為人的互聯網從業者,在打造自家產品時,在兼顧商業化的同時,有沒有可能以更美好的方式去對待這一個個用戶,一個個血肉之身?
           
          我想這是一些產品正在面臨的問題,也是所有產品都難以回避的問題(用戶利益和企業利益難免會發生矛盾)?;ヂ摼W行業在中國的蓬勃發展,不過二三十年的歷史,所以相信這也是一個布滿荊棘、充滿希望的問題?!队脩趔w驗四維度》從根本上探討的,也正是這個問題。希望我的探討,能為你帶來一點參考或啟發。
           
          最后,謝謝你的時間。


          - -  The End - -


          實拍圖:

          undefined

          文章來源:站酷      作者:SonwDesign

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

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

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



          設計師眼中的用戶體驗

          ui設計分享達人

          用戶體驗

          首先,我們先來了解什么是用戶體驗

          從字面上來說,用戶體驗就是用戶在使用產品過程中對產品的直觀感受以及評價

          這種感受非常的主觀,但又很容易影響別人對產品的判斷。這就是為什么某寶商家一直求好評,而某團騎手會為了好評跟用戶“大動干戈”的原因了


          名詞解釋

          • UI——User Interface,本意是“?戶界面”,但現在這個詞已經被擬人化了,即把那些做用戶界面的設計師們叫做UI

          • UE——User Experience,本意是“?戶體驗”,現在也變成了一個職業名詞,是指那些做用戶調研的研究員,比如用戶畫像、產品分析、競品分析等。有些公司把“交互設計師”也叫做UE,嚴格來說UE和交互是兩個職位,不過現在很多UE除了做用戶調研也會畫交互原型,所以混在一起也不奇怪了

          • IxD——InteractionDesigner,本意為“交互設計”,也就是交互設計師,現在也常常用UX(User Experience)來表示交互設計,用來跟UI進行區分。簡單來說就是幫產品畫原型的,實際上這個職位非常的關鍵,產品希望表達的邏輯,各個界面的跳轉與關聯關系,以及產品的可用性與易用性,都體現在交互上

          • UED——User Experience Design,本意為“?戶體驗設計”,現在常常表示用戶體驗設計團隊,基本上大一點的互聯網公司都有自己的UED團隊,甚至大的部門都有自己的UED團隊


          UED工作領域

          UED團隊要做的事情可多了,通常來來說主要坐下面的事情: 

          • 用戶研究

          • 產品分析

          • 交互設計

          • 產品設計

          • 視覺設計

          • 品牌設計

          • 插畫設計

          簡而言之,UED是以用戶需求為目標而進行的設計的團隊,通過團隊的經驗與設計能力給出設計方案,是幫助公司進行產品策劃的主力之一


          用戶體驗五要素

          說到用戶體驗,就不得不提用戶體驗五要素了

          現在我們所談論的用戶體驗的概念,其實最早出自一本叫《用戶體驗要素》的一本書

          《用戶體驗要素》--作者Jesse James Garrett,是美國用戶體驗咨詢公司Adaptive Path的創始人之一


          這本書出的其實比較早,英文版在2001年就出了,國內常見的是2010年出版的中文版第2版,書里的概念在互聯網設計界廣為流傳,非常值得閱讀


          當設計師在設計或重構產品,卻不知從何開始時,這時我們可以參考用戶體驗五要素


          用戶體驗五要素是一種產品分析與設計的方法論,他向教科書一樣指導我們從0到1設計一款產品。同時它涵蓋了一個產品從想法到落地的整個流程,這正是我們學習它的重要原因

          用戶體驗五要素由戰略層、范圍層、結構層、交互層、表現層等5個層級構成,由下而上像個金字塔的結構一樣,戰略層則是底部最堅定的根基,產品的起源也源自該層


          1.戰略層

          這是五要素的最底層,一般是公司負責人與產品總監、市場總監等高層之間的討論范圍層。這一層主要是確定產品目標以及用戶需求。比如:

          • 公司要做什么

          • 面向什么樣的用戶

          • 什么樣的解決方案

          • 公司的產品特色是什么

          • 競爭對手有什么

          • 將來的收益怎么樣

           

          值得一提的是用戶畫像需要在這一層定義出來。我們可以招募一些用戶進行訪談,然后為用戶分組,并結合用戶的需求確定我們的產品目標

          2.范圍層

          戰略決定范圍,這一層主要針對戰略層的需求進行更細致的分析,定義需求是什么,提出解決方案,同時要定要好需求的優先級

          3.結構層

          根據前兩層思考產品的信息架構,規劃任務流程,簡單來說這一層主要是產品PRD的輸出

          4.框架層

          頁面的具體功能擺放,信息布局,這一層主要是交互設計,輸出低保真原型

          5.表現層

          頁面最終給用戶呈現的視覺效果,這一層主要是視覺設計,輸出高保真視覺稿

          模擬案例

          作為設計師的你,接到了一個餅干公司的設計需求,公司希望你能幫他完成從產品到包裝一系列的設計,你該怎么去做呢?

          我們用用戶體驗五要素來整理設計思路:

          -戰略層

          • 先了解這家公司的產品需求和用戶需求

          • 產品需求:公司是個小型食品加工廠,主營是面包和餅干,有實體店也有網店,今年準備在圣誕節推出一款圣誕餅干

          • 用戶需求:用戶畫像是20-35歲的女性,喜歡看劇,喜歡網購,對可愛的東西沒有抵抗力。今年上映的一部電影叫《餅干俠》(虛擬)票房火爆,用戶都想買到劇中同款的餅干

          • 公司目標:希望圣誕前后一個月內盈利50w

          -范圍層

          • 分析需求:公司是做一款圣誕餅干,了解到《餅干俠》的原型是出自美國卡芙食品的一款餅干,并把它確定為競品并展開分析

          • 設計方案:列出一系列設計清單,包括品牌logo重新設計,食品包裝、網店圣誕裝飾、廣告宣傳圖等,給這些設計需求確定好優先級

          -結構層

          • 信息架構:進一步細化已列出的設計方案,輸出文檔或者設計規范,比如《品牌手冊》《食品包裝標準》等

          • 交互流程:進一步的用戶畫像與分析,收集市場同類型品牌調性,通過試用的方式整理出餅干的分類屬性,如口味、分量、包裝材質等

          -框架層

          • 從這里可以開始整體的、低保真的設計了,可以出一些比較具體的設計方案,目的是快速跟需求方進行評審,為后續的視覺設計作準備

          -表現層

          • 經過前面反復的溝通與評審,開始高保真的視覺設計,從產品包裝到廣告圖到物料,這里就是設計師們展示商品顏值,提升其商業價值的時刻到了

          • 最終產品上市



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

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

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


          交互規范制定指南

          ui設計分享達人

          一、如何「理解」交互規范


          說起設計規范,大家應該都不陌生,一個成熟的設計規范對 產品設計、研發開發、用戶使用 都有著重要的指導作用:


          產品設計:保障產品內不同模塊的設計一致性,同時提高不同設計師間的設計、協作效率

          研發開發:通過定義的標準規范,提高流程、組件的復用率,提高整體開發效率

          用戶使用:讓用戶能夠在產品全局感受到統一且完整的體驗,降低使用成本和學習難度



          而一個完整的設計規范一般分成「視覺」「交互」兩個部分合并組成,在全局原則的指導下,側重不同的維度和內容分別展開規范的定義,最后再合到一起形成一份完整的設計規范。



          從用戶體驗要素來看,視覺主要是在「表現層」「框架層」進行規范的統一,主要包括:形、色、字、構、質、動 六個層面。



          而交互角度相對抽象,主要針對于產品的「結構層」「框架層」入手,定義統一的交互規范,指導頁面、流程搭建和組件使用規則。包括:全局原則、頁面布局、通用流程、標準組件、文案規范。



          整體維度呈“從抽象到具體的總分關系”,不僅對產品的各個維度都有具體的交互指導,而且不僅能保證長期使用,避免重復返工;同時也便于囊括后續的迭代內容。而這些內容,就是我們通常定義的交互規范,也是交互參與定義設計規范的發力點。


          有了對于基本認識和搭建框架之后,我們來詳細聊聊如何定義交互規范具體內容。



          二、不同階段應該定義

          哪些交互規范?


          產品有不同發展階段,設計規范同樣也有,不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多,保證投入產出比最大化;同時也要構建一個合理的規范迭代思路。


          產品探索初期


          該階段的產品核心目標是「驗證產品或商業模型」,業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態,存在著“先滿足功能,再優化體驗”的情況,導致該階段的產品體驗往往不太過關。


          搭建目的:通過定義原則,梳理關鍵頁面和流程,搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷;從頁面到流程,又能對應設計參照標準;同時業務可以在規定的框架下發展,不僅讓產品體驗的根基牢固,而且不會限制功能設計自由。


          搭建范圍:「全局原則」「頁面布局」「通用流程」


          產品穩定發展期


          該階段的產品基本形態已穩定,也形成了初步的模型結構。后續迭代是在現有結構的基礎上,進行增加或優化功能。雖然探索期定義了產品原則、布局和流程,但探索期產品的自由生長,會導致不少設計細節不一致,從而影響了產品整體的體驗和效率。


          搭建目的:通過回溯整理過往設計,沉淀優化成完整的交互規范。再根據規范統一產品體驗,進一步優化流程和效率, 讓整個產品體驗達到相對穩定的狀態。

          搭建范圍:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」



          三、如何「定義」交互規范


          3.1 定義交互規范的原則


          與行業通用的設計規范(如TDesign、AntDesign,文末領取騰訊設計系統源文件)“大而全”“通用”的特質不同,一般團隊內構建的設計規范都是源于某一個產品或業務,主要的特點是“專精”。專注于「業務」本身,主要是「團隊內成員使用」,追求的是投入產出比最大化。


          基于此背景,當我們在定義「交互規范」時,有三點原則:


          原則一:保持規范的業務性。設計規范既要貼合業務場景歸納完整,同時又要避免憑空定義脫離實際。故我們定義時要代入業務規劃,盡量富有前瞻性,這樣定義的規范不僅能覆蓋當前需要,同時后續也能更好地迭代。


          原則二:保持規范的專注性。有的放矢,明確內容優先級,避免盲目追求大而全和形式主義。對于優先級高(覆蓋面廣、復用率高)的關鍵內容重點描述;優先級低(邏輯簡單、認知一致)的內容可簡要描述,避免事無巨細降低效率。


          原則三:保持規范的生長性。設計規范不是一成不變,而是跟隨業務發展不斷迭代完善的,所以需要階段性的回顧規范。遇到規范未能覆蓋或無法指導設計的地方,及時修訂同步團隊,避免墨守成規,固步自封。



          最后,還有一點建議:在定義規范時,可以站在前人肩膀,適度參考行業設計規范,能復用用的直接參考,具有業務特性的再集合業務綜合考慮,使整個規范制定效率更高,科學性、指導性更強。


          在找到自己當前所屬的產品階段、明確要建立哪些設計規范后,具體應該如何進行落地執行呢?建議從以下4個步驟入手。



          3.2 第一步:定義規范分類


          如上文中提到,一個完整的交互規范分為:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」五個維度,但每個維度具體含有哪些內容,都是不一樣的。仍然需要根據實際業務需要去定義,這樣才能盡量保證沒有遺漏,也更好為下一環節評估工作量。


          通用的做法有兩種:


          方式一:整理業務場景下不同的頁面、流程等,并進行抽象合并?!溉衷瓌t」「頁面框架」和「通用流程」具有強業務導向,可以采用此方式。

          以「頁面布局」為例,就需要將關鍵頁面按統一顆粒度收集(按層級或按場景等)。



          方式二:參考行業通用規范的定義,先羅列完整,再根據產品實際業務需要進行增刪改。

          「標準組件」「文案規范」已經在行業內有了不少科學的目錄和沉淀,可以采用此方式,例如下圖組件的梳理。



          最后可產出如下圖的規范分類和具體內容。(可以列的不是很全,后續補充具體部分內容時持續維護這張表。)



          3.3 第二步:確定分工排期


          有了具體內容作為依據,便可以根據此進行排期分工。


          分工原則:推薦按規范分類進行分工,一個大的分類由一人負責,保證專注性。同時團隊交互最好都能參與,保證后續對規范更好的沿用。

          排期原則:「定義規范」和「輸出需求」兩者經常要并行處理,此時提高效率,控制投入產出比就很重要了,我們需要明確優先級,先做什么后做什么。有3個思路可以綜合參考:


          - 并行的思路:在定義完「全局原則」后,剩下的頁面、流程、組件、文案都可考慮并行定義,彼此之間沒有明確的依賴項。

          - 迭代的思路:近期有迭代的版本,如:即將改版的模塊、反饋較多體驗較差的模塊,其中涉及到的頁面框架、組件可優先定義。

          - 復用的思路:某些典型頁面、典型流程、典型組件涉及面廣,許多需求的設計都將借鑒參考,亦可優先抽象定義。



          3.4 第三步:統一撰寫原則


          設計規范是由不同的設計師一起合作完成,所以我們盡量在一開始,就需要統一規范的撰寫和展現形式。以此提高后續合并的效率,同時又能保證其閱讀體驗,讓其它使用者能夠更好遵循。對此,我們定義了幾個關鍵原則:


          目錄完整:高效檢索,快速讓使用者找到需要的內容。

          原則清晰:抽象的內容往往含有許多概念和原則,需要讓使用者先理解再參考,才能保證后續使用正確、舉一反三

          多圖少字:沒有人喜歡看字,圖片更容易吸收

          搭配案例:讓使用者更好的代入場景,理解和使用規范。



          3.5 第四步:定義具體規范 ★


          前面鋪墊了許多流程性的內容,就像我們日常輸出設計需求一樣,大家或多或少在工作中都有遇到過。接下來,將重點聊聊,我們具體的內容應該如何定義。依然分成5個環節一一講解。


          3.5.1 全局原則

          目標:明確影響整站各個模塊、各個頁面設計的原則和規范,指導我們后續各種規范的定義和設計。


          而全局原則也分兩種,設計原則和業務原則兩種。


          設計原則:每個完整的設計規范都需要包含的內容,如:設計價值觀、設計準則??此葡鄬仗摰臇|西,實則影響后續整個設計方向。這個部分需要和產品經理、視覺同學結合產品的定位和發展共同提煉。具體定義方式可參考:

          《你為什么需要設計原則?》

          https://zhuanlan.zhihu.com/p/246430795


          業務原則:源自實際業務本身產生的問題,行業內沒有標準定義。需要具體問題具體分析,推導出具體目標,最后再統一制定規范解決業務問題。

          舉一個實際的例子便于理解:全局Z軸定義


          1)明確問題:整站層級高度沒有統一定義,導致不同控件間相互遮擋,沒有統一規則。需要定義全局Z軸規范,統一不同場景、頁面、組件的高度。



          2)梳理借鑒:統一梳理相關場景、頁面、組件,明確需要定義的范圍。再查找行業規范,有無參考借鑒。(如Z軸定義,可參考Material Design)



          3)定義規范:最后通過最具代表性的場景進行展示



          全局原則沒有維度高低之分,例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業交互規范內龐大且抽象的原則。只要能夠實際解決你業務的需要,能夠覆蓋整站各個部分,都可以納為全局原則。


          3.5.2 頁面框架

          目標:梳理整站所有關鍵頁面,整理抽象成相對固定的 框架布局&功能分區 讓后續設計新頁面時能遵循規律、找到參考。


          頁面框架的搭建一般由四個步驟組成:

          第一步,收集頁面:根據早期定義的規范分類,收集展示所有相同層級的頁面。這些在定義規范分類時,應該已收集完成。

          第二步,框架布局:提取共性,搭建框架和布局,明確頁面大的區域劃分和結構。(TDesign布局詳細指南,文末領取騰訊設計系統源文件)



          第三步,功能分區:基于框架布局,細化區域內具體的業務功能屬性,如:導航區、操作區等。這部分是頁面框架內最接地氣最具指導性的內容,同時也是最難定義的。主要原因如下:


          - 定義太細,擔心缺乏前瞻性限制后續設計:定義越細靈活度就低,后續改動和限制性就越高。為避免這種問題,推薦在定義關鍵頁面時,按輸出設計稿的思路:整理「信息架構」→定義「功能分區」,這樣后續拓展性和前瞻性更高



          - 定義太粗,無法定義出明確的功能分區,擔心缺乏實際指導意義:同一區域有些頁面展示操作,有些展示導航。從規范角度好像不應該,但實際套在各個業務內卻又合理。當遇到這種無法達成一致的情況時,建議就不定義具體的“功能分區”,避免因為盲目追求統一而限制實際設計。


          而可以采用“窮舉舉例”的方式,將該布局下可承載的內容均展示出來,既可以起到參考意義,又能供后續沿用達到統一的效果。



          第四步,加入案例:將剛剛定義的布局框架與功能分區,與實際案例完整結合,便于后續理解和沿用。



          3.5.3 通用流程

          目標:梳理整站所有流程,對那些可復用的流程進行整理、抽象、封裝。讓后續設計師和研發能夠直接沿用。


          “可復用的流程”是指:在多個場景下,不改變其原有業務邏輯的情況下能夠“既插既用”。例如:登錄注冊流程、掃碼關注流程、分享流程等等。往往一個通用流程中,不同的步驟亦可以打散,重新拼裝成不同的流程,以適配具體的場景使用。


          下面就舉一個具體的例子:注冊流程。一般完整的注冊流程如下,通過不同的入口觸發后進入,通過一定步驟后注冊成功。



          當業務有了進一步需求,需要通過插件快捷登錄時,步驟便可以重新組合,再適配具體的場景。



          對于設計師要做的,就是識別具體的通用流程有哪些,并將其給「步驟化」串聯起來。當有新的需求來的時候,判斷能直接復用,還是需要重新組裝,亦或是新增步驟。

          而這樣拼裝的思維,恰好對應了研發搭建流程時的思路。通用流程對于他們就是將不同的步驟進行組合起來。當遇到不同場景時,再以搭積木的方式進行拼裝。


          而具體的搭建步驟也是由兩個步驟組成:1.第一步,收集流程;2.第二步,抽象步驟。具體方式上面已提到,就不過多贅述。


          3.5.4 標準組件

          目標:將產品內使用過的組件整理成“標準組件”,統一定義規則,讓后續設計和研發時能直接調取組件,提高設計和研發效率。


          其實行業中已經有很多通用組件,可以快速調用。但由于不同業務的復雜度不一樣,也會生成自己獨特的業務定制組件。同時,產品持續在迭代,也很難能抽出時間單獨定義組件。故基于這個背景,結合“需求設計流程”和“組件整理流程”,有兩種高效定義標準組件的方式。


          方式一:調用行業通用組件


          第一步,業務設計確定基本邏輯。

          第二步,挑選行業通用組件,增加業務規則。(一般開發在搭建產品初期時,便會選擇一家行業組件進行使用,而組件也僅能在這家提供的組件中挑選)

          第三步,視覺根據全局視覺原則,設計新的樣式。

          第四步,將交互規則、視覺樣式合并,統一成標準組件?;A規則直接引用行業組件已定義的內容,場景規則按需補充。




          方式二:業務定制組件


          第一步,進行正常的業務設計。交互根據需求搭建原型,視覺設計具體樣式。

          第二步,判斷組件是否通用,是否可復用到其它場景。例如:分享對話框,不同的內容分享都能夠用得到,像這種就是可抽象成標準組件的典型案例。

          第三步,定義標準組件規范。簡單的組件展示具體樣式即可,團隊內設計師基本認知一致,無需重新學習。而復雜的組件為保證后續的正確復用,建議包括以下內容:


          - 更新日志:因為組件是變動最多的規范,需要明確具體的版本和改動點

          - 組件定義:簡要介紹用途和使用規則,如對話框定義:必須是用戶主動觸發時才出現、主要使用在二次確認場景需用戶確認后才消失等。

          - 組件結構:介紹組件構成、功能分區、分區定義,詳細展示不同分區內具體信息和對應規則。 



          - 使用場景:詳細區分多種場景下不同的使用方式,明確給予使用指導



          - 設計方案:備選,如果比較復雜的組件且涉及到流程中的關鍵環節,建議可以考慮復制一個完整的設計方案嵌入其中,便于團隊成員理解沿用。


          第四步,跟研發溝通,封裝成標準組件。這一步是非常關鍵也是重要的一步,這將大大提高我們后續的組件復用率,降低重復性走查的耗時。推薦使用CoDesign-設計規范功能,上傳「組件庫」后能夠按目錄自動生成規范文檔,同時將自動標注和切圖,大大提高研發開發標準組件的效率。



          3.5.5 文案規范

          目標:將產品內各個場景內文案進行整理,幫助業務更準確表達意圖,讓設計師更好沿用,同時讓用戶感受到一致的產品風格。


          文案就像“產品對用戶說的話”,不同的人說話方式可能并不一樣,沒有絕對的對錯。但清晰明了的語言表述,讓用戶更容易理解;符合產品氣質的語氣,能拉近產品與用戶的距離;統一的文案描述,又能讓用戶在整站一致的語境下體驗產品。


          需要定義的內容,包括但不限于以下3個部分:


          1.語言:語言是指我們通過什么樣的規則來組合文字,讓它形成一種慣用的表達方式。例如語句簡潔明了,不過度修飾,避免重復描述,使用簡潔清晰的語序,幫助用戶快速理解;例如用詞精準易懂,使用簡單、易于用戶理解的詞匯,避免使用專業術語,或過于口語化的表述。


          單純說規則可能太虛了,在實際定義規范時,還要如下圖所示,加上實際案例示意避免誤解。



          2.語氣:語氣是可以體現產品氣質和風格,定義時要結合全局原則內的設計價值觀,明確產品性格后才能更好的定義出符合產品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網絡異常時:


          ? 俏皮的文案可能是:網絡開小差,請稍等一下

          ? 而正經的文案可能是:網絡異常,稍后重試。



          3.書寫規則:主要包括常用詞匯的書寫方式,例如「日期簡寫方式」「英文大小寫方式」「使用全角標點符號」等。以及易錯的詞匯短語示意,例如「賬號還是帳號」、「登陸還是登錄」等。這是團隊設計師最容易沿用遵循的,也是接地氣的部分。



          4.具體使用指南:以上「語言」「語氣」「書寫規則」3個部分,是構成全局文案的基礎規范。如果有充足時間的團隊,可以考慮再結合實際業務,分別定義不同場景和組件下具體的使用指南。如下圖:



          最后再附上各個行業內定義文案規范例子,供大家參考:

          B端產品文案指南:

          https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw

          AntDesign 文案規范:

          https://ant.design/docs/spec/copywriting-cn

          Clarity Design 文案規范:

          https://design.teambition.com/doc/introduction

          國家標點符號用法:

          http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf



          四、如何「推進」交互規范


          定義完交互規范,后續將考慮如何將其順利的推進落地。本文羅列幾個推進時重點需要注意的事項。


          4.1 團隊評審,達成一致


          規范的定義不是一個人的事情,而是一個團隊事情,它將關系到每個后續每個人的設計產出。所以在制定規范期間,應該定期在團隊中進行設計評審。這不僅是評審設計好壞的過程,更是讓團隊達成一致、大家更深入了解如何使用規范的過程。


          注意,參與評審的人不止是設計師,當然也包括具體的業務開發,很多時候我們會得到新的思路和啟發。


          4.2 善用工具,沉淀規范


          規范搭建的過程中,有很多痛點:組件庫需要多人參與維護和創建,容易造成沖突內容丟失;同時沉淀規范文檔時,需要圖片逐一復制、粘貼到文檔內,更新時又要重復一遍這樣的操作。而這些問題,使用CoDesign設計規范功能,就可以有效的解決提高效率。


          首先組件庫支持多人同時維護,差量更新;其次組件庫上傳后,可以自動生成/更新規范文檔,避免反復編寫文檔,整體提效;最后當組件庫有新版本時,會自動提醒團隊內其他成員進行更新,保障團隊設計一致性。



          規范的過程其實也是整體設計走查的過程,我們會發現有些設計可能有體驗問題,或不符合規范。每當這個時候,我們就需要對這些設計進行標記。在規范定義完成之后,迭代排期優化線上的設計。


          而在實際設計使用過程中,可能又會發現規范無法滿足的地方,此時又可以展開新一輪的提煉和總結,再反哺規范,形成正向循環促使設計和規范不斷完善。



          五、寫在最后


          在前言的時候就有提到「交互規范」只是整體規范中的一部分,最終是需要與視覺合并成一份統一的設計規范,指導后續具體的設計。具體的合并方式,在定義的章節內已有提到,就不再贅述。


          最后,我一直認為好的設計規范是提高設計效率,引導設計方向,而不是因為設計規范而局限了具體業務的設計,如果這樣,還不如不去定義。

          文章來源:站酷      作者:大魔V

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

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

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

          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確。例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量啊!如果和視頻播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王?;疑珓t表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通??梢酝ㄟ^一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。


          文章來源:站酷      作者:應駿

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

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

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


          UX可發現性咋提升?這12條技巧

          純純

          用戶找不到=不存在 


          在數字界面中,可發現性定義了用戶在產品中查找新內容或功能的難易程度。在許多情況下,良好的可發現性至關重要,因為用戶找到所需內容的能力將直接影響其完成特定任務的能力。


          在本文中,我們將討論可發現性的概念和其重要性所在,以及設計可發現性的詳細技巧。


          為什么為設計可發現性這么困難?

          UX中的Findability和Discoverability這兩個術語經常互換使用。雖然二者相關,但它們不是一回事,關鍵區別在于用戶對內容的看法。Findability是指用戶已經知道或認為存在于產品中的內容或功能的能力。而Discoverability是用戶遇到新內容或以前不知道的內容或功能的能力。


          這種差別使我們更容易理解——為什么設計高度可發現的界面如此困難。在許多情況下,用戶并不是有意識地尋找新內容。人們只想簡答地使用產品,如果沒有遇到新功能或新內容,用戶壓根兒不會想到去尋找它們,因為一開始就不知道它們是作為產品的一部分存在的。注重可發現性是UX設計師解決此問題的途徑,好讓用戶更容易發現這些新功能。


          12個提升UX可發現性的技巧

          許多因素都會影響用戶界面的可發現性。以下是12個技巧,幾乎適用于所有想要提升可發現性的產品。


          技巧1:設計熟悉的界面

          許多設計師喜歡試驗和嘗試新方法,但在嘗試創建新內容時,往往適得其反,使用戶更難以理解頁面。


          依據設計常識創建界面,這是設計師的責任。使用現有的設計規范(例如,操作系統的設計范例),結合用戶需求建立可發現性,更容易獲得用戶的認可。因為人們通過自身經驗去感受一個新事物時,是非常容易理解其內在邏輯的。例如,許多網站將導航菜單放置在頁面頂部,緊鄰網站的Logo,也是大多數用戶不假思索就能找到的位置。


          技巧2:優先安排有價值的內容和功能

          當我們在UI中隱藏某些內容時,會加大用戶找不到它的風險。移動應用和網站之所以放棄漢堡菜單,轉而使用標簽欄的原因就是UX的可發現性。雖然漢堡菜單通過隱藏導航選項來節省屏幕空間,有句說話說的好“眼不見,心不煩”,隱藏的選項也更容易被忘記。


          良好的可見性可以帶來更多的曝光率——元素越明顯可見,用戶就越有可能記住它。可見導航就如一個標簽欄,告訴用戶他們有哪些選項,并使其成為首要考慮因素。


          技巧3:按邏輯順序對內容和功能元素分組

          具有密切關系的項目應被組織在一起,該規則適用于內容(例如,電子商務網站上定義產品類別的信息架構)和功能(例如,Instagram上的濾鏡)。通過在結構中引入邏輯順序,可以使用戶更輕松快捷地找到他們想要的東西(在開始UI工作之前,進行Tree testing以了解用戶的心理模型至關重要,它能幫助你根據用戶需求搭建內容)。


          技巧4:減少視覺上的混亂

          UI設計里的一個常見誤區,為了使對象更容易被發現,它應該一直可見。假設按剛剛說的去設計,把所有可用對象都堆在頁面里,反而更混亂。


          視覺混亂通常是出現了不必要的功能和裝飾元素,它們阻止用戶與產品交互。這種混亂不僅放慢了使用速度,還讓基本功變得難易被發現。

          Microsoft Word中,太多可見選項造成視覺混亂 by Amansinghblog


          即使頁面/屏幕有非常良好的視覺層次結構,但人們的注意力跨度有限,人腦通過眼睛感知事物的能力也有限。因此,確定對象的優先級非常重要。刪除所有不必要的元素,為剩余元素增加視覺權重,才能讓真正重要的內容和功能脫穎而出。


          技巧5:減少選項總數

          ??硕芍赋?,用戶做出的決定越多,決策過程所需的時間就越長,限制 or 提供大量選擇?設計師要掌握平衡。看準時機提供選項,不僅簡化決策過程,還能為用戶提供發現、探索和嘗試所有可用選項的空間(和信心)。


          技巧6:提供視覺反饋

          視覺反饋是指用戶在執行任何交互時獲得的可見響應。例如,當我們將鼠標懸停在網站鏈接上時,我們會看到一個視覺響應——鏈接改變了顏色。這種微小的視覺變化非常重要,因為它可以增強用戶體驗,消除不確定性。用戶知道某些元素是可以交互的,以及下一步該怎么做,從而采取行動。


          技巧7:使用常見熟悉的圖標

          交互元素使用不常見的圖標是導致問題的“罪魁禍首”。當用戶看到未知圖標時,他們無法預測點擊該圖標會發生什么。這種猜測對產品團隊來說成本很高,因為在許多情況下,用戶會跳過該選項。


          怎么才能知道圖標是否令人困惑?測試一下,向實際或潛在用戶詢問涉及元素的作用,如果他們給不出明確答案,那就用一個更常見的圖標替換。


          技巧8:使用動畫吸引用戶的注意力

          人眼會自然地聚焦在移動的物體上,微妙的動畫可以引導用戶轉向某些特定的內容或功能,動畫還可以解釋如何與對象交互。


          技巧9:注意手勢交互

          手勢是隱藏的交互控件,它們可能導致很多可發現性問題。除非用戶知道某些手勢,否則他們不會嘗試。產品中使用普遍接受的手勢交互,別試圖加入太新奇的交互形式??紤]到手勢對于許多用戶來說仍然是一個相對較新的概念,因此在新設備上很有必要進行入門介紹。

          非常規手勢(例如雙擊點贊)可能會對可發現性產生負面影響,用戶可能注意不到這些手勢在應用程序里是被支持的 by Dribbble


          技巧10:適當調整UI元素的大小

          設計師為什么要對標題和常規文本使用不同的視覺樣式,這是有原因的——想讓用戶更容易注意到文本內容。同樣的策略也適用于UI設計,通過對比不同大小的元素,將用戶注意力吸引到關鍵信息上。例如,著陸頁上的一個超大的號召性按鈕,清楚地告訴用戶當他們點擊該按鈕時,下一個動作應該是什么,以及會發生的是什么(大型UI元素在可用性方面也很有益,因為它們更容易在移動設備上使用)。

          號召性按鈕越大且越突出,你期望用戶執行的操作也越明顯 by Firefox


          技巧11:提供視覺可供性

          有時候即便用戶發現了一個對象,他們也可能不知道如何使用??晒┬杂脕碇笇г厝绾螒?,沒有可供性的話,用戶只能靠猜測使用產品/對象(很可能不會使用)。在數字界面中,設計師應把形狀和產生的交互進行具象聯系,例如,當我們看到帶有“提交”標簽的矩形對象時,我們就知道這是一個按鈕。


          技巧12:提供視覺線索

          視覺線索是引導用戶轉向特定的內容或功能的UI元素,一個典型示例是滾動網站上的動畫箭頭,該箭頭會引導用戶朝特定的方向前進。

          注意到圖像系列最右端的箭頭嗎?該視覺線索提示訪問者,水平畫廊是可滾動的 by Netflix


          文章來源:UX辭典(站酷)

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

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

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

          UI組件要點「狙擊」:按鈕設計的這些坑別再踩啦!

          純純

          按鈕設計


          為了設計正確的交互,我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身,當今的數字產品都還在大量使用它們。按鈕很棒,即使用戶不了解基本的機制或算法,只用手指觸摸就可以讓電器、汽車或系統運行/關閉。在《Power Button》中,作者Rachel Plotnick描述了當今按鈕文化的起源,并解釋了按鈕是如何成為數字命令方式的。


          “你按下按鈕,剩下的我們來做?!?——柯達相機的醒目標語吸引了潛在消費者。


          即使在今天,這也是吸引用戶的地方——通過簡單觸摸就能讓事情發生的即時滿足感。盡管有大量新的家用電器和設備都變成了觸摸屏,但物理按鈕并不會消失,因為它們讓人形成的行為習慣,會影響按鈕設計的直觀性和易用性,是一種永遠存在的實物參考。


          01 按鈕 vs 鏈接

          按鈕向用戶傳遞了操作的可執行性,在整個UI里很常見,例如:對話框、表單和工具欄等。按鈕和鏈接之間的區別,請注意:

          -鏈接是導航到另一個地方時應用的,例如:“查看全部”頁面、“ Roger Wright”個人簡介等;

          -按鈕是在執行動作時應用的,例如:“提交”、“合并”、“創建”、“上傳”等。



          02 讓用戶直觀感受按鈕狀態

          為按鈕創建正確的交互和樣式,是按鈕設計過程中重要的組成部分之一。在不改變組件或產生視覺干擾的前提下,每個按鈕的狀態都必須有明確定義,以使其與周圍布局區別開來。



          正常—表示該組件已啟用交互;

          突出提示—用戶使用鍵盤,進入編輯狀態;

          鼠標懸停—當用戶將鼠標置于交互式元素上方時;

          點擊—按下狀態表示用戶已輕點按鈕;

          進度/加載—用戶操作行為沒有立即執行,表示正在完成操作中;

          禁用—表示該組件當前處于非交互狀態,但將來可以啟用。


          03 按鈕的顏色、形狀和大小

          常見的是圓角矩形按鈕,這些按鈕即使在輸入框旁,用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應用準則。以下是一些最受歡迎的樣式變化:



          04 建立按鈕樣式等級

          樣式主要用于區分重要和不重要的動作。創建動作層次結構,該層次結構將指導用戶進行多種選擇。通常,可以有一個突出的按鈕(該樣式通常稱為“首要”按鈕),剩下的按鈕則依據重要程度建立不同的樣式等級。



          05 《Don’t Make Me Think》

          這是可用性工程師Steve Krug撰寫的書籍標題,其中講到了一點:對用戶而言,界面清晰明了非常重要,不要給用戶制造難題。人們周圍其實已經被電子產品包圍了,多年使用各種設備、軟件的經驗,一定程度上固化了人們對按鈕外觀和功能的認知。如果與常見的“標準”存在較大偏差,也會給用戶造成困惑。



          避免對交互式和非交互式元素使用相同的顏色,否則用戶不知道該點擊哪里。


          06 一致性的重要性

          “一致性是最強大的可用性原則之一:當事物始終表現相同時,用戶不必擔心會發生什么?!?—雅各布·尼爾森(Jakob Nielsen)


          一致性提升了速度性和準確性,有助于避免錯誤。創建可預測性,幫助用戶控制和實現產品中的目標。當創建主要、次要和第三種樣式時,試著找找一致元素,如顏色、形狀等。按鈕設計不僅要在設計系統內部保持一致,在整體平臺也要進行統一。



          07 使按鈕足夠大以實現可靠交互

          按下按鈕應該是一個簡單的操作任務,如果用戶無法正常進行,或在過程中錯誤地按到了相鄰元素,不但給用戶造成了負面體驗又浪費了時間。


          對于大多數平臺,請考慮被觸摸的目標至少為48x48dp。無論屏幕大小,這種尺寸的觸摸目標的物理尺寸應為9mm,觸摸屏元件的目標尺寸至少是7-10mm。



          對于圖標按鈕來說,請確保觸摸目標超出元素的可視范圍。這不僅適用于移動設備、平板電腦,同時也適用于網絡上的指示設備,比如鼠標。


          08 無障礙設計

          所有組件都應推行無障礙設計。目標區域的大小是影響可訪問性的因素之一,其他的則是字體大小、顏色和對比度,也有很多工具能檢查組件的設計性能。



          設計師應與開發團隊緊密合作,確保按鈕與屏幕閱讀器協同工作。添加role =“ button”將使一個元素作為按鈕控件出現在屏幕閱讀器上。


          09 手勢應用

          手勢應用,讓用戶可以通過觸摸與應用程序進行交互。使用觸摸來完成任務,不僅提供了觸覺控制還非常節約時間。某些手勢(比如滑動以觸發上下文動作、雙擊或長按來標記喜歡等)每天都被人們廣泛使用,但對于普通用戶而言,它們仍然不太明顯,建議把它們替換給高級用戶執行操作。



          10 按鈕標簽信息易于理解

          按鈕傳達的信息與其外觀一樣重要,錯誤的信息會讓用戶感到困惑,甚至是誤導用戶操作。正確的按鈕標簽會引導用戶完成操作,最好使用動詞,并在按鈕上標記其實際功能。


          就像按鈕在問用戶——“您要(添加到購物籃中)嗎?” 或“您要(確認訂單)嗎?”,避免使用Yes/No或過于通用的標簽,比如Submit。



          11 確定/取消,還是取消/確定?

          兩者都是正確選擇,但設計師可能會花幾個小時來討論哪個更合適。

          -確定按鈕在前,是自然流暢的閱讀順序。Windows把確定按鈕放在了前面;

          -確定按鈕在后,可以幫助改善流程。這種順序形式,幫助用戶再采取行動前,對所有選項評估,有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的;

          任何一種選擇其實都沒有錯,也不會造成什么可用性災難。



          12 避免使用禁用按鈕

          每個人都遇到過這種情況:在屏幕上停留了幾秒或幾分鐘,怎么操作都沒反應,這才發現原來是禁用按鈕使我們無法進行下一步。禁用控件讓組件短暫處于非交互狀態,但如果使用不當,則非常容易讓用戶產生負面情緒。



          我建議盡量避免禁用按鈕,最好始終啟用它,如果用戶未提供某些必需信息,則只需突出顯示空白字段或顯示通知可。


          文章來源:UX辭典(站酷)

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

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

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



          交互設計知識總結

          博博

          不懂交互的UI,不是好美工。
          本文約一萬字,考驗耐心的時候到了。

          一、什么是交互設計?

          先來看一下百度百科的定義

          交互設計(英文Interaction Design, 縮寫IXD),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析,關注以人為本的用戶需求。簡而言之,交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。


          為什么要做交互設計

          在使用網站,軟件,消費產品或各種服務的時候(實際上是在同它們交互),使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展,各種新產品和交互方式越來越多,人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候,可能為當初的使用者本身就是該行業的專家,沒有人去關注使用者的感覺;相反,一切都圍繞機器的需要來組織,程序員通過打孔卡片來輸入機器語言,輸出結果也是機器語言,那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候,對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。


          從用戶角度來說,交互設計是一種如何讓產品易用,有效而讓人愉悅的技術,它致力于了解目標用戶和他們的期望,了解用戶在同產品交互時彼此的行為,了解“人”本身的心理和行為特點,同時,還包括了解各種有效的交互方式,并對它們進行增強和擴充。

          通過對產品的界面和行為進行交互設計,讓產品和它的使用者之間建立一種有機關系,從而可以有效達到使用者的目標,這就是交互設計的目的。


          二、交互設計常用原則和定律有哪些?


          尼爾森十大可用性原則


          1、狀態可見原則

          系統應該讓用戶時刻清楚當前發生了什么事情,也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解,一般的方法是在合適的時間給用戶適當的反饋,防止用戶使用出現錯誤。

          即在用戶操作界面功能時給予實時反饋,例如:頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。

          2、環境貼切原則

          設計的一切表現和表述,盡可能貼近用戶所在的環境,將現實環境的操作功能巧妙的轉化為線上功能,使其貼近用戶。使用用戶能聽懂的專業術語,涉及到專業化語言時要轉化成用戶熟悉的語言。

          即模擬真實的事物,使用戶更容易理解。例如:天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品,降低理解成本。

          3、操作可控原則

          對于用戶的誤操作,提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。

          例如:刪除聯系人二次確認提示、消息可撤回操作。

          4、一致性原則

          遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。

          一致性包含視覺交互、文案描述、組建樣式等,例如:微信小程序設計規范。

          5、防錯原則

          設置防錯的機制,減少用戶犯錯。在用戶選擇動作發生之前,就要防止用戶容易混淆或者錯誤的選擇。

          例如:用戶名稱校驗提示、手機號碼位數限制等。

          6、易取原則

          減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。

          例如:驗證碼讀取、找人轉賬提示等。

          7、靈活高效原則

          提供靈活的操作和高效的獲取信息能力。

          例如:手機號碼一鍵登錄、消息關鍵字識別等。

          8、優美簡約原則

          保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀。

          9、容錯原則

          用戶在使用產品過程中出現了問題,及時準確的告知用戶出現問題的原因。

          例如:信息輸入提示、搜索無結果等。

          10、提供人性化幫助

          在用戶需要的時候提供必要的幫助說明。

          例如:新功能引導、解釋說明文案等。



          七個交互設計定律


          1、菲茲定律

          點擊一個目標的時間同以下兩個因素有關:

          (1)設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;

          (2)目標的大?。⊿)。目標越大,所用時間越短。

          該定律經常運用于鼠標從點A到點B的運動。

          例如常用按鈕的尺寸設計等。

          2、??硕?

          一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。

          交互設計中要合理設置選項,以免用戶使用中決策時間過長,降低使用效率。

          3、米勒7±2定律

          喬治米勒對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。

          例如:手機號碼的分位顯示、應用中標簽欄數量等

          4、鄰近性法則

          人們通常將距離近的事物劃分為一組。

          界面設計中可以用對象間的相對距離來區分信息層級。

          5、復雜性守恒定律

          每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節,這一固有的復雜度都無法依照我們的意愿去除,只能設法調整、平衡。

          例如:在智能手機出現之前,手機上的操作按鈕都是實體按鈕。在智能手機出現手,手機被整個屏幕占據后,所有的操作都集合在了手機系統之中,等于把物理操作轉移到了系統操作中,其本身的功能復雜程度并沒有發生改變,只是轉移了而已。


          6、防錯原則

          大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

          例如:登錄時用戶名校驗,手機號碼位數限制等。

          7、奧卡姆剃刀原則

          “切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情。

          ”這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。

          在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物,從而提升使用效率。




          三、交互設計如何開展工作


          首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖,而是要先分析需求,了解產品的戰略層和范圍層的業務目標。把握產品設計大方向,只有方向對了后面的工作才是有價值的。

          把握了產品方向,下面就該進行需求的分析,

          首先針對需求考慮5個問題:

          1、為什么要做這個功能?(業務需求)

          2、產品期望得到怎樣的成果?(業務目標)

          3、誰來使用?(目標用戶)

          4、他們要怎樣使用?(用戶需求)

          5、如何讓他們都來使用?(將業務目標轉化為用戶行為)

          清楚這5個問題后,再根據交互設計流程進行一步一步的進行

          這實際上就是對需求的戰略層分析。

          我們進一步分析業務需求(業務目的、業務目標)和用戶需求(目標用戶、用戶體驗目標),把握關鍵因素(用戶的動機、擔憂和影響目標達成的障礙)。

          歸納這些需求,明確設計策略。


          將“業務目標”轉化為“用戶行為”,通過引導用戶的使用來幫助產品實現目標。

          從設計“用戶行為”到設計“用戶界面”,用戶行為決定了用戶界面,用戶界面也導致了用戶會出現什么樣的行為。

          設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。



          四、如何進行用戶研究,方法有哪些


          評估的形式及方法


          常見的評估形式分為三類:

          1、評估主體:根據評估的主體不同來進行區分,即誰來做評估。

          按照評估主體來區分主要有兩個主體:用戶和專家

          用戶評估主要靠收集用戶使用數據,也就是用戶測試,它的數據相對客觀,但時間和費用較多,評估范圍較窄。

          專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀,但費時少、費用少、評估范圍窄。

          兩種評估方法可以相互補充,并結合使用。


          2、評估性質:例如定性評估、定量評估或著其它方式。

          按照評估的性質來區分可以分為定量評估和定性評估。

          定量評估是指對可以計量的部分進行評價,如點擊量、使用率等,可以用數據來說明。

          定性評估是指對非計量性的部分進行評價,如流暢度、舒適性、創造性等進行評價。它只能表示一個度,無法準確用數據來說明問題。


          3、評估過程:按照評估的過程來進行區分。

          從評估的過程來區分可以分為理性評估和感性評估。

          理性評估相對客觀,從客觀的角度出發判斷客觀事物。

          感性評估更為主觀,評估結果并沒有客觀規律。

          在實際應用中也需要將理性評估和感性評估結合使用,才能完整的完成我們的任務,達到我們的目標。


          常見的評估方法有四種:

          1、原型評估方法:在產品研發過程中,對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法,原型方法的目的是將界面設計與用戶的需求進行匹配。

          一般來說原型評估方法分為三大類型:

          (1)快速原型:原型迅速成型并分配實施,在原型實驗收集的信息基礎上,系統從草案中得以完善。

          (2)增量原型:應用與大型系統,從系統的基本骨架開始,需要階段性的安裝,及系統的本質特征是在初次安裝完成后允許階段性測試,以減少遺漏的重要特征。

          (3)演化原型:對前期的設計原型不斷進行補充和優化,直到成為最后的系統。


          2、簡易測試評估方法

          在條件不允許的情況下,可以采取簡易的方法來對用戶體驗進行評價。步驟是:

          (1)實驗室環境準備:準備好測試用的電腦或其他媒介。兩個房間,房間1用來對被測試者進行測試,房間2用于設計師和工程師的觀察。

          (2)被試選擇:分為用戶組和專家組。

          (3)進行測試:房間1中被試者根據自己的選擇進行操作和測試,同時說出自己的內心想法,觀察員在調查表上記錄被試者的每一次的操作情況,包括出錯情況和被試者的口語描述,當被試者在測試過程中遇到困難或操作無法進行時,觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2,設計師和工程師實時觀察和記錄被試者的情況,以便今后對產品做進一步的修改和完善。

          (4)結果分析:通過多次測試后,將測試結果匯總,提取出交互設計中存在的問題,以及對交互設計有益的建議形成測試報告。


          3、眼動評估方法

          眼動追蹤可以用來評價對產品(包括硬件產品和軟件產品)設計的感性意象,評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區??梢越Y合口語分析法了解用戶的所想 和所做。


          4、腦電評估方法

          通過對腦電信號的分析,研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛,被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷,例如空間分辨率上的局限性,因而對某些認知過程和腦區的定位并不是很準確。第二,在許多相似的實驗研究中,由于研究者采用了不同的實驗材料和方法等,實驗結果也存在差異性。第三 ,由于采集記錄時間的滯后性,腦電所記錄的并不一定是當下被試者所想到的內容。


          采取哪種方法來開展用戶測試和評估,要根據不同的任務結合不同的環境來開展,比如:時間、成本、資源等。



          啟發式評估法

          是專家評估法的一種,也被稱為經驗性評估,最初由Nielsen博士提出。簡單來說,啟發式評估是一種簡易的可用性評估方法,使用一套相對簡單、通用、有啟發性的可用性原則,讓幾個評審根據專業知識和經驗來進行評估,發現產品潛在的可用性問題。


          啟發式評估的兩大要素:評估者和評估參照的原則。   


          對評估者的要求主要有四個方面:

          (1)人數:推薦3-5人,有時會更少

          (2)知識:最好同時具有可用性知識及設計知識

          (3)身份:最好是非設計者本人,否者不具有客觀性

          (4)崗位:設計師或用戶研究員


          評估參照的原則有:尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇,常用的是尼爾森十大交互原則。


          什么時候適合使用啟發式評估法?

          交互設計和UI設計階段、測試優化和產品發布后的階段。


          啟發式評估的優缺點有哪些?

          優點:成本低、效率高、發現大多數可用性問題,甚至是用戶測試時不會出現的問題。

          缺點:不能代表真實用戶,相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。


          什么時候適用?

          (1)適合時間、資源有限的情況下快速發現可用性問題,降低風險及成本。

          (2)版本變動不大的情況下,小成本檢驗。

          (3)作為可用性測試的之前準備。


          啟發式評估流程是什么?

          (1)準備階段:確定范圍、背景調查、參考評估原則、評委邀約、材料準備

          (2)執行階段:任務走查、整體走查、結果記錄

          (3)分析階段:匯總討論、報告總結、優化方案



          可用性測試


          先來看一下我們在平時工作中常常會聽到這樣的問題

          產品經理:我們的用戶覺得產品好不好用?使用過程中會不會遇到問題?他們是否滿意?

          設計師:設計的過程有一些糾結的地方,不知道實際用戶是怎么理解和操作的怎么辦?

          產品開發后:想在大推前檢驗一下產品是否靠譜,適不適合大推?


          當我們遇到這樣的一些問題時,如何找到方法快速得到答案呢?

          那就是接下來要介紹的可用性測試方法。


          可用性測試是一種常用的、高效的方法。

          它的定義是:通過觀察具有代表性的用戶,完成產品的典型任務,從而找出產品可用性問題并解決,目的是為了改善產品,讓產品更容易使用。


          什么時候適合做可用性測試呢?

          一般是在:交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好,可以盡早發現問題并及時調整。


          類型分為兩種:形成式和總結式

          形成式特點:小樣本、發現問題為主、不能做定量對比。

          總結式特點:大樣本(30人以上)、定量的評估、可以做對比評估


          可用性測試可以解決什么樣的問題?

          1、發現問題,產品在體驗上是否存在問題

          2、檢驗實現,期望的設計目的有沒有達成,是否滿足了用戶的期望

          3、產品評估,用戶是否會滿意

          4、理解用戶,了解用戶行為習慣,了解用戶認知,找到某些問題的原因


          測試流程是什么?

          整體上分為4個階段:1、準備  2、測試  3、分析  4、優化


          1、準備階段要做的有哪些?


          確定目標:確定測試目標決定了后面測試過程要怎樣去設計

          常見的測試目標有:

          ·對整個產品做可用性評估

          ·對新增的功能模塊進行評估

          ·提前觀察新方案對新老用戶有怎樣的影響

          ·提前檢測改版是否達到預計目標

          ·設計時存在爭議,如何選擇解決方案

          ·某個環節流失率較高,檢測是否為設計原因導致

          ·需要拓展某一類特殊用戶,測試針對這類用戶在設計上是否需要作出調整


          準備測試方案

          方案中應當包含以下內容:

          ·測試目的:明確測試的目的及范圍,測試目的決定了測試方案

          ·測試關注點:與負責的設計師一起梳理測試中要關注的問題

          ·用戶招募:招募要求,樣本配比,招募渠道

          ·經費預算:獎勵的形式和額度

          ·時間計劃:用于把控時間計劃


          撰寫測試腳本:設計測試任務,通過用戶行為去觀察提問來獲得我們想要的內容

          基本的流程有:

          ·暖場:3min,簡單聊天,消除用戶的緊張情緒

          ·測試說明:2min,對測試內容規則做說明

          ·測試前訪談:10min,了解用戶基本信息

          ·簡單試用:3min,讓用戶熟悉產品

          ·測試執行:30-45min,提示任務并觀察

          ·事后訪談:15min,針對疑點問點追問,填寫評價表

          ·道別:5min,支付禮金,送用戶離開


          招募用戶

          招募什么樣的用戶呢?

          ·根據測試目的來定,找出與測試目標有關的篩選緯度

          ·特別考慮用戶使用行為相關的特征,例如競品使用經驗,使用產品的目的,用戶的活躍度等

          ·挑選最核心的緯度,轉化成用戶招募的條件,并盡量客觀化,具體化,可衡量

          ·避免設置交叉條件過多,導致樣本代表性降低

          ·學會辨別真假的用戶信息


          招募多少用戶合適?

          ·以發現問題為目的快速可用性測試,6-8名即可

          ·考慮產品的復雜性,覆蓋人群差異性,適當做調整,拓展到10-15名


          招募渠道有哪些?

          ·公司內部

          ·現有產品用戶庫

          ·公司其他產品用戶庫

          ·熟人,朋友等

          ·推廣渠道:官微、公眾號、門戶網等

          ·社區,論壇,qq群等

          ·第三方調研公司


          準備測試素材:低保真或高保真原型,或線上已經可以使用的產品,也可以準備一些量表工具來輔助測試。在測試

          過程中需要用到的電腦或手機設備,攝像頭,紙,筆,桌椅等。


          測試場地選擇:

          ·專業可用性測試實驗室:一般對測試質量要求較高,旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間,一個測試間,一個觀察間,中間有單向玻璃分隔。測試間中有多角度的攝像頭,用來記錄測試過程,觀察間可以同步看到測試間里的情況,

          ·普通測試環境:在觀察人數較少(小于3人),條件有限時使用。


          預測試階段:正式測試前進行預測試,保證測試流程通暢

          ·走查:記錄可能出現的問題

          ·預測試:找人先測試一下

          ·調整:調整測試流程


          正式測試階段

          測試參與人員有

          ·主持人:引導整個測試流程

          ·記錄員:記錄操作行為,訪談內容,發現問題等

          ·產品團隊:參與旁聽,觀察,結束后交流

          ·用戶:完成測試及訪談任務


          測試過程中需要觀察的要點:

          ·用戶是否獨立完成了任務

          ·是否存在無效操作或不知所措的情況

          ·用戶是否滿意


          結果分析

          邊測試邊總結,越及時越好

          ·測試完一個用戶,做一次小結

          ·測試結束當天寫小結,與設計師當場討論

          ·重要問題反饋后再總結分析報告

          ·邊測邊改,邊改邊測

          結果分析4個步驟:1、對發現分類  2、整理不確定項  3、評定優先級  4、結果記錄


          撰寫報告

          從4個方面來寫:

          ·總體如何

          ·有哪些問題

          ·嚴重程度如何

          ·建議是什么

          ·除此之外,還可以圍繞關注的問題,未滿足需求補充分析


          優化跟蹤

          在測試之后需要出優化的方案,測試優化的過程是循環的。

          測試之后如果還有其他問題沒有得到解決,可以結合其他的一些測試方法來得到。



          問卷調研

          問卷調查法是以書面提出問題的方式搜集數據的一種研究方法,研究者將所要研究的問題編制成問題表格,讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫,從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段,也可以用于產品上線后的評估階段。

          如果是想了解用戶對產品上線后的滿意度,可以使用問卷調研的方法。它比較適合去了解用戶的認知態度,也可以附帶了解用戶的行為習慣,


          問卷調研的優缺點

          優點:統一性、靈活性、量化性、匿名性

          缺點:(1)只能獲得書面的信息,而不能了解到生動、具體的情況。(2)缺乏彈性,很難做深入的定性調研。(3)調查者難以了解被調查者是否認真作答,是不是自己填寫的。(4)填寫問卷比較容易,有些別調查者會隨意選擇,或者按照社會主流觀點選擇,這樣會使調查失去真實性。(5)回復效率低,對無回答者的研究比較困難。


          問卷調查的使用場景

          適用于:(1)需要進行定量分析的調研。(2)需要匿名進行調研的問題。(3)對已有假設進行檢驗。(4)尋找問題隱藏的關聯。(5)對產品設計用戶認知及態度的評估。

          不適用于:(1)發現和描述具體問題。(2)探索受訪對象的模糊態度。(3)獲取創新想法。(4)獲取精確的行為數據。


          問卷調研流程

          1、確定目標:確定調研目的、對象、分析目的和應用對象。

          2、調研方案:通過訪談、經驗、理論等,確定調研框架,題目選項,分析思路,投放渠道,相本配比等。

          3、問卷設計:問卷設計,問題美化,投放渠道。

          4、問卷測試:多人測試,確保問卷的可讀性,邏輯通暢

          5、問卷投放:按照計劃好的投放渠道進行投放,回收數據,數據清洗

          6、問卷分析及填寫報告:分析及報告填寫,調研結果落地



          數據分析

          概述:通過在網站或應用中進行數據埋點,獲取用戶對產品的使用和行為數據,并進行基于產品體驗優化的數據進行分析。


          數據分析可以做什么?

          1、可以做到用戶從哪里來,來了多少

          2、獲取用戶屬性,用戶地域,用戶設備

          3、訪問了哪些頁面,使用了哪些功能,消費了多少錢,消耗了多少時間

          4、哪些流量可能存在問題,忠誠度如何,活躍度如何,有沒有達到目標,和行業相比如何

          5、流失情況如何,離開之后是否還回來

          可以作為產品的眼鏡和大腦,提供客觀衡量的依據,可以持續優化改進。


          數據獲取方式的對比

          日志文件:優勢,完整的服務端請求記錄。

                            缺點,日志的獲取和清洗有過濾成本,許多頁面操作無法記錄。

          JS頁面標記:優勢,數據獲取可控、靈活,可以對頁面操作記錄進行記錄,獲取數據比較完整豐富。

                                缺點,需要在頁面植入JS標記代碼,某些情況下無法獲取,如當用戶禁用JS功能時。


          常用的數據監控平臺

          1、第三方監控平臺:如Google Analytics、百度統計、騰訊云分析等

          2、自研平臺


          數據分析流程

          1、監控  2、定義  3、埋點  4、測量  5、分析  6、優化


          Web分析常用的指標

          PV:是指頁面瀏覽量,網頁瀏覽數實施評價網站流量最常用的指標之一,用戶每一次訪問網站中的頁面均被記錄,對統一頁面多次訪問,訪問量累計

          UV:是指獨立訪客,是通過互聯網訪問、瀏覽這個頁面的自然人

          UPV:是指唯一身份綜合瀏覽量

          訪問:是指在一定時間范圍內,網站所有訪問者對網站發起訪問的總次數,從訪客來到網站到最終關閉網站所有頁面,記為一次訪問

          識別用戶的方式:IP、IP+User Agent、cookie、User ID、設備ID、其他


          復合指標

          跳出率:指用戶來到網站,只瀏覽了一個頁面就離開的訪問次數,占全部訪問次數的百分比,簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量,高跳出率表示訪問者對著陸頁面不感興趣,沒有繼續訪問更深入的頁面。也可能頁面設計存在問題,也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道,優化頁面內容來降低。

          退出率:訪問者離開網站一次被記錄為一次退出,某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高,代表某一頁面可能出現了問題。

          訪問時長:網站停留時長,頁面停留時長,應用使用時長。訪問量是訪問質量的一個衡量指標,較長的訪問時間說明用戶與產品進行了較多的互動。

          訪問深度:可以理解為單個用戶平均訪問的頁面數,是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標,可以考察用戶是否和網站進行了較多互動。這個比值越大,代表網站的粘性越高。

          轉化率:指在一個統計周期內,完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算,例如注冊轉化率、付款轉化率等,是一個重要的分析指標。


          移動端基礎指標

          移動端的基礎指標監測與web端略有不同,但分析思路大致相同。指標分為:新增設備、累計設備、啟動次數、單詞使用時長。


          常見分析內容

          流量分析(哪里來?)、用戶分析(什么樣的用戶?)、行為分析(如何使用的?)、路徑轉化(表現如何?)、流失分析(粘性如何?)



          A/B test

          A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式,來獲得具有代表性的實驗結論,從而尋找到更好的產品策略。

          簡單來說,就是為同一目標制定兩個方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對比兩個方案的結果,選擇更符合的方案。

          A/B test一般會在產品改版正式上線之前使用,來驗證新的設計是否可以提高產品的表現。


          A/B test可以測試的元素有:標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等??梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試,這就是兩個測試類型單變量測試和多變量測試。


          A/B test工具

          Google Website Optimizer:搜索巨頭提供的免費A/B test工具,一個很好的入門級工具,但是沒有一些先進的功能。

          Visual Website Optimizer:一個易于使用的A/Btest測試工具,包含功能有所見即所得的編輯器,單機地圖,訪問者分割和標簽等。

          Unbounce and Performable:集成著陸設計的A/B測試工具。

          Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業級測試工具

          App Adhoc Optimizer:國內A/B Test工具,同時支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測試服務的專業Saas平臺

          Optimizely:是網上現有的最專業的AB測試工具之一,它的價格要比其他的工具高很多(也可以免費使用一個月),它提供了一些非常好的功能。

          Unbounce:對于登錄頁面的測試來講非常不錯,而且它不僅僅是個測試工具,還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。


          如何做A/Btest

          1、確定目標,例如提高網站的付費轉化率,降低跳出率等

          2、測試方案,建立假設:購買按鈕的顏色會影響點擊率?縮短流程可以提高復費率?改變導航可以降低跳出率等?

          3、創建相比較的兩個版本,改變其中的變量

          4、發布測試,將部分流量導向B方案,但不一定是5:5

          5、數據分析,收集數據,對比AB版本的轉化率、跳出率、留存率等



          感謝閱讀!



          文章來源:站酷   作者:_微光

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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