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

          首頁

          這幾類圖標趨勢你知道嗎?

          純純

          Duoton icon

          雙色漸變圖標

          -

          漸變色已經流行了段時間,雙色漸變設計依然持續是一個大趨勢,因為單一的色調無法滿足產品所需,雙色調圖標的特點就是色彩對比鮮明,青春活力,這種相比單色調圖標,更適合應用于一些主流偏年輕化產品,因此設計師還可以通過設計色彩打動用戶,提升產品競爭力,工具化產品也可以使用這樣有層次的圖標,不過使用時,需要對色彩進行克制使用。因此,如果您希望自己的設計界面脫穎而出,可以去大膽的使用雙色調色彩。

           

           

           

          1. 雙色調多層質感(彌散漸變,直投影,混合模式)

           

           

           

           

          2. 雙色調混合模式疊加

           

           

          Alpha icon

          單色漸變透明圖標

          -

          Alpha icon 圖標風格最大特點就是單色帶透明漸變,通過弱透明度來制造視覺層次,如果是純白色,就會顯得圖標平庸了一些,這種圖標運用范圍可以是界面中空場景或者一些關鍵模塊的主功能圖標。

           

           

           

          如下圖左側大卡片上面圖標應用思路。

           

           

          Cascade icon

          層疊式圖標

          -

          層疊式圖標,相比于純白色線條圖標,它帶來一種更舒適的質感,其設計方法是通過穿插層疊的手法,將日常我們所見到的單一的線條圖標,變得更具有視覺層次感,當然這種圖標使用場景一般會是在功能說明性頁面,功能介紹等。

           

           

          Brand icon

          品牌植入

          -

           

          品牌植入一直是非常大趨勢,包括今年我們所看到兩大廠的品牌更新IBM和UBER等,都是將品牌核心符號植入設計中,我想這樣的思路在2020年將持續會是一個重要表達產品氣質和記憶點手法打造思路之一,因為用戶已經很熟悉目前圖標模式,如何能創新區別其他產品,那么融入品牌將是一個不錯的選擇~品牌的融入技巧有高低之分,需要設計師去巧妙設計

           

          備注(因為視頻比較麻煩,因此省略了)下面是截圖,大家應該能大致感受到

           

           

          同樣多鄰國在前段時間更新品牌,并將其LOGO特征符號植入字體中。

           

           

          同樣多鄰國在前段時間更新品牌,并將其特征元素植入字體中

           

           

           

          Motion icon

          動態圖標

          -

           

          動態圖標是一個能提升產品體驗的方法之一,也是微交互中的一種,它可以增加產品趣味性,Facebook在評論入口的表情動畫就運用了動態圖標, 包括蘋果Apple Pay支付成功圖標動畫,Google Assistant智能助手,Messenger中的打招呼動畫等等我們可以逐漸發現動態圖標比靜態圖標的表達性更強,更受到青睞,隨著硬件升級,這種動態圖標運用逐漸在越來越多場景可見到。

          備注(因為視頻比較麻煩,因此省略了)

           



          文章來源:優波設計   作者:設計TNT
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

           

          體驗設計進階技巧-教你打磨頁面細節

          純純

          隨著體驗設計的持續發展,行業內各領域的體驗設計質量都有了很大的提升,并且各個競品之間的差距越來越小。而更高的界面細節設計質量不僅是各個大廠產品體驗設計的追求,也是我們拉開競品差距的關鍵一環。我們平時可能閱讀了很多理論知識文章,但往往在實際工作中卻較少運用。學習掌握理論基礎知識固然是很重要的,但在設計執行時掌握設計技巧也更能提升工作的效率和質量。那么在設計執行層遇到問題有沒有一些立竿見影的解決方案呢?本篇文章分別從視覺、內容和交互三個角度總結了十個界面細節設計點,希望可以幫助你遇到問題時另辟蹊徑,延伸更好的設計思路。



          在封面和背景圖設計的場景中,我們為了讓封面上的信息能夠更容易看清,通常會在文字下添加一層黑色半透明或者漸變蒙層,但你有想過這個蒙層可以不止是黑色的嗎?

          在設計社區話題詳情頂部背景圖時,我們采用封面圖模糊處理后作為背景圖的方案,為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。當用純黑色作為蒙層時淺色背景可能會顯得很臟,這時可以改用深灰色讓背景看起來不會太臟,加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度,右邊是深灰#333333、30%不透明度??梢钥闯鲇疫叿桨傅男Ч黠@更清爽一些。當然更好的方案是通過客戶端拾取背景圖顏色后生成對應色相的深色蒙層,但這個方案設計相對比較復雜。需要制定一系列拾色和生成對應色值的規范,并且開發成本偏高。有條件的話也可以考慮應用。



          界面中使用圓角設計更能讓用戶感到親和力和舒適感,所以運用場景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場景,在一些細節的處理運用圓角也能提升設計品質。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運用常規的切割邊角就比較尖銳,會略顯生硬。

          而添加了圓角處理后視覺上會更加柔和更協調,對比一下前后的方案不難發現圓角的效果更勝一籌。不要看只是一點很小的細節,其實也體現了設計師對細節的細心追求,用戶看了也會體會到設計師的用心。

          另外再介紹一下我個人在sketch中快速繪制這類圓角銜接的方法。以下圖為例,首先頭像的圓形描邊需要單獨畫一個白色的圓形圖層,而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設為聯集,再將圖層路徑合并。然后在兩個銜接處的兩邊各添加一個錨點,注意兩個錨點和銜接點的距離一定要相等,這個距離決定了圓角的大小,可以根據需要來調整。之后把銜接點的錨點類型改為“筆直”,再給這個錨點添加圓角半徑。這樣銜接點的圓角繪制就完成啦。另外運用布爾運算來畫出圓角也是可以的,具體方法可以根據個人習慣來選擇。



          我們在頁面取色時經常會給背景色和陰影等結合場景帶有一些顏色傾向,以達到更舒適的視覺效果,其實這個方法也適用于文字。為了提升效率,我們習慣了在選擇字色時使用一套設計規范里的顏色,比如#333333、#999999等等。但是個別的特殊模塊我們是可以根據實際情況調整以獲得更好的視覺效果的。比如下面這個案例是一個熱帖榜單的入口模塊,為了提高信息層級讓頁面更有活力,這里選擇用淺黃色作為背景。如果使用規范的字色與背景的結合會相對不太協調,這里選擇字色時就可以讓文字顏色和背景顏色帶有相同的色相,選用高飽和度低明度的顏色,并且次級信息同時可以帶一點不透明度。讓整個模塊視覺更統一,信息與背景更融合。

          類似這樣的場景其實還有很多,有時我們也不必拘泥于設計規范中,適當的根據模塊定制化一些細節可以達到更好的視覺效果。


          我們經常會遇到一個頁面中有多個同級圖標排列的情況,不管是用宮格排列或是列表排列都需要每個圖標整齊有序、尺寸統一。但實際情況下不可能每個圖標尺寸都完全統一。一般這種情況我們可以給每個圖標統一添加一個相同尺寸的矩形圖層作為背景板,將背景板隱藏后再整體編組,這樣一來就能保證每個圖標所在的組都是相同的尺寸就能統一對齊了。


          然鵝,我們有時會遇到一些不規則形狀圖標,尺寸是奇數甚至是帶小數的。這種情況圖標如果要在背景板上完全居中,我們可以打開首選項中的圖層項,關閉契合像素功能,然后可以拖動圖標或者用對齊功能讓圖標與背景板對齊。不要忽略這一兩個像素的差別,這些微小的細節往往決定了界面設計的嚴謹和精致程度。



          另外,我們可以根據情況靈活調整圖標在背景板中的位置,例如左右箭頭圖標為了與頁面其他內容邊距對齊,可以將圖標貼合背景板左右兩邊。這樣就能減少后期開發還原調整的工作量,提高工作效率。




          標題信息在界面設計中使用頻率非常高,而在設計過程中我們可能會忽略極限字數的情況,導致開發還原時實際效果不理想。下面以一個案例來分享一下標題極限值的處理方法。

          在騰訊動漫社區改版中設計話題詳情頁的標題時,產品規劃標題的字數為12個字符,在右邊有看漫畫按鈕的情況下是顯示不完全的。這個情況就要考慮設計極限值的顯示方案。常規的方案有:1、顯示不完全時后面顯示“...”;2、換行顯示。考慮到詳情頁需要將標題完全展示,所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統一。最終經過思考決定使用方案三:標題顯示不全時左右滾動展示,可以在保證視覺統一同時顯示完整的標題。


          同樣的,在很多情況下我們由于空間受限無法展示完整信息時,這個方案也不失為一個很好的選擇。



          在頁面設計工作中我們有時會遇到信息容器邊界固定,而容器內信息可以滑動的情況。例如下圖中頂部導航和音樂播放的歌詞頁面,這種場景下一般容器邊界不會做明顯的界限,如果內容在邊界處是直接被裁切的話體驗的感受就會比較割裂。我們可以嘗試更好的解決方案,在容器邊界增加漸變過渡,這樣信息在邊緣的過渡就變得柔和,頁面整體更協調。


          這種漸變的過渡的應用場景還有很多,比如瀏覽簡介或者文章時,需要隱藏部分內容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內容,降低用戶的理解成本并且也能夠讓用戶有心理預期。


          另外在sketch上呈現這種漸變過渡也很方便,如果背景是純色的話可以在邊界處添加一個與背景色相同顏色的色塊,然后給色塊添加添加不透明度從0~100的漸變,這個方法比較簡單。如果遇到背景復雜的情況,也可以繪制一個和容器相同大小的矩形,在矩形邊緣添加不透明度從0~100的漸變,然后建立蒙版把信息剪切到矩形中。

          至于開發實現的方案還是要和開發哥哥具體溝通,確保用最便捷的方案還原出最好的效果。



          動態流是我們非常常見的樣式,是分發用戶生產內容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內容。一般情況支持九張圖片或一個視頻,在有多張圖片時,可以如下圖做成宮格的樣式適配,每張圖片截取中間的正方形部分。

          而只有一張圖片或者視頻時,為了保證圖片和視頻的預覽效果,通常會做大尺寸的預覽圖,而圖片的寬高尺寸并不固定,所以只截取中間方形的方案并不能滿足要求,我們要根據這個情況做單獨的適配方案。首先我們要設定一個裁切的比例,比如我們取豎圖最小裁剪寬高比為2:3,橫圖最大裁剪寬高比為3:2(這里的寬高比并不是固定的,可以根據實際需要自己定義比例,采用4:3、16:9等比例都是可以的)。這樣當圖片寬高比小于2:3時,我們可以把圖片中間區域按寬高2:3裁剪出來;圖片寬高大于2:3并且小于3:2時可以按原圖比例預覽;而圖片寬高大于3:2時,把圖片中間區域按寬高3:2裁剪出來。另外要注意要給圖片設置最大高度,否則圖片高度太高會減少頁面信息承載量,降低閱讀效率,相應的也要限制最大寬度,否則會使圖片規則不統一,從而頁面適配效果不協調。

          同樣的,這個規則也適用于視頻,由于全面屏手機占比越來越高,這些手機拍攝的視頻大多是19:9、20:9的寬高比例,相比視頻常用的16:9的比例更加細長,所以橫屏視頻可以統一裁剪為16:9比例,而豎屏視頻可以裁剪為9:16比例。

          動態流圖片適配的核心是制定一個適配的規范來保證閱讀的舒適度和效率。而這個規范并不是恒定的,可以根據自身平臺需要來制定,以上僅作為一個示例供參考哦。



          隨著沉浸式設計的趨勢,很多頁面會采用無標題欄的設計。例如下圖的個人中心頁面,頂部利用背景圖來渲染品牌氛圍。但是這類無標題欄頁面的上滑交互普遍有個缺陷,就是如果未經處理上滑后內容會與頂部電池條者是置頂的按鈕位置重疊。這種類似“穿幫”的情況給用戶的體驗就是設計處理不夠嚴謹。然而這種交互細節也是可以優化改善的。


          優化的原理也很簡單,就是在上滑過程中添加一個標題欄來分割頁面內容,從而讓內容和頂部元素不重疊。標題欄可以隨上滑高度改變不透明度,以達到柔和的過渡從而實現絲滑的交互體驗。



          類似的處理方案在各大平臺也有較為廣泛的應用。




          在用戶體驗發展的趨勢中,無論是交互的反饋或者是圖片、信息等都趨于由靜態向動態發展。常規的靜態圖片承載的信息相對有限,所以在有限的載體內讓內容動起來展示更大的信息量不失為一個很好的選擇。

          在舊版本的iOS12系統中有一個視圖選擇的功能,用戶在這個頁面可以選擇標準視圖和放大視圖,并且有三張圖可以滑動展示不同場景下兩個選項的差異,但是這個方案需要來回切換標簽和滑動圖片來對比差異,效率很低。而在之后改版的iOS13系統中,這三張靜態圖被替換成了兩張動圖,輪流切換三個場景的頁面,用戶不需要再滑動圖片就能更加直觀的對比兩個選項的差異。這個小改動不僅可以讓圖片展示更多的信息,還能減少用戶的操作成本提升操作上的體驗,讓閱讀效率更高。


          類似的延展應用場景也有很多,例如新功能引導動畫、動態banner等等。其實原理都是一樣的,在常規靜態圖的基礎上優化為動態圖,不僅能增加信息的承載量,提高閱讀效率,也能讓頁面更有活力。




          為了滿足運營的需要,我們有時會在多同級個圖標或者按鈕中突出其中的一個。例如下圖的分享彈窗,想要在多個分享途徑中突出微信的圖標,但同時又要保證圖標風格的一致性,這時就可以利用微動效來達到強調的效果。







          而微動效的落地形勢也有很多種,下面拋磚引玉介紹幾種簡單高效的方案。


          可以看到添加了微動效后不僅可以達到強調某一個對象的目的,同時也能保證每個圖標風格的統一,微動效也讓頁面更活潑有靈性,不失為一舉多得的方案。

          微動效的形勢當然不局限于上面幾種,大家也可以發散思維,創造更多有創意的方案。

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

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

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

          輪播設計總結-提高用戶點擊

          純純

          如果需要設計一個輪播,我們應該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。

          提到輪播首先可能想到的是廣告,我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner,不管在移動端還是網頁上通常點擊數據都是非常差的,本篇文章帶你深入了解banner輪播。

          如果需要設計一個輪播,我們應該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。

          本篇文章通過以下幾點探索輪播的特性,預計閱讀20分鐘

          目錄

          1、用戶真的使用輪播嗎

          2、輪播的輪換形式

          3、輪播的進度展示

          4、輪播定位

          5、輪播的切換

          6、對輪播進行分類

          7、使用縮略圖進行預知

          8、輪播異形化

          9、輪播時間

          10、總結

          一、用戶真的使用輪播嗎

          用戶是否對輪播有感知,這個則需要根據不同的場景進行判斷,包括每個產品中的每個輪播對用戶用戶的定位也不相同,常見的應用場景品牌曝光、活動營銷、產品展示,每個場景下相關的數據也不相同。

          促銷輪播banner

          品牌推廣輪播banner


          產品介紹輪播banner

          同時還有個關鍵因素,輪播的占比,這里以pc端為例若是產品是以品牌效應吸引用戶的,大多輪播是以大的屏幕占比為主通常會占首屏的50%,如果是以營銷、內容為主的產品,輪播通常以16:9、7:4的常規比例進行展示。


          輪播的頁數

          用戶在使用產品時會默認忽略輪播區域,一般輪播都會有自動輪換機制,一定時間后自動輪放下一張banner,那么每當頁面上進行輪播時便會吸引用戶進行關注,效果上會有一定的提升,所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。

          還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。

          如果banner是作為內容傳播希望用戶通過banner了解內容,那么則要避免放在最后一位置,對于用戶而言最后一張輪播路徑過于長,并且用戶很少會手動滑動banner。

          國外一家公司在針對輪播中進行了相關的研究測試,隨著頁數的增加用戶的點擊逐步下降。

          那么如果想讓產品中的輪播更具有效果,則需要根據不同的場景設定策略達到目的。

          二、輪播的輪換形式

          不管在移動端還是手機端,輪播都有各種交互形式和尺寸,以pc為例在交互上會多樣化一些,常見的幾種則是通過滾輪滑動、通過點擊切換兩種。

          如下圖某藝術網站,它則是通過鼠標滾輪進行切換輪播banner,并且banner的占比也是鋪滿首屏,這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點,同時也符合用戶目標。

          在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換,并且占比也是鋪滿首屏,在醫美領域用戶更關注美感,而輪播形態也是符合用戶的心理預期更加沉浸美觀。

          而在移動端輪播的形式就比較統一,大多都是自動播放+手指滑動進行切換。

          三、輪播的進度展示

          在網頁中輪播都會有當前的定位點,許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標,不用一張一張切換,但是在有些產品中會忽略這一點,設計中會做的非常小導致用戶在點擊上可用性不太友好,如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。

          如以下網站去除進度定位的方式,通過縮略圖預覽來告知用戶下一個banner的內容,空白區域也可以添加縮略圖引導介紹等關鍵信息,幫助用戶提前預知在體驗上相對較好。

          以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計,能夠幫助用戶更加全局的了解banner內容


          四、輪播的定位

          定位主要是用來指示當前輪播的進度,像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。

          以下網站的設計中則把定位與進度相結合,進度條展示該banner預計多久會切換下一張,對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。

          以下是某個國外網站,不管是pc還是移動端都在輪播底部添加了水平條,告知用戶當前位置

          隨著市場上產品同質化嚴重,產品的競爭力也更依賴體驗,在下圖中的數據可視化的網站上,在進度條上就利用了產品的特性以餅狀圖的形式進行展示。

          五、輪播的切換

          在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性,但是需要注意一個點,在輪播中不只有自動播放,還需要考慮用戶手動切換,因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期,此時則會使用手動切換,除去可點擊的進度點,還需要上一張和下一張的入口切換。


          在此基礎上需要注意,在處于最后一張banner時,下一張切換還能不能點擊,第一張時上一張切換還能不能切換,這個取決于產品特性和輪播張數,如果輪播張數過小的話則需要進行循環播放,如果過多的頁數則第一步和最后一步不可點擊。

          切換的距離和位置

          上一張和下一張的距離遠近取決于banner的大小,如果輪播banner占比較大時則需要考慮用戶的操作時長,距離越短時間越快,為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出,便于用戶尋找。

          如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因為小區域banner用戶能夠更加全局的觀看,在使用上不會猶豫。

          反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕,移動端更加依賴手勢交互。

          六、對輪播進行分類

          當輪播banner過多時利用標簽進行分類,用戶通過點擊標簽進行查看相關的輪播組合。

          此方式更適合一些電商平臺、新聞網站這種內容過多的產品


          如下圖國外社交媒體網站則使用了標簽進行分類,此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。

          七、使用縮略圖進行預知

          在banner首屏中,顯示的內容越多,越能激發用戶進行點擊,像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示,當然不僅局限于這種形式,如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。

          相對于縮放圖,圖標展示效果上也較好,空間占用更少,使用這種方式需要謹慎,對圖標的識別性要求較高,我印象中能夠使用的這種方法的網站是蘋果官網,讓產品抽象化展示。

          在移動端也存在這種設計手法,但是基于分辨率原因移動端的縮略圖展示過少,最常見的如下圖中的馬蜂窩和企鵝電競。

          八、輪播個性化

          輪播最大的缺陷則是像剛開始講的用戶會默認為廣告,對此可以使用個性化設計突破用戶心理障礙,使輪播banner更具備親和力。

          如下圖中的數碼科技網站,利用產品與背景的結合營造出一種功能性的展示。

          再例如下圖中蘋果官網入口,結合百度的定制化功能在大搜中進行個性化處理,把常規的banner輪播以功能卡片形式進行展示,同時卡片承載產品動畫引導用戶進行點擊。

          蘋果官網進入后隨意點擊產品介紹頁后會發現,蘋果把輪播結合鼠標滾輪營造沉浸式觀看,每個屏效內都展示產品一個功能特點,打破傳統banner的展現形式。


          九、自動輪播時間

          自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級,如我們平常使用產品時會忽略banner廣告,我們會更加關注移動中的東西,特別是在移動端上通常是banner進行輪播時才會關注。

          谷歌設計團隊曾對banner輪播的時間進行測試,測試結果得出5s-7s的輪播時間最佳,在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。

          如下圖谷歌商店的輪播時間設定在6s。

          同時還需要注意,在自動播放的過程中如果用戶鼠標hover上去后,則需要判定播放暫定,避免用戶錯過感興趣的內容。


          十、總結

          本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹,在實際產品中輪播有很多可用性上的問題存在,我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。

          文章來源:UI中國   作者:愛吃貓的魚____
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          淺談交互設計

          純純

          一、什么是交互設計?

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

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



          如何提升B端界面的精致度

          純純

          于B端,我想剛開始很多同學就直接拿Ant Design套套界面,因為公司要求并不高,隨后字節Arco Design也推出了對應的模版和規范,能讓我們快速作出一個不出錯的方案。

          但是隨著公司對B端越來越重視,這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此,我們的設計追求也不止于此。 

          那么我們如何才能擺脫套模版,提高界面的精致度,提升界面的交互體驗呢?

          其實很簡單,王陽明先生告訴我們知行合一,知是行之始行是知之成。我們如何才能提升B端界面端精致度?

          第一,需要知道什么是好的設計;

          第二,需要不斷的去實踐去練習,缺一不可。

          本文先和大家談談知的層面,提高我們的眼界,下面就和大家分享一些不錯的B端產品,大家有時間可以去慢慢體驗。 

          PS:作為B端設計師,一定要去多拆解競品,多研究好的產品,別面試的時候,面試官問你研究的B端產品是什么,你只知道阿里云、騰訊云、百度云哦! 


          1、Hubspot

          做B端的同學,尤其是做CRM的同學應該都知道Salesforce,他是全球最大的 CRM(客戶關系管理) 工具公司。 

          Hubspot同樣是提供客戶管理相關的應用,雖然成立相對Salesforce晚,但是在市場上也占有一席之地。

          從設計的角度來看,他的界面風格更加簡潔舒適,從體驗上來看和國內的CRM系統完全不同,其體驗更加自然和舒適。 

          這種風格大家看了有沒有覺得很熟悉呢?

          大家在去看看 GoDoddy , Airbnb ,Zillow,是不是發現風格有一點類似,大家可以對比國內產品去拆解下他們的交互細節有什么不同,完成同樣的任務他們采用的方案有何不同,相信你會有很多的收獲。 

          國外的界面看著總讓人覺得很舒適,僅僅是因為克制的設計、中性灰使用得好嗎?當然不是,是因為英文本身就是圖形化的文字。

          如果翻譯成中文,你會發現好像不是特別理想。 

          這個樣子拿給領導過稿,怕是分分鐘被拍死,因此我們還是需要多看看國內優秀的產品。


          2、神策

          神策的設計,我想B端的朋友不陌生吧,國內產品中他的設計一直是我們的參考對象。

          不同于其他產品,他的體驗門檻比較低,注冊后就可以去體驗他的demo,也沒有試用期限,參考對象從可視化報表,到界面交互均能找到參考。

          不過當你參考一次后發現,做出來的界面怎么還是少了一些靈魂,雖然界面風格上了一個臺階,但為什么用戶還是覺得產品難用。

           

          3、項目管理類

          這里不得不和大家推薦項目管理類產品了,這類產品是專門給互聯網公司的開發團隊使用,他們都是專業用戶,同時這些都是提高他們工作效率的工具,因此這些產品投入的成本更高,優化得更好,拆解他們的產品,就是直接觀看高手的成長之路。

          Jira

          Jira是Atlassian公司出品的一款事務管理軟件,JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。

          同時他也是國內項目管理類產品的學習研究對象,因此大家可以通過文章、B站、界面截圖,自己申請體驗等方式全面的進行體驗。

          同時也可借助群的力量,調研下有使用Jira的小伙伴,看看他們在使用中有什么問題,下面是我收集Jira網頁版和本地配置版的問題截圖,這些都來自不同角色的真實體驗,會更有分析的價值。(這部分截圖涉及到公司的數據,同時數量多不太方便打碼,就不分享給大家了。)

          當然國內的項目管理類產品也得去看,我們要對比哪里做得好,哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,這些產品不管從視覺還是體驗都非常不錯,大家一定要去體驗。


          5、文檔管理類產品

          通過不斷對競品進行拆解,你已經不是當初那個小白了,你的行業認知,方案設計能力應該趕超了一大波人。

          成長的同時,又發現你設計的界面,不太精致,少了些溫度,這時候推薦你看文檔管理類產品。

          WPS

          第一個和大家推薦的是WPS,界面簡潔,配色舒適。 


          飛書

          在管理類的軟件中,不得不提飛書的管理界面,從設計到使用體驗,他給我的感覺終于不是那么千遍一律,用組件庫搭建起來的感覺。

          他開始有了溫度,開始注重品牌感的打造,用戶的引導,符合品牌調性的插畫。 

           

          對一些體驗的細節進行優化,比如傳統的編輯都是放在頁面頂部,它采用了離光標更近的位置。 

          根據菲茲定律,光標當前的位置和目標位置的距離D越短,所用的時間越短,具體好不好用,歡迎大家在評論區留言哦。 


          6、概念稿

          到這時候如果你覺得線上的產品太禁錮思維,那么推薦你看看dribbble、behance,搜索data、web、dashboard等關鍵詞,去看看有沒有新的靈感。

          我的花瓣收集了一部分,如果不嫌棄,可以去看看,順藤摸瓜應該可以找到很多不錯的設計。

          圖片標題

           

          7、畫重點

          如何提升B端界面的精致度?

          第一,要知道什么是好的設計,多拆解國內外優化的B端產品。

          第二,多在工作中時間,有時間多做ABC方案,鍛煉自己的方案設計能力,多踩一些坑,時刻保持學習能力,慢慢就成長了。

          文章來源:UI中國   作者:風箏KK
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          UI界面設計基礎

          博博

          互聯網設計的一些基礎知識,寫給剛入門或想入門的童鞋們,希望有所幫助


            • 文章來源:站酷   作者:凌坤_Maxidea

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

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

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

          圓形元素在界面設計中的運用

          博博

          圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設計界面時會有一些注意事項。

          圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設計界面時會有一些注意事項。


          一、圓形頭像


          放眼望去,圓形頭像已然占領了我們的手機。不妨看看下面舉的這些例子,如下圖所示。

          43e456a455da32f875520f6db95d.jpg

          從左到右依次是搜狗地圖、QQ、Instagram。當然,還有很多其它的例子,就不一一列舉啦。此刻,肯定有同學已經按耐不住要跳出來反駁了,微信和Facebook就不是圓形頭像,不信你看下面兩張圖。d1df56a455f56ac7256cb095c8b4.jpg

          方與圓之間,孰對孰錯,請繼續看下文分解。


          1.用戶使用頭像的目的

          不管是圓形頭像,還是方形頭像,其歸根結底都是頭像。用戶使用頭像的目的,主要是作為個人身份的象征。區別于其他用戶的特征有很多,例如用戶名、用戶ID、用戶頭像。在這些備選項中,頭像最便于快速識別和記憶,尤其是帥哥美女。


          除此之外,還有一部分通過頭像來彰顯自己的個性,例如美女通常會使用自己的性感自拍作為頭像來表現自己的魅力,又或是使用卡通人物或形象作為頭像來表現自己的藝術氣息,再或是使用萌寵作為頭像來表現自己的愛心或是呆萌。


          2.用戶使用什么照片作為頭像

          隨著智能手機的越來越普及,人們拍攝照片的門檻也變得越來越低,越來越多的用戶使用自拍的照片作為頭像。照片的內容五花八門,例如人物、風景、花草、寵物。即使是正常的人物照片,背景中也會摻雜著很多其它的元素,例如下圖所示。

          5cf056a456106ac7256cb020a2c8.jpg

          第一張照片中人物背景雖然虛化了,但背景仍然很凌亂,一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角,豪車才是真正的主角,這類型的自拍照不再少數。第三張照片人物拍攝的光線陰影錯亂,故意露出一線背景內容,其用意如何昭然若揭。此外,用戶手機的好壞、拍照水平也不一致,拍攝出的照片質量也參差不齊。


          使用這些照片作為頭像時,人物不但不被突出,反而被弱化了。雖然智能手機屏幕越來越大,但是當頭像集體在界面中展示的的時候,每個頭像依然較小。


          3.方形頭像和圓形頭像的區別

          方形頭像和圓形頭像的區別可以用兩張對比圖來說明,如下圖所示。

          5d5c56a456266ac7256cb013db0c.jpg

          左圖是方形頭像,右圖是圓形頭像。通過對比,可以發現以下幾點:


          a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現人物特征,但是干擾信息較多,例如背景中的燈光、門柱、屏風。對比之下,右圖更為清晰地展示了人物的臉部特征,例如錐子臉、美瞳、假睫毛。在前面的分析中也提到,手機拍攝的照片質量參差不齊。在這種現實情況下,圓形頭像更有利于忽略照片的背景,提高頭像的識別效率。


          b、嚴格意義上講左圖并不能稱之為頭像,而更應該稱之為照片。原因很簡單,頭像嘛,自然應該以展示“頭”為主,而左圖中頭像只占畫面四分之一不到的區域。從這個角度來說,顯然右圖更為合適。在選擇照片作為頭像時,如果是圓形,用戶更愿意選擇臉部的照片作為頭像;如果是方形,用戶則相對更隨意,通常是全身或是半身照。不信,你可以打開自己的微信,看看自己的好友頭像,或者往前滑滑看看前面的配圖。


          c、日常生活中,我們看到的大多數相框都是方形的,圓形的相框較少,這是因為大多數照片都是方形的。因此,使用圓形的輪廓來表現頭像,能夠快速地和照片區分開來,更加突出。

          當然,使用圓形的輪廓作為頭像,還有一些其它的原因,例如技術上的進步。

          早期由于CSS等技術的不成熟,圓形、圓角圖形的處理非常麻煩,現在變得容易很多。


          二、圓形的icon


          在APP的UI設計中,我們會經??吹揭慌排艌A形的icon,例如下圖所示。


          fc6956a4564232f875520ff01b89.jpg

          上圖中,前面兩個分別是美團和淘寶。在設計上,都有兩行橫排的圓形圖標。最后一張圖是搜狗地圖的服務tab頁,可以發現也有縱向排列的一溜圓形圖標。

          在這里,要回答兩個問題:

          1.為什么要用圓形?

          2.為什么要用圓形而非矩形?


          第1個問題很方便回答。每個功能入口的圖標都不相同,如果去掉圓形輪廓,勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體,加上圓形之后就能夠弱化圖標的差異性,讓其變得更加規整,看起來也更加清爽,整齊劃一。同時,在功能上也表明各個圖標之間的平等地位,不會因為某個圖標形狀特殊而有所偏袒。


          在回答第2個問題之前,首先回歸圓形和方形的基本特征,

          圓形:動,曲線,運動,靈動,流動

          方形:靜,直線,規則,嚴肅,理性

          圓形和方形比起來,顯得要靈動很多,不至于那么呆板、嚴肅。如此,不難理解為什么用圓形而非矩形。


          其次,圓形能夠使圖標在方形頁面中脫穎而出——不覺得這幾個圓形圖標在頁面中非常突出搶眼么?原因嘛,很簡單。我們的手機屏幕大多是方形的,界面中的大多數元素也是方形的,這時候用一點少量的圓形,自然在界面中形成焦點,這一點在后面的分析中還會見到。


          除了這種形式之外,還有一些單個的圓形圖標浮于頁面底部,通常執行的是返回至頂部的操作。


          三、圓形和方形的結合


          圓與方就像太極中的陰與陽,相生相克,而又生生不息。巧妙地將圓形與方形進行結合,能夠讓頁面變得生動活潑的同時,也能夠更好實現功能上的引導,如下圖所示的幾個案例。

          ebb456a4567032f875520fafc8f5.jpg

          第一幅圖是谷歌手機地圖,地點右上角的出行方式圖標剛好被方形的臨時層一分為二。從功能上來講,出行方式是下一步的行為,不屬于臨時層里的內容,因此置于右上角的位置是比較合適的。從UI角度來說,圓形與方形結合,使的圓形變得更加突出顯眼;同時圓形置于右上角,頁面也不那么死板,反而讓頁面變得生動、活潑起來。


          第二幅圖是宜人貸,微微鼓起的弧度讓這個理財項目變得十分突出,同時也打破了頁面沉悶的布局。


          第三幅圖是kitchen stories,整個頁面保持左右居中,作者的頭像居中現實,對頁面進行了分割的同時起到了承上啟下的作用。


          在頁面設計中,圓形元素通常不是獨立存在的,而是和其他元素相生相息,相互包容。尋求好的視覺效果的同時,也要弄清楚頁面元素之間的相互關系,這樣產出的設計才是真的好設計。


          四、圓形的輪廓


          結合現實物體,借用圓形輪廓,打造頁面點睛之筆。還是舉幾個栗子給大家看看吧,如下圖所示。

          a29156a4568e6ac7256cb0899d80.jpg

          第一幅圖所示的是網易云音樂的播放界面。圓形輪廓與唱片保持一致,雖然占據了頁面的主要空間,但是使的整個頁面變得文藝簡潔。


          第二幅圖所示的是搜易貸的賬戶頁面??捎糜囝~采用瓶裝水的設計,余額較多則水漲的越高,同時會有晃動的效果,栩栩如生的同時讓頁面變得靈動起來。


          第三幅圖所示的是樂動力的首頁。步數越多,則描邊進度條越多,暗色變得越暖。與現實生活中的儀表盤相對應,漸變色搭配圓形,使的頁面變得主次分明,極富視覺沖擊力。


          可以發現,在使用圓形元素時要注意頁面的平衡,例如左右和上下的對齊居中。為了保證頁面的均衡和清爽,通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。


            • 文章來源:站酷   作者:Sim_H

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

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

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

          7個基礎的用戶體驗設計細節

          seo達人


          1、專注于20%

          maggelato

          你可曾聽說過80/20法則?簡而言之,80%的用戶通常只會使用你網站內容和功能的20%,絕大多數的用戶只是在掃視網站內容,并且只會挑選真正感興趣的瀏覽。

          同時這也意味著,剩余的20%就相當重要了。大多數的點擊將源自于這一區域,它也是近乎完美的內容和互動區域。

          你可以借助數據分析來決定哪個部分是整個網站最被關注的那20%。對于剛剛上線的網站,這個數據搜集的過程可能長達好幾周,隨后再進行調整。

          當然,你也可以通過引導將用戶引流到你希望用戶去的那20%的區域。借助視覺引導和行動召喚設計來引流,用有趣和有意思的設計來營造令人有興趣的區域,讓他們樂于點擊,從而達到目的。

          2、架構式的思維

          goldhill

          設計一個網站和搭建一所房子其實差不多。首先,它需要一個堅實的基礎,然后是能夠承載所有內容的框架,做好后要好好裝飾一下。同樣的思維模式可以套用在網站的設計上。

          更重要的是,你并不需要為此創造出過去從未在框架中出現過的東西,換言之,框架內的素材、組件和我們常見的并無二致。就像導航設計模式一樣,現在的設計都趨于一致,因為這樣的導航好用。

          當網站的整體結構搭建起來之后,可以將相同的思路套用到內容體系的構建上來。主要的正文內容是整個網站內容的基礎,輔以吸引人的標題、圖片,配合上其他的次要元素,整個內容體系可以很快搭建起來。

          3、不要要求太多

          assos

          現如今的世界可以說是由數據所驅動,越來越多的應用開始要求用戶注冊,要用戶提供更多的權限,更多的信息,以期為用戶提供更加個性化的體驗。但是從體驗的角度上來看,要盡量規避這一點。

          站在用戶的角度稍加思考你就明白了。找到一個令你感興趣的炫酷網站,如果要深入了解更多內容,就需要內容,而如果要注冊的話,網站卻需要你提供下面10個類型的信息:姓名、郵件、國家、地區、城市、電話、Twitter權限、個人網站、工作職位、以及如何發現這個網站的。

          那么接下來,你會怎么做?絕大多數的用戶會直接轉身離開,這個注冊信息填寫起來太費勁,體驗太差了。

          那么,如果你當你點擊注冊的時候,只需要一鍵從Facebook或者twitter授權即可,那么你會不會立刻點擊呢?至少從目前已有的數據來看,絕大多數的用戶會這么選擇。

          4、令人愉悅的微交互

          evernote-1

          可能很多時候你都沒注意到,你和各種微交互進行的互動一直都存在。

          ·谷歌日歷彈出框提示你每周例會要開始了
          ·短信提醒
          ·午睡的鬧鐘
          ·微博上的新粉絲和轉發提醒

          這樣的例子我們可以連續不斷地說上一個小時。這些帶有微交互的提醒和動作會推動用戶進行下一步操作,帶來愉悅的體驗,它們不能設計得非常醒目,但是又需要適當地吸引用戶注意。

          這些有趣的微交互的加入讓用戶從中獲得好處。而你需要思考的是,有哪些東西是你的網站或者APP當中,用戶想要立刻知道和獲得、想被提醒的?

          5、甚至幼兒都能輕松使用

          statusshop

          如果要給小孩子設計產品,那么它應該是什么樣子?你可能會更專注于色彩的使用,讓每一個區塊都可以輕松點擊,明顯的標簽,加上拼圖式的連接方式。

          所以,當我們在設計網站或者APP的時候,我們會說這個產品要足夠易用,那么怎么才算得上“足夠”呢?讓小孩子都可以輕松使用,這就叫足夠易用。換句話說,即使是不經常使用網站和APP的成人,也不會存在明顯的使用障礙。

          超大的設計元素和標簽是設計的關鍵因素。這些視覺線索是幫助用戶引導用戶的核心,是整體體驗設計中最重要的部分。大膽的色彩選擇,會鼓勵用戶點擊和探索。

          如果它足夠易用,用戶會繼續嘗試使用和探索。而難于理解操作不便的導航自然會被用戶所嫌棄。如果網站包含太過復雜的媒體和內容,那么不妨從一個設計簡單的首頁開始,幾個簡單的導航點擊將用戶引導到對應的位置。在深入到更復雜的頁面之前,用梳理清晰、簡單明了的分頁讓用戶感到舒適,這是帶來好的瀏覽體驗的不錯解決方案。

          6、輕拍(Tap)還是點擊(Click)?

          espns

          這一點要說的并不是設計問題,而是一個常見的開發代碼的問題。雖然Tap和Click兩者都能在點擊的時候觸發,但是在移動端網頁上使用Click事件 的時候,會有200ms 到300ms 的延遲,所以在移動端上最好替換為Tap事件。在進行響應式網頁設計的時候,一個事件從頭用到尾的錯誤出現得很普遍,但是有太多的移動端網頁在這樣的設計下會有明顯延遲,更惡劣的情況是無法識別,這樣會直接損害到整個頁面的易用性和功能本身。

          此外,移動端上使用 Tap事件的時候,它所對應的按鈕應當相對更大一些,便于小屏上進行交互。

          7、像用戶一樣思考

          justact

          我們一直在說:“像用戶一樣思考”。但是實際的情況往往是,我們很難走出設計者和開發者的思維方式,因為我們的思維方式壓根就和用戶不同,面對每一個交互、每一個元素的下意識反應是不一樣的。

          所以,還是同設計圈、開發圈和產品圈以外的人去聊聊吧,看看他們對于網站和APP的真實反應到底是怎樣的。你可能會在觀察中發現,他們對于產品、對于交互、對于界面的反應和你的預期完全不同。將用戶的真實反饋記錄下來,反饋給項目組,這樣可以幫你打造更好的用戶體驗,創造更優秀的產品。

          原文地址:designshack

          譯文地址:優設

          作者:Carrie Cousins

          優設譯者:@陳子木

          轉載請注明:學UI網》7個基礎的用戶體驗設計細節

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

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

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

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

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



          你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

          seo達人


          shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

          原文地址:站酷

          作者:孔雅軒LineVision

           

          轉載請注明:學UI網》你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

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

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

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

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

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



          在不同屏幕和設備上創建用戶體驗設計的8個步驟

          seo達人


          1. 確定核心用戶體驗

          每個產品都有核心的用戶體驗,這基本上是它存在的原因。它解決了人們所面臨的問題,而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗,就要問自己一個問題:“客戶需要完成哪些最常見和最重要的任務?”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如,Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何,此功能都能在每個設備上正常工作實現這一目的。

          Image title

                                       預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源: Techcrunch

           

          2. 定義產品的設備組

          盡管存在大量不同屏幕尺寸的設備,但絕對不能定位各個設備,可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是:

          移動手機

          平板電腦

          臺式電腦

          智能電視

          智能手表

          Image title

          不同的設備組在不同的上下文中提供不同的服務:用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如,手機主要用于微任務,并且具有較短的用戶會話。平板電腦主要用于內容消費,目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。

           

          3. 適應每個上下文使用的體驗

          確定產品的核心用戶體驗后,選擇一組你希望支持的設備組,你需要調整每個組的體驗(對于每個上下文的使用)。上下文的設計在不同設備組設計時尤為重要。

          第一,并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景,并設計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例,可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化:

          Image title

                                     用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。

           

          而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的:

          Image title

          Evernote了解移動環境:它利用設備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設置提醒)。

           

          第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入(移動手機和智能手機)的設備時,設計師會犯的幾個常見錯誤包括:

          小的點擊目標。點擊目標(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標尺寸。

          Image title

                                                圖片來源:UXMag

           

          將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距,因為間距有助于分離控件,并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

          Image title

                                                                                                按鈕之間的間距

          使用懸停狀態。但在觸摸屏上,沒有“懸停”。

           

          4. 最小屏幕設計

          歷史上,設計師一直從事大屏幕到小屏幕的設計工作,這意味著第一個也是主要設計是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時,我們通常面臨“廚房水槽”問題:許多功能被添加到產品中,特別是當涉及多個利益相關者時。這并不奇怪,,當你有很多不動產時,添加功能是比較容易。實踐經驗清楚地表明,最好使用移動方法進行設計,并通過與用戶相關的最小屏幕創建應用程序。

          當你首先設計相關屏幕的最小尺寸時,它會強制你決定最重要的。一段時間后,你將采用同樣的方法仔細選擇產品的其他版本,無論是電腦桌面設備,平板電腦還是電視。

          Image title

          在大多數情況下,手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

           

          5. 不要忘記大屏幕

          想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

          不只是縮小設計,使其適合那些大屏幕。充分利用你可以使用的額外空間。

          Image title

                                                                                                     圖片來源:Wikipedia

           

          確保圖像不會因為屏幕尺寸的放大而失去質量。

          Image title

                                                          左:低質量圖像。右:正確的分辨率。

           

          考慮大屏幕細節。每個設備組都有自己的不同。例如,電視屏幕的設計被稱為“設計10英尺體驗”,因為從沙發的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

          Image title

                                                                           電視的用戶界面元素應大于電腦桌面。圖片來源:Samsung

           

          6. 提供一致的體驗

          一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何,一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一:

          對未來與產品的交互設定期望,并建立用戶信心。

          一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

          你可以將它們視為相同體驗的方面,而不是將設計定制到越來越多的屏幕和設備中。例如,Google搜索應用在所有設備上提供相同的搜索體驗。

          Image title

                                                           當設計和功能一致時,用戶可以在他們選擇的設備上更快更有效地完成任務。

           

          7. 創造無縫體驗

          跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動,完成任務,或當他們從設備轉移到另一設備時,他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備,環境的變化或上下文的變化,并且可以依賴于設備良好的功能性和獨立于設備的易用性。

          Image title

                            大多數人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

           

          根據使用情況,你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例:你可以在Mac上設置播放列表,并在iPhone上即時播放,也可以開始聽iPhone上的歌曲,當你轉到電腦桌面時,你將被拍攝回到你在iPhone上。

          Image title

                                                                            Apple Music可以很好地處理多個設備的同步。

           

          8. 測試你的設計

          在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試,你可以在發布之前發現用戶體驗的問題并解決它。

           

          結論

          在設計多個屏幕和設備時,最好的策略是保持最終的用戶體驗。作為用戶體驗設計師,你必須評估產品的使用時間,位置和方式,以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕,用戶都希望在各種設備之間獲得流暢的體驗。

           

          原文地址:ADOBE BLOG

          譯文地址:UI中國

          作者:Nick Babich

          譯者:SKYUI

           

          轉載請注明:學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟

          藍藍設計建立了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国产综合