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

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

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

          首頁

          B端典型表格設計

          周周


          什么是表格?

          表格頁是公認為展示數據最為清晰和高效的形式,它的信息密度極高,就像是一個家庭衣柜,里面很多抽屜,我們需要把衣物整潔擺放收納,提高空間利用率。

          表格頁由三個部分,如下圖所示:

          一、數據查看

          數據查看可通過四個維度去自檢設計是否合理,分別為信息降噪、呼吸適中、高效易讀、詳情查看。

          1、信息降噪-內容

          通過對表頭內容刪減,我們一眼就可以看到表格的重要信息,從而幫助用戶能快速進行數據決策。因此,列數控制在7+-2,列表表頭展示更為關注的數據,更多信息在詳情中展示。

          另外,如果不同用戶想看到的信息側重不同,我們還可以做自定義設置項,讓用戶自己去選擇想要看到的表格內容。

          用最少字數給表頭做精簡,精簡到少一字不可。

          另外,當遇到少一字都不可的長標題,我們可以定義專有名詞,并且給一個解釋專有名詞的icon,便于第一次使用的用戶易于理解。

          2、 信息降噪-視覺

          去掉不必要的分割線和斑馬紋,用對齊和間距來區分列和行,可以鼠標滑上去給斑馬紋,增強交互體驗。

          分割線的樣式盡量輕盈,不要搶視覺,突出內容。

          去掉不必要的裝飾和顏色,為了防止視覺負擔,少用面性圖標,使用顏色保持克制,刪除如果不是點擊即可刪除,可以不用預警色。

          不要出現襯線字體,比如宋體,保持字體統一。

          3、 呼吸適中-單元格

          定義單元格高度。字號、行高、上下間距進行規范,這里有一個比較常見的規范,將字號設為N,那文字行高就是

          1.5N,上下間距為1.2N,單元格高度=內容高度+上間距+下間距。

          4、 呼吸適中-列寬

          我們將首列和尾列定義為N1,列與列之間定義為N2,隨著頁面收縮和拉伸,N1保持不變,N2自適應變寬變窄,這樣頁面會看起來會更均衡,這樣會顯得有呼吸感。一般定義一個最小值,當表格寬度大于頁面寬度時候,固定首尾列,左右滑動

          5、 高效易讀-對齊方式

          標題和內容一般采用左對齊,更高效的瀏覽順序,有長短不一的數字時,右對齊方便比較。操作項一般放在尾列右對齊。

          6、高效易讀-不做無意義留白

          當數據為零時就寫上“零”,當沒有數據時候就寫上“-”。比如開發取不到的后臺數據,我們就可以給“-”作為顯示,如果得到的數據就是零,我們也要讓它顯示出來。

          7、高效易讀-選擇合適的翻頁器

          選擇合適的翻頁器,利用分頁可以緩解服務器的加載壓力。無限瀏覽如果數據過多很容易使頁面崩掉,使用功能較為強大的翻頁器,每一頁默認10行以上,減少翻頁次數,增強用戶體驗,給出默認行數后,可以讓用戶自定義每頁行數,相比跨屏翻頁,向下滑動更便利。

          8、高效易讀-收起低頻操作項

          超過四項操作項收起來,可以用圖標指引下一步操作。關于哪些可以操作項可以折疊起來,可以與產品經理溝通收起低頻鏈接,或者埋點一個月時間查看點擊量也可以做出決策。

          9、高效易讀-默認行數

          當單元格內容長度不固定的時候,定義好內容的寬度和行數以及字數,超出顯示的字數可以用省略號代替。

          10、高效易讀-行的排序

          默認最近創建的在表格中第一行顯示,使用戶感知最新情況。也可以帶排序的表頭,讓用戶自定義排序。

          11、詳情查看-入口

          入口可以在操作里加詳情,也可以把發起人做成可以點擊樣式,跳轉詳情,并且可以避免視覺干擾,也就是降噪,當鼠標Hover上去時候,發起人才顯示出跳轉色,提示可點擊狀態。

          12、詳情查看-交互方式

          第一種是用彈窗的形式。第二種是第一種的延伸,當內容過多時候可以考慮抽屜樣式。這些交互的共同有點就是沒有脫離原頁面。當詳情內容較多且需要編輯時候,我們就考慮跳新頁面,使用新頁面進行承載。(這里有個細節,新開tab頁可以打開多個詳情頁,如果覆蓋原頁面則只能打開一個詳情頁,并且不能同時查看原頁面和詳情頁。所以我們要根據具體場景、業務需求去設計)

          二、數據過濾

          數據過濾由搜索,篩選和標簽頁構成。

          1、搜索

          搜索可分為模糊搜索和帶標簽的搜索。工作中常用的搜索為模糊搜索,優點是只要有相關的內容都會搜索出來,減少了精準搜索帶來的記憶負擔。缺點是容易把不相關的信息也帶出來,例如搜索手機號,把相關編碼也匹配了出來。帶標簽的搜索優點是搜索匹配精準度高。缺點是每次只能對單一條件進行搜索,當用戶要搜索的時候都要去切換選擇信息,多了一個步驟。另外,在實際工作中,可以通過埋點或者調研,如果搜索框搜索手機號頻率較大,我們可以把手機號設置為默認選項。

          2、篩選

          篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優點是空間利用率高,起到了很好的收納作用。缺點是無法直觀看到所有篩選項。平鋪篩選優點是操作效率高,篩選項一目了然,支持輸入更多篩選條件,可以自定義輸入。缺點是空間利用率低,不適合選項太多的情況。如果用戶點擊其中一個選項概率最多,我們就可以將點擊率高的一項作為默認項,然后選擇第一種下拉篩選框。如果用戶點擊每個選項概率相等,在空間允許情況下我們可以平鋪出來。

          當篩選項過多時,信息排序應是用戶目標優于業務邏輯,即排序應該考慮用戶的使用習慣。例如當用戶查找訂單時候,第一反應都是搜索框輸入,而一般通過價格過濾較少的應該放在末尾。

          當然,我們還有更多優化空間,當篩選項過多時,我們可以默認折疊低頻篩選項。折疊哪些篩選項還是得基于用戶習慣,可以通過數據埋點或者用戶調研得到用戶使用場景。

          當通過數據埋點或者用戶調研發現絕大多數用戶只需要用到搜索項,那么我們就可以只保留搜索框,其他選項全部折疊到高級搜索里面,當點擊高級搜索時候出現一個彈窗,既可以保留更多篩選內容,又可以使頁面不會看起來很擁擠。

          (當彈窗內容選擇完畢時候,高級搜索按鈕會呈現高亮顏色,未選擇更多篩選內容時候則呈現默認態。)

          3、標簽頁

          標簽頁是比較常用的數據過濾方式,切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時間、狀態的流轉有關。

          同樣我們可以通過數據埋點或者調研,將用戶最關注的選項設置為默認選項,減少用戶的選擇,提高用戶體驗。例如下圖,用戶更關注的是銷售中的商品,即將到店的客戶,以及即將發貨的商品,所以我們將這些選項作為默認項。

          三、數據操作

          數據操作從控制范圍可以分為單行操作、批量操作和全局操作。從操作屬性可以分為新增數據、編輯數據和刪除數據。

          當從產品那里拿來一個原型圖堆疊很多操作項,我們就可以根據控制范圍來區分判斷,從而明確擺放位置。單行操作可以放到表格里,批量操作根據親密性原則放在左上方,這樣可以離打勾矩形近一些,如果有利于用戶操作,也可以放在左下方。全局操作則可以放單獨一行,使得層級更加清晰。

          調整后,我們發覺雖然解決了多個操作放一塊的行為,但是層級還是不夠清晰,我們可以通過割裂板塊或者板塊顏色不同來調整,使得識別性更強。

          后記

          B端設計強調的是在好用的基礎上讓頁面變好看,所以更考慮用戶體驗。所有設計方式不局限與一種,只要操作上是順手,業務上是合理的,都是優秀的設計。如果一個頁面占據半屏都是篩選項,那么我們就得好好反思,因為所有篩選項不可能都是高頻操作,接下來就需要去做數據埋點并進行頁面優化了。另外,一張只有篩選項和表格的頁面,表格數據查看區域建議占整個頁面的百分之六十到百分之七十,這個時候瀏覽起來是比較舒適的。





          文章來源:UI中國    推薦:最多三分糖


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



          實戰經驗!如何做好網頁后臺的表單和表格設計?

          周周


          一個完整的后臺,由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成,下面跟大家分享后臺中的表格和表單的設計細節。

          當接到一個全新的網頁后臺項目時,首先確定設計風格,然后考慮這個后臺尺寸是做居中固定式,還是全屏響應式。全屏響應式的網頁設計,除非有規定,否則你可以選擇任意主流尺寸作為基尺寸來設計網頁。當然,不管選擇什么尺寸,都得基于做好一個后臺而開展工作。

          如何定義一個后臺是好的?領導說好,用戶說好,你自己也覺得好,那應該就是好的。大部分情況下產品已經定制好了每個功能模塊,UI上只需要對著原型加以美化,如果你是這樣做的,那么做出的東西一定會讓人覺得有問題但是又不知道問題在哪里,總是想讓你改。

          跟產品經理好好溝通,他們只是把功能模塊設計出來而已,并沒有設計這些模塊如何呈現,如何操作,如何結合,如何分類等等。交互上在后臺設計很重要,如果有專業的交互設計師,這些可以交給他們,畢竟,交互設計的收入比UI要高。然而在很多中小企業,產品原型直接給到設計是很常見的。當缺少專業的交互設計時,不要讓產品覺得我們只是按照他們的原型做美化,那跟美工有什么區別,不是看不起美工,美工的全程是美術設計工程師,很高大上的職稱,但是大家還是不太愿意這樣被稱呼吧,可能覺得頭銜套太大壓力會很大吧。事實上,UI本來就應該具備基本的交互技能。

          風格選定是很客觀的,需要經過產品經理/領導確認,如果他們很相信你的實力,你得說出足夠充分的理由,為什么要選擇這種風格,而并不只是看起來更高大上或只是個人喜歡。

          本人對后臺網頁設計的風格理解,大致可以分為三類:純白背景風,輕淡背景風,深色背景風。在后臺開始設計之前,你最好先選定其中一種風格,因為后面的所有元件的設計,都得基于這個風格來設計。剛剛好,在早些時間就已經發布了一個后臺的三種風格界面設計的作品,大家可以看出每個模塊的搭配和區分:

          純白背景風:線框/輕淡色(灰)背景(文字一般采用黑色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          輕淡背景風:純白色塊背景(文字一般采用黑色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          深色背景風:帶有透明度的純色背景(文字一般采用白色)

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          設計過程是很主觀的,所有設計參數都取決于設計師,但是要嚴格按照設計規范,并且讓所有設計看起來和用起來都是合適的。

          全屏響應式+輕淡色背景風是目前很主流的設計,也是很保守和安全的設計。對于輕淡色的HSB色值,可參考:H:0-360;S:0-5;B:90-97,當然沒有絕對大部分情況用的淺灰是最多的,如H0;S0;B93-95。

          以下將依據這個設計風格做例子展示。

          一個完整的后臺,由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成,我把這些稱為元件。這里主要分享的是構成后臺中的模塊和元件設計中的細節。下面重點跟大家分享表格和表單的設計。

          你應清楚的是

          為了避免在設計后臺時一個人在YY,請保持左跟產品溝通,右跟前端溝通,這點非常重要?;蛟S很多朋友在接到項目的時候不知道從何做起,會在網上尋找一些相關素材,然后會看到很多很炫的風格樣式,像是各種各樣的數據/圖形展示,各種各樣的統計曲線圖,還有各種各樣的展示動效,真想拖到自己要設計的后臺。

          如果合適當然可以,然而,很多情況下,統計分析一類的圖表設計,產品已經有很多現成套用的模板,你可以做的很炫,但前端不一定會按照UI效果圖來制作。從技術上來說,沒有前端實現不了的效果,你真的不必懷疑前端的實力。所以,保持設計跟前端的良好溝通,更能提高工作的質量和效率,并且,很多時候口頭/文字描述如何展示,是淡入淡出,還是彈出等等,前端是能理解的。通常地,做動效只是產品的一種展示,而并不是產品的本身,就當自己練手做動畫吧。

          簡潔又靈活的表格

          一個典型的表格(table)包含標題(表頭單元格th),內容(標準單元格td),通常都是一行行(tr)展示。設計時,應該將標題和內容區分,比如標題文字加粗/顏色加深/字號加大,或標題背景加深。因選擇淡灰背景風,一般用白色塊區分的原則,表格設計也盡量不使用線框,然而一行行的標準單元格如果都是白色的就不便于預覽,因此可以隔一行給背景設置比主背景更淡的背景。標題和內容一般有兩種對齊方式,居中對齊,居左對齊,整個站的列表只選擇一種對齊方式保持一致性。為了更簡潔顯示,我們還可以把每一列的間隔線去掉,但并不意味著間隔不存在。每一列的文字都不要貼邊,給前端標記間距(內間距padding)值,告訴前端鼠標點擊表頭單元格的空白地方仍然可以拖動該列的寬度,拖動寬度時保持每一列的最小寬度并且標題仍然完全展示。

          我們都遇到過這樣頭痛的問題,當列表字段太多,一屏無法完全展示,這時應該怎么做?給表格設計一個左右滑動的滾動條?如果內容真的太多并且已經確定,這也未嘗不是一種辦法,但是,重新設計過表格的字段或許會更好,這個時候應該跟產品好好溝通了。有以下方法:

          • 減少不必要的文字(如下圖中表頭的“全選”去掉)。
          • 縮略內容或者用…省略后面內容,鼠標經過出現更多內容(如時間可以縮略后面的時分,鼠標經過出現具體時間)。
          • 將不重要的列表隱藏,表頭右邊設計一個>>按鈕,點擊跳到隱藏的列表,點擊以后表頭左邊出現一個<<返回默認表格的狀態。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          因為每個列表的寬度是可以拖動的,我們不能決定其固定的寬度,但每一行的高度可以設置一個值,建議所有元件的高度、寬度、間距的數值參數都設置為偶數。

          如果列表的數據很多,一般都會設計page控件,但是也有一些列表會設計點擊加載更多,或者直接滑動滾動條加載更多。另外一種情況更常見,即設計固定高度的列表,一頁最多展示5/10/20…條數據,不管多少條,它的高度都是相對固定的。然而有時候數據太少只有一兩條,這個時候仍然要固定默認最多展示條數的高度,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          那么問題來了,在響應式設計當中,可沒有什么參數是固定的值,一般都是用百分比來設置。因為默認顯示的數據條數在任何寬度的情況下仍然保持不變,因此當列表寬度縮小時,內容出現換行會增加高度而拉高整個列表的高度。值得注意的是,當其中一條數據的內容有出現換行而又有其他數據沒有出現換行的時候,每一行的高度都應該按出現換行的且最高的高度保持一致,并且內容仍然保持垂直居中顯示。另外,當前端做成這種響應式的列表時,一般不再讓鼠標拖動列的寬度了。

          同一組數據的不同寬度顯示

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當寬度拖到第三種情況,按鈕也出現了換行,那每一行的高度都應該按照這個高度保持一致,即使有一些數據只有一個按鈕/地址并沒有出現換行,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當然,如果你不想讓內容出現換行,就可以用上面說的那三種方法來實現了。

          不要再說為什么別人做的表格那么高大上,明明自己做的效果圖還挺好看,為什么實現出來卻那么丑,當你了解這里面的各種參數和邏輯,并且很好的跟前端溝通,參照以上規則,不管再復雜的列表都可以做的得心應手并且得以實現。

          整齊并帶有交互功能的表單

          在后臺設計中,表單出現的頻率并不低于表格,甚至可以說幾乎所有類型的網頁都會出現。比如登錄注冊、信息錄入、搜索、選擇器等等。常見的表單有輸入框、普通按鈕、開關按鈕、單選框、復選框、下拉菜單。

          一個輸入框,通常有標簽名稱label、提示信息placeholder(輸入信息后提示文字消失)、初始值value(需手動刪除)。如果是必填表單,在適當位置(標簽的前后,輸入框后)加上紅色*號(或其他符號)。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          一些有字數規定的輸入框,可以增加一個剩余字段提示

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          事實上,在設計表單之前,我們就要先對表單的標簽進行優化,標簽字段盡可能的簡約。每個組的表單,標簽都必須是對齊的,輸入框/選擇框也應是對齊的。當這個組的表單的標簽字數較少并且較對應時,可以采用左對齊的方式,并且最長標簽的名稱離輸入框有margin值。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          另一種情況,也是更經常遇到的情況,當一組表單的標簽很多時,某些標簽字段不能更好的簡化,標簽的字段都不對應,這個時候可以采用右對齊的方式,這種方式更靈活。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當一組表單的標簽太多時,請跟產品溝通并對其進行分類。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          有些表單是有邏輯/順序的,比如地區的選擇、出生年月與生肖/星座的對應等等。例如,在選擇省份之前,市區是不可操作的,在UI上做灰度顯示不可操作。除了灰度代表不可操作,透明度也可以起到同樣作用,這種方式也可以運用在按鈕上。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          帶有識別功能的輸入框:

          當輸入有誤時,盡量避免彈出框提示,可以直接對輸入框設計不同的狀態顯示默認狀態、選中狀態、錯誤狀態、成功狀態。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          通過以上方式設計的一組信息錄入型的表單設計,如圖:

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          表單的設計可以單獨出一篇更詳細的文章,還有篩選/選擇器一類的表單,這里就不一一描述了。

          友好舒適的彈窗

          彈窗在后臺的出現頻率非常高,其強度一般分為三種,弱彈窗、強彈窗、重彈窗。字面上已經很好理解,輕彈窗,一般鼠標經過的時候即可出現而不用點擊,比如提示說明,顯示更多信息,鼠標移過后立即消失,它不會影響下一層(當前頁面內容)頁面的視覺效果和操作,因此這個彈窗通常會設計一個浮動帶有陰影效果的框。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          而強彈窗則是一個對話框,它暗示你必須對這個對話框進行操作后才可以離開,如確認信息、錯誤提示信息。而重彈窗更像是一個新的頁面,比如彈出的列表,詳情,表單等。這兩種彈窗通常是點擊某一個按鈕/經過某一個操作觸發的。這兩種彈窗一般會對下一層頁面的視覺做蒙版處理,比如加上一定透明的黑色/白色,給下一層頁面的內容做模糊濾鏡等等。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          當然,這三種彈窗式可以結合的,針對不同場景使用不同的彈窗設計這點非常重要,這直接關系到用戶體驗效果。你是否可曾遇到過使用一款產品時,動不動就彈窗,并且需要去點某一個按鈕才可以關閉。

          任何一種場景在設計上都可以得以解決,什么情況下使用什么彈窗設計,或者有時候必須使用強彈窗,但是又不想讓用戶操作關閉,我們可以設計幾秒后自動關閉,或者點擊彈窗以外的區域直接關閉。

          彈窗還有兩種主要的表現形式,一種是頂部有關閉按鈕,另外一種是直接點擊確認按鈕或者讀秒關閉。在保持規范性的同時,盡量避免按鈕功能的重復,比如一個提示信息必須讓用戶點擊確認按鈕才可以關閉,那么就使用沒有頂部關閉按鈕的設計。對于重彈窗,一般都會采用頂部有關閉按鈕的設計。

          實戰經驗!如何做好網頁后臺的表單和表格設計?

          彈窗并不是后臺的專利,它在移動端更高頻率的出現,例如活動頁面的彈窗,趣味性就顯得更重要了。

          總結:

          這篇文章主要跟大家分享的是,當開始網頁后臺項目設計的時候,保持跟產品和前端的良好溝通。確定風格后開始設計,并分享了3個主要的點:

          • 制作靈活又簡潔的表格
          • 設計整齊并帶有交互功能的表單
          • 選擇友好舒適的彈窗

          后臺還有其他元件設計,歡迎大家共同探討。




          文章來源:優設網    推薦:程遠


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



          超多案例!B 端后臺類產品的圖表設計思路及方法

          周周

          隨著大數據的興起,數據價值的不斷挖掘,圖表作為數據呈現與分析的有效手段,正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考:如何讓圖表清晰的傳達信息,同時帶來美觀的視覺感受。

          為了達到清晰傳達和視覺美觀的目標,我們結合實際項目,進行大量探索及思考,梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法,涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          圖表視覺層級

          圖表能夠承載大量數據信息,同時視覺元素較多,如果只是憑借設計師的審美喜好進行視覺設計,沒有整體信息讀取考量,可能會導致重要信息未能凸顯,降低用戶讀取效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          為清晰傳達信息,進一步提升讀取效率,我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度,將圖表元素分為三類,分別為“底層元素”、“中層元素”和“頂層元素”,并依據不同視覺強度分別設計三類元素。底層元素最弱,頂層元素最強。通過這種方法,梳理圖表元素的前后關系,能夠清晰把握元素視覺層次,保證信息傳遞效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          1. 底層元素設計

          在各類圖表中,我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾,最大程度突出主圖形,底層元素全部使用淺灰色進行設計。我們發現,當元素與背景顏色的明度對比在 1.2:1 時,人眼較難看到元素;當對比度在 2.0:1 時,視覺強度過強,易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試,最終確定元素與背景對比度在 1.6:1 左右,視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀,只在需要查看時可以被發現。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 中層元素設計

          中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素,是圖表中表達數據的關鍵元素。與底層元素相比,中層元素采用更低明度與更高飽和度的數據色來表現,使元素從頁面中凸顯出來,保證可讀性。同時在樣式上適當加入漸變、描邊等樣式,豐富視覺層次,帶來美觀的視覺感受。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 頂層元素設計

          我們把頂層元素定義為圖表高亮信息,內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出,使用深灰色、強調色等強對比度樣式,并輔以動畫、投影等手法保證明顯的視覺強調效果,保證頂層信息最有效的傳達給用戶。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          4. 最終效果

          通過層級梳理,并綁定元素重要程度和視覺強度的方法,設計后圖表主次信息均按重要程度進行對應視覺強度的展示,讓用戶能夠在第一時間接收到最重要的信息,提升信息讀取效率。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          圖表排版設計

          圖表排版是指各元素在圖表中的尺寸及布局等,對于 B 端后臺類產品來說,不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗?我們經過大量討論推敲,梳理出一套針對 B 端后臺類產品的排版規則,力求保證用戶圖表的使用體驗。

          1. 圖表尺寸

          圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大,例如巨量數據的圖表擠在名片大小的區域例顯示,這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景,并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸,針對不同尺寸優化圖表的信息展示密度,以達到高效讀取信息的目的。

          “迷你圖”尺寸最小,舍棄了 Y 軸等不必要信息,利用小面積展示最關鍵的圖表信息,并控制數據密度,保證信息高效讀取。

          “中號圖表”尺寸受限,限制坐標軸刻度數量和數據的密度,例如曲線圖數據點不高于每 4 像素 1 個數據點,Y 軸坐標刻度不超過 5 個,以確保信息密度不過載,這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。

          “大號圖表”尺寸最大,不限制數據信息密度,給予最全最詳細的展示,這類尺寸通常用在數據詳情頁等詳細分析場景中。

          最后考慮到多圖表混合排列時,餅圖、地圖等大面積填色圖表,相較折線圖等描邊型圖表,視覺感受更加膨脹。我們縮小了填色類圖表的實際高度,保證多種圖表混合排列時,視覺感受的均衡。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 坐標軸

          坐標軸在圖表中出現的頻率較高,那么坐標軸常見的設計問題有哪些呢?

          第一是橫縱坐標軸的刻度出現過密情況。

          如果坐標軸所承載的是連續數據(連續數據指可量化的,連續不斷的,在區間內可任意取值的數據,如時間、金額、人數等),設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據(離散數據指不可量化的,無關聯的,不可在區間內任意取值的數據,如分類、軟件版本、省份等),可采取增加坐標軸縮放功能解決。

          第二個常見問題是刻度的說明文字過長。

          如果是 X 軸(橫軸)文字過長,除了在可控范圍內減少刻度,還可采取文字傾斜 45°~90°的辦法(如文字全部為中文,可用豎排代替傾斜 90°),緩解信息過密看不清的情況。

          如果是 Y 軸(縱軸)文字過長,需聯合研發一起調整數據的單位,比如把“元”調整為“百萬元”。

          如果不能調整,那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫,需要提前預估刻度文字長度并預留出來,否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫,則不必提前處理,圖表庫會自動按刻度長度進行整體調整。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 圖例

          圖例作為圖表中不可或缺的部分,在各類圖表庫中位置不盡相同,由于不同圖表樣式差異很大,圖例的位置需整體考慮并適當布局擺放,但在同一產品或頁面內,過于隨意的擺放圖例,會導致頁面統一性較差,同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業產品矩陣,作為面向用戶的產品集合,產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題,我們基于業務特點,針對 B 端商業產品矩陣制定了圖例布局指導原則。

          我們以提升屏幕信息密度為目標,分析不同場景的頁面排布,制定了頂部和右側兩種較為寬松的指導原則,供設計師在沒有明確的更優方案時選用。

          當圖表是左右兩端對齊的類型,例如折線圖、柱狀圖時,建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布,減少占用空間。當圖表本身左右都有空余空間時,例如餅圖,建議將圖例放置于圖表的右側。也能夠節省頁面的空間。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          數據色板設計

          色板作為常見的數據表達手段,能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試,梳理總結出圖表色彩的兩個關鍵維度:辨識度與統一性。既需要顏色間突出強烈可清晰辨別,又需要顏色整體能形成統一風格,以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性,是我們遇到的難題。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          1. 辨識度

          辨識度在圖表中有兩方面:顏色與頁面底色的辨識度,各顏色之間的辨識度。對于第一種,我們采用控制顏色的明亮程度來確保色彩辨識度,尤其對于黃色、青色等本身較亮的顏色,降低顏色的明度,確保在淺色背景下顏色可辨識。

          對于第二種也就是各顏色之間的辨識度,通過實驗發現單純的顏色色相變化,例如紅色與橙色的區分,人眼不容易分辨。所以采用了色相變化+明度變化的方法,即深紅色與亮橙色,深藍色與亮紫色等,這樣用戶能在第一眼就明確分辨,保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中,運用歐幾里得距離公式測算顏色間的距離長短,來衡量各顏色間色差數值。顏色間距離越遠代表色差越大,利用數據輔助衡量辨識效果。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          2. 統一性

          色彩統一性的作用在于確保圖表整體風格一致,色彩搭配舒適,從而帶來美觀、統一的視覺感受。為達目的,我們首先提煉商業產品設計風格為明亮、強對比,其次把設計風格轉化為色彩數值。經過實驗,把顏色明度限制在 50%-70%,把飽和度限制在 75%-85%,并在區間內不斷波動。這樣既保證了色彩視覺感受的統一,各顏色間又能夠有清晰的辨識度。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          3. 顏色量化與工具

          量化顏色,將色彩轉化為數值,利用數值來驗證設計師的「感覺」,能夠保證方案合理性,保證設計質量。但通過嘗試,我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料,我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區別于傳統的 RGB 或 HSB 模式,它能夠將人眼對顏色的感知精確的量化為數值,例如黃色相比藍色明度更高,都能如實的反饋到數值上。也由于此特性,HCL 模式在誕生距今不到 20 年間,已被一些先鋒設計師用于數據可視化的呈現中。

          超多案例!B 端后臺類產品的圖表設計思路及方法

          但是 HCL 作為小眾色彩模式,目前設計軟件鮮有支持,造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題,我們已初步完成智能配色程序,只需輸入品牌色,就能自動生成圖表色版,并在風格上與品牌色匹配,達到整體色彩的統一。我們也將一套調配好的色板及 HCL 實用小工具附在文末,幫助大家直觀的查看和使用 HCL 模式顏色。

          結語

          數據價值就像不為人知的寶藏,隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙,是發掘數據價值的強有力武器。通過對圖表的不斷探索優化,我們希望能夠最大化數據的價值。通過圖表,讓數據最直觀的展現;通過圖表,讓其背后的規律浮出水面被人探知;通過圖表,讓 B 端不再有難懂的數據。

          附:色板及 HCL 工具

          超多案例!B 端后臺類產品的圖表設計思路及方法


          文章來源:優設網    作者:百度MEUX


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


          數據可視化設計必修課(一):圖表篇

          周周


          圖表是數據可視化中最常用的一種表現形式,一定要吃透它。

          隨著互聯網數字化越來越完善,數據可視化這個詞的使用頻率也越來越高,而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是后臺設計,都離不開圖表的使用。然而關于圖表類相關的資料太零碎了,不成體系,對于初學者非常不友好,本篇文章我從圖表的祖輩開始,把它都給挖了出來,希望對你有幫助。

          什么是圖表

          圖表的定義:可直觀展示統計信息的屬性,對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構,是一種很好的將對象屬性數據直觀、形象地可視化的手段。

          英文叫法:Chart。

          用戶對圖形的敏感程度遠遠大于文字,所以產品就需要把數據信息可視化,用簡單的圖形表示出更多的信息量,而圖表是數據可視化中最常用的表現形式。

          接下來我們來介紹圖表的具體構成及元素解析。

          圖表的構成

          圖表是由:標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成,每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內容即可。

          數據可視化設計必修課(一):圖表篇

          圖表元素解析

          1. 標題

          顧名思義,標題就是圖表的名字,標題是必不可少的元素。標題的內容一定要言簡意賅,不要太長,能兩個字寫清楚絕對不用三個字。

          標題的常用位置有 3 個:左上角、頂部居中、底部居中。

          數據可視化設計必修課(一):圖表篇

          一般情況下,標題字號 / 色值要突出一些,用戶第一眼看到 chart 的時候,要清晰的看到這個圖表是做什么的。

          特殊情況下,如果需要對標題有額外解釋的話,兩種展現形式:

          • 增加提示圖標;
          • 增加提示語。

          數據可視化設計必修課(一):圖表篇

          2. 圖例

          圖例的組成

          顏色、名稱、數值、單位。

          數據可視化設計必修課(一):圖表篇

          圖例的展現形式

          圓形、開關、矩形、鼓包線、實線、虛線。

          數據可視化設計必修課(一):圖表篇

          圖例的位置

          從左至右、從上至下。

          數據可視化設計必修課(一):圖表篇

          圖例的作用

          • 標識出每個顏色所代表的的類別;
          • 開啟 / 隱藏數據顯示;
          • 圖例顯示的數值一般為當前值。

          圖例的顏色選擇

          同一組圖例中,不要出現相近的顏色,否則在圖表顯示中分不清彼此。

          數據可視化設計必修課(一):圖表篇

          產品使用中,要規范圖例顏色使用,一般分為兩種:

          • 常用的圖例顏色(顏色本身代表著行業中的某種含義),此類顏色需要是固定色值,無論哪個 chart 中,都是這個顏色;
          • 無特殊含義的圖例,可以規范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。

          圖例過多時如何展示

          • 如果圖例可整合前提下,展示主要圖例 / top n 圖例,其他的圖例做整合,增加個詳情頁來展示完整的;
          • 如果圖例不可整合/省略,則需要給出足夠的展示空間。

          共用圖例

          如果多個 chart 的圖例一樣,可進行合并,減少冗余圖例。

          數據可視化設計必修課(一):圖表篇

          圖例省略

          如果 chart 中只有一個圖例的話,可省略。

          數據可視化設計必修課(一):圖表篇

          圖例名稱限制

          根據不同使用場景,為了更好的展示效果,要給圖例名稱設置一個最大值,超過最大值后省略展示。

          數據可視化設計必修課(一):圖表篇

          3. 坐標軸

          坐標軸分為 X 軸和 Y 軸,常規情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

          數據可視化設計必修課(一):圖表篇

          刻度值代表的意義

          • 時間點:12:00;
          • 時間段:周一、周二。

          數據可視化設計必修課(一):圖表篇

          坐標軸使用規則

          是否帶單位:

          • 如果刻度值的含義明確的情況下,可以不用帶單位,比如:2018、2019、2020…;
          • 如果刻度值含義有歧義的情況下,必須加上單位(具體是統一一個位置加單位,還是每個刻度值上加單位,則需要根據場景來判斷)。

          數據可視化設計必修課(一):圖表篇

          對齊方式(常用,但非必須):

          • X 軸:居中對齊;
          • Y 軸:右對齊。

          數據可視化設計必修課(一):圖表篇

          刻度值過多時如何顯示:

          • 可選擇規律性省略刻度名稱;
          • 傾斜文字以顯示更多的文案

          數據可視化設計必修課(一):圖表篇

          刻度值的選用一定要是同一個規律,禁止同距離的刻度值代表不同數據。

          刻度點的樣式使用規則:

          刻度的線朝外。

          數據可視化設計必修課(一):圖表篇

          4. 數據展示

          數據的展示是 chart 中最為明顯的地方,可以說如果只顯示一個元素的話,就是他了。

          數據展示的使用規則:

          • 邊界要清晰,不可虛化;
          • 多個數據同時顯示的時候,要保證每個數據都能清晰的看到,可以采用透明度來保證所有數據的顯示。

          5. 網格線

          網格線的作用

          呼應坐標軸,美觀度。

          網格線的使用規則

          • 線的顏色要弱化,不要喧賓奪主;

          數據可視化設計必修課(一):圖表篇

          網格線使用實線居多,盡量不用虛線。

          使用場景

          橫、縱、橫縱結合、無網格線。

          數據可視化設計必修課(一):圖表篇

          6. 提示信息

          通常情況下,提示信息用來標識出 chart 中重要點的數據信息,需要注意的是:重要信息盡量簡化,信息量不要太大,言簡意賅就好。

          數據可視化設計必修課(一):圖表篇

          7. 水位線

          根據不同產品的使用場景,有的時候會用到閾值,當達到某個閾值后,就會觸發某種聯動。這個時候就需要有個水位線了,它起到警示的作用。

          形式有兩種,實線和虛線,顏色的選取則取決于產品的警告級別。

          水位線可以是一個,也可以是多個,視情況而定。

          8. 時間軸

          時間軸可以靈活地調節刻度值的上下限,從而更精確的看到自己想看的數據。

          時間軸的功能及限制沒有不是很復雜,所以就不過多解釋了,需要用的話就用。

          圖表使用建議

          1. 折線圖 line

          定義

          折線圖可以顯示隨時間(根據常用比例設置)而變化的連續數據,因此非常適用于顯示在相等時間間隔下數據的趨勢。折線圖是通過線條的波動來表示數據的波動,主要體現的是數據隨著時間的推移而變動的圖表。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于觀察一段時間內數據波動的浮動變化,比如:一天內內存的使用情況。

          使用建議

          Y 軸刻度值選擇要合理,當前顯示的數據波動要最大化的顯示;

          數據可視化設計必修課(一):圖表篇

          重要節點可以單獨做重點標注;

          數據可視化設計必修課(一):圖表篇

          數據拐點要平滑,不要太鋒利。

          2. 面積圖 area

          定義

          面積圖和折線圖比較類似,區別在于面積圖把數據區域做了個面積劃分,讓數據的顯示更加清晰。

          數據可視化設計必修課(一):圖表篇

          使用場景

          面積圖展示盡量不要超過 3 個圖例,否則數據多的情況下,數據的展示會特別亂,影響觀看。

          使用建議

          面積區域要和折線的顏色用統一色系,不要換色系;

          數據可視化設計必修課(一):圖表篇

          面積區域一般要比折線顏色淺一些,這樣視覺上更加讓人舒適;

          數據可視化設計必修課(一):圖表篇

          如果多條數據情況下也用面積圖的話,面積區域盡量使用透明度,否則有的數據會被遮擋看不到。

          數據可視化設計必修課(一):圖表篇

          3. 柱狀圖 bar

           定義

          柱形圖,又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值(不同時間或者不同條件),只有一個變量,通常利用于較小的數據集分析。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 柱狀圖分為橫向和縱向兩種展現形式;
          • 用于在同一維度下不同數據的對比,用柱狀圖更能清晰的對比出數據的差異化。

          使用建議

          柱狀圖的厚度不要是固定值,要做成自適應來應對不同尺寸的分辨率顯示;

          數據可視化設計必修課(一):圖表篇

          厚度與間距的對比要合理設計;

          數據可視化設計必修課(一):圖表篇

          可使用小圓角,千萬不要用大圓角,太丑了……

          數據可視化設計必修課(一):圖表篇

          如果想要強調某個柱子的話,可以進行顏色區分,但是柱子顏色不要超過 2 個(同一維度下);

          數據可視化設計必修課(一):圖表篇

          如果想要在柱子上顯示數值的話,使用建議(下面的順序為推薦順序):

          • hover 的時候出現數值;
          • 數值默認在柱子上顯示;
          • 數值在柱子頂部 / 右側顯示。

          4. 餅圖 pie

          定義

          餅圖僅排列在工作表的一列或一行中的數據,它是有一個總和數據,方面查看每個類別分別占總數據的百分比的一種圖表。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 常用于做總結、年度匯報等;
          • 所有數據相加必須是 100% 才可用。

          使用建議

          • 每個數據要使用單獨的顏色來表示,不要有相同顏色;
          • 餅圖中不能有負值;
          • 圖例數量沒有限制,但是如果遇到可以合并的圖例,可以進行合并;
          • 餅圖的開始點為 0/12 點位置。

          數據可視化設計必修課(一):圖表篇

          5. 環形圖

          定義

          環形圖是由兩個不同大小的圓疊在一起,切割中心部分得到的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          • 環形圖有一個獨有的特點,就是可以在中心圓的位置突出某一項指標的數值。
          • 它常用于做數據的監控,監控某一類指標是否正常。

          使用建議

          • 環形圖的開始點為 0/12 點位置;
          • 環的粗細要合理,不要太粗和太細;

          數據可視化設計必修課(一):圖表篇

          環形圖的兩個圓要從中心對齊。

          數據可視化設計必修課(一):圖表篇

          6. 堆疊面積圖

          定義

          堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于不同資源中流量 / 容量的使用。

          使用建議

          • 不要有重復的顏色;
          • 盡可能的把數據量按大小的順序,由下至上的堆疊。

          7. 堆疊柱狀圖

          定義

          堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。

          數據可視化設計必修課(一):圖表篇

          使用場景

          常用于不同維度下相同幾個指標的展示。

          使用建議

          • 不要有重復的顏色;
          • 按重要等級由下至上排序。

          8. 非常用圖表

          上面介紹了常用的圖表的使用建議,但是圖表類型遠遠不止于此,還有很多非常用的圖表類型,這次我先給大家列出來,如果大家感興趣的話,我后面再寫一期冷門圖表的使用建議:

          雷達圖,散點圖,K 線圖,盒須圖,熱力圖,旭日圖,桑基圖,樹圖,漏斗圖,儀表盤。

          數據可視化設計必修課(一):圖表篇

          常用的圖表開源網站

          1. echartsecharts

          網站鏈接:https://echarts.apache.org/zh/index.html

          數據可視化設計必修課(一):圖表篇

          2. highcharts

          網站鏈接:https://www.highcharts.com.cn/

          數據可視化設計必修課(一):圖表篇

          3. antv

          網站鏈接:https://antv-g2.gitee.io/zh/examples/gallery

          數據可視化設計必修課(一):圖表篇

          總結

          Chart 是數據可視化必修課中最重要的模塊之一,不可忽略。只有了解每個 chart 的定義及使用場景,才能在產品中用到最合適的那一個。



          文章來源:優設網    作者:Luck gg


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



          熱門的手機用戶輸入設計模式

          ui設計分享達人

          對于任何手機應用程序,如果沒有來自用戶的一些初始和正在進行的輸入,就不會發生任何事情。因此,手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

          雖然手機應用程序以及使用它們的用戶通常是獨一無二的,但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。


          用戶輸入設計的6個目標


          在我們深入研究模式之前,了解用戶輸入設計的六個主要目標是很重要的:

          1. 選擇合適的輸入和資料登錄方法

          2. 減少輸入量

          3. 設計有吸引力的數據輸入屏幕

          4. 使用驗證檢查來減少輸入錯誤

          5. 設計所需的輸入文檔

          6. 制定有效的輸入控制


          模式的概述


          在記住以上設計目標的前提下,下面是我們在將本文中詳細介紹的設計模式的概述,在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

          1.智能鍵盤
          2.默認值&自動完成
          3.立即沉浸(或“惰性注冊”)
          4.操作欄
          5.社交賬號登錄
          6.巨大按鈕
          7.滑動操作
          8.通知
          9.顯性控件
          10.可擴展輸入
          11.撤銷


          1.智能鍵盤


          Facebook記事本,Android聯系人


          問題
          用戶希望快速輸入信息。


          解決方案
          當用戶點擊應用程序中允許輸入信息的部分時,給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕,或者多走一步來訪問鍵盤。這不僅方便了用戶,而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段,這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。


          例如,在地址簿或撥號器中輸入電話號碼時,用戶不需要完整的鍵盤。當他們點擊這些字段時,數字小鍵盤就會彈出,而不是整個鍵盤,這樣就減少了不必要的按鈕,簡化了操作過程。類似地,點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤,其中“/”和“。com”按鈕顯示在空格鍵旁邊,而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型,你的UI可以根據用戶當前嘗試的操作進行調整。


          2.默認值&自動完成

          Skype, Flightboard


          問題
          用戶希望快速完成操作。


          解決方案
          通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示,預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配,比如在谷歌Play Store搜索中,通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如,Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看,這是有意義的,因為他們不習慣定期輸入這些信息,但在這種情況下,這種匹配很重要,因為Skype是一個國際電話應用程序。


          另一種實現方法是保存用戶輸入的最后一項,并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如,Flightboard在搜索框下面列出了以前使用過的位置,以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式,在搜索方向時自動輸入用戶當前位置,為用戶節省幾次點擊,因為這是最常見的情況。


          3.立即沉浸(或“惰性注冊”)

          Wunderlist


          問題
          用戶希望在注冊之前先嘗試一下。


          解決方案
          越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。


          記住,他們一次只能做一件事,而且測試每個新產品的時間有限。隨著應用程序的日益專業化,在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情,而且會降低甚至是適合的訪問者的注冊率。在積極的方面,通過讓他們立即體驗你的產品,他們更有可能被吸引,因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好,因為它向用戶展示而非告訴他們應用程序如何工作。


          對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說,允許延遲注冊是沒有意義的,但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下,注冊會帶來一些額外的好處,比如在Wunderlist中進行跨設備同步,或者在Houzz中創建一本想法書,這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意,但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。


          4.操作欄

          Facebook Paper, Behance


          問題
          用戶希望快速訪問常用的操作。


          解決方案
          從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用,如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航,產生了更簡單的應用程序視圖,用戶可以專注于一級和二級操作,而不是二級導航。常見的操作有:在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI,還可以通過專注于與用戶相關的重要操作清除一些混亂。


          5.社交賬號登錄

          undefined

          Beats Music, Flipboard


          問題
          用戶需要一種更簡單的注冊和登錄方式。


          解決方案
          整合社交賬號登錄方法,允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合,同時,你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商,根據平臺和目標受眾的不同,你可以在你的應用程序中提供所有這些或其中之一,而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時,會自動填充數據), 同時,通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息,讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX,因此這種模式正在成為一種期望。


          6.巨大按鈕

          Tinder, Shazam


          問題
          用戶希望立即知道他們可以采取哪些操作。


          解決方案
          理想的觸屏點擊目標大小可能是72 px,但是一些應用程序,像Tinder,也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置,無論你在做什么,你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值,因為在這些應用程序中,用戶需要執行的操作非常有限,因此更有理由讓他們在各種情境中更容易地執行這些操作。例如,Shazam是用來看電視或聽音樂的,它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說,巨大的按鈕是一個巨大的改進。


          7.滑動操作

          Carousel


          問題
          用戶希望關注特定的內容。


          解決方案
          允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如,谷歌中的“卡片”現在可以在你不需要的時候被滑走,以清理雜物;類似地,Tinder中的配置文件可以向左或向右滑動,以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里,滑動手勢被用于一項操作,而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式,比如Carousel,它可以讓你通過將照片滑動到一邊來瀏覽多張照片,也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作,允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。


          8.通知

          LinkedIn, Facebook


          問題
          用戶希望了解他們應該瀏覽的新活動或操作。


          解決方案
          通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如,在標簽上放置一個計數徽章是由iOS推廣開來的,但現在這也可以在許多其他應用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做,但它在時間軸圖標的頂部還有一個小點,以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點,當新聞推送中出現新條目時,它會彈出一個小窗口。


          9.顯性控件

          Secret


          問題
          用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。


          解決方案
          清理雜物,讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外,從而節省一些寶貴的空間。例如,Secret使用手勢而不是可視控件。向右滑動,就會出現一個動作菜單,這是我們前面介紹過的折疊模式的簡化版。在創建內容時,用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案,或者在使用圖片時,可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰,你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像,就會出現一個按鈕,用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。


          Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換,只要你選擇了你想要的乘車類型,就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式,每當我在做五件事的同時還想搭個便車,同時還要確保Uber不會用峰時價格來騙我的時候,它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。


          10.可擴展輸入

          YouTube


          問題
          用戶希望關注內容,而不是犧牲屏幕空間給控件。


          解決方案
          設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如,YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間,當用戶點擊這個圖標時,它就會展開成一個搜索欄。


          11.撤銷

          Gmail, Chrome


          問題
          用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作,但是可以選擇恢復意外操作。


          解決方案
          為用戶提供一個簡單的方法來撤銷他們的操作,而不只是要求他們事先確認。在某些情況下,某個操作可能會導致不方便或數據丟失,例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說,撤銷功能也很強大,他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作,就能更好地控制局面。在解釋將要發生的事情時,確認彈出窗口可能很有用,但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下,最好是讓開,同時提供一個安全網絡,以防出現錯誤。


          獲取用戶的輸入
          時刻記錄你應該從用戶那里獲得輸入的位置,他們是否曾經查看過這些輸入區域,他們使用這些輸入控件的頻率,他們從哪里來,又從哪里進入應用程序(即用戶流),等等。不斷地重新安排、重新排序、調整大小和調整這些控件,直到你獲得更多所需的操作。當然,當用戶能夠提供輸入時,要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

          文章來源:站酷  作者:馬克筆設計留學

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

          聊天機器人的用戶體驗

          ui設計分享達人

          今天的聊天機器人遠非“智能”,它們引導用戶通過簡單的線性流程,我們的用戶研究表明,每當用戶偏離這些流程時,它們都會遇到困難。

          聊天機器人是智能助手的可憐“親戚”。


          定義:聊天機器人是一種特定于基于文本的對話界面,支持用戶完成有限的任務。


          在其他地方,我們討論了智能助手的6個特性:語音輸入、自然語言處理、語音輸出、智能解釋、代理和前面所有特性的集成。聊天機器人只需要具備這兩種屬性:自然語言處理和智能解釋。換句話說,聊天機器人應該能夠以自然語言接收查詢,并正確地理解和解釋它們(然后執行它們)。


          在當今世界,至少有三個不同的因素推動著聊天機器人的發展和普及。首先,人們希望通過用機器人取代人工代理人來降低客戶服務成本。其次,像微信這樣的基于對話的系統的成功,提出了聊天機器人作為企業和服務的交互渠道的想法,旨在補充現有的渠道,如移動網絡和移動應用程序。最后,Alexa和Google Home等語音智能助手的流行,促使許多企業在較小規模上效仿它們。


          這些因素映射到今天可用的兩種不同類型的聊天機器人:

          在企業與客戶之間的聊天交互中,客服機器人會接管部分人工負載。這類機器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


          交互機器人的目的是提供與業務交互的額外通道,而不是用于客戶服務。例如,Domino的批薩機器人允許用戶訂購批薩;來自Progressive公司的Flo可以提供一份汽車保險報價。這種交互機器人可以在各種平臺上使用,其中最著名的是Facebook Messenger。(其他平臺包括Twitter和Slack。)然而,它們也可以存在于應用程序(美國銀行的Erica)中,或者通過短信(Capital One的Eno)提供服務。

          UPS.com網站使用聊天機器人來回答客服問題。

          Kiehl ‘s Messenger聊天機器人:用戶可以通過在“發送消息”文本框中輸入文本或選擇屏幕上顯示的選項之一(發送位置或郵政編碼;文本輸入框下面的主菜單選項)。


          雖然客服機器人通常是純文本的,但交互機器人將文本與可視化UI元素結合起來作為交互方法。


          研究


          為了了解聊天機器人的可用性,我們招募了8名美國參與者,讓他們在移動設備(5名參與者)和桌面設備(3名參與者)上執行一組與聊天相關的任務。其中一些任務涉及為客戶服務而與人或機器人聊天,另一些任務則針對Facebook Messenger或基于短信的聊天機器人。


          對機器人的態度


          一般來說,人們對機器人的態度從中立到略微積極?;訖C器人是一個相當模糊的渠道:在我們的美國研究中,大多數參與者之前從未與此類機器人互動,他們也不知道它的存在。相比之下,微信公眾號頁面通常是這些機器人的復雜版本,我們的中國參與者對它們很熟悉。我們的一些參與者驚喜地發現了這個互動渠道,其他人則認為與其他傳統渠道如網絡或移動應用相比,它并沒有帶來足夠的價值。


          人們普遍認為客服機器人不如人類代表有幫助,但我們的參與者也認為它們有一些優勢。最重要的優勢是速度:與人類聊天通常需要很長的等待時間(要么在隊列中,要么在對話開始之前,要么在人類為客戶的問題尋找解決方案時),而機器人可以是即時的。另一方面,人們覺得與真人接觸表明公司關心客戶:“真人真的很好。他們賣給你一件昂貴的物品,所以他們必須在代理人身上花更多的錢?!绷硪粋€人說:“如果你有一個人(負責客戶服務),那意味著你足夠關心;如果你有一個機器人,那么·你應該有一個真正好的機器人?!?


          交互機器人通常很容易被識別為機器人,但客戶服務機器人很難識別。有些企業并不總是提前向客戶透露他們正在與機器人進行交互。我們認為這是一個錯誤。我們的研究參與者很高興看到企業使用機器人是透明的,因為他們可以調整自己的期望和語言。例如,當用戶意識到他們是在和機器人說話時,他們往往會更直接,使用基于關鍵字的語言,并避免禮貌標記。這種類型的語言通常比通常在正常對話中使用的復雜、間接的語言更成功。


          用于交互聊天機器人UI


          交互樣式
          文本和鏈接/按鈕都可以用于向交互聊天機器人輸入信息。它們的目的略有不同:

          • 預先確定的鏈接和按鈕避免了用戶輸入。這些通常顯示在一個輪播列表中,可以包括圖像。人們喜歡有這些選項,甚至希望它們成為常用輸入。

          • 文本允許用戶在選擇他們想問的問題類型方面有一定的靈活性,并允許他們偏離聊天機器人(通常過于嚴格)的腳本。


          這兩種輸入機制都很重要,應該同時存在。


          當機器人不允許用戶選擇選項,而是要求用戶輸入時,用戶會抱怨。例如,一個參與者被Booking.com的機器人惹惱了,因為它不允許他選擇日期,他必須輸入日期。在輸入“感恩節”之后,他說:“應該有一些明顯的東西來預先填充它。選項應該預先填充——手動輸入很乏味。我應該可以點擊按鈕才對?!?

          人們更喜歡選擇一個選項(左邊是Domino的聊天機器人),而不是輸入冗長的文本(右邊是Booking.com)。考慮為最常見的輸入創建按鈕。


          一些機器人完全取消了輸入文本的選項,迫使用戶選擇屏幕上顯示的選項之一。這種類型的設計使機器人類似于一個網站,并限制了用戶可以在系統內探索的路徑。

          Car Dealer聊天機器人不允許用戶在選擇庫存選項后輸入自由文本。


          當鏈接和按鈕被清晰地標記時,它們的效果最好,人們希望能夠點擊交互機器人顯示的幾乎所有非文本元素。例如,當eero Messenger機器人展示一組圖片來說明eero的行為時,我們的大多數研究參與者都會點擊這些圖片,希望獲得更多信息。

          Eero for Messenger(左):為了告訴我更多信息,該機器人顯示了一個輪播,上面有幾張圖片和一組可能的延續(文本在圓形框中)。用戶希望能夠點擊輪播項,但這些并不是鏈接。Kielh’s for Messenger (右):輪播上的大圖片是不可點擊的,但是下面的鏈接是可點擊的。


          除了常規的按鈕和鏈接,一些交互聊天機器人還有一個菜單元素,當被選中時,它會顯示一組可能的任務。菜單有時顯示在輸入文本框下面,有時顯示為旁邊的一個小漢堡包圖標。

          金州勇士隊在輸入框下面有一個主菜單鏈接。選擇此鏈接將顯示一組可用的任務。當用戶開始在輸入框中輸入時,菜單圖標就顯示在它旁邊。主菜單鏈接和漢堡包圖標做了同樣的事情。


          其他鏈接有時顯示在消息框下面。這些鏈接是相當容易發現的:我們的幾個用戶與它們交互;然而,靠近輸入框的圖標不太可能被使用。

          CNN bot:信息區下面的鏈接顯示了聊天機器人的一些主要任務(頭條新聞、主題、設置)。


          線性流


          交互聊天機器人似乎最像Alexa的技能:它們被設計用來指導用戶完成少量任務。機器人支持的任務最好被概念化為具有有限數量分支的線性流,這些分支依賴于可接受的用戶答案。機器人提出一個問題,其答案將推動機器人前進到流的右邊分支。

          一個線性流程的例子,機器人可能通過它來完成一個任務


          當用戶遵循流程并提供符合系統期望的“合法”答案,而沒有跳躍步驟或使用未知的單詞時,用戶會感到成功和順利。例如,一些參與者能夠成功地與Domino ‘s Pizza、Wingstop、Progressive等公司的聊天機器人進行交互。然而,一旦用戶偏離了規定的腳本,問題就出現了。


          例如,當Domino ‘s Pizza機器人詢問她的位置是公寓還是房子時,一名參與者輸入townhome,機器人回答“我很抱歉。我好像聽不懂?!绷硪晃粚ふ野蛯毨蜓鼛У挠脩粼谙⒖蛑休斎肓恕把鼛А?,但是收到了訂單取消的信息。當她把它轉換成“女式腰帶”時,她被告知要從一個鏈接列表中選擇,沒有一個鏈接與她要找的匹配。

          巴寶莉的聊天機器人很難理解用戶想要完成的任務,并在機器人的指令表中列出了若干任務。


          機器人也很難從問題或意外輸入中恢復,有時會迫使用戶從樹的頂部重新開始,并做更多不必要的工作來獲得答案。例如,我們的一個用戶想知道起亞是否有四輪驅動的電動車型。為了找到匹配的任務,她不得不遍歷整個決策樹,回答諸如汽車需要容納的人數和MPG等問題。當她對車輛類型偏好回答“不”而不是選擇一個顯示選項時,機器人就會停止并強迫她重新開始。


          然而,有些機器人更加靈活,能夠理解偏離腳本的請求。例如,一個參與者知道Domino ‘s Pizza正在進行促銷活動,他可以讓機器人將其加到自己的購物車中。在訂餐流程的晚期,他還能夠改變其中一個比薩餅的外殼。

          Domino ‘s Pizza聊天機器人能夠對不屬于預訂披薩的主要線性流的請求做出滿意的響應。左圖:用戶可以在訂購前將訂單加到他的購物車中。右圖:用戶更改了正在訂購的兩個比薩餅中的一個的外殼。


          一些機器人很難做出假設并建立查詢的上下文。例如,我們的一名參與者試圖與Capital one的基于文本消息的機器人Eno進行交互。他碰巧有兩張來自Capital One的信用卡,每次他問一個問題,機器人就會強迫他澄清查詢涉及的是哪個賬戶,而不會將上下文從一個交互傳遞到下一個交互。


          當啟動新任務時,機器人通常也不能利用之前輸入的信息。例如,我們的一名參與者首先決定叫披薩外賣;她輸入了自己的地址,但她被告知Domino ‘s不送貨上門。她又開始一遍,這次的目標是去商店取貨而不是送貨。機器人第二次問她的地址,顯然完全忘記了她已經輸入了地址。

          Capital One的機器人Eno要求用戶在回答完每個問題后澄清他詢問的是哪個賬戶。左:Eno只識別用戶查詢中的關鍵字“transaction”(盡管拼錯了),無法回答用戶的特定問題;相反,它給出了其指令庫中一個匹配任務的答案。右:Eno重復了之前問的問題。


          文章來源:站酷  作者:馬克筆設計留學

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



          做好國際化體驗設計,你應該知道的事

          ui設計分享達人





          章節一:為什么要堅持國際化設計?



          堅持走國際化設計的背景

          出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺,國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式,使得成熟的經驗可以快速運用到國外,從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】,想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

          那有什么好的方法和理論能夠讓設計提前著落,為業務帶來一線用戶信息和設計價值呢?接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計,讓自己的設計價值有理可依


          *以下內容與公司無關,更多的是基于筆者國際化工作經驗的復盤,如有錯誤,歡迎指正(Salute~)



          寫在前面

          首先我們要知道,一套通用的設計標準很難在多個國家吃的開,從而拿到用戶信任

          我們先來看個案例,這個是日本UBER司機端和日本滴滴司機端對比

          最明顯的區別在于,滴滴國際化在日本業務和Global業務這塊,司機端采用的是移動端(global)+平板端(日本),而UBER則是一套方案解決全球問題,可能有些人會問,一套設計不是成本更低,效率更高么,為什么非要制作兩套。這就要從決策成本的角度去考慮問題,而日本市場相對于滴滴其他地區市場有著完全不同的因素,涉及到了資本,使用場景,市場地位,用戶畫像等多方因素決定,這時的【成本與效率】已經無法排在做與不做的第一位了,接下來我們通過兩張照片來看下日本司機的接駕場景

          通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣?是不是明顯發現他們的年紀相對的更大一些?會穿制服佩戴白手套? 那年紀更大是不是意味著司機的視力會相對于中年人有所下降,白手套是否會影響他操作屏幕交互,那針對這么不同用戶群體是否需要單獨設計呢?最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢?


          那我再來舉兩個例子來看看,我們來看看針對日本本地化做的特殊設計細節在哪些方面?



          案例一:針對司機群體老齡化設計———大屏幕設計:

          日本屬于老齡化國家,司機平均年齡更是在50歲以上,高齡人群的視力相比于青年處于退化階段,因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情,UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計,更大的屏幕降低了司機誤操作可能性的同時,也能將字體放大,盡可能讓司機方便識別



          案例二:針對日本司機人文的設計———語音接單

          “日本服務業發達,體現在服務的細節。出租車司機出于對客戶的尊重,都會戴上白手套。但是在帶著手套的時候,司機很難去點擊屏幕進行操作,而且在行車過程中,觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為,于是開發了語音接單的功能。考慮到司機群體的年紀特征,我們選用了在日本相對普及又好識別的“了解しました(りょかいしました)”進行快速語音接單,在新版本上線后,司機可以通過屏中屏的方式去學習語音接單功能,只有他完全掌握這個功能才會為他完全展現,如果司機因為自身原因無法很好地說出那句話,我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計


          (圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠)




          國際化設計的思維框架

          通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

          怎么樣讓國際化的設計有法可依,我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景,那一個場景由哪幾個方面組成,簡單來說是由【業務】+【用戶】組成,這并不難理解,我們作為產品設計師,首先是背靠業務,解決公司的商業訴求,給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中,我們會將商業訴求和用戶價值進行一個有效的結合,從而滿足雙方,但是還不夠,因為一個場景還依賴客觀的條件,比如時間和空間維度,最終也會影響整體的質量,我們將所有的因素通過包含關系展示出來

          接下來我們往細的方向進行拆解,【業務】根據公司行業,階段的不同以及基礎能力的不同,呈現的點也不盡相同。最核心的點在于當前所屬階段,是1.0階段力求生存下來,還是說2.0和競品之間產生差異化,還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同,對于1.0階段來說,更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭,通過差異化(殺手級)的功能形態獲取更多的搖擺用戶

          不同的賽道,業務不同,打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢?我們先來列舉些具象的特征:

          【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成,但是光有畫像基礎并不精確,因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下,用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】,最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里,獲得用戶認可,特別是在20年后,疫情的爆發導致設計師無法到前線進行真實有效的實地探測,那么加強合作以及對齊目標,為業務拿結果將是重中之重,接下來,我將對于每個影響【用戶】的因子進行舉例講解








          章節二:如何快速了解你服務的用戶



          做任何的設計都離不開用戶畫像,而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

          可能你知道,在給拉美客戶做單的時候他們會要求你的界面顏色亮麗,看起來更加奔放,而在給亞洲客戶做單的時候則會相反,整體看起來更加約束。但是你能清楚的知道背后的原因么?如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像,去支撐你的設計。答案是有的,他就是【霍夫斯泰德文化維度理論】


          霍夫斯泰德文化維度理論(Hofstede's cultural dimensions theory)是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序,能將一群人與其他人區分開來。通過研究,他將不同文化間的差異歸納為5個基本的文化價值觀維度


          百科連接:霍夫斯泰德理論詳情 (<-點擊快速查看)

          完全不懂的可以看看上面的鏈接,我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

          了解完霍夫斯泰德理論以后我們該如何去使用呢?我們先從拉美用戶和日本用戶的差異對比開始

          通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】,差值比例達到了46和44.

          接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例,去理解背后的原因



          男性化與女性化(Masculinity versus Femininity)

          日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現;而日本男主外女主內,62%的女性在第一個孩子之后選擇辭職,也是男性氣質的另一表現.

          在日本想要成為一個出租車司機,就要在5年之內不能有任何違規,某些地方還會有特殊的考試,這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后,才能被評為A級或者AA級別的出租車,雖然這僅僅只是一張小貼紙,但是他也代表著一個出租車司機的榮譽。在這一方面,也體現日本社會的男性氣質的確定性。

          相比較日本,巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心,也是其社會的核心價值觀。對于一個家庭而言,家人共同用餐的時間是非常重要的,還有星期天的燒烤活動,能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事,甚至無法聯系上他們:)



          長期取向與短期取向(Long-term versus Short-term)

          日本人將生命視為一個非常短暫的時刻,所以調查發現日本人普遍相信宿命論,他們鼓勵節儉和現代教育的努力,作為為未來做準備的一種方式。

          巴西相較于日本經濟落后,人民的收入水平普遍不高,很多司機收入僅僅能夠維持一家的支出,很難有結余,在巴西工資會按照周維度支付,以保證一家人的生活開支能夠承擔。

          針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡,允許司機隨時提現且提現速度遠遠大于了當地的其他銀行(48小時),那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中,我們將錢包打造長了本地生活平臺,我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為,原本需要走到線下便利店的服務被我們搬到了線上,更是大大的方便了使用99卡的群體。未來呢,我們將加大加多權益,達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值,同時我們也給業務帶來了價值,更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

          (99與當地銀行合作的線上本地生活功能-99Pay)



          不確定性的規避(Uncertainty Avoidance)

          日本地處自然災害頻發地帶,沒有豐富的自然資源,生存條件不太好,所以日本人有很強的危機意識,學會了為任何不確定的情況做好預防措施,對待事情也希望有明確性

          而巴西雖然處于平原,沒有自然災害,但是因為社會安全因素,整個社會對于社恐事件還是有較強烈的危機意識,所以司機會更加關注接送流程中是否會前往不安全地區,以及乘客的質量

          (日本司機的真實駕駛場景)


          費用收取的正確與否也是服務體驗優秀的表現,日本司機會用計步器進行計價,如果涉及到了其他的費用則會使用單獨的計算器進行精確計算,這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執,那從這個環節來看,司機為了規避【計算錯誤的可能】而預備了計算器,減少了差體驗的可能


          在巴西,滴滴如果對司機派單如果過遠會或者是危險地區會進行提示,允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護,那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師,是不是意味著可以把危險地區的派單做的更加醒目,讓司機能夠更快識別,更快決策,而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強,讓司乘都能更加快捷第一時間選擇自助服務









          章節三:繞不開的硬邊界



          法律法規的約束

          每個國家的發展階段不同,對于隱私重視程度不同,因此針對不同地區的海外市場,作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案,這一點格外需要注意,不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的,因此在空投其他國家之前需要了解是否立法關于隱私相關的法律,如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

          LGPD和GPDR風控合規

          簡單來說就是要做到信息安全,保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣,各種權限,各種信息默認保留和上傳。但是隨著各國的重視,個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD,在歐洲有GPDR


          GDPR 是(The European General Data Protection Regulation )的縮寫,即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過,在?2018?年?5?月開始強制實施的規定。

          GDPR 意義在于推動強制執行隱私條例,規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準;另一方面,對于自身的數據,也給予了用戶更大處理權。也就是說在18年生效之后,如果再有歐洲任何公司App不對用戶的數據進行合規處理,擅自收集信息就將會受到嚴懲



          智能硬件的普及度以及新舊

          硬件的普及率以及新舊差異也同樣影響著本地化設計,通過調研和外界公布的數據我們得知,在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展,但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配,這樣做是為了最好的進行向下兼容,從而保證所有用戶都能夠使用。同樣,如果你在給發展中國家做設計,那么復雜的動效和高清晰解析的大圖最好是不要去做的

          (網上后臺數據展示截圖)



          當地的網絡環境和下載速度及物流環境

          拉美國家,基建水平滯后,網絡下載的速率波動較大,且存在不穩定的情況,以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難


          舉個例子,司機端的歷史列表如果存在400條記錄,如果司機有訴求想刷新查看更多的訂單,是一次性下拉刷新展示全部好呢?還是一次性展示50條好呢?還是一次性展示20條呢?


          答案是一次性展示20條是最穩妥的選擇,因為網絡的不穩定性,一次性加載太多數據會導致過長時間,而網絡不穩定極有可能導致下載失敗,并且一次性下載太多數據可能并不符合司機查詢的最初訴求,反而浪費司機的寶貴流量,最終會引擎流量消耗過快引發進線,這里的決策是損失一些用戶的體驗去保障司機的收入,但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜,因此我們可以嘗試使用一次性加載全部的數據,這樣能讓體驗感受更好

          (99信用卡的申請權益展示/激活流程頁面)


          再舉個例子,拉美物流相對沒那么發達,且因為政治/經濟局勢的不穩定性,導致物流包裹存在無法送達的情況,如果收件人不知曉當前的狀態而超出了等待的預期,那么他就會進線詢問。那在這個場景我們有什么更好的辦法?是否可以透傳更多的包裹進度方便收件人查看,再者再將用戶導流到客服自助而非進線?這樣的好處一來體驗的鏈路完善了,讓司機可以找到自助的出口,二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大?從而探索新的業務,發現新的機會點








          章節四:生活習慣和歷史文化遺留帶來的本地化策略



          收入/支出方式占比反映了一個群體的現狀

          聊這個話題前我們先將選擇的范圍進行收縮,聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出,難有結余。這也導致司機會選擇雙開(同時使用UBER接單或者其他競品)或者進行其他賺錢的方法,如果整個群體都是這樣的情況下,那么司機的忠誠度(這里指的忠誠度不是貶義詞,而是每周的出車時長)必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題


          我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類,基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類,物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么,我們是不是可以豐富收入以外的獎勵形式,提供活動獎勵或者權益的折扣,又或者嘗試下小額貸款,那這些是不是可以給用戶帶來價值點呢?


          精神層面我們是不是也有發揮的空間,對于補貼,往往是有限的。那如何做到持續長期刺激司機群體?如果一個乘客對于司機進行了表揚和小費的激勵,是不是可以給司機帶來更大的信心去服務好乘客,那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵,讓司機存在足夠的擁有感和成就感,讓司機群體也能感受到平臺對他們的看重。如果勛章可以,那等級是不是也是成就之一呢?



          現金與線上支付普及與思考

          不同的國家線上和現金的支付比例大不相同,這里受經濟環境和政治環境影響較大。總的來說習慣了線上支付的習慣后就很難回到現金支付的環境,因為確實更加方便便利。一個國家大量使用現金支付的情況下,往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊,在與當地的銀行和機構進行合作,增加卡和賬戶的滲透率。然后通過做權益和服務,滿足用戶的生活訴求,從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活




          文字的適配/i18n翻譯的本地化(不同地區/國家語言精準翻譯,拒絕里語/文字長度折行問題)

          這里我們需要提到一個概念,i18n(其來源是英文單詞 internationalization的首末字符i和n,18為中間的字符數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟件,硬件等)無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說,在不修改內部代碼的情況下,能根據不同語言及地區顯示相應的界面。 在全球化的時代,國際化尤為重要,因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)


          了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺,所有的本地化設計在經過研發代碼實現后,都會進過他們去對文案進行翻譯校對,最終變成當地人可以理解的話術落地到界面上,從而進行本地化的空投,但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字,而西語和葡語是英文的1.25倍到1.5倍之間,而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯,還需要把控字符長度,避免折行和省略問題


          我們來看下下面這個例子


          (不嚴謹的快速翻譯,只是為了更方便的展示不同文化下的文字長度)


          不同國家的語言不同,文字也不同,則會存在單詞,句子長度/行高的差異。如果一個產品在初期沒有做好適配的話,到后期替換當地語言的時候極有可能出現文字溢出的問題,這也是為什么在做海外設計的時候最好拿當地的語言進行設計,能初篩出一些細小的問題 ,避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題



          中東國家客戶的產品需要注意適配

          如果你服務中東客戶,務必需要呈現出當地的閱讀排版方式(尊重本地化設計)具體的適配細節這里就不過多說了,網上搜索【RTL適配方法】即可

          (Material Design中的RTL適配)



          縮寫是否合適(日期/業內專屬名詞)- 時間格式/貨幣符號/聯系方式/地址等

          格式也是做國際化中一個非常常見且體現專業度的地方,不同國家的時間展示方式不同,會影響用戶的閱讀,舉個例子“03/08/2019”,如果在A國理解是2019年3月8號,在其他國家復用是會存在理解成2019年8月3號的,更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通,保障閱讀的習慣和當地一致,那貨幣符號/地址等也應該遵守當地的習慣去展示,通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認,將格式記錄下來,最后與研發根據上線的國家展示不同的格式









          總結

          因為時間倉促,無法面面俱到的將每個點都進行舉例論證,盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化,它更像是一個方法論,幫助沒做過國際化業務的同學能夠快速理解當地的用戶和業務的打法


          希望我的文章能夠拋磚引玉,給大家一些靈感,也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯網國際化的業務做到越來越好


          最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待,去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看,永遠不要輕易地相信自己的理解

          文章來源:站酷  作者:大寶蛋

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


          設計師要懂的用戶習慣

          ui設計分享達人


          前言:


          前些天對用戶習慣進行了總結,這兩天重新優化了一遍。我們在互聯網產品的設計過程中,有時會聽到一個詞:用戶習慣。設計師希望嘗試更多新穎的交互方式、視覺效果,卻常常容易被其他人挑刺指出不符合用戶習慣,建立在用戶習慣上的創新才是好的體驗。


          盡管設計師經常將用戶習慣掛在嘴邊,但是卻很難有人說出用戶習慣究竟是什么?我們如何判斷所做的設計是否符合用戶習慣?用戶習慣是否始終不能打破?道理我都懂,就是不會做,實際上確實是這樣,因為很大程度上取決于設計師對用戶習慣的理解深度。


          用戶習慣本身很難被量化,但是不代表就是一個模糊的概念,你仍然能從用戶反饋、操作行為數據對比等分析中一窺究竟,用戶習慣是可以隨著設計師的學習、經驗、眼界等的提升而提升的。



          什么是用戶習慣?


          心理學上認為,習慣是人在一定情境下自動化地去進行某種動作的需要或傾向。或者說,習慣是人在一定情境中所形成的相對穩定的、自動化的一種行為方式。 習慣形成是學習的結果、是條件反射的建立、鞏固并臻至自動化的結果。

           

          所以,習慣有兩大特點:


          需要注意的是,“長期”本身是是沒有明確時間界限的,更強調多次的重復。這里的習慣,側重于描述“習得性”,即人們通過經歷、學習、刻意練習等方式形成的,所以這種習慣理論上是可以被改變的。


          此外,習慣還有一種潛藏特性,區別于上面描述的“習得性”,是天生的、物種特有的行為模式。比如人空腹狀態下,聞到香的食物會產生強烈食欲。這種特性習慣是刻在基因里的,幾乎無法被改變。



          試想,我們在使用 App 時,是否遇到過因為習慣的問題而感覺到不適應的場景?


          舉個最常見的例子,Windows 與 Mac 系統的軟件關閉方式。使用 Windows 的電腦時,我們形成了關閉操作在右上角的自然習慣。后來開始使用 Mac 電腦,關閉方式都在左上角,在一段時間內,每次關閉時都感覺到格外不習慣。而 Mac 的關閉方式沒有比 Windows 產生顯而易見體驗升級,改變操作習慣成本高,部分用戶可能會認為 Mac 的關閉操作不好用。


          當然,假如最開始接觸的是 Mac 電腦,再使用 Windows 電腦,也會自然認為 Windows 不好用,這是先入為主的觀念,一旦產生習慣,改變習慣將產生一定的學習成本。

           


          用戶習慣的產生


          設計師需要思考用戶行為的本質,而盡量減少主觀判斷。產品是給人使用的,所以了解人們的行為特征很重要,而只要涉及到對人本身的了解,就是極其復雜的,人類對自身的行為特征了解遠遠不足,但這不妨礙我們以現有知識去做一些分析和判斷。


          用戶行為習慣的產生,與記憶的特點有很大關聯,我們可以把記憶劃分為外顯記憶和內隱記憶。


          外顯記憶大家比較習慣和容易感知到,比如我們在學校學習時背誦的課文、公式法則等,可以用語言、文字等顯性方式描述出來的記憶。


          內隱記憶也叫非陳述性記憶,我們無法用行為描述而又確實存在,比如騎單車,學會之后很難會遺忘。剛開始學習時,會需要意識的介入,經過多次練習,行為會逐漸“自動化”,比如學習開車時,我們會注意力很集中,而習慣開車后,可以一邊開車一邊聊天。

          我們平時說的肌肉記憶、條件反射也和內隱記憶息息相關,而且一旦形成,不太容易改變。需要注意的是,肌肉記憶只是一種簡單描述,負責此記憶的是小腦,其實肌肉沒有記憶。


          所以有時候,我們感覺體驗某個 App 時,會習慣性在某頁面尋找某功能,或者覺得體驗和其他 App 有區別,都可能是內隱記憶的用戶習慣引起的。舉個例子,某天你剛使用一個沒用過的 App ,這時你想要找設置功能,那你大概率會不自覺的點擊 App 的最后一個主 Tab (如“我的”),因為大部分 App 的設置功能都在這個場景,用戶自然也就形成了習慣。


          這里我且采用由心理學家基思·斯坦諾維奇(Keith Stanovich)和理查德·韋斯特(Richard West)率先提出的術語,用以說明大腦中的兩套系統,即系統 1 和系統 2。


          ·系統1的運行是無意識且快速的,不怎么費腦力,沒有感覺,完全處于自主控制狀態,也叫快系統。

          ·系統2將注意力轉移到需要費腦力的大腦活動上來,例如復雜的運算。系統2的運行通常與行為、選擇和專注等主觀體驗相關聯,也叫慢系統。


          而這兩個系統,是可以互相轉化的,慢系統通過刻意練習,把新的習慣注入快系統,而這時快系統就是習慣的表現,這樣快系統可以在日常生活中完成大部分工作,這就是我們常聽說的熟能生巧,習慣經常能幫我們節省思考的精力,這又讓慢系統進一步通過刻意練習,向快系統不斷注入更多好習慣。


          舉個例子,你剛用一個 App 時,可能需要先體驗一下你要的功能在 App 的哪個位置,但你用久之后,就會不假思索地找到它。就像你用微信,最常用的功能可能是回復信息、看朋友圈,所以一定會形成習慣。但是假如有人讓你找一下微信里面“生活服務”的入口,你可能會先想一下可能出現在什么入口,這就是因為平時比較少用導致的。假如你常用這些入口,也會形成習慣,下次要使用這些功能的時候,就能夠快速找到。



          避免改變用戶習慣


          1、挑戰用戶習慣的風險


          既然說到用戶習慣的特點是“長期養成”且“不易改變”,那么挑戰用戶習慣一定會造成不適,甚至引起強烈反感。幾年前 Ins 的 logo 改版,將 logo 由擬物化改成了扁平化,顏色也發生了變化。暫且拋開視覺效果不說,從用戶視覺記憶上,已經習慣了下圖左側的效果,而右側新版效果很難與左側產生記憶上的關聯。


          許多用戶反饋桌面上找不到這個應用、許多用戶吐槽很丑甚至不想再使用。所以我們比較容易理解,為什么有時候 App 改版容易反而引起用戶的反感,這很大程度上是用戶習慣的影響。



          2、如何避免挑戰用戶習慣


          產品的用戶是誰?


          了解產品的用戶是誰、用戶的行為特點是什么。不同產品由于定位不同,所以用戶群體也不相同,用戶群體的不同自然代表用戶行為特點的不同。如果設計師知道用戶群體,但是不清楚具體行為習慣特征,可以嘗試讓你身邊的用戶幫你體驗。


          舉個例子,B 站的整體用戶畫像相對而言更偏年輕化,所以產品設計上,無論是代表形象、UI 風格、交互體驗都更顯年輕化。而“小年糕”小程序的用戶群體主要為中老年人,所以設計上不會顯得很年輕,而是以操作明確、字號偏大、去除多余信息為主。


          關注競品的體驗


          關注主流產品的用戶體驗很重要,這些競品的操作往往代表用戶的習慣操作(或被培養出來的習慣操作)。大多數情況下,你需要了解競品能做到什么程度,用戶容易將習慣從一個場景帶到另外一個相似場景。


          比如點外賣,有的用戶可能會下載美團和餓了么,盡管平臺不同,但是在用戶習慣中,操作模式是相似的,所以如果你要讓用戶的體驗不突兀,那就往往遵循相似的操作邏輯。當然這些不是為了讓一個產品去抄另外一個產品,而是要追尋更好的使用體驗,你的產品比競品體驗更優,就更能吸引用戶的青睞。


          了解人類的行為/閱讀模式


          每個人本身都會具有相對穩定的行為、操作、信息閱讀習慣,我們能見到的體驗好的產品,都是符合用戶的基本行為習慣、信息閱讀習慣的,要想了解這些習慣,需要了解深層次的交互行為特征。


          從操作而言,需要了解用戶與界面交互的行為習慣,比如用戶的操作(手勢操作、信息布局如何才能便于操作),比如尼爾森可用性原則等。


          從信息閱讀角度而言,需要考慮人們眼睛觀察事物的規律,比如格式塔原理:接近性原則、相似性原則、連續性原則、閉合性原則、主體/背景原則、簡單對稱性原則、共同命運原則。


          了解平臺設計規范


          就移動互聯網產品的領域而言,大家都是與手機互動,目前手機系統的兩大平臺:iOS 和 Android 也都各自有提供關于人機界面設計有清晰的指導,尤其是 Android 的 Material Design ,對于設計師快速了解設計規范、設計原則有很大作用。


          iOS 與 Android 的人機界面規范鏈接:

          iOS:https://developer.apple.com/

          Android:https://material.io/



          培養新的用戶習慣


          1、何時培養新的用戶習慣?


          我們提到挑戰用戶習慣會有風險,但用戶習慣并非是永遠不可改變的,有時我們需要培養新的用戶習慣,也就是大家常說的“教育用戶”,否則世界可能一直很難進步。


          移動互聯網興起之前,大家都是線下打車,但是滴滴打車顛覆了傳統線下打車的用戶習慣;以前大家都是現金支付,但是微信支付顛覆了現金支付的用戶習慣。


          《設計心理學》里面有這么一段話:“如果用新的方式做一件事只比原來好一點,那么最好與以前保持一致。如果必須做出改變,那么每個人都得改變。新舊混雜的系統會讓每個人困惑。當新的做事方式明顯優于舊的方式,那么因改變而帶來的價值會超越改變本身所帶來的困難。不能因為某樣東西與眾不同就認為它不好。如果我們故步自封,我們將永遠不會進步?!?


          改變的價值大于改變的困難


          這里的價值包括但不限于用戶價值、商業價值(短期價值、長期價值)等,當新習慣會需要用戶改變舊習慣時,這個設計帶來的價值有多大,值不值得讓老用戶付出學習成本。有時候,明知改變會引起用戶的強烈抵觸,仍然改變用戶習慣,可能因為改變的價值大于改變的困難。


          剛才提到的 ins 的例子中,有的人不知道 ins 為什么要改版,創新咨詢公司 IDEO 的溝通設計主管 Remy Jauffret 說:“當品牌、組織超越了最初的商業意圖,或擴展業務提供不同的產品,或領導希望吸引新的客戶,這些情況都可能需要新的品牌視覺。變化總是大家不舒服,然后又平息,我認為時間才是檢驗真理的唯一標準?!?


          改變帶來明顯的體驗升級


          我們在設計中,有時候會遇到自己的產品某個功能體驗比較差,但是延續了很久,而市面上其他同類產品在相同功能的體驗上已經做的很好,我們可以往主流交互體驗上改版嗎?這時需要權衡改變之后是否能帶來明顯的體驗升級,還是說對于用戶來說是不痛不癢的變化,可改可不改?


          以安卓為例,在幾年前,安卓手機的底部有 3 個實體鍵,后面手機更新迭代,變成了虛擬三鍵設計,因此底部存在3個不同功能的熱區。而在 Android 4.0 設計規范中,為了避免底部標簽欄與已經存在的底部虛擬鍵產生交互上的沖突,安卓明確說明了不要使用底部標簽欄。


          但這種規則,在使用體驗上、開發者的適配上都發生了問題,用戶更接受 iOS 的體驗,后面谷歌在 Material Design 中,允許了底部標簽欄的存在。這相當于和原來的用戶習慣不一致,但卻帶來了更好的用戶體驗。



          2、如何培養新的用戶習慣?


          這里結合上癮模型的觸發、行為、多變的酬賞、投入進行闡述,這四個步驟是一個循環,當用戶越沉迷于這個循環,說明你的產品對用戶的吸引力越強,用戶習慣也就越強,這里會側重于從培養用戶習慣的角度進行拆解。



          觸發:外部觸發和內部觸發 


          外部觸發說白了就是加強產品曝光,讓用戶一下子就能想起你。舉個例子,“充電五分鐘”下一句是什么?你大概率會想到“通話兩小時”,這種經過外部的長期觸發,最終已經轉變成了內部的習慣,會讓你記憶深刻。


          外部觸發的類型主要有4類,通過將信息滲透進用戶生活,吸引他們采取下一步行動:


          付費型觸發:做廣告、搜索引擎推廣都是付費型觸發,爭取新用戶;

          回饋型觸發:公關和媒體等領域的觸發,比如對產品做正面報道、推薦等;

          人際型觸發:熟人之間的口碑傳播是一種極其有效的外部觸發,可以為產品帶來“病毒式增長”;

          自主型觸發:以驅動用戶重復某種行為作為重點,讓用戶形成習慣,比如新聞訂閱、每天早晨的鬧鐘等。


          內部觸發是用戶心理產生的使用動機,內在情緒驅動自己去使用一款產品。


          當某個產品與你的思想、情感或者是原本已有的常規活動發生密切關聯的時候,那一定是內部觸發在起作用。對于習慣刷朋友圈的人來說,拿起手機就不會自覺打開微信;對于習慣刷微博的人來說,拿起手機就會刷起微博,甚至自己都沒有意識到。一再重復這種場景,會用戶就會對此形成一種穩定的聯系,進而形成習慣。


          行動


          斯坦福大學福格博士曾提出“福格公式”,福格行為模型可以用公式來呈現,即 B = MAT。B 代表行為,M 代表動機,A 代表能力,T 代表觸發。只有動機、能力 、觸發三者皆備,才能跨過“行動線”。


          觸發:即上面所提到的外部觸發與內部觸發。


          動機:動機決定你是否愿意采取行動。福格博士認為,驅使我們采取行動的核心動機主要是三種:追求快樂,逃避痛苦;追求希望,逃避恐懼;追求認同,逃避排斥。


          能力:這里要詳述的是能力,所謂習慣,是指人們在幾乎無意識的情況下做出的舉動。一種行為的復雜程度越低,無論是體力上的還是腦力上的,被人們重復的可能性就越大。越簡單的操作成本,記憶成本越低,越容易形成用戶習慣。


          舉個例子,刷抖音就是用戶行為成本極低的場景,你在刷抖音時,不需要多余的交互行為,切換視頻甚至不需要點擊,只需要向上滑動。除開抖音算法的精準推薦不說,從交互層面而言,也是足夠簡單并且形成習慣了。


          如果改變會打破認知習慣,要讓用戶能快速了解新設計的使用方式。最好的方式是能夠讓用戶快速與已其他競品的操作習慣產生關聯。比如采用其他主流應用成熟的交互方式。


          如果改版會很大程度上改變用戶行為,也可以考慮嘗試以下的方式。


          · 改版操作指引:這種方式較為常見,但是仍應注意避免繁瑣的操作指引,切勿把操作指引當作體驗差時的解決方案。


          · 兼容多種用戶習慣:這種方式可以讓不同用戶選擇適合自己的交互方式,最大程度考慮到所有用戶,但同時也可能造成了功能冗雜的情況。比如安卓底部三大金剛鍵,后面手機全面屏時代,新增了全面屏手勢??紤]到安卓老用戶的使用習慣,三大金剛鍵(底部虛擬按鍵)始終被保留下來;


          · 允許切換新舊版本:這種方式一般是改版變化過大,用戶一時間不容易接受新的體驗方式,常見于網站,如站酷早期的大改版,但是僅適用于過渡期。


          當然,除上述方式外,肯定還有一些其他讓改變行為習慣更舒服的方式,這里不一一列舉。


          多變的酬賞


          多變酬賞主要表現為:社交酬賞,獵物酬賞,自我酬賞。這幾種酬賞會加強用戶對產品的使用習慣。


          社交酬賞:人們從產品中通過與他人的互動而獲取的人際獎勵,比如被認同、重視、喜愛等。比如人們喜歡發朋友圈、微博等,期望得到回饋,某種程度上都是為了獲得社交酬賞。

          獵物酬賞:人們從產品中獲得的具體資源或信息。比如瀏覽信息流,豐富的信息流內容為用戶提供了資訊,比如刷抖音,人們追求視頻的新鮮感、追求內容的豐富性都是屬于獵物酬賞。

          自我酬賞:人們從產品中體驗到的操控感、成就感和終結感。在目標驅動下,我們會去克服障礙,即便僅僅是因為這個過程能帶來滿足感。就像你玩游戲,希望贏過對面,或者期待將游戲玩通關,本質上屬于自我酬賞。


          投入


          如果希望繼續培養用戶習慣,與產品產生更緊密的聯系,就需要鼓勵用戶進行一些投入,以增加他們使用產品的可能性。行動只是用戶使用的第一步,促使用戶對產品的投入,才會真正增強用戶與產品之間的聯系,形成更強的用戶習慣。但是如果用戶自身沒有投入,即替換成本低,那么隨時都可能有被其他產品取代。


          舉個例子,移動互聯網時期,微信早早入局,人們的關系鏈都在微信里面沉淀,即人們越使用微信,關系鏈沉淀越多,就越難以更換其他產品,所以兩年前想要挑戰微信的多閃、馬桶 MT 和聊天寶這三款社交 App 不可避免的失敗了。


          用戶越愿意投入,就證明用戶粘性越高,在此過程中,用戶習慣也會不斷加強。



          結語:


          現階段,人人大談用戶習慣,但是用戶習慣不以自身為標準,而是需要考慮產品用戶的行為特征,以及人們在使用產品時更加深層的、甚至用戶本身都沒有發現的習慣,這就需要設計師對習慣的產生、習慣的判斷、習慣的培養有深入的認識。


          一般情況下,產品不適合貿然改變用戶習慣,但是在有特殊需要的情況下,還是不可避免的改變產品的用戶使用習慣,當然我們需要如何讓用戶更加容易接受。大多數產品,都希望用戶能夠形成對自己產品的習慣,所以需要了解用戶如何對產品產生習慣、加強習慣,使產品擁有更強的吸引力,但是良好、正向的用戶習慣一定是基于用戶體驗的。


          文章來源:站酷 作者:熱風_

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



          為什么交互設計能幫助產品解決問題

          ui設計分享達人

          一、為什么交互設計能幫助產品解決問題


          為什么那么多人覺得應該先學UI設計再學交互設計,因為UI門檻低所以入手快。其實交互比UI更早出現,從需求理論可以看出人們在追逐主觀體驗的感受,在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知,如果底層的交互和產品的可用性未被滿足,那么UI做的再好也是徒勞。




          市面上大量出現同質化產品、設計,就是因為大家都在按照現有的,常用的模版在設計,現在其實比早兩年會好很多,很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。


          例如下面的案例,這是一個電瓶車電池租賃的一個產品。



          undefined



          從美觀角度,左側的界面更加簡潔信息也有規律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢?


          如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質沒變。所以為什么我們說要做正確的事而不是正確的做事。





          交互不僅僅能夠讓產品好用的,也要讓產品走對方向。


          另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現在人們日常所接觸到的大部分媒介,并且與之產生聯系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調溫等等。



          1.交互設計中媒介與人的關系


          1.1順應


          交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


          所以在當時人們為了適應非常有限的工具資源,改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮,那基本也就涼涼了。


          從2g到5g時代的發展,除了生活方式發生翻天覆地的變化外,我們所接觸到的媒介也發生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。



          1.2遷移


          平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





          在現在非?;馃岵⑶夷J胶蚫ota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。







          同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。


          另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事,因為在網頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯動的左側標簽導航和頂部聯動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現,所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。


          web端的工具和網頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變為撤銷按鈕,有待考量。



          2.交互認知的盲區


          到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質。


          中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿,更多的是擔心用戶成本過高而妥協為滿足用戶預期。



          2.1信息不對稱


          事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


          例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?


          當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


          同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現在信息太密集讓人無法呼吸,但設計者覺得現在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


          我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識,開發也盡可能的去補充設計背景。


          在這里,交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。


          再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”


          所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




          3.交互語言的淺見


          我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言,不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。


          所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規范,而并不是語言。語言擁有更強的普適性和通用性。


          那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


          語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。



          這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態的,比如點擊之后的跳轉頁面,另外他也可以具備產品賦予的自定義屬性,例如底部滑出picker。




          還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數也可能是實數,但是在交互設計中,我們如何表示點擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






          那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產品團隊中大家都能夠有一套共性的交互語言系統,無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創新,這就導致了很難會有新的、有用的交互形式的出現,比如很多搜索控件都是承載在頂部導航欄中,那么在做規范的時候也只能在這個組件上去微調,殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規規范形式就能和很多產品區分開來了,當然要視產品形態不同。



          4.業務背景與交互形態


          4.1不同業務背景下的信息組織


          市面上有許多的新零售電商產品,頁面中的信息流也是大同小異,但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。





          所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中,首屏基本上都是呈現這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局,從基本上能夠滿足一個大量sku電商產品的所有需求,但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?


          從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





          4.2營銷工具化


          通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經??吹降臓I銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。


          4.2.1更加靈活的控制方式




          4.2.2多樣的營銷結構



          最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。






          二、為什么UI配色那么難


          不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產品設計中使用的。



          1.人類對色彩感知的原理


          大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環境中使用的多。


          視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





          大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。



          1.1人對色彩邊緣的對比更加敏感


          我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。




          但如果你把這個色塊拿出來后,不在這個環境中直接進行邊緣對比,那就不會出現漸變的情況了。那光說原理,我們也來看一下在產品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





          如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。





          還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





          2.色彩在UI設計中的作用


          1.加深品牌印象與品牌感


          一般來說,產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫?、有趣、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


          但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。





          而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



          2.引導用戶視覺凹增加易讀性


          我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品,使用了高亮色來引導用戶視覺。







          當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區分層級。


          3.區分信息交互的狀態


          同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現,但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


          所以不是所有的元素都要賦予顏色,這樣會使整個頁面非?;靵y





          另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態。





          4.營造氛圍傳遞熱度


          色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造





          3.在UI設計中色彩運用的坑與技巧


          1.色彩的正反兩面

          在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





          然而其實很多的產品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色





          在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調,“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





          2.顏色的禁忌用法

          但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


          1.高飽和度的色彩

          會讓人產生“幻覺”!讓人產生視覺疲勞,例如我將餓了么這個界面的色調調整一下大家看一下,不亮瞎算我輸。




          2.灰部使用過多的配色

          為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




          3.沒有規律且過多的配色

          讓界面或者插畫看起來非常混亂。一般來說顏色的使用也需要有側重點,所以我們常用的方法是6、3、1的色彩配比。





          4.熒光色

          熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





          5.太輕柔的顏色

          在很多dribbble的飛機稿中,經常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





          6.現在很火的新擬物化設計

          說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調,這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


          為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。




          7.不要將對抗色重疊

          例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





          4.正確的UI配色方法


          定義主色


          首先我們必須要說,色彩肯定是需要結合產品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發現大部分的產品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

           




          在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






          定義中性色


          其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。





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

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



          15個著名的設計心理學原理以及在設計中的應用

          ui設計分享達人

          你是否有在聽別人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機交互設計相關的15個常見的設計心理學原理,約13000字,幫助你了解產品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設計予以理論支撐。


          1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個單位,就是7±2法則。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上。


          因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號、身份證號,我們總是喜歡把一長串數字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。


          Web導航欄選項卡數量不超過9個

          在設計網頁導航時,如果希望用戶記住導航區域的內容或者一個路徑的順序,那么數量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網站的導航分類。


          Web導航欄選項卡數量過多時

          如果導航或選項卡內容很多,可以用一個樹狀層級結構來展示各級別關系,但要注意其廣度和深度的平衡。例如人人都是產品經理和Dribbble,把更多子類別收在二級目錄里。



          移動端選項卡導航

          在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類模塊,兩個產品的商品分類布局形式很相似,都是用了選項卡的方式來分類商品,層級明確,相應的提升了用戶找尋單品的效率。


          Tabbar區標簽最多不超過5個

          在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕用戶記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算只有4個,我們也經常想不起微信底部的4個Tab分別是啥。



          頂部導航欄頁簽

          我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,

          但在顯示區域只保持7±2法則的顯示數量,例如馬蜂窩、飛豬旅行等。


          金剛區圖標不超過8個

          我們常說的“八大金剛”就是一屏顯示8個圖標,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。


          banner文案不超過9個字

          產品運營banner主文案字數通??刂圃?個字以內,在設計時也通常把長標題一分為二排兩行,便于用戶快速閱讀,提升點擊率。

               


          在交互設計中,7±2法則是減少用戶認知負荷,提升用戶體驗的重要環節。同時還強調了在設計過程中對產品的預見性,避免在不斷為產品添加功能時,破壞原有的視覺基礎。



          0無需說明書

          喬布斯曾說過:“蘋果應該創造所有人都可以使用的產品,即使沒有用戶指南”。


          1 一看就會

          簡單易懂,看一眼就明白你想說什么,不用教學就知道怎么用。


          2秒法則

          所謂“2秒法則”,是指用戶在使用某類系統時的等待時長不超過2秒。在極短的時間內展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達,也許有一點隨意,但是這卻是一個合理的數量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長,達到快速瀏覽的目的。


          進入App的首頁加載時間如果過長就會導致用戶產生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。


          下拉刷新也是一個設計點,為避免刷新時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情,無形中降低了用戶對等待時間的感知。


          APP里面的banner設計要有視覺沖擊力,如果兩秒之內沒有抓住用戶的眼球,可能就被用戶忽略了。


          因此,在設計互聯網產品的頁面時,用戶等待的時間越短,用戶體驗越佳。反之,就會讓用戶產生焦慮的情緒。


          3次點擊法則

          用戶在3次點擊之內如果還沒有找到他們想要的信息或了解網站特色,他們就會離開該網站。這條原則突出了清晰的導航,符合邏輯的結構和易于理解的網站層級的重要性。(來自《眾妙之門》P133) 

          其實在交互體驗中,點擊的次數往往是無關緊要的。只要每次點擊都是無需思考的,毫不費力地順勢進行,那么用戶的挫敗感就會大大降低。如果你的網站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標,這樣的點擊即使有10次也是沒有問題的。例如,在京東購買一件商品需要經過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點擊行為(比如選擇地址、優惠券),用戶并沒有感受到不方便,使用過程流暢而自然。


          在可用性測試領域,“三次點擊”定律一直是一個很具爭議內容。體現在以下幾點:

          ·研究表明,用戶在超過3次點擊還沒到達想去的頁面時,往往并沒有退出網站,而是會繼續多點幾次;

          ·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發現目標頁面的能力反而提升了600%;

          ·合理的導航系統比點擊次數更重要;

          ·比起“3次點擊”,有人提出了“1次點擊”定律,即用戶的每一次點擊都應該讓他們更接近目標,同時盡量減少能干擾實現這一目標的因素;

          ·用戶抱怨要花很長時間才能找到某個產品,實際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會抱怨點擊的次數了;



          英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。

          生活中我們也經常會面臨選擇困難癥,比如早上起床就糾結今天穿什么?中午去食堂就會糾結吃什么?造成我們如此糾結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮著什么就吃什么)。


          在設計中的應用

          應用到界面設計中也是如此,選項越多,意味著用戶做出決策的時間越長。

          例如APP Store首頁,改版前的首頁把眾多app平鋪出來,對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數量,卡片的設計方式簡潔且目標清晰。


          不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,提升用戶做決定的效率。例如美團外賣金剛區第一行5個入口的圖標在尺寸和表現手法上都比下面的入口圖標要大更醒目?!拔业摹表撁姘岩恍┑皖l率功能或不太重要的功能收納到“設置”里,此外還可以通過置灰、鎖定等方法間接減少選項,降低干擾。


          對于多流程的任務進行分步操作,讓用戶專注眼前任務。 例如Clubhouse注冊時,把需要用戶選擇的選項分步引導完成,讓用戶能專注當前行為。


          對于多種類別的選項應當做二次分類的區分,我們都知道電商平臺的品類繁多,僅通過單一分類是不夠的,比如數碼頻道下面還分相機、影音娛樂、數碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,所以分類不怕多,就怕混亂。


          適用邊界

          雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導致負面效果。

          如上圖右,如果在刪除App的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。


          希克定律主要受影響于選項的多少,但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是希克定律在答案試題中的局限性。


          希克定律是一個可以適用于設計的指南,記住要盡量減少用戶在一次決策中要做的選項,因為決策效率是一個產品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇,以便快速將他們送到某個地方(例如賬單支付),這將大大提升用戶體驗并達到你的目標。




          費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。


          如上圖所示,如果光標現在在任易地點想要去點擊目標target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,只要水平上移動超過了D+W你就點不到了,而這個點擊動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。 


          詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。


          相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。


          但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。


          按鈕越大越容易點擊

          在頁面中,大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的觸達目標。比如頁面中的大按鈕。


          將按鈕放置在離開始點較近的地方

          夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域,相比常見頂部搜索欄更方便操作,效率更高。


          相關按鈕之間距離近點更易于點擊

          注冊登錄界面,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。


          適用邊界

          費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用。比如iPhone關機按鈕,沒有使用點擊關閉,而采用滑動操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進而避免了用戶誤操作。


          App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望用戶先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點擊的右上角(恰飯重要),以提高用戶的誤觸機率提高轉化。


          思考小結

          按鈕越大越容易點擊,因此在程序開發中,會增加按鈕點擊的熱區范圍,減輕用戶精準點擊的壓力。但也不能過分的大,容易引起誤觸;

          讓相關聯的內容更靠近彼此,用視覺手法增強用戶對它們相關性的認知。距離產生美,注意不要靠的太近,會出事;

          將按鈕放置在離出發點較近的地方,比如頁面主按鈕一般會放在屏幕底部易操作區域;

          屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調”,參見macOS底部dock欄;

          定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能;




          “任何事物都具有其固有的復雜性,無法簡化”。

          泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復雜度守恒定律」。

          該定律認為:每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。


          生活中很多我們習以為常,感覺便捷方便的生活方式,是無數卓越的數學家、工程師、設計師等無數的時間投入,才實現的某個小功能,是他們把這些復雜性轉移到自己身上替我們簡化了。


          說回移動端,每個應用中都有其無法簡化的復雜度,也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看,而一搬到線上就面目全非。常見的復雜性轉移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中,把用戶的操作范圍轉移到另一個地方。


          除此之外,還有一些降低操作復雜度的方法:

          刪除、組織、隱藏

          視覺層面的“降噪”方法,刪除會干擾用戶操作的選項;功能分類明確,圍繞用戶行為組織信息內容;隱藏那些不常用而又不能少的功能,延遲及階段性展示。總的來說就是將復雜的信息收起來,展示重要且簡潔的界面。


          簡化交互設計

          可以用代碼節省用戶操作時間的地方,是互聯網人一致的追求。例如,B站的一鍵三連,用戶長按點贊按鈕,會同時觸發點贊、投幣和收藏,省時省力。


          算法解放“生產力”

          個性化算法就是通過技術手段,將用戶復雜度降低,而轉移到開發者身上。抖音為什么會讓人上癮?是算法知道了你的喜好,專推給你喜歡的內容而不用自己去找,誰都喜歡私人定制。這對用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這里的簡化復雜的難度就轉移到設計和開發身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內容都是基于你的喜好定制化推薦給你的。


          我們常說以用戶為中心去設計,就需要從用戶角度出發,在交互設計中盡量簡化操作的復雜度,降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復雜性,無法簡化”。因此,如何取得復雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低產品的使用難度,還是在設計中保留一定的復雜度是我們需要思考的事。



          該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調結論先行,論點自上而下。

          你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會時你會走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點。


          金字塔原理指示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓受眾能夠第一時間清楚你想談論的主題。然后由數個論據作支撐,而這些一級論據可以繼續由數個二級論據支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。


          應用到交互設計上,即將信息展示的重點與交互行為的主任務優先展示,再根據用戶在這個界面上所愿意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例,首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和用戶評價這些,讓用戶了解更多信息,進一步促成購買,最后一層是提供商品相關的全部信息、參數、評分等,確保交易的最終完成。在這個過程中,用戶在每一層花的時間也在逐級增加,呈金字塔狀。


          映射到設計師身上也是如此,從設計新人到設計總監,中間差的就是一個完整的設計技能金字塔。就像升級打怪,每完成一項任務獲得相應的經驗值,累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后,你的設計水平會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優秀的設計師。


          有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵用戶成長。它告訴我們:

          用戶的需求是永遠滿足不完的,所以什么值得做,什么是可分階段去實現的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什么,直到我們拿出自己的產品,他們就發現,這是我要的東西”;

          不斷完善主要功能,以滿足金字塔頂的核心用戶群。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個廣告位;

          如何優化完善產品架構,檢驗產品策略的合理性和完整性;



          防錯原則由世界著名的品質管理專家新鄉重夫提出,即在過程失誤發生之前加以防止,是一種在作業過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。

          防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優化設計把過失降到最低。該原則最初用于工業管理,后來應用于界面交互設計中,當使用條件沒有滿足時,常常通過功能失效來表示。


          自動檢測提示

          bilibili在登錄時輸入框沒有內容或沒有輸密碼時,登錄按鈕處于禁用的置灰狀態,只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。


          Twitter發帖時只允許用戶輸入140個字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符,超過會以負數警示。知乎發布文章標題過長時也會提示錯誤預警。


          消除可能的失誤

          防錯法則認為大部分的出錯都是產品設計的不夠優秀,而不該責怪用戶操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在用戶出錯之前就盡量避免錯誤的發生。比如,美團外賣在接受短信驗證碼時,系統會自動提取驗證碼在鍵盤上方顯示,用戶點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號,避免手動輸入的出錯率。


          將失誤降至最低

          二次確認,在一些比較重要的場景讓用戶二次確認,通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在提交信息前再次確認。


          視覺暗示

          可在視覺(置灰或隱藏)上屏蔽那些不能選的選項,避免用戶點擊后才報錯或點擊沒反應。


          其次,一些不可恢復的操作,視覺上通常會給強標識。例如,刪除短信時的文字顏色“變紅”。


          為用戶犯的錯買單

          當用戶輸入錯誤信息時,比如打錯字,系統應該給予用戶想要的信息,而不是無動于衷,冷漠視之。


          范圍限制

          其實限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。例如,Airbnb訂房可選日期和設置鬧鐘時的時間范圍。


          研究得出,使用產品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案,做到操作前、中、后都有及時的反饋,預測到他們有可能發生的誤操作狀態,讓用戶更快完成目標,幫助用戶減少出錯率。



          每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?

          防呆(Fool-proofing)是一種預防矯正的行為約束手段,運用避免產生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。


          設計師應謹記:不要認為用戶是專家。比如,我們都知道“漢堡”圖標就是菜單,點擊這個按鈕就會調出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App,在他們眼中產品只是眾多工具中的一個。因此,一定要把交互和設計做的簡單,通用的圖標、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復學習的負擔。每個頁面應強調一個重要的功能而不應該讓用戶做選擇題,這些都是有效防呆的好方法。


          △頁面的中主按鈕更突出


          防呆設計是預防錯誤發生的方法,讓非專業、無經驗的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時時為用戶思考。



          又被稱作“簡單有效原理”:“如無必要,勿增實體?!?

          通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下,要求得越少的那個就越好,越有價值”。


          應用到設計學領域,該法則認為做產品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,產品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導致使用效率降低,還會增加不可預知的后果。建議在不損及功能的前提下,干掉多余的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達內容更好地用戶體驗。


          總的來說,我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。

          刪除:關注核心,讓用戶注意力集中在自己要完成的目標上,刪除不必要的功能、流程和造成視覺混亂的元素等;

          組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,用戶負擔約輕;

          隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進展示和適時出現的方法減少干擾;

          轉移:把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提,就是先搞清楚把什么工作交給計算機,把什么工作留給用戶。




          小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

          可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達


          雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。


          一樣東西與以往經歷明顯不同就產生了經歷差異。比如人生中的很多第一次,第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。

          該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點內容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區、tab欄的運營活動廣告,特殊化的設計讓它們在背景中脫穎而出。



          個人中心的會員卡為了吸引用戶注意,增加開通率,都成了重點設計對象。


          與以往不同的界面設計可以更加的吸引用戶,加深用戶的記憶,同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。


          Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或涂鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。


          因此我們在界面設計中,若想讓用戶對哪個模塊或者是元素引起注意或點擊,就可以打破常規對該元素進行強調設計,使他在背景中脫穎而出。但是不要任何元素都強調,因為什么都強調就等于什么都沒強調,就沒有重點,所以要謹慎使用這個方法。


          回到開篇的題目,答案是「嶗山可樂」。相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個了。你的答案是什么?歡迎在下方留言探討。




          食之無味,棄之可惜

          損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復之前的心情。


          生活中類似的栗子還有很多,比如旅游時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發現是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花...


          那么,該如何將“損失厭惡”賦能給產品設計呢?

          最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現在不買就會錯過的套路,用戶也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。



          我們App的用戶粘性不太理想,增加一個“簽到”功能吧,產品經理如是說。如是我們看到各種簽到得禮品,贏紅包等活動。中間還不能中斷,要連續簽到多少天才能得到獎勵,用戶也擔心中斷的損失。


          某網盤下載文件時,會給你一個10秒VIP高速下載的體驗,計時過后又恢復到龜速,讓你恨的牙癢癢。雖然這招有點損,但用戶體驗到了VIP的快感,很多人還是會乖乖成為付費會員。


          產品運營中會經常發一些優惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快用戶決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續費,典型的“騙”進來養肥了再“殺”。


          人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業,他們會用一些負面信息(空難、車禍)刺激你,用戶就會產生焦慮,自然就想規避掉這些概率小的風險。例如購買機票時的意外險,QQ退出登錄時的提示。


          還有就是有用戶自己的內容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。




          用戶會將大部分時間花在其它網站上,因此他們會希望你的網站也能像他們已經掌握的其它網站一樣,擁有相同的使用模式和習慣。 

          Jakob定律是由Jakob Nielsen提出的,他認為用戶在其他網站所積累的經驗教會了他們如何使用網站,所以他們會希望你的網站可以與那些熟悉的網站一樣,相似的使用方式,在使用你的產品、服務、內容和信息的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆用戶或導致更高的認知成本。


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


          在移動端App中也應如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖標,甚至一句微文案。


          在設計產品時,要先延續大眾早已習慣的概念模型。然后再從自己的產品出發,對其進行改善。而不是從零開始制定自以為是的流程。

          日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調整等功能都放在底部操作區域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學習成本提升使用效率。


          也許你會質疑當所有產品都遵循相同都設計模式,會讓產品同質化嚴重,答案是必然的。此時需要深入了解用戶的目標和心智模型(用戶訪談、用戶畫像、用戶體驗地圖等),并將其應用到我們的產品設計中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗。上文YouTube例子中,就是通過簡單的用戶授權(新舊版本選擇),避免了心智模型的不一致會帶來的問題,當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確保改版前后用戶心智模型的一致性,導致大量用戶流向競爭對手Instagram那里了。


          但是也要注意設備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。


          思考總結

          1、用戶會把在其他產品使用中已熟悉的操作習慣轉移到另一個看起來相似的產品上;

          2、利用現有的思維模型,使用戶可以專注于自己的目標上,而不是學習新的操作方式;

          3、在進行必要的改版時,請給用戶過渡到新版本的機會,即可以選擇短時間內繼續使用舊版本;



          看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀態”。它告訴我們瀏覽頁面是由左上至右下的視線流,左上角是視覺第一落點區,右下角是視覺最終落點區,因此右上角和左下角都是一個強烈的視覺盲點區,大多數時容易被忽略。


          在進行信息排布時,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對角線移動,符合用戶習慣性的眼動規律。


          古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。


          我們都知道一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此。還因為瀏覽是用戶的第一行為,他們的視線會根據頁面元素進行移動,最終停留在底部結尾的地方。


          看各種社交產品評論、點贊的位置,就知道產品希望用戶先干什么的想法。


          彈窗的按鈕擺放一般都是左「取消」右「確認」,目的是讓用戶最快地看到主要操作內容。



















          余額寶的「轉出」在左,「轉入」在右,畢竟誰也不想財往外流是吧。


          既然如此,為什么“發布”頁面的按鈕都在右上角呢?因為發布頁是屬于“編輯頁面”,需要用戶謹慎操作,這里關注的核心應該是可編輯內容區域,而不是按鈕本身。


          類似的例子還有很多,設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局,合理運用這些節奏模式,使用者會跟隨你“設計”的視覺流和運動規律來瀏覽頁面,有效提高用戶閱讀的節奏和理解能力。




          美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實現更高的需求和目標。


          馬斯洛需求層次理論有兩個基本出發點,一是人人都有需求,某層需求滿足后,另一層需求才出現;二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。


          回歸到產品,一款產品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產品的需求分析指明了方向。

          生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用;

          安全需求:人生安全、財產保險,也是強需求。如是各類投資理財軟件層出不窮。

          社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;

          尊重需求:每個人都有被尊重的需求,都希望展現自己,獲得人們認可。此需求可以深度結合在社交需求中。

          自我實現:最高層級的需求,完成與自己的能力相稱的一切事情,實現自己理想的需要。結合到產品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。


          由此規律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實現,變得可有可無,不再是所有人的剛需。一個優秀的產品,深諳人性滿足用戶核心需求,才能形成持續穩定高用戶粘性的產品。




          序列效應法則又叫系列位置效應,是指一種記憶現象: 在列舉項目時,排在最前面與最后面的元素,要比排在中間的更容易讓人記住。

          因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級里我們一般都知道成績最好的第一名和倒數第一名,至于排在中間的很難記住。因此對排在開頭的項目產生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目產生加強的回想效果,稱為“近因效應”( recency effect )。


          分類頁簽中,我們通常都會記得“精選”、“熱門”這類標簽,是希望給用戶進入App后看到的主要內容。這就是“首位效應”,把重要性高的內容放在首要位置


          我們都知道界面中“返回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“返回”時能夠快速回憶出來。


          tabbar數量不管是3個還是5個,用戶通常都會記得第一個“首頁”和最后一個“我的”,對排在中間的都會選擇性的忽略掉。


          有時候新上一個功能,產品想提高它的位置引起用戶注意,會和“我的”互換位置。例如網易云音樂,新版本中把“我的”放在第三個tab,為了提升“云村”重要性,把它放置最后一個tab,正是利用了“近因效應”。


          近因效應常用于及時進行反饋的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時用戶在看到有趣的內容,想要評論或分享時,不用等到文章看完即可操作。從而增強內容粘性,提高互動率。


          用戶的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助用戶減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。

          文章來源:站酷  作者:Fyin印跡

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


          日歷

          鏈接

          個人資料

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

          存檔

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