編輯導語:現今以至遙遠的將來,我們將面對一個殘酷的現實問題:人口老齡化。未來將有很多人群去關注這個群體,但是在市場上,對老年人的產品還是很少的,還存在很多問題。本文應對這個問題,展示不同適應老年人的產品設計細節,我們一起來看看。
當前,我們正面臨老齡化問題的嚴峻挑戰。
統計表明,中國的老齡化人口已達到2.64億,且這一數據仍在持續增長,而老年人在生活、情感上都面臨諸多問題。
但是研究發現,市場上目前沒有產品很好解決了上述問題。
當下移動APP產品缺少對老年人體驗的深層次關注與設計,只通過單一加大字號與簡化功能等解決基礎體驗,缺乏通過新技術應用和更全面的適老化設計服務老年群體,老年人的需求依舊未得到關注和滿足。
因此,百度基于自身雄厚的AI技術和精細、系統的適老化設計適時推出百度大字版,使老年人更平等地獲取信息和服務、獲得情感陪伴。
目前行業內缺失成體系的老年人研究報告,針對老年人的研究資料分散在建筑/平面/醫療/家居等各個行業,同時業內也缺少針對老年人系統的設計標準或設計指南。
現有無障礙設計標準針對殘障人士,且部分標準只適用于PC端,不適用于老年人和移動產品。
因此在進行百度大字版的適老化設計時,我們系統的研究了老年人面臨的問題、PC端無障礙設計標準及其他相關資料,產出了系統的移動端適老化設計標準體系,同時結合百度大字版實際場景產出了解決方案。
適老化設計包含:易閱讀、易收聽、易操作、易理解四個方面,后續將詳細闡述。
隨著年齡增長,老年人會出現視力下降、色彩感知弱、動態視覺減弱的問題。
老花眼、眼睛進光量減少等問題會導致視力下降。
眼睛晶體渾濁,晶體變黃的現象會導致色彩感知弱。視力減退,注意力降低,導致眼睛失去快速對焦的能力,動態視覺減弱。
因此為了使老年人更易獲得視覺信息,我們對界面元素做了一系列的改造,使內容更易閱讀。
1)增大字號
增大字號是適老化設計最有效的手段。
PC端WCAG無障礙設計標準建議字號可以放大到200%。
按不同的閱讀媒介與人眼距離進行推導,移動端字號大小建議在60px-81px之間,標題、正文、輔助信息等不同信息層級采用不同的字號標準。
此字號標準經過眼動實驗和用戶訪談進行了雙向論證,形成完整覆蓋各信息層級的字號大小標準,已經在百度大字版落地。
字號與眼睛距離對照圖
字號標準體系
字號應用場景
2)使用符合老年人生理、心理特征的顏色
老年人眼睛晶體變渾濁、變黃,導致對色彩的感知減弱,且研究表明老年人更喜愛溫暖明亮的顏色,更希望感受到活力而不是蒼老。
因此在顏色的設計上,我們通過增加色彩對比度到不小于3:1、大量使用暖色調、減少紫色和青色的使用3個手段,來進行界面色彩的設計。
顏色的選取和使用
3)提供有效的反饋提示
老年人的動態視覺減弱,對動態內容的捕捉和感知速度明顯下降。
因此,對界面中短暫出現的提示性信息,我們在現有提示時長的基礎上延長了一檔。
例如現有提示的停留時間小于3秒時,百度大字版延長到3秒,現有提示的停留時間在3-5秒之間時,百度大字版延長到5秒。
現有提示的停留時間在5-7秒時,百度大字版延長到7秒。超出以上時間則提供適當的關閉機制,避免打擾。
提示時長適當延長
隨著年齡增長,老年人也會逐步出現聽力下降的問題,聽力損失程度受地域、受教育程度、疾病等多重因素影響,且高頻和低頻聽力損失程度更深。
因此我們通過增加音量、適當降低語速等方式幫助用戶更好的獲取聽覺信息。
1)增大音量
針對老年人聽力下降這一現象,我們適當增大了音/視頻的音量。
研究表明,老年人聽覺平均感知音量在67.5~75.3分貝之間,因此在視頻開始播放時,我們對低于設定值的音量適當增加到約44%。
iOS系統音量分布
2)降低語速
為了保證老年人有效的接收到聲音信息并進行理解,音/視頻的播放速度也需要適當下降。
因此,我們減少了高檔位語速,并提供了高、中、低3檔語速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。
速度檔位選擇
移動應用需要通過手勢交互來完成任務,但老年人的肢體運動能力也會逐漸下降。
動作精準度下降使老年人無法準確的完成手勢操作,對動作的精細控制程度降低。
同時老年人相較年輕人運動更加遲緩,逐漸出現操作遲疑、猶豫或暫停,運動幅度或速度也會下降。
因此為了保證老年人可以準確的完成操作,我們采用了增大觸控區、降低手指運動距離和精準度要求、提供有效的反饋提示、操作功能顯性化等方式。
3)增大觸控區
增大觸控區是使移動應用易操作的最簡單有效的方式,同時視覺設計上也需要讓老年人感知到觸控區增大。
我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算,結合人拇指和食指的點擊區域大小,推導出移動應用上,觸控區應大于等于112px×120px。
觸控區域示意
2)降低手指運動距離和操作精準度要求
老年人的肢體運動能力下降,難以完成長距離、長時間、連續、高級的操作。
因此我們集中界面的主要操作在屏幕下半部分,保證用戶在使用時手指移動的距離更短,同時減少使用具有明確方向性、精準度要求的高級手勢,如雙擊、旋轉圖片到正向等。
降低手勢操作的精準度要求
3)提供明確的操作反饋
為了提醒老年人注意、告知其已完成操作、增強操控感,我們在特定場景增加了振動反饋,如臨界值、出錯、滑塊、警告場景。
振動反饋
4)隱性操作顯性化
為了減輕用戶的學習難度,我們將所有隱性功能或需要手勢操作觸發的功能進行了顯性化設計,如點擊底bar刷新,功能隱性不易發現,百度大字版采用動態刷新圖標的形式,增強底bar可點擊刷新的感知。
隱性操作顯性化
5)輔助用戶輸入
現實生活中,很多老年人不會使用輸入法,而且肢體運動能力的退化也為輸入帶來了不便,移動設備的輸入法操作區域小難以精準操作。
因此我們依托百度的AI技術,提供了語音搜索和圖像搜索能力,使老年人可以方便的通過語音和圖像搜索主動探索獲取新知,答疑解惑,跟上時代進步。
依托百度AI技術提供語音和圖像搜索能力
隨著年齡的增長,人的認知能力也會逐步下降,老年人會出現反應慢、學習力下降、判斷力下降的情況。
他們很難一遍學會新內容,也難以判斷信息的真偽。因此我們通過簡單直白的文案話術、清晰明確的圖標設計、可信的來源設計來使內容易理解,安全可信。
1)采用通俗易懂的文案
由于老年人觸網時間短、受教育程度不同,難以理解專業的互聯網術語,為了幫助他們更好的使用產品,我們對專業術語都進行了簡化,采用了通俗易理解的文案。
文案適配前后對比
2)提供清晰明確的圖標設計
為了幫助老年人更好的理解和使用產品,百度大字版的圖標設計都采用了簡單易理解的圖形,同時功能入口大部分采用圖形和文字結合的方式,通過雙重手段幫助老年人理解產品功能。
圖形對比示意
3)提升信任感
在內容信息來源中或涉及經濟交易的環節,百度大字版通過增加官方標簽、提供官方平臺保障的方式來提升產品整體的可信度,增強老年人對產品的信任感。
官方標識和保障示意
4)提供即時的幫助
為了隨時解決老年人遇到的問題,百度大字版提供了暖陽熱線,使老年人可以隨時打電話獲取專業人員的幫助和解答。
由于很多年輕人去大城市尋找機會,導致產生很多空巢老人,他們情感孤獨,缺少陪伴。
疫情的爆發,更使老年人在節假日也難以與家人團聚。
因此百度大字版通過語音合成等AI能力,還原兒孫親友的真實聲音,用于全局內容播報朗讀,使老年人感受到至親至愛仿佛陪伴在他們身邊,緩解老年人的孤單和思念之情。
全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導致的視覺疲勞問題,同時可以解放雙手,使老年人隨時隨地聽朗讀。
語音合成
全局內容朗讀場景
百度大字版圍繞老年人的實際生活需求,依托百度的內容生態和個性化推薦技術,提供了符合老年人興趣的圖文和音視頻內容,一站式滿足了老年人的內容消費需求。
智能字幕
百度大字版還提供了多種實用工具,滿足老年人疫情時代和日常的生活訴求。
疫情導致線下服務線上化,因此為了幫助老年人適應這一生活方式的轉變,百度大字版提供了在線政務工具。
很多老年人承擔了教育孫輩的責任,因此我們提供了一些輔助教學工具,幫助他們帶孩子。
更有疫情地圖、垃圾分類等貼合日常生活場景的工具,使智能技術更貼近、融入老年人的生活。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在了解“列表構建器”之前,我們先來了解下什么是“列表”和“構建器”。
列表是一種數據項構成的有限序列,即按照一定的線性順序,排列而成的數據項的集合。常見的列表有新聞流、表格、事件列表、好友列表等。
在 java 中,構建器主要用于把復雜對象的構建過程抽象出來,使得復雜對象的構建可以分部件分別創建,從而根據需要構建出來非常復雜的對象。由此我們可以推演出日常中大家口口相傳的圖表構建器、地圖構建器等實際是在闡述圖表、地圖等依據某種規范或規則生成此類對象的過程。
因此,我們今天要聊的“列表構建器”就是通過某種途徑,達到用戶所需的列表對象的過程。
在 B 端界面中,穿梭框就是列表構建器的一種展現形式,用戶從較大的數據集合中挑選出符合自己所需的較小的數據集合。通常大數據集合在左邊(待選區),稱之為源數據區;小數據集合在右邊(已選區),稱之為目標數據區。
B 端界面上為何會需要列表構建器這種組件呢?從實踐經驗來看,無外乎以下 2 點:
1. 所見即所得
源列表和目標列表在同一個頁面,用戶無需通過跳轉頁面來回查看源和目標數據,不僅提升了用戶操作效率,也提升了用戶操作的愉悅性。
2. 數據展示量大
列表構建器可展示的源數據空間和目標數據空間都比 select 組件大的多,這非常方便用戶在界面上自由與直觀地操作。對于 B 端產品來說,數據量大是不爭的事實,在展示、操作、呈現上也是急需解決的問題。列表構建器的出現在一定程度上解決了某些場景下的問題。
使用列表構建器設計模式的情景為:
根據不同場景下的不同需求,衍生出了列表構建器的多種形態,下面分享一下 B 端常見的列表構建器場景設計模式。
What 是什么
基礎列表構建器是列表構建器的基礎用法,展示了數據量不大的源數據,用戶通過選擇后確定目標數據。
When 使用場景
當源數據量小于大約 50 條時,且選擇的目標數據要直接可見時,可以考慮使用。
How 如何使用
用戶直接通過滾輪查看源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
展示了數據量較大的源數據,且有搜索功能,用戶通過選擇后確定目標數據。
When 使用場景
當源數據量較大,用戶已經無法通過在有限容器中滾動鼠標快速查閱和定位數據時,可以考慮使用。
How 如何使用
用戶通過搜索確定目標數據,勾選后再通過穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
該列表構建器可對數據進行排序,讓用戶將自身關心的數據前置。
When 使用場景
當目標數據量較大,用戶需要將自身所關心靠前展示,進行查看、對比、分析等操作時,可以考慮使用。
How 如何使用
用戶通過搜索確定源數據中的目標數據,勾選后再通過穿梭按鈕將已選擇的數據轉入已選區;再在已選區中將某些數據進行置頂展示或前置展示。
What 是什么
該列表構建器可直接將源數據穿梭到目標數據區。
When 使用場景
當勾選的源數據無需反復確認時,可以考慮使用,這大大加快了用戶的操作速度。
How 如何使用
用戶點擊待選區數據的添加按鈕,直接可將數據添加到已選區;點擊已選區數據的刪除按鈕,也可將數據回歸到待選區。
What 是什么
顧名思義,表格式列表構建器以表格的形式展現,方便用戶多維度確認數據范圍。
When 使用場景
當用戶選取的結果數據需要數據本身的多維度屬性來確定時,可以考慮使用。
How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
標題式列表構建器除了展現普通的數據,還有圖片等信息。
When 使用場景
當源數據的展現需要更加豐富時,可以考慮使用。
How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據,然后選中它們。當確認后,點擊穿梭按鈕將已選擇的數據轉入已選區。
除了以上常用場景的列表構建器設計模式,根據業務的需求大家可以在此基礎上繼續拓展和衍生,豐富 B 端界面的表現力,及滿足業務日益豐富的場景需求。
基于基礎的常用列表構建器,不同產品根據自身的實際需求衍生出了多類構建器,我們一起來感受下吧。
1. sketch 常用功能構建器
在 sketch 界面中,工具欄被設計成只顯示用戶認為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。
2. sketch 常用色彩構建器
sketch 提供了常用色彩構建功能,對于設計師常用的顏色可以自行添加出來,形成一份常用色彩庫。
3. 應用參數關聯構建器
應用需要在關聯參數后才可運行。右邊為參數集合,左邊為應用與待關聯參數列表,用戶只需要從參數集合里面選擇目標參數拖拽到對應的應用容器中,即可完成應用與參數的綁定。
4. 表格列顯示字段構建器
當表格列非常多時,用戶可以選擇列顯示字段構建器來將常用列字段選取出來。如此表格會變得輕盈,且數據加載變快。
5. word 底部欄元素構建器
鼠標右鍵點擊 word 底部欄,會出現底部欄上可展現的所有元素。用戶點擊勾選后,元素被展現到了底部欄上。
6. 自定義模塊構建器
富途牛牛允許用戶自定義界面模塊,方便用戶按自身的習慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的,配置成自己想要的模塊界面即可。
7. 選成員構建器
很多 B 端產品的成員管理模塊都需要涉及到添加成員,這時候會用到選成員構建器,將成員從一個池子添加到另一個池子。
列表構建器在 B 端必不可少,產品經理和設計師根據產品本身的業務訴求,基于基礎的列表構建器衍生出了很多種玩法,以不斷提升 B 端的用戶體驗。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖表的作用在于對數據的合理的詮釋而不是美觀。所以,在了解圖表怎么繪制前,更重要的是了解圖表是什么,包含哪些類型。下面就做下相應解釋方便大家理解~
在今天,隨著大數據和數據分析理念深入人心,圖表在 B 端設計的地位越發重要。
那么什么叫圖表呢?
圖表指的是可以直觀展示統計信息屬性和數值的圖形表格,對于多數人來說第一次接觸圖表概念都源自中小學計算機課程中的 Office Excel 表格教學。
要理解圖表,你就繞不開 Excel 這個軟件或其功能形式。我們都知道 Excel 是一個表格工具,可以任意填寫表格化的信息內容進去。
但那只是呈現出來的表象,Excel 的真實身份應該是一個數據記錄工具,通過這種表格形式記錄,比如班級學生成績、客戶聯系方式、倉庫進銷記錄等等。每一條記錄下的信息都是一條獨立的 “數據”。
盯著表格看,我們確實可以看到一些具體的信息、數據、內容。但是,數據的作用只是讓我們自己去精確定位想要的內容而已?顯然是否定的。
我們統計數據的目的,還包括要從眾多的數據條目中獲得反映真實情況的 “規律”、“趨勢”,如果我們只盯著數據條目一條條的瀏覽,是很難找出這些信息的。
于是,人類就發明了圖表這種可視化工具,幫助我們對數據進行總結,用更直觀的視覺方式來認識數據和找出規律和趨勢,這也是為什么 Excel 是最強大的圖表生產軟件的原因之一。
總結:圖表是統計學的子學科,它幫助我們更好的找到數據背后的真相,并做出正確的決定。
圖表既然由數據內容生成,這個生成和轉化的過程當然具備一些基本的規則和條件。要滿足圖表生成的數據必須要包含兩種基礎信息 —— ”維度“ 和 ”數值“。
它們是組成絕大多數圖表的基石,比如看下面的表格,一次體檢中有三個班級的5個同學,他們的身高、體重、體脂率、肌肉含量、視力各不相同。
我們可以從中挑選維度和數值,比如姓名做緯度(X軸),體脂率作為數值(Y軸),那么就可以生成基礎柱狀圖表。
從上面案例可以知道,橫向緯度表示的是你圖表中要包含多少不同的展示對象,縱向數值則表示你要顯示該維度的哪一類數據。
緯度通常指某個具體的人、日期、事件、分類,通常是 不可量化 的內容。而數值則是指包含 可量化 的數據類型,重點要記得數值是指 “數據類型”,而不是指具體的參數值。
再進一步,上方生成的圖表,雖然直接反映了我們選擇的緯度、數值的情況,但顯然對于不了解數據背景的人來說太簡陋了,不知道它們代表的意義。所以,一個完整的圖表還會包含一些 “解釋” 性元素,來讓觀看者更好的理解圖表內容。
所以,一個完整的圖表中除了中心圖形,還會包含標題、單位、緯度圖例、網格、選中提示等內容,用來提升其閱讀性。
以上只是最基礎的示例,不同圖表、內容,對說明信息的要求各有不同,我們會在下方做出一定的解釋。一個優秀的設計師要學會如何因地制宜,優化圖表的內容構成,并對展示的信息進行取舍。
隨著統計學的發展,圖表也經歷了一系列的增長與創新,除了我們常見的幾種圖表外,還發展出了大量平??床坏?,只存在于各自專業領域的特殊種類。但是,它們對我們的生活和工作也起到產生了重要的影響。
比如在新冠危機中,政府和專業機構對民眾開放的數據就大量使用了圖表進行解釋,讓我們可以很清晰的了解事情的走勢和真相。
之所以有這么多不同圖表,讓人眼花繚亂,在于數據所包含的信息和特性不同,導致了它們所總結的規律類型也不同。
業界將圖表展示類型分成了四個大類,包含比較、分布、構成、聯系,雖然比較簡陋,但這是新手認識圖表最簡單的方式。
我們簡單解釋下這四個分類代表的作用:
比較:用來對比不同對象數值高低,比如上一份學生身高案例
分布:展示不同對象數值的分布區間,比如新冠新增分布省份
構成:表示某子對象的構成關系,比如班級中的男女比例
聯系:表示不同對象之間的聯系情況,比如不同城市之間的人口流動
之后我們就會以這個框架,來解釋不同分類下的圖表,幫助大家建立對圖表的正確認識和設計方式。除了這種標準分類以外,我還額外做了一個歸類,就是基礎和高級圖表。
前面提到,一般圖表就只反映緯度、數值兩個方面的圖表類型,很容易理解。但復雜的圖表,就會超過這個范圍,它可能包含了多個維度、多種數值、甚至第三、第四。
比如下面這個散點圖,除了身高(緯度)、體重(數值)外,還表現了個體(圓點)、性別(色彩)。在圖表本身的解釋性元素中,還包含分布區域、最大最小值標識、體重/身高均值。
這已經超出一個沒有接觸過統計的新手認知范疇了,是需要具體學習才能學會如何閱讀和應用的圖表。
這還是比較簡單的高級圖表,往后還有類似?;鶊D、K線圖(韭菜的自我修養)、和弦圖等類型,它們有各自使用的規范、參數,以及應用的場景。
高級圖表的復雜度和抽象性,決定了它的使用門檻較高,識別效率較低。而隨著數據各行各業數據重要性的提升,對圖表的需求已經不再局限在二維抽象圖形的應用上,而是提供了視覺效果更精美,制作過程更復雜,閱讀門檻更低的可視化數據展示內容。
雖然我們在本篇文章不會拓展到大屏可視化的領域,但是掌握好平面二維的統計圖表,提升對統計目的的認識,是深入學習可視化的必要條件。
接下來,我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區別,但它們有很多細節是具有統一規范的。優先掌握這些一致的內容,再理解不同圖表的具體繪制差異,可以幫助設計師快速上手圖表設計工作。
上面我們提了,一個成熟的圖表會包含不少解釋性信息,怎么放置解釋信息和圖形元素是我們在設計時的第一個考慮要素。
常見的抽象圖表都有一個完整的矩形區域,我們要先確定該圖表的具體占比尺寸。然后,對這個區域進行布局的規劃,而這個布局的規劃就和解釋信息的展示有非常大的關系。
比如,你需要在圖表中增加標題和圖形解釋,那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會增加一個默認存在的文本型解釋模塊,那么還會再右側再切割出一個區域出來。
除了解釋信息外,我們在設計中有時候還不能忽視交互內容,比如要包含分類篩選、時間線控制、開關等控件時,它們準備放在哪里,也要在這個階段確定出來。
經過前面的切割,其實我們就能確定出中間的圖形區域了。在開始繪制前,我們還要對圖形具備的信息做進一步的確認,XY 軸坐標是否包含文字解釋,餅圖類是否包含延長指示線說明。
將這些區域先確定出來,減去它們的空間,就留下了最終要圖形展示的區域了。
合理的圖表繪制流程變是先布局,確定信息內容,最后才集中處理圖形元素。如果對于前端適配有一定了解的同學,也就知道在完成這些步驟以后,圖表的適配規則制定就暢通無阻了。
有了圖形區域,接著就可以開始動手畫圖形了。不管是基礎還是復雜的圖形,你想要讓自己輸出的作品嚴謹、質量高,就需要應用專業的繪制方法。
圖表圖形的繪制類似尺寸作圖,需要應用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創意的地方,而是要以準確的方式繪制出來。它包含兩個重點,分布和比例映射。
以一個柱狀圖表舉例,該圖表中維度包含了 7 個對象,即應該出現 7 個柱形。那么首先就要通過等分圖形區域,來確定柱形的分布,XY軸文字的對齊對象。
如果你不羅列對象具體數值的話,到這步也就結束了,但如果對象數值是必要顯示內容的話,那么就要盡量確保柱狀的顯示比例和數值是一致的。
假設在上方案例中,Y軸總高是 100px,那么數值中每 1 小時的高度就是 100/16 = 6.25px,我們就要用你寫下來的數值 * 6.25,保證柱狀圖高度比例和你的數值一致。
而類似餅圖這樣的圖形中,只要添加了具體數值內容,那么餅圖中不同的扇形角度,也要符合對應的比例。比如占比 10%、20%、30%、40% 的四個對象,它們的角度就分別為 36、72、108、144。
這就是分布和比例映射的基本邏輯,不管是什么圖表,只要它根據數值在區域中進行繪制,就一定會受到數值的影響。不管學習什么新的圖表,都只要確定這兩個步驟就可以輕松準確的完成繪制。
至于具體該怎么實現,用插件還是參考線,就是軟件基礎的問題了,不在這里展開。
在圖表設計中的最后一個問題,就是關于配色的方案了。圖表配色的技巧主要關注兩點,選色邏輯和搭配方法。
選色邏輯,就是圖表用色的一些基本規范。我們知道圖表往往非常的復雜,或者頁面一屏中會包含大量的圖表。
在這個基礎上,圖表的用色就注定是不能太 “剛猛” 的,飽和度要偏低,明度要適中。在選色面板中,它大概處中部偏上的區域。即使產品主色用的飽和度非常高,圖表要和主色統一,也建議在主色基礎上做適當調節,在色系上接近即可。
并且,建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機稿中,漸變色的展示效果也非常的不理想,沒有任何可讀性。
有了選色邏輯,多色搭配的思路也就變得而非常簡單了,只要重點關注色環的配色模式即可。
配色模式多種多樣,包括補色、三角對立、類似、四元、方形、臨近等等,不用想的那么復雜,只要牢記根據你的設計風格需要,你是要相鄰配色,還是等分配色。
相鄰配色,即以一個色系的臨近色系為標準的搭配。以 H(色相)、S(飽和度)、B(明度) 配色模式為準,飽和度和明度數值基本不變的情況下,小幅度變更色相。
等分配色,也是保持飽和度、明度的一致,根據需要的色彩數量(大于三個)在色環中按角度等分,獲得均勻的色彩過度。
配色的方法很簡單,難的是你們如何根據頁面的需要、視覺的體驗,合理的運用配色的方案,這沒有統一的標準。要記得圖表配色不是僅僅針對自身,會和頁面其它色彩產生聯系。
保證相對平緩、不太激進的圖表配色思路,是最安全的做法。
首先解釋第一類圖表 —— 比較。
比較圖表的作用,是用來對緯度的數值做對比的圖表類型,直觀對比不同對象的強弱、排序、趨勢。
柱狀圖,是一個使用柱狀圖形反映緯度數值的二維坐標軸圖表,也是我們最常見的圖表類型。
在這個二維坐標軸中,我們可以用縱軸代表數值,也可以用橫軸代表數值,另一個軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的(橫向的也被叫成條形圖,都是一回事)。
柱狀圖除了每個對象包含一類數值的做法以外,也允許包含多個數值類型,每個類型使用一種顏色表示,這種圖表叫分組柱狀。
并且,柱狀圖作為最基礎的圖形,衍生了非常多下級的柱狀類型。包括:堆疊柱狀、子彈圖、正負混合、瀑布圖、直方圖等。但要注意的是,并不是所有柱狀類圖表,都是作為對比來使用的。后續會有進一步提示。
柱狀圖通過柱體的長短,可以直接對比不同緯度數值的高低,但使用也有一定的差別。
緯度之間關聯性不是太強,或者按時間順序排列的就適合用橫向排列的方式,比如下方記錄我隨時可能猝死的打工人一周睡眠時間(見左圖)。而涉及排名或者時間的數據組,就適合使用縱向排列的,比如 Geekbench 展現不同 Mac 處理器強弱的排行榜(見右圖)(os:Pro 居然比 M1 還低?)。
兩種圖表的選擇還和 UI 環境的交互方式有關,在APP中,橫向排列的柱狀圖可以顯示的數量非常有限,想放更多緯度就要左右滾動,體驗不佳。而使用縱向排列則對空間的要求沒那么高。
折線圖也是基礎圖表,通過創建端點并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似,但兩者在使用上是有一定區別的。
當我們要選擇使用柱狀圖的時候,往往關注數值的總量,或者維度代表的是不同的對象,比如不同 CPU 之間的跑分對比。但是折線圖的使用就沒有那么單一,它主要應用在單一對象的單個維度變化對比中。
比如,我們監控 CPU 的占用頻率,那么維度使用時間,數值用百分比,這里面產生的數據都是圍繞 CPU 的占用頻率展開,但如果維度改成了當前時間不同核心的占用數值、溫度,那么我們就肯定不會用折線圖來表示。
折線圖的使用是要通過線段的曲折來反映數值的波動,在應用過程中往往不作為一個靜態的圖表展示,而是應用于監控的場景,比如監控股市市值、網站在線人數、CPU溫度、同一地區降水量等等。
在折線圖中,最大的認知誤區就是對于曲線線段的應用了。在數之不盡的網上飛機稿中,使用曲線的折線圖表 90% 以上都是錯誤的。
這要回歸本質來探討,折線圖也是進行對比的圖形,如果沒有直觀的波動,那么這個圖形帶來的信息量就非常有限。曲線會因為圓角的緣故而降低波動帶來的沖擊力,甚至抹平這種對比。
只有在必定會連續出現極大波動的圖表中才適合使用曲線,例如圍繞在會有一個中間值數值,曲線進行正負兩端移動的類型,比如監控呼吸中含氧量(呼和吸一個周期的維度)。
所以,盡量避免曲線的應用,不僅畫起來麻煩,而且實際使用效果極差。
作為折線圖,在一些數值代表完成、占滿、填充的概念時,往往就會覺得單純的線段表示不夠直觀,于是就產生了將下方的區域填充色彩的 —— 面積圖。只展示一個數值類型不夠要加入多個數值和線段的就叫折線堆疊圖。
雷達圖,相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達圖是一種偏向概括性的圖表,并不能用來體現大數值和高頻變化,是用來對比同一個對象不同維度數值的圖表。
雷達圖的應用,首先要確認出不低于5個的維度,并且這些維度可以使用相同的數值體系,比如0-10分,0-100%等。并且,這些維度最好是由同一個對象身上拆分出來的,而不是 5 個維度指代不同的對象。
簡單來講,就是我們可以用雷達圖來表現一個學生不同科目的水準,這樣雷達圖可以大致概括這個學生科目掌握情況和相對的強弱。
但是不應該用雷達圖來表示不同學生同一科目的水準,那就只是更基礎的對比,用柱狀圖就可以了。
當然,雷達圖中的占用內容,也可以添加多個對象,一個雷達圖中可以放多個同學不同科目掌握水平的疊加圖形,以此對比他們的差異。
雷達圖的繪制,也是優先制定說明內容區域,然后再開始圖形的設計。
因為在雷達圖中,我們對維度的描述,基本只能設計到不同端點外部,那么文字本身的數量、占比,就會對圖形的顯示產生非常大的影響,并且在雷達圖中維度的描述文字是必須的,過度精簡還是用其它方式體現都很不直觀,所以優先預留足夠的文字空間。
然后,根據我們需要的維度數量繪制一個等邊的多邊形,并設置合理的數值。
之后,才是確定出這個多邊形內所包含的數值刻度數量。假設除圓心外總共要顯示5級,那么就要畫 5 個堆疊的等邊形,那么我們就從最大的那個等邊形入手,再復制4個出來,對它們分別乘以 80%、60%、40%、20% 即可。
最后,再將每個維度對應數值根據百分比將端點打在維度的直線上,用鋼筆工具將每個端點連接起來創建一個完整的不規則多邊形,就完成了雷達圖的設計。
如果想要在一個雷達圖添加多個對象,只要用不同顏色描邊繪制對應數量多邊形即可,如果要填充這些圖形,就一定要使用透明度填充來完成,否則可能遮擋后方的端點,導致圖形不全。
階梯圖是一種用來對比前后數值漲跌的圖形,它是柱狀和折線圖的合體。它和折線圖的不同之處在于,更關注每個對象增減的份額大小。
不僅僅是關注波動,而是更具體的值。類似關注一只股票全年的股價漲跌情況,每個月漲跌的具體額度,就適合使用階梯圖表現。
漏斗圖因為長得像漏斗而聞名。雖然這個圖形看起來像一個錐形或者三角形,但本質上漏斗只是條形圖(橫向柱狀圖)的變體。
漏斗圖是一種對階段進行分層表現的圖形,從上到下的順序中,數值一定會呈現衰減的趨勢(起碼不會變大),然后從上到下的柱體就越來越小。
例如,UX 數據分析經常用的漏斗模型,就會建立一個從用戶訪問主頁,到最后完成下單的轉化率,每一個步驟都會有一定的用戶流失。
在基礎漏斗圖之上還有進一步拓展,比如對這個轉化本身有一個預期,那么可以做對比漏斗圖,比較現實和預想中的差距。如果要對比 iOS 和 Android 端的漏斗數據,還有比較漏斗圖,對比兩側的長短數據。
第二個解釋的圖表類型 —— 分布。主要是用來研究數據分布情況的圖表,對不同數據的統計分布狀況進行描述。
直方圖是一個看起來和普通柱狀圖非常接近的圖表類型,是一個用來表示同一個緯度范圍中,不同區間頻率的圖形。
直方圖是一個二級圖表,是對一級數據的進一步轉化。比如看上圖案例,散點圖(下面會說)本身記錄了不同的數據的位置,而直方圖就是記錄在發生在這個緯度內的次數。
直方圖乍一看很像柱狀圖,但實際應用場景往往使用了非常密集的柱體,讓它看上去像折線圖。對于設計師來說和直方圖打交道是非常普遍的,那就是在 Lightroom 和 Photoshop 中的通道直方圖。
當視覺設計師、攝影師在學習處理位圖的時候,就必然要學會直方圖的讀取,它并不是用來讓我們學習如何對比前后數據差異的,而是讓我們可以快速掌握這張圖片中像素點在不同通道的分布量。
直方圖是統計學中的 “頻率分布” 的視覺表現形式,需要確保使用的場景符合直方圖的定義,以及確保用戶能理解圖表內容。
對于直方圖來說,如果維度對象少,只要獲得相關的信息和數值,就可以像柱狀圖一樣來繪制。
如果是針對一些比較專業的場景,如上方的通道直方圖,那么就要放棄自己完成的目標,一定要借助相關插件,或者使用 Excel 等工具實現后再導入進來。
箱型圖也叫盒須圖,和直方圖類似,它也是一個二級圖表,即它不是直觀反應原始數據,而是對原始數據的狀態進行轉譯。圖表中的每個箱型反應一組數據的分散情況資料,每個箱型包含下面這些信息元素。
箱型圖反應的是一種 “大概” 情況,它不是一種用來進行精確數值展示的圖形。箱體主要是上四分衛和下四分衛的區間組成,下/上四分衛指的是 “樣本中所有數值由小到大排列后的 25%/75% 的數字”。
這里的排列主要通過 “數值大小” 來決定,而不是分布數據。比如一個班上100個同學包含身高 150、160、170、180、190 五種身高,雖然每個身高包含的人數不同,但 160 就是它的下四分衛,180 是它的上四分衛。
那么160-180身高包含的人數就是箱體本身的區域,上四分衛到上邊緣是 180-190 的人數,下四分衛到下邊緣是 160-150 的人數。
箱型圖可以反應的信息是非常豐富的,它可以非常有效的反應不同數據組的虛實、占比、上下限,可以獲得非常多有趣的結論。
在箱型圖的設計中,對于箱體和觸須的表達要依據數據本身的重要性來判斷。有些場景對最大最小值更在意,則箱體顏色就淺,線段更矚目。而要重點關注箱體的話,則可以對觸須進行弱化使用虛線。
同時,箱型圖的主要識別信息是 Y 軸的長度,一個美觀易度的箱型圖,箱體寬度盡量控制在一個比較纖細的水平,不要為了填充畫面的空白強行做寬。
相信稍微了解過股票還是基金的同學,對K線圖那可就一點也不見外了,下陽線、收盤光頭陽、小陽線,開口就是老韭……不對,老股民了。
K線圖是箱型圖的一個變種,也叫蠟燭圖,主要應用在股票、幣市、期貨等市場的交易數據上。一個K線圖包含了陽線、陰線兩個大類。陽線代表上漲,陰險代表下跌。
每個類型中,同時還表示當日成交中的最低價和最高價,柱體代表的是開盤價和收盤價。在我國股市,上漲用紅色,下跌用綠色,在幣市則相反。
K線圖實際上動手設計它的情況微乎其微(只用開發好的),我們只要了解它的原理即可。
K線圖基本只應用在和理財有關的證券行業中,在會出現 K 線圖的圖表模塊中,必然會出現相應的交互操作。如左右滑動、放大縮小,它是一個具備響應模式的圖表類型,包含兩種狀態。
如果空間足夠,則使用箱體和虛線的常規設計。如果顯示的對象密集,那么就會以一條直線來顯示,忽略掉箱體的部分。
同時,不同的場景,對于陰陽線箱體的展示會有一定區別,除了色彩外,還會應用實心和描邊的區別。
因為涉及財產、交易,針對K線圖的設計,一定要做好前期的業務調研,以及對比不同的競品,降低設計出錯的概率。
散點圖是一個使用也非常頻繁的圖表,它通過在 XY 坐標軸中添加圓點來表示不同對象的分布情況。
常見的散點圖就是對普通二維坐標軸進行 “打點” 的圖表,每個點代表統計學中的一個 “樣本” 或數學概念中的一個 “定量”,下面我們就用樣本來稱呼每個散點。
每個樣本在散點圖中必然包含兩種以上的信息,一個是緯度值,一個是數值,這樣我們才能確定它在坐標軸中的位置。
當然,針對樣本并不是只可以包含兩種信息,比如表示班級成員身高體重的散點圖,我們可以再引入男女的對比,對散點圖進行色彩的區分。再者,還可以添加體脂率,用每個點的大小來表示。
散點圖是一個很直觀的樣本分布圖表,它是概率論中做回歸分析的主要工具。所以往往我們會看到散點圖內出現了一個線段,那條線段叫做 “回歸線”,他是通過散點分布情況,計算出來的一條均值線段。這個線段不僅可以大致標識數據的趨勢,同時可以用來做概率計算和預測。
回歸線包含指數、線性、多項式三種,對應繪制出來的回歸線是曲線、直線、還是波浪線。
散點圖的圓點可以使用軟件的 Symbol 功能進行創建,確保后續可以統一修改配色和樣式,尤其是在包含多種色彩的散點圖中。
散點圖的繪制不一定要完美契合數據內容,但是在大致的分布和數量上要和實際情況貼合。如果僅僅是隨意的進行分布、均分,那么這個圖表就會顯得非常的不嚴謹和隨意,比如下圖圖表。
地圖圖表,是將抽象的 XY 二維坐標軸替換成地圖類圖形的圖表。本質上它們也包含 XY 軸,所以一樣可以將數據內容進行映射。
最常見的,就是地圖散點圖了。背景由實際的地圖完成,坐標則由經緯度體系來記錄。這是可視化設計中非常常見的中心圖表應用類型。
同時,背景的地圖并不是只包含地理信息地圖,還可以是球場、商場、網頁、建筑表面等內容。
熱力圖則是地圖和散點圖的合體,也是在二維坐標體系中顯示樣本,只是熱力圖更注重的是這些樣本之間的對比。例如區域的降水量、臺風風力表現、網頁的點擊區域等等。
熱力圖本質上也是將坐標軸切割成了若干小塊(樣本),每個小塊有一個對應的數值,然后通過算法繪制邊緣和不同的漸變。
它也是很少直接通過設計軟件繪制的圖表,需要借助插件導入數據來實現,我們只需要確認色彩樣式即可。
構成圖表相對其它圖表來說是最簡單的一種,包含扇形、環形、餅圖、堆疊、矩形樹等類型。
前面看到的圖表大多是遵循我們小學就看過的 XY 軸坐標系(笛卡爾坐標系)建立的,但是餅圖并不需要考慮坐標空間的問題。它是一個依靠角度來反映數據的圖表類型。
餅圖作為一種常見圖表,包含兩個大類,一般餅圖和環形圖。如果沒有一些特殊的交互或者復雜衍生類別的話,環形圖其實就是餅圖中間鏤空的版本……
餅圖繪制的主要依據是需要表現幾條維度,以及它們對應的百分比值。餅圖的顯示有比較大的局限性,那就是顯示的維度數不能過多??刂圃?2-9 條比較合理,數量過多就會導致圖形失去實際的使用意義。
除此以外,南丁格爾圖、旭日圖,也是餅圖的延伸,通過添加額外的維度或者子分類,對餅圖中的每個對象進行額外的示意。
餅圖作為基礎圖形,多數情況下也是由設計師自己完成的。但很多新手沒有找到要領,導致做出來圖形非常的別扭。我提供一個繪制的簡單的思路,那就是通過繪制不同的三角形來拼裝出一個餅圖。
這類圖形繪制的要點是確保三角形在圓心中的頂點時一致的,如果對比例的繪制有比較精確的要求,可以通過 Excel 之類的工具生成一個基礎圖形做背景,貼著它畫即可。
南丁格爾圖也可以沿用上面的畫法,那就是對每個維度的三角形采取不同直徑的圓做蒙版,就可以畫出不同半徑的占比區域了。
這么做的好處,是將圖形的每個維度獨立成一個單獨的矢量圖形,方便我們后續進行上色。
堆疊類圖表算是一個相對不那么嚴謹的類別,因為它多數由其它基礎圖表發展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。
之所以把它歸類到分布而不是其它大類下的圖表子項,原因是只要出現堆疊,就意味著這個圖表的核心目的是展示構成內容而不是對比或者分布。
在柱狀類堆疊圖中,通過將每個柱體切割成不同的更小柱體來呈現子分類的占比。面積堆疊圖,則是單純的把折線圖進行填充然后疊加的圖形。
而百分比堆疊,雖然看起來和面積堆疊和接近。但它是以最上層數據為 100% 標準,往下的每一級對象都根據頂層百分比呈現的分布樣式。
堆疊類圖形的設計,最難的不是圖形,而是色彩的應用上。之所以說堆疊只要應用就比原先圖形的作用更大,原因就是堆疊使用不同的色彩表現層級,對于我們的視覺吸引力遠遠大于圖形本身的輪廓。
而將豐富的色彩無縫拼接在一起,是最容易翻車的配色場景。在這種狀態下,建議大家只用臨近色來實現下級分類的搭配,千萬不要使用色相差異過大的色彩。
而對于面積和百分比堆疊圖,都建議在配色的過程中,直接使用帶有透明度的色彩。因為這些折線并不一定會完美上下覆蓋,當中間出現交匯的時候,不至于信息被遮擋。
矩形樹圖最初是一個設計用來表示磁盤空間占用情況的圖形,通過將一塊矩形切割成不同的區域來表示不同維度的占比,以及位置。
雖然也表示占比,但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關系,比如下面的 M1 芯片的示意圖,就是矩陣樹圖的一種直觀體現,在矩形中不同位置應用的不同芯片以及其占用的具體面積。
當然上方是最理想的情況,通常矩陣樹圖是為了對一些更抽象的概念實現矩陣化的排列。而這個排列中,還有個非常關鍵的要素是其中的 ”樹“ 字。
因為矩陣中的每個切割出來的矩形,都可以作為一個獨立矩形進行下一級的分割,實現一個類樹狀圖結構的信息收納。所以,完整的矩陣樹圖,是可以支持縮放或點擊進入下一層級的。
而使用矩陣樹圖不使用樹狀圖,原因也在于我們需要表現它的占比,而不是單純的結構。所以如果只是簡單表現層級結構,如企業組織架構、知識點拆分之類的,要用樹狀圖而不能使用矩陣樹圖。
在這類圖表在項目中基本不會獨立開發出來,因為其復雜度基本都會使用開源代碼。
設計師的主要工作,就是根據對應開源圖表,指定配色的方案,切割的邊緣大小,以及文字的顯示規范即可。
聯系圖表,是用來展示維度之間聯系的圖表類型,包含桑基、關系、和弦、韋恩圖、依賴關系圖等。
聯系類圖表中,多數是非常復雜的圖形,已經脫離直接手工繪制的范疇,所以我們只簡單介紹其中幾個有代表性的圖表且給出設計建議了。
?;鶊D是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。
這是一個比較復雜的概念,比如下面的概念,不同國家人口的流動,人還是原來那些人(數值),但他們以不同的數量比例,移動到不同的國家(維度)。
?;鶊D的應用,關鍵在對數值遷移流向的關注上,它適合應用的場景在監控產品用戶的跳轉去向,貨物的外貿出口狀況,或類似新冠患者流動城區、地點的表示。
?;鶊D的數值總量通常是不變的,會包含起點和終點的維度,而維度的長短即代表其包含的數值總量(權重)。
它有非常多的變種,只有借助特定的圖表生成工具,才能繪制出曲率、比例精準的流線。
關系圖是大家比較不會陌生的圖表類型,它在各類工具性軟件、網站中都有應用。比如天眼查股東關系圖、Wolai 頁面關系圖等。
關系圖中包含了大量的節點,節點之間還有對應的關系,同構線段進行鏈接。常見的關系圖有兩種類型,一種是力導圖,一種是弧長鏈接圖。
力導圖這名字也很難理解,源于力學中粒子存在某種互斥又具有引力的規律,粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序(讀書多的好處?)。
力導圖通常有一個起點,然后去關聯后續的其它節點,如果節點之間還有關聯,它也可以對這些節點的關聯做出連接。它不僅表現一對多的關系,也表現多對多的關系,甚至在極其復雜的關系網中可以呈現成一定的強關聯 ”聚類“ 信息。
而弧長鏈接圖,則是通過弧線對節點進行關聯的圖表,它既可以是環形,也可以是水平橫線的展示。
和弦圖是環形關系圖和?;鶊D結合的圖表,它表示結構之間的依賴關系和強度,鏈接的線段不再是粗細統一的而是具有粗細比例的標識,且維度之間的長度也有表示。
這類圖表常用于社會學、生物學等學科的研究統計結果繪制上。如果單純瀏覽,看上去非常復雜,所以正確的使用形式是可以進行指定維度的展示和隱藏的。
韋恩圖,它是所有學 UI、UX 設計的老朋友了,一個用圖形層疊相交來表示它們關系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。
韋恩圖的使用相比起來沒有那么嚴格的數學運算,它只是一種關系表現的方法,可以對各種無法量化的對象進行關系的陳述。比如,UX 設計師應該具備的知識點……
下面是超人的電話亭團隊持續整理收集到的可視化組件庫工具網站,以供參考:
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近有設計小伙伴咨詢,怎么樣的交互說明才是最好的,是大家都喜歡的。他寫的交互說明文檔提交給需求評審會的成員審核時,大家都建議他再寫的合理些,這讓他傷透了腦筋。
我告訴他:
第一、崗位對象不同:沒有一份十全十美的交互說明可以打動所有人,讓所有人為之驚嘆。畢竟,由于閱讀交互說明文檔的對象不同,他們會對交互說明文檔有不同的要求,這是崗位屬性導致的結果。例如前端開發希望詳細到字段、初始默認值、數據調取接口等,而領導只要看保證業務方向沒有錯誤的大交互鏈路。
第二、同崗位不同認知:同一崗位不同成員的認知、從業經歷、個人喜好、性格脾氣等也會導致不可能有完美適配所有人的交互說明文檔。例如在一個行業已經深耕多年的前端工程師,即使你的交互說明文檔寫的沒有那么詳細,他也可以從你現有的文字中推敲出其他方面,同時還能幫你補充完善;而針對剛入行的前端工程師,你要是寫的不詳細,他就會抓狂,項目時間緊急的時候還會自己腦補交互細節。之后你走查時候也會抓狂,但是沒用呀,誰讓自己沒有寫明白交互細節,遺漏了呢。
第三、使用場合不同:不同場合需要的交互說明文檔也不同。例如與對方面對面溝通,交互說明文檔可以少寫點;但是通過線上工具與對方溝通,就需要寫的盡可能詳細;如果是會議型的評審,那就要方方面面都做足功課了。簡單來說就像準備一份 PPT:針對同一個主題的 PPT,在外部演講和在公司內部演講,同一份 PPT 會需要設計兩個版本,一個是內部版,一個是外部版,原因在于使用場合不同。
第四、產品階段不同:交互說明文檔闡述的是一個產品的交互,而不是闡述其他的。如果產品所處階段為成熟期,那往往產品的交互文檔已經沉淀了很多通用法則,可以被復用,那么現在的交互說明文檔少寫點,問題也不大;但產品處于探索期或成長期,通常來說可復用性的交互資產是不存在的,那交互說明文檔就需要準備的相對完善。
有些設計小伙伴就說了,既然不可能滿足所有人,那我就按照自己的想法隨意寫好了。這可不行哦,畢竟我們的主要工作有一部分是撰寫交互說明文檔,這就必須要有認真、嚴謹、專業的工作態度,把這部分工作做好。那我們來看看,編寫一份友好的交互說明文檔要注意哪些。
交互說明文檔是用來告訴參與產品研發的團隊成員頁面交互相關細節的一個說明文檔,包括頁面間的邏輯跳轉、頁面內模塊的交互、頁面功能的狀態等。交互說明文檔寫的越詳細越有利于參與產品研發各方的正確執行。
我匯總了一些日常工作中有待改進的交互說明文檔形式,看看都存在哪些問題。
1. 文字密密麻麻,無結構
幾乎所有剛初入職場的設計師,在編寫交互文檔時,會怕自己寫少了別人覺得自己不專業,怕寫的不全沒辦法表達頁面細節,導致交互文檔密密麻麻都是文字,這讓閱讀者幾乎無法閱讀,找不到視覺落腳點。
2. 描述簡單,不完整
有幾年工作經驗的設計師,由于很多通用交互法則已了然于心,他們在編寫交互說明文檔時就比較簡單,一些交互就沒有寫在文檔上,這導致在開發時,忽略了某些交互。
3. 數據太假,沒有邏輯
交互稿數據沒有邏輯,是很多設計師經常會出現的問題,一部分原因可能在于產品經理沒有理順產品邏輯和細節就提交設計師畫圖了,另一部分原因可能在于設計時間緊張,來不及對交互稿中所有的數據都做到邏輯合理。
曾經遇到過的情況有,關聯數值關聯不上,表格中字段對應的值對不上,表單填寫的數據和實際情況不符。
建議大家在時間允許或有條件反推產品經理協助完善數據的情況下,盡量數據展現的真實與符合邏輯,如此有助于開發及相關閱讀者高效理解。
4. 圖文太遠,找不到
有幾次我注意到設計師提交上來的交互說明會標注“見圖 X”這樣的文字。也就是一段說明讀完了,還得去頁面的某個角落尋找對應的圖,這種體驗非常不好。
在交互設計原則中有一項為“足不出戶”?!白悴怀鰬簟钡囊馑际侵改茉诋斍绊撁娼鉀Q的事情,不要去其他頁面;能在就近完成的事情,不要距離過遠。頻繁的切換和跳轉會導致用戶心流被打斷,容易引起用戶思緒中斷、思考不流暢,甚至可能對產品產生反感。
同理,我們交互說明文檔中的圖文也應盡量相鄰,通過一眼文字一眼圖,讓用戶看的順暢、舒適,理解的快速。
5. 零散,東一句西一句
東一句西一句是指交互說明文檔中本該成為一體去描述的文字,被分成了好幾個部分去闡述,這對看文檔的人來說簡直是災難,他需要自己重新梳理交互思路,將交互規則串聯起來。
我們自己在編寫交互說明文檔時,盡量規避上述常見的問題。
對于什么是好的交互說明文檔,網上一搜一大把,這里我根據自己的經驗,和大家分享下什么是好的交互說明文檔。
首先我們來明確下,什么是好,有了好的標準以后,再來談談如何做到好。
通常情況下,交互文檔會給產品經理看,用來評審設計方案是否滿足需求;給視覺設計師看,用來指導視覺方案的呈現;給前后端開發人員看,用來指導開發邏輯;給測試工程師看,用來協助測試編寫測試用例。基于此,好的交互說明文檔關系著設計方案是否可被最大程度的實現。并且如果交互文檔文字冗長、邏輯不清晰,不僅看的人吃力,還會需要增加額外的時間來和開發工程師溝通。好的交互文檔,我認為至少需要具備以下 7 點:
為了讓大家一邊學習一遍實踐,我使用“表單校驗”的交互案例給大家進行講解。
明確價值
能協助項目成員通過文檔更順利地完成工作任務,能幫助用戶解決問題,能達成產品目標,則是好的交互說明文檔。文檔對各方有價值,是一份好的交互說明文檔的起點。那么,如何編寫才能達到上述結果呢?
一方面是將此次文檔的價值寫清楚,包括寫明此次交互設計的背景與需求來源、需求清單,標明交互設計的理論依據,可以給用戶帶來的價值等。另一方面要和成員宣導這些內容,讓成員感受自己要做的工作是有價值的。
“表單校驗”上場:
考慮全面
拋開文檔閱讀對象等相關影響因素,通常來說交互需要考慮到以下幾方面:
a. 整體交互流程
整體交互流程是指產品頁面與頁面之間的交互邏輯。
b. 頁面模塊交互說明
頁面模塊交互說明是指模塊自身的交互說明,或同頁面內獨立模塊之間的交互邏輯,或不同頁面模塊之間的交互邏輯。例如點擊導航樹節點會聯動右側表格內容刷新;點擊 banner 跳轉到對應的商品詳情頁,且定位到頁面 1/2 位置。
c. 頁面功能交互說明
頁面功能交互說明是指單個功能的各種情況闡述。例如搜索框內輸入文字,通過 enter 觸發對應頁面跳轉。
d. 盡量真實的數據展示
雖然是交互說明,我們也盡量做到模擬真實數據,否則很容易讓閱讀者產生錯誤判斷。并不是所有人都會一字一句的去閱讀文檔,因此,盡量真實的數據,有利于閱讀者更有效的了解。
e. 特殊情況額外補充說明
很多情況下,會因為某些原因出現極端交互情況,此時也需要補充完整。
f. 通用交互一處即可
建議交互團隊為產品建立通用型交互說明庫,遇到類似的情況,直接調取即可。
實際上我們在編寫交互說明的時候,不太會分得那么細,很多說明是混合在一起表達的。
“表單校驗”上場:
通俗易懂
通俗易懂是指要讓文字、語言、圖片等做到讓受眾易于理解和感知,從而在信息傳遞過程中盡量少的出現損耗,這一點同時也與人類的理解能力有關。
百度百科是這么解釋理解能力的:
“理解能力是指一個人對事物乃至對知識的理解的一種記憶能力。
理解,有三級水平:
當我們了解了人類的理解能力水平是參差不齊后,我們就要盡量在工作中將專業知識化繁為簡(也可以針對人群化繁為簡),增強溝通效果,最終達到完成團隊目標的結果。
交互文檔盡量做到講人話,不要講一堆專業術語。記得之前有個交互設計師在會議上闡述自己的交互方案時,提到用了“提供邀請”原則。由于與會成員是開發工程師和產品經理,他們問到什么是“提供邀請”原則,并且在這個問題上大家討論了很久。
由此可見,表達通俗易懂,是很必要的。
結構清晰
交互說明文檔除了要表達通俗易懂外,還需要結構清晰。
結構清晰的內容不僅使閱讀者一目了然、理解成本低,還可以讓閱讀者了解撰寫者的意圖。要做到文檔結構清晰,除了需要遵守一些規則外,也不能脫離當前文檔的實際情況。
“表單校驗”上場(把文字進行分段處理,并取出關鍵詞):
圖文并茂
圖片和文字相得益彰可以加深閱讀者對文字的理解,同時避免閱讀者去想象文字對應的結果。由于人們對同一段文字的理解不完全相同,因此建議設計師盡量安排交互說明對應圖解。
“表單校驗”上場(左圖右文):
僅此一份
僅此一份是說交付給團隊交互說明文檔的時候不要多份。之前我們的前端小伙伴拿到了兩份交互文檔,一份是純原型交互文檔,一份是視覺稿交互文檔,兩者描述的信息大同小異。此時,建議交互文檔的信息做合并,只提交一份完整的給前端小伙伴,讓前端小伙伴能專心致志理解一份。
修訂記錄
建議交互說明文檔留存修訂記錄,一方面可以了解交互文檔的變更歷史,另一方面有利于回溯和查找信息。修訂記錄一般包括修訂人、修訂時間和修訂內容。
由于項目進度、業務復雜程度等不同,我們不可能每次都能寫出一份最好的交互說明文檔,但我們可以想辦法寫出一份相對可讀性高、可理解性高的友好的交互說明文檔。我們常說自己是做用戶體驗的,那交互說明文檔就是體現我們交互能力一個方面。
除了完成交互說明文檔,想要讓開發小伙伴真正理解交互說明,還需親自和開發溝通,千萬不要認為我寫的很詳細了,他怎么還是實現的有偏差。事實上,就如開篇所說:同一崗位不同人的認知理解、從業經歷、個人喜好、性格脾氣等也會導致理解不同。特別是對于一些我們非常創新的、特殊的交互點,需要重點和開發說明。
并且,交互說明文檔基于業務的發展,也會不斷的迭代,我們要抱著多聽、多想、多思考、多接受的態度去不斷優化我們的文檔,盡力寫出一份友好的交互說明文檔。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語:如何讓運營活動更富特點,在不引起用戶反感的情況下、讓用戶提升活動參與度、進而推動有效增長?故事化元素的添加也許可以在一定程度上豐富用戶運營活動體驗。本篇文章里,作者結合實際案例,就運營互動如何增加故事化設計元素做了梳理,一起來看一下。
本文將圍繞運營活動,講講如何通過在運營互動玩法中嘗試添加故事化設計要素,以及設計過程中通過新興工具落地方案、與制造創新造梗、與社區進行聯動,為活動提供新的增長方向。
騰訊動漫發展至今,已是頭部的漫畫內容綜合型平臺;經過幾次體驗上的轉型,已然解決用戶消費場景的轉變(移動端轉型)與如何找到更好的內容(綜合平臺轉型);完整且有效地促進產品在初始期與發展期當中用戶體驗的提升。
面對接下來成熟期的增長挑戰;現階段選擇精細化內容運營的策略方向;更加高效發揮自身大IP內容優勢,轉化IP流量的核心價值。而運營活動是其中最為關鍵且有效的手段。
我們經過長期運營活動的設計積累后,發現了現階段漫畫領域競品與我們都存在的一些體驗問題:比如像B站經常運用營收向的活動,而且次數反復,容易讓大部分用戶形成一種逆反心理,覺得老是在圈錢。
還有像快看漫畫喜歡發揮自身社區活躍的優勢,運用社區任務機制的活動,但形式框架都比較通俗常見,多辦幾次容易讓用戶有疲勞感,數據效果的天花板也易可見。
面對這樣的活動體驗問題,我們嘗試突破。使用活動故事化為契機點,抓住數據增長的機會點。
講好一個故事前,我們要了解講給“誰”聽?目標用戶是誰?
根據以往用戶調研總結,現平臺用戶畫像分為四種類型:題材型、消遣型、拓展型、成熟型。針對這些用戶運營策略上,選擇二八定律,希望通過20%成熟型用戶的目標行為路徑提升80%的數據增長。
基于這樣的背景,交互會基于活動玩法的特性與主流程體驗,提煉出故事化的推導步驟。主要分為三個步驟:
第一,基于成熟用戶在活動不同周期時候的互動心理特點,挖掘可故事化的落腳點;針對落腳點的模塊與體驗方式制定相對應的故事化設計方案;
第二,在推動整體玩法故事化的過程中;使用有效的創新方法與工具,保障整體體驗方案能有效的落地實現;
第三,在整體故事化高潮節點或結尾處制造一些反轉的話題梗,引發用戶參與討論,增加活動認知的強度與參與黏性。
接下來我將以暑期泳裝大作戰這個活動為例子,闡述一下具體設計內容。
首先根據活動周期的不同的時間節點羅列出玩法可故事化的元素(例如:活動沉淀期的答題互動的空間代入感)與成熟型用戶的互動心理(例如:營造答題的緊張氣氛),再以與需求方共同確定活動目標(促進平臺內部活躍)為落腳點的標準。
提煉出可優化的設計錨點。通過尋找錨點的共性,進一步系統化的制定優化策略。人物魅力運用在AVG游戲的體驗空間里,可發展出完整的劇情互動線,可制造名場面的創新反轉,促進用戶活躍。
故事化應用的場景
AVG游戲中最重要互動體驗表達就是游戲人物的表情與動作,可傳達出題人的喜怒哀樂,更好地加強玩法的沉浸式感受與注意力聚焦。一個大型活動有大量人物表達頁面,我們如果用常規的AE制作動效素材,成本大,面對的挑戰也很大。當我們每每遇到困難就會想到使用一些創新工具,來提高設計動效素材的生產效率。
live2D (輔助批量生產的軟件工具)
live2D的界面
live2D應用效果live2D是日本cybernoids公司出品一款通過扭曲像素位置營造出偽3D空間感的二維動畫軟件。整體效果可滿足細微的表情變化,最可貴的是可下載或定制模板來批量生產。例如:情緒中“喜”的表達模板可套用相對應的素材頁面。當然這種人工智能的骨骼定位邏輯會有小偏差,可通過手動調整。
情緒鋪墊的流程
交互反饋的遞進關系通過故事劇情的推進,用戶闖關達到高潮階段的時候,需要為反轉造梗進行鋪墊。用戶通過交互操作與體驗反饋,遞進式把用戶情緒推動到高潮,就像追劇直接到大結局的那種期待感。例如用戶酷炫的打斗招數伴隨著打BOSS逐漸減少血量所表現的虛弱視覺感,這種形成反差感,可引領用戶持續玩下來去的心理反射。
高潮的分鏡頭用戶在通關后會有完整的造梗劇情過場。
首先通過一個關開門的蒙太奇的過場分鏡頭,增加儀式感。再次展露帶有面具的boss的互動對白。
最后,面具掉落,露出用戶自身的頭像。轉至黑幕顯示一段意味深長的文案——“與惡龍纏斗過久,自身亦成為惡龍;當你凝視著深淵時,深淵也凝視著你”(尼采《善惡的彼岸》)。傳達一種少年漫畫的核心價值觀:你要戰勝自己的心魔,成為自己的英雄。
這種符合用戶內容認知的造梗,很容易形成情感共鳴,可以讓更多成熟型用戶形成活躍討論。
這次我們在運營活動設計上的故事化嘗試總結出一套行之有效的操作性方法:探索>推動>造梗。為我們未來更好更精準的設計活動互動玩法提供了有效的方向,未來規劃可在重點IP聯動活動以及節日的運營活動進行復用。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:人人都是產品經理 作者:騰訊設計
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先來看看技術發展和現階段人口結構的變化對線上社交有什么影響。
1. 技術上:
2G 時代的社交實現了跨地域聊天,用戶可以在 QQ 里和天南地北的人聊天,強調在線狀態。QQ 號是用戶社交虛擬身份的 id,是用戶自我創造的線上人設。2G 時代的社交尋求更為方便的溝通方式。
3G 進入了移動社交,著名風投公司合伙人約翰·杜爾提出 SoLoMo 概念(社交化、本地化、移動化)。用戶可以基于位置進行交友,比如附近的人;基于行為匹配,比如微信搖一搖。沒有在線狀態,可以隨時隨地的聯系,隨時在朋友圈獲取對方線下的生活狀態。
4G 時代,手機硬件、大數據和 AI 的發展,大大提升了匹配的效率,高效地建立潛在社交關系。不論是看臉社交還是靈魂匹配,都能在很短時間內找到合適的人聊天。信息傳輸越來越快,溝通互動的方式不斷革新,用戶從文字、圖片聊天進而習慣于實時語音和視頻。
隨著 5G 到來,高帶寬互聯網、云、AR/VR/MR 的高速發展,視頻作為主要的信息和溝通載體變得日益普及,疫情讓在線溝通和協作越來越方便,更多的線下社交場景轉移到線上,線上社交的頻次大大增加的同時,副作用也開始呈現,社交隔離讓人們感到更孤獨,對云社交的需求愈發強烈。
2. 人口結構變化:
獨生子女群體在 80 年代出現,但由于父母輩基本是有數量較多的親兄弟姐妹,因此第一代獨生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨生子女繁衍出的第二代獨生子女,也就是現在的大部分 00 后,家庭規模越來越小,親屬同輩越來越少,加上人口流動頻繁,少有的親屬同輩也較為疏遠。
00 后這一階段的出生率跌至了最低點,平時家庭、學校二點一線的生活,繁重的課業負擔,原本在親屬同輩圈的社交就少,在學校的熟人同輩圈的社交也越來越少。
2018 年發布的《00 后來襲-騰訊 00 后研究報告》中說到,“75%的 00 后渴求有更多的時間跟同伴在一起”。00 后在現實生活中缺失的同輩圈社交,更有強烈的訴求去互聯網上尋找。他們有著更為復雜的社交需求,通過與同輩圈的互動,建立同輩伙伴關系,從中獲得陪伴感、歸屬感和自我認同,形成自我認知。
回顧這幾年社交的變化,技術讓社交體驗從“線上線下割裂”向“虛擬空間映射真實世界”發展,00 后的線上社交需求更加強烈,我們如何解讀用戶、解讀人群,尋找他們的需求痛點。接下來,本文從自我展示、匹配連接、溝通互動的社交體驗路徑來探討社交的設計趨勢和特點。
最初的互聯網社交身份是簡單的虛擬身份 ID:虛擬頭像、昵稱、個性簽名、QQ 秀,當時的社交體驗線上和線下完全割裂,用戶的自我展示強調純線上人設打造。隨著硬件設備和圖像技術發展,用戶慢慢豐富社交資產,用真實身份交友,高清美顏自拍、沙雕表情包和聲音名片,線上的自我展示與線下生活緊密聯系。而現在,更多人用虛擬形象代表自己,技術的進步讓虛擬形象的展示更完美、更逼真。
1. 真實身份展示從單一趨向于全面
用戶在展示自我的時候往往需要填寫大量文字信息和傳輸多張精修過的照片,導致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時隨地記錄自己,在這種沉浸式的自我展示中,身份信息傳達更加有效和真實,也進一步放大用戶的自我炫耀感。
Feels 的個人資料由全屏照片、視頻、問答組成,用 story 的交互方式進行瀏覽。
2. 從聲音名片到聲音形象,更加賦予了情感和靈魂
語音的優點在于比文字傳輸效率高,一篇完整的文字自我介紹用語音三言兩語就說完了。而語音的缺點是無法在嘈雜的公共環境中使用,所以老年人最愛用語音,因為他們私人空間較多。疫情讓人們大大減少了旅游和外出娛樂,享受個人空間的時間變多了,從而縮小了語音使用環境受限的缺點,放大了傳輸效率的優點。在今年,出現大量語音房社交,語音從“蘿莉音”“正太音”的聲音社交名片變成展示個人形象的方式。
Clubhouse 帶來語音社交熱潮,Facebook、Twitter 也相繼上線語音房 hotline 和 Spaces,用戶可以找到一個感興趣的主題房進行聊天或圍觀,那些通過短短幾分鐘發言就吸粉的高質量用戶,通過聲音賦予了個人的情感和有趣的靈魂。
Reddit Talk
3. 從“我是誰”到“我們的關系”
展示自我除了從展示者的角度來設計“如何更好的展示社交資產”外,也要從看的人的角度考慮“如何更好地了解他”。
ios15 從 spotlight 輸入聯系人的名字,對方個人信息會智能拉取你們相關聯的信息,包括最近的聊天、共享的位置和照片。
Snapchat 能根據生日、出生時間、地點生成個人星座運勢和個性,還能和好友進行星座合盤。通過個人資料之間的交互,強化雙方身份的情誼特點。
4. 虛擬和真實之間,越來越強調“真實”
虛擬形象的概念不新鮮了,2003 年 QQ 秀是虛擬形象的雛形,Y 世代網民根據自己的喜好拼出屬于自己的 QQ 秀形象,用于 QQ 聊天時的自我形象炫耀和情感表達。Z 世代逐漸成為互聯網的主力軍時,他們的個性習慣和獨特的表達方式讓虛擬形象在社交中的使用需求愈發強烈?!禯 世代圈層消費大報告》提出 z 世代五大典型興趣圈層為:電競、國風、二次元、模玩手辦、硬核科技。Z 世代已經從他們的興趣中建立了對虛擬形象的情感,興趣成為他們建立自我人設的重要手段,他們跳出固定人設,在不同興趣圈層展示多樣個性,使用特定沖浪語,以此獲得歸屬感和認同感。
高新技術的發展讓虛擬形象變得越來越高質量。蘋果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 讓虛擬形象成為自己的化身,用于個人資料展示以及聊天表情包、合照、視頻互動等場景。Snapchat 最新的資料設計中展示了 3DBitmoji。
依靠面部捕捉、表情捕捉、動作捕捉的技術,實現了真人與虛擬形象的動態同步,降低了真人化虛擬形象的設置成本。在 SXSW2021 音樂節上,展示了 Facebook 新 avatar 系統推出的 VR 社交應用 Horizon。人與人能通過虛擬形象進行實時互動,除了有自己逼真的形象外,還具備真實的眼神表情和肢體動作,還會根據肢體動作變化不同情緒。
大數據和人工智能時代,融合了 AI 技術的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是,它不受對方在線的限制,能隨時進行實時互動,來滿足用戶對陪伴和娛樂的需求。麥當勞推出一位唱跳型愛豆的虛擬形象,她可以和小朋友進行溝通互動,一起跳舞,跟小朋友講故事,增加與消費者之間玩伴、陪伴關系。
麥當勞虛擬偶像“開心姐姐”
用戶在社交網站分享動態,維系自己的人設,獲得群體的存在感和認同感。在未來,這些記錄和創作的內容是否會形成自己的虛擬空間?每一個人不同的故事動態與空間產生聯系,形成自己獨有的虛擬空間社交資產。
5. 社交人格從「完美人設」到「透明人設」
隨著好友列表數量增多,很多人開始逃離朋友圈,人們在朋友圈的人設經營也越來越謹小慎微,開始疲于“完美”人設的表達,社交產品開始減壓。正如越來越多的年輕服裝品牌進行的「透明商品運動」,他們在品牌宣傳時,將商品從生產到制作的全過程透明化公開給消費者。「透明人設」是反對當今社交信息流充斥著的完美人設,鼓勵自我展示更加真實和未經編輯。
Dispo 復古相機拍攝后需要 24 小時才出片,并且沒有任何美圖的編輯工具。傳達現實生活中不完美的時刻也是值得捕捉和分享的。
Poparazzi 能連續拍照變成 GIF 進行分享,同樣也傳達未經過編輯的更真實的自我展示。用戶用 emoji 進行互動,僅展示動態收到的 emoji 表態數量。
你是否會因為動態無人互動而焦慮?是否會因為很久不更新動態而失去展示的動力,慢慢社恐?instagram 和 Facebook 允許用戶隱藏帖子的贊數,來減輕用戶的壓力和焦慮。
1. 匹配趨向于多元化
調查發現,現實中兩位互不相識的陌生人要花 50 小時,才可以在路上叫出對方名字,再投入 40 小時,才能蛻變為真正的友情。互聯網幫助用戶高效匹配,縮短認識的時間,降低認識的成本。
近幾年,用戶的喜好正在極速分裂和細化?!?0 后來襲-騰訊 00 后研究報告》表明 73%的 00 后會主動地獲取資源來發展自己感興趣的領域。由于現實中同輩社交圈狹窄,他們需要在互聯網的社交陣地上尋找更垂類的興趣伙伴,比如云學習伙伴、游戲玩伴、coscp 等,線上社交在不斷垂直細分以便更快捷的連接同輩伙伴。
隨著傳輸速度的發展,匹配連接的體驗具有更實時的交互和面對面的互動體驗。Distance Disco 是一款云蹦迪平臺,疫情期間,大家在各自房間里通過在線視頻就能開啟一場線上舞會,結識一起蹦迪的朋友。界面上的視覺元素和色塊會隨著音樂節奏變化,增強迪斯科的互動氛圍。
視頻鏈接:https://v.qq.com/x/page/w32687gdpf8.html?start=46
Honk 匹配陌生人聊天的動畫,傳達了穿越了人山人海,遇見了你的感覺。頭像出現時,出現招手動畫,像是剛剛見面的人招手打招呼。
2. 匹配提升安全感和隱私保護
現實生活中我們都有意識地保護自己的隱私,而到了互聯網,卻容易放下戒心將自己的信息分享給他人,線上社交會放大陌生人有趣、友善的一面,卻也隱藏了人性的缺點。社交產品的在幫助用戶建立社交關系的同時,也要提升用戶隱私保護和社交安全的體驗。
Instagram 帳戶注冊時,未滿 16 歲的未成年人默認使用私人帳戶,僅粉絲才能查看其發布的信息,在平臺內容分發和互動上與成年人帳戶進行隔離。當用戶更改成公共帳戶時,會給到提示強調私人帳戶的好處。
Snapchat 推出“好友檢查”,用戶可以快捷私密地刪除不聯系的人,確保好友列表里仍是真正的朋友。
Tinder 的一項調查顯示,40%的人在 Tinder 中發現了前任,24%的人遇到了家人。為了保障用戶隱私,用戶可以上傳他們的聯系人名單以選擇不想在 app 中遇到哪些人,屏蔽所選的聯系人。
在社交產品中,聊天是關鍵的一環,匹配到合適的用戶后,如何加強雙方情感連接和信任的紐帶讓用戶為關系而留?從書信到電報到電話到視頻通話,都是通過技術的發展獲得了更高效真實的溝通體驗,線上溝通的用戶體驗一直不斷還原線下的真實體驗,疫情加速了多人在線視頻通話的發展,既讓人在溝通時保持社交距離,又讓人感覺對方近在遲尺。
1. 更臨場
相較于面對面溝通交流,線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗上,決定了用戶社交臨場感的強弱。
Honk 用文字交流時,能看到對方一個字一個字實時的輸出,模擬真實的說話方式。
2021 年 Google I/O 大會的 3D 視頻聊天設備 Project Starline,利用多個高分辨率攝像機和深度傳感器在不同角度捕捉用戶,以 3D 的效果進行人物呈現,營造對方真的就在對面的裸眼 3D 感。
2021 年 F8 大會上,Facebook 提出用于 AR 視頻通話的 MultipeerAPI,更方便創作者制作 AR 特效,用于多用戶、多屏幕的共享 AR 體驗。用戶在多人視頻通話時,視頻中會出現太空或篝火的 AR 特效,讓視頻者感受到大家都在同一個共享空間。還支持輕量級游戲,多位玩家屏幕由一根曲線貫穿,玩家用臉引導甜甜圈共同完成接力游戲。
2021 年 IOS15 的更新,Facetime 使用的空間音頻讓通話的聽感更加自然、逼真,仿佛在同一房間面對面聊天。
面對疫情人們在生活中的社交禮儀都以非身體接觸式動作替代,線上社交的頻次和密度大大增加,視頻通話在視、聽處理上越來越自然和逼真,在觸覺上也向著《頭號玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現實中那樣在進化。美國西北大學的研究中,一位媽媽與孩子視頻通話時,通過撫摸屏幕,能把來自媽媽的撫摸傳遞到孩子身上的“AR 皮膚”上。未來在虛擬社交中也能獲得真實的觸碰,加強情感的連接。
2. 更個性
個人展示是單向的,溝通交流是雙向的,雙方在不斷交換彼此之間的狀態和感受,從中獲得被了解和認可。個性聊天氣泡、表情包、自定義聊天背景,幫用戶在溝通交流時展現自己獨一無二的個性。線上社交的用戶語言設計要打造個性化的社交氛圍,讓用戶的個性在溝通中被挖掘和展現。
MUZE 在聊天中可以自由擺放文字、貼圖、涂鴉,讓交流更個性化和自由。
Google I/O 大會推出的全新設計語言 Material You 中,系統會基于用戶選擇的壁紙進行自由取色,并應用到 UI 中。是否聊天的 UI 也能隨著聊天中的圖片,或是聊天發送的表情文字提取心情語義,進行 UI 的變化,加強情緒的傳達。
3. 場景化
人和人的社交通常依附于不同的場景,群聊或好友分組就是將特定的社交關系進行場景設定。比如“火鍋突擊隊”“老廢物樂園”“吃瓜小分隊”依附社交場景來進行互動,幫助用戶帶入社交氛圍。
咖啡館社交,通過構建咖啡館場景,傳達和陌生人進行一場閑聊的慢社交體驗。
森遇
Facebook 的視頻通話,用煙花和禮帽的 AR 特效來構建派對的社交場景。
2021 年 WWDC 大會上,現場用不同的 Memoji 營造了線上觀眾參與會議的場景。
4. 感官刺激
2021 年 Google 的一份統計數據表明,用戶平均注意力時長從 12s 下降到 9s,而 00 后的平均注意力僅 8s。面對這樣的用戶,需要讓他們在短時間內獲得極大的感官刺激來延長注意力,以及在溝通交流時有更極致的情緒表達。
Honk 可以同時發送大量的 emoji 表情。
QQ 團隊運用 Lottie 技術推出每秒 60 幀超高幀率、動效更細膩的小黃臉表情包。
微信的表情包不僅帶來視覺上逼真的 3D 動畫效果,屏幕上其他內容也會隨之震動,還有觸感上的沖擊。
網絡表情包
5. 輕娛樂、游戲社交
《社交媒體趨勢報告》提到“和朋友保持聯系”一直被列為是使用社交媒體首要原因,但在 16-24 歲的用戶中,主要驅動力變為“尋找搞笑和有趣的內容”。青少年通過線上社交彌補線下社交缺口,獲得同輩認同,排解孤獨和學習壓力。“組隊開黑”“一起微光”“找長期固聊固玩”,00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗也從物理空間的連接轉變到精神空間的連接。
用戶在 Housparty 進行視頻聊天時,如果感到無聊,可以玩一場輕松的游戲,游戲過程中可以通過視頻看到對方的狀態。
Snapchat 正推出一種叫 Connected Lenses 的新型增強現實鏡頭,它可以讓不在同一個物理空間的用戶一起進行 AR 游戲,比如共同組建樂高模型。
IOS15 中 Facetime 加入 Shareplay 功能,可以與朋友共享屏幕,一起線上追劇、聽音樂、玩游戲。
Tinder 在今年推出第二季 Swipe Night 活動,用戶通過觀看每周一集的互動故事,向左或向右滑為故事中的角色做決定,每一集結束后會匹配到在故事中做出類似選擇的用戶,并可以繼續相關話題的聊天。
科技重塑了我們的生活。線上社交讓我們日常溝通更為方便,也讓我們輕松維系現實中的社交關系,越來越多的人依靠它構建新的虛擬關系,互聯網帶來溝通便利的同時,也減少了人與人面對面交流的機會。
美國傳播學家艾伯特·梅拉比曾給出一個公式:信息溝通傳遞=55%視覺+38%聲音+7%語義。大意是人們在現實生活中進行面對面溝通交流時,7%是語言上的內容,剩下的是面部表情、肢體動作、目光接觸、語速語調等非語言內容的交流。隨著技術的進步,社交不斷在補充非語言內容交流的缺失。在自我展示中,無論是視頻化、聲音形象、富有表情和肢體動作的虛擬形象,還是溝通場景中越來越臨場的體驗和充滿感官刺激的表情符號,線上社交的趨勢都在不斷映射線下社交的體驗。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著市場環境的發展、技術的迭代,數字化浪潮逐漸席卷了各行各業,為我們的生活帶來了巨大變化。與此同時,企業服務也亟待轉型。本篇文章里,作者就數字化驅動下的新型企業服務市場做了觀察,一起來看一下。
易觀分析:在數字化浪潮洶涌而來的今天,技術正在發揮前所未有的作用,從各個方面影響、改造宏觀經濟。
而在這樣的背景下,傳統的企業服務模式已經不再適用,新型企業服務開始被市場所關注,其脫胎于企業服務市場,但得益于技術賦能和創新服務模式,其降本、提效、賦能的效果較為顯著。
因此易觀以新型企業服務為研究方向,向市場全面解析其市場范疇、發展特點,并借助典型案例的解讀,幫助讀者更好了解新型企業服務的發展情況,為行業發展、企業決策提供智力支撐。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:人人都是產品經理 作者:易觀分析
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本次與大家分享的是關于產品調研問卷的話題。用戶調研中有兩個非常重要的能力,就是預判能力和邏輯能力,一個是對未知的東西提前做判定做假設,一個是對思維邏輯的考驗。
本著將自身學習、實戰、運用、總結的想法,寫出了這篇文章。文章整體為9866個字,閱讀時間可能較長,但文中也融合了我關于其他知識的匯總和串聯,所以,還是希望閱讀的您能看完,并交流。感謝認可!
為什么要做調研問卷
調研問卷應該具備什么特征?
寫問卷前需要準備什么?
做問卷需要的輔助工具
總結
不知道大家有沒有感觸,現如今中小型企業已經越來越注重用戶調研了,就連街邊的地攤燒烤店和飯店,都開始搞一些簡單的用戶滿意度調查了。比如在你擼著串喝著扎啤時,突然走來一個服務員,手里拿著本子和筆,你以為他是要問你加點什么菜,但實際上他卻是要說:“大哥,實在不好意思哈,打擾你一下,你覺得我們家的菜哪里不滿意呢,可以提一些意見,如果有價值的話我們還送您一聽可樂!”
這種方式雖然看起來“簡單+粗暴+直白”,但確實真的能幫助個體戶解決一些實際的用戶體驗問題。這,就是互聯網人每天嘴上掛著的產品要做用戶調研,產品要以用戶體驗為中心。只不過這種手法沒有運用太多的調研模型和縝密規劃而已,他們大多都是記下來,然后拿給老板,老板看完后,通過主觀意識進行定奪哪個有用,哪個能改,哪個不損耗成本的條件下能提升客戶滿意度,就通知讓整改了。(自述:從某種角度來看,我倒覺得這種粗暴的手法反而是最直接,成本最低的用戶調研方式,因為它基本符合埃里克·萊斯在《精益創業》中提到的創業定論,也可以看作是產品開發和投入市場的三個可行步驟:低成本建立產品并投入市場、獲取真實產品數據和用戶體驗結論、優化調整產品路線和體驗并建立產品壁壘)
所以,一個好的調研問卷應該同時具備兩個特性:
第一:就是驗證產品問題,為了驗證我們對產品體驗的理解是否符合用戶心智,而不是一貫的說:我覺得用戶是這樣的,我認為他們應該都是這么做的,等等系列的主觀產品意識。
第二:是批量收集用戶數據進行統計,以便宏觀比例查看,這同樣可以驗證我們對目標群體的定位是否準確,或是偏離,比如“用戶的基礎屬性、購買能力、行為特征、興趣愛好、社交網絡等”。
所以我們可以理解,直到產品立項和規劃市場宏圖截止,調研問卷才是真正走向產品設計的第一步,它包含并解決了:我們對產品和市場規劃的驗證、對產品和用戶問題的解惑、對用戶畫像的輪廓描繪、對接下來用戶訪談的精準定位。同時,也是對產品優化的方向指明,通過問卷,可以了解產品功能的可用性、易用性和不足之處,包括了解企業對產品進行廣告投放的渠道獲客比例,從而調整投入資金。
以上就是我們為什么要做調研問卷的解答,同時也明白企業投入一周、一月或更長時間的成本做調研問卷的根本作用。
講解了調研問卷的目的后,接下來要講的是編寫問卷所必須具備的兩個特性,它們分別是:邏輯性和預判性。說到這可能會有同學比較疑惑,一張具有十幾道題的問卷,基本都是問問題,會有什么復雜邏輯呢,需要預判什么。是的,對于不了解產品和業務本身的同學,或者沒有深入學習和實戰過的同學,這個確實沒有什么的必要,當然也就編輯不出有深度的高質量問卷。
其實,一個合格的調研人,在寫調研問卷時,調研人應該是可以預判出自身產品用戶的所有問題和答案的,并且問卷的問題要針對性高、目的性強、問題邏輯縝密且由淺入深,這還不夠,調研人還應該了解市場和該行業數據、統計報告等相關知識點,同時對用戶的不同職業進行了解和拆分(這里面包含行業屬性、營業收入、職業員工人數等一系列問題)。在了解以上這些信息后,還要結合當前產品需要改良優化的明確目的進行匹配,只有這樣才能寫出一份真實解決問題的用戶調研問卷。
接下來我分別將剛講到問卷里的幾個必備能力簡單描述一下。
首先講解一下什么是預判能力,預判是提前預設預想到問題的可能性與預見性,是對某一事件還沒產出結果前的提前設想,能力是具備某項技能。所以我們可以這樣理解,預判能力,就是具備某一事件在得到結論前的假設的能力,通過設想和假定,完成該事件的提前預測,從而提前做必要措施和準備。
那么這個能力在寫問卷有什么作用呢?很有必要,而且可以說是編寫問卷的剛需能力,做調研的應該都知道,為保證目標用戶對問卷的填寫完成率,我們多數采用被用戶選擇而不是填寫的方式進行受訪,在這樣的條件下,我們編寫的問題應該是精準的,可被用戶理解的(這里指使用用戶的語言表達問題,被用戶聽懂),同時問題對應的選項也應該是全面且精煉的,其選項應該保證幾個特性:
1、選項文案應該精練且易懂;
2、常規問題的選項應設定在四個內;
3、選項內容應該是可以容納絕大多數用戶可能被選的選項,這樣最后的結果才有意義,有比例性;
如果你不具備預判性,那么很有可能出現以下幾個問題:
1、 用戶聽不懂你問的什么;
2、 用戶錯誤的理解了問題的真正意圖;
3、 用戶閱讀選項覺得繁瑣麻煩;
4、 選項get不到用戶想要的或不包含用戶具備的條件,從而放棄選擇;
所以說,預判能力是幫助我們提前預測問卷的答案,預測用戶可能想到的內容,預測產品的未來走勢的。
說到這里,你可能會問了,我要都能預測到問題和結果我還問用戶干嘛,我把可能想到的都加上不就得了,錯!從邏輯上講,產品的調研問卷本身就不是一個提問題的手段,我們應該把它看作是一個驗證問題的手段才對。從另一個角度講,我們在設計產品時,同時也是先考慮到市場的機會點和痛點后,才會考慮如何入手市場,提供怎樣的服務,開發怎樣的產品,最終能獲得多少市場份額。但這些都是我們的設想,到底是否可行,就需要我們先用最小成本(MVP,這里指最小可行性的產品或手段)“調研問卷”對市場進行探測,從而最終驗證我們的邏輯是否正確,我們提供的服務是否被真實用戶喜歡,我們的用戶到底“長什么樣子”,然后根據調研結果對產品做適當調整和優化。
這個能力同樣是編寫問卷時的剛需能力。用戶在面對一個陌生的問卷時,首先內心會自然地出現抗拒和危險的信號,同時也會考慮是否具有獎勵機制,所以多數會隨著好奇心和嘗試的心態進入填寫狀態,當然不排除部分忠實用戶對產品的無私奉獻(例如小米的米粉,很多米粉填寫問卷或許并不會得到相應的金幣和金券獎勵,但還是會有很多人填寫問卷,這就是產品的自身的魅力)。
如果你一上來就直接問一些很冒昧很直白的問題,會直接影響用戶填寫問卷的完成率,這其實并不是用戶的錯,從生物學角度來講,這是每個人都具有的天性,是我們的舊腦和生理遺留下來的一些特性。我們天生不喜歡很突然的東西、行動、問題,當遇到急轉彎或者突如其來的事物時,我們的大腦神經、肌肉會快速收縮,而瞳孔會快速擴張,血液則會加速流動,同時大腦會快速分泌激素并預示你要警惕,其實這本身是我們的祖先在原始社會生存時為防止被獵殺的本能反應。所以,當開頭問到您的姓名后,緊接著就問您的收入是多少時,多少就有點唐突了。
問題由淺入深,是用戶對問卷的逐漸適應過程,畢竟對于用戶來講,問卷并不是一個日常的高頻操作,基本可以說是比較陌生,所以,從用戶熟悉且不涉及到用戶隱私的前提下逐次進行詢問,可以大幅度提升問卷的完成率。
當然,問卷的編寫也是有一定的規律可循,一般會分為三大模塊,順序依次為:
1、基礎問題:其中包含姓名、年齡、學歷、職位、地域、收入等等,通過一些基礎問題對用戶有一個基礎了解,同時被用戶所接受;
2、常規問題:應該圍繞產品相關且不涉及到產品本身的問題,比如你的產品是一款運動產品(例如:Keep),那你可以問用戶您日常喜歡鍛煉么,喜歡做什么運用,日常在哪些場景做運動等等問題,這些都是幫助你進一步了解用戶是否是產品基礎用戶做的前期鋪墊。假如你在這個時候就問關于你的產品問題,會導致用戶認為你的目的性很強,同時具有利益性,當然不排除其他可能性。所以,一般這個階段多數會圍繞但不涉及自身產品的問題。
3、產品問題:到了這個時候就可以開始問一些自家產品的問題了,比如問:您用過某產品么?您對某產品的第一印象如何?您一般使用某產品的哪些功能?您使用某產品的頻率怎樣?等等這些類似的問題就可以進行詢問了。
該能力比較泛,因為我們并不能用一個具體的規則進行有序的編排,也沒有一個可量化的方式對其衡量,畢竟學無止盡,誰也不好說了解多少行業趨勢就算合格,瀏覽多少相關數據報告就算對該行業數據胸有成竹。其實我覺得多少都不算多,只能說了解的越多,對產品就越有把控度而已。
問卷的問題和這些也是有著密切關系的,如果你完全不了解你的產品,不了解你產品所處的行業特征趨勢、不了解你產品和競品的數據報告、不了解國家對該行業的扶持和管控,你就無法在第二模塊(常規問題)和第三模塊(自身產品問題)內提出高質量的問題,當然最后的結果也不會很優質。
舉例說明一下,還是拿“KEEP”這個運動健身產品為例,如果你不了解該行業的社會趨勢,不了解健身運動的行業特性,也不了解相關競品的數據,你如何提出符合該行業的深度問題?;蛟S你會問“你日常都用哪些運動健身產品?”這當然也是一個問題,但這種問題只能獲取到用戶常用的競品,卻不能挖出更深的問題。但如果你了解行業報告和相關數據后,你可能在寫問題之前,就對該行業有一個全面的認識,比如健身行業人群的年消費占比,健身人群的年齡占比,健身人群的職業類型和占比等等,然后通過這些已知數據對其進行設立問題,這樣的問題會更加具有針對性。
最后一個是關于產品目標的問題,這里的產品目標指的是你和你的團隊希望產品下一步優化什么,希望通過此次問卷達到什么目的。例如:優化產品的推廣渠道、具象用戶畫像從而調整產品視覺、深度挖掘用戶對產品的整體感受從而優化產品功能和交互。
以上這些同樣是編寫問卷時的剛需能力,如果你不了解自身產品問題在哪,不了解相關行業的整體趨勢,不了解競品比自己做得好得地方,怎么能寫好問卷呢?俗話說:當你發現了自己的問題時,你就已經成功了一半,而另一半則是用無數顆粒的調整和努力換來的。如果不先明確產品問題,無法提前預測,無法拋出對應的結論供用戶選擇,那么,最后的結論又怎能價值度高呢?
針對具有這個問題的同學,我建議在編寫問卷前,首先一定要了解行業屬性和趨勢,起碼要有一個大致的宏觀了解,然后是對自身產品和競品的高頻使用,自己先從中發現一些問題和差異點(如果你不具備同理心,那么就一定要實際上手操作,我想你日常在使用不同購物軟件的時候,一定有不一樣的主觀感受對么?那時的你,就是最真實的用戶!將這種感覺和方式帶到你自己的產品和競品中,也同樣奏效,不妨試試),然后再去和同事和產品等相關人討論,最后在開始編寫問卷。我相信這時的你應該會比之前寫的更好了。
剛才我講到的可以說都是問卷背后需要思考和掌握的能力,更是必備屬性,也是關乎問卷是否成功的關鍵點。接下來,在說說準備開始編寫問卷時需要籌備的“東西”吧。這里順帶提一下,問卷最終產出物是否成功需要通過六點來驗證的,它們分別是:邏輯是否縝密,問題是否嚴謹、文案是否精練、數據是否落地、是否參考報告、整體是否由淺到深。
然后再說開始編寫問卷時需要籌備的“東西”。在寫產品調研問卷時,前置條件是必不可少的,在動手寫問卷前,首先應該解決以下幾個關鍵問題,并依次羅列,他們分別是:
1、 明確調研目的和思路;
2、 了解競品功能和優點;
3、 預測用戶使用產品的動機和場景;
4、 梳理產品功能框架和邏輯關系;
5、 梳理產品業務線和推廣渠道;
6、 瀏覽并摘錄行業數據報告;
7、 對用戶群體分類,思考問題的分叉點;
明確問題屬性,方便問題對號入座;
俗話說:明確的方向比努力更重要。如果說你都不知道自己最后想要的是什么,毫無目的的去努力,那就是瞎忙活。問卷也是一樣,每一個產品調研問卷都會背負著1-2個核心的問題,如果再多,要么說明你的核心目的不明確,要么就是你沒有對問題做優先級分層,這樣的結果只會是毫無頭緒,最后哪個問題都解決不到根本。
所以,在問卷編寫之前,一定要先確定一個或兩個目的,也就是你想通過本次問卷最終想得到什么結果和怎樣的效果,然后在圍繞這個目的展開你的問題思路,通過什么方式,怎樣的問題路徑進行詢問,最后才能達到這樣的結果。例如你想解決產品的視覺問題,那就需要圍繞用戶喜愛的色彩、行業的配色規則、有效的視覺比例等問題進行詢問,依次挖出普遍用戶對該行業和產品是理解。再比如你的產品只是一個剛開發不久的新產品,急需通過用戶的真實想法和體驗感進行優化升級,那你就需要圍繞收集用戶除使用你的產品外還用過哪些其他類似競品,好用點在哪,對你產品的第一印象是什么,用過哪些功能,建議是什么等等進行深挖。
整體而言,沒有明確的調研目的和思路就開始編寫問卷,是不可能寫出主干路徑清晰,問題具有指引性的好問卷的。當然,目的清晰還不夠,還需要你對目的進行顆粒度細分化,也就是對目的獨立定位,做到目的與目的之間沒有交集點,這樣做的好處是每個目的都是獨立的個體,都是單獨“細胞”,通過各自的目的,將其不斷擴大和分裂,我們還可以延伸出更多新的細小問題,并對其做優化。如果沒有做到顆粒度細分,最大的隱患就是目的與目的之間會存在交叉點,在解決問題時會出現混交,例如在解決A問題時,同時B問題也出現了,這個時候要解決的問題就會模糊,不能對其設立明確的定位和標簽。(這里如果不明白的同學,我用另一種案例舉證一下,就好比小公司設計師和大公司設計師。小公司設計師基本做不到工作專攻,一般都是什么都干,這就是專業模糊且不獨立,最后出現的結果就是定位模糊,沒有獨樹一幟的技能,延展出新技能會出現徘徊狀態,什么都能干但又感覺都干不了。而大公司雖然設計師處于螺絲釘狀態,但完全就是不斷在加強自身長板,最終通過長板做到領域細分,無人能敵的狀態。剛才說的顆粒度細分就是這個意思,目的越模糊,標簽越不明確,也就越不好做延展,反之目的越明確且獨立,標簽也就卻清晰,后期延展性強,同時還可做歸檔處理,可幫助產品復盤。)
這個應該比較好理解,俗話說知己知彼百戰不殆,如果都不了解競品的優勢和功能是什么,問卷還怎么寫呢?雖然每個行業的產品都有很多的競品,但不管哪個行業,其產品都有三六九等,我們只需要對其中排名前幾的進行翻閱使用即可(備注:不知道如何查找產品排名的,可瀏覽“做問卷需要的輔助工具”章節),并搞清楚他們的不同優勢、壁壘、差異在哪,然后對照自己的產品,就知道我們差在哪,缺在哪了,這個時候,如果你不確定競品的功能是否能運用到自身產品上,就可以通過問卷的形式提問。同時,還可以通過問卷的形式對競品功能和優點做假設性提問,這是最小成本模擬性的佐證功能是否符合大眾心理預期的手段。所以,并不是所有的產品功能都一定是好的或不好的,這一切的源頭都取決于用戶對它的期望值和必備屬性,也就是一切以用戶為核心。(不同類型的產品市場定位不同,用戶群體也不同,競品的功能看似強大,但不一定適合自身,所以這個需要通過問卷、訪談形式探索,當然也可以使用A/B測試、數據埋點等手法進行,只不過那樣會增加成本,但好處就是數據更可靠、實效性更強)
行為結果是行動的最終產物,行為、能力、動機、環境是改變結果的必要前置條件,所有的結果都會隨著這四樣條件的不同發生質的改變。比如不同人從小接受的不同教育(環境),會影響他們不同的思維方式,并對同一件事運用不同的思考方式(動機),通過各自不同的能力(能力),然后做出完全不同的決策(行為),最終得到不同的結果。
如果想了解用戶的行為方式和動機,就得對他們的場景有所了解,比如他們會在什么環境下使用該產品,他們使用該產品時的載體是什么(電腦、收集、ipad,或者其他),他們為什么要用這個產品,等等一系列問題都是需要我們收集和預測的,只有清楚知道用戶的動機、行為、能力和環境,我們才能知道我們的產品是在什么環境下、什么條件下產生的爆發點。這里面比較重要的是動機,動機是決定用戶是否能快速采取行動的重要因素,如果環境滿足,有行為動作,也有能力購買和承擔,但產品沒有可供用戶提起興趣的動機,也是會損失客戶的,這里的動機我們可以看作是欲望點,也就是G點。(這里可以引用福格行為模式,公示為:B=MAT,其中B代表行為,M代表動機,A代表能力,T代表觸發,也就是說所有用戶在完成特定目標前,都必須滿足MAT這三個基礎條件,第一要有充分的動機M,第二必須要有完成這個行為的能力A,第三必須要有促使用戶付諸行動的觸發T)。
只有得到以上這些預判的結論,在編寫問卷時才能列舉出符合用戶的選項答案,最終的調研才是有價值的。
在調研問卷內,第三模塊(自身產品問題)的問題基本都是和自身產品息息相關的,如果不了解產品的所有功能和功能之間的邏輯關系,那么在編寫問卷時,就很難提供優質的關于功能和邏輯的問題。例如在你清楚了解自家產品的所有功能后,你認為某些功能是有可能存在漏洞的,或者發現某個功能在競品中是以另一種方式呈現的,在或者一個組件功能所包含的內容和競品是有差距的,那你就可以針對這些問題去進行假設舉例,提供對應的問題和選項。
同樣的,功能之間的跳轉邏輯也需要設計問卷者做到心中有數,從而對比競品后得出結論,并對其設定問題和選項。當然,并不是所有的問卷都必須具備功能和邏輯相關的問題,問卷中是否需要設定關于產品功能和邏輯的問題,還是要按照問卷開始就想好的目的和思路展開提問。
所以,清楚了解產品功能及邏輯關系,是為了輔助我們能提出更有價值、針對性更強的產品問題,同樣也是為了幫助我們對用戶進行設點,通過問卷先圈出一批目標用戶,然后進行針對性訪談,可大幅度降本增效,從而防止資源浪費。
這里和第四點比較相似,主要的相似點來源于目的性,在編寫問卷之前,我們必須要了解產品的業務流程,還有產品在市場中所運用的推廣渠道,這些都是幫助我們設立問題做的前期準備。
提出產品業務相關問題,有助于優化產品運營模式和產品服務板塊,這些雖然不被產品直接展示,但卻是公司的重頭戲,同時也是用戶非常注重的地方,尤其是依靠線下服務來提升用戶滿意度的公司,例如服務類產品“土巴兔、我愛我家、e家家政”,這類型產品都是重心在服務團隊上的,如果不了解產品的整體業務線,就不可能提出高質量的業務問題。
推廣渠道同樣的,如果不了解產品往期的推廣方式和渠道,又如何在提問題中設定標準的答案供用戶選擇呢?所以,想要通過問卷獲得產品業務和提升訪客率的結果,就必須對產品的業務線和推廣渠道有具體了解。
行業數據報告對單一產品并不能起到多大作用,它主要是通過行業的宏觀局面,對該產品進行一個整體的把控,比如最近幾年比較火的教育行業,如果你的公司正在從事教育行業,那么獲取該行業最近2年的行業數據報告,可以瞬間開闊你對教育行業的整體認知,包括國家對教育行業的一些政策走勢,你也可以很好的了解到。
通過了解行業的數據報告,有助于你對行業的人群收入、地域分布等問題進行比較客觀的熟知,從而設定一些帶有區間數字的問題時,能更好的設定結論被用戶選擇。舉例說明一下,假如你的產品是健身app,通過對市場的整體了解,對運動健身行業近幾年的數據分析和走勢,了解了人們在健身上每月每年的投入資金,在調研問卷中,就能更準確的設定用戶收入、健身消費金額等一系列問題,然后通過問卷結果查看資金占比,就能對應的知道匹配你產品的用戶群體消費情況了。
所以行業數據報告并不是某一個產品的支撐物,也不具備被單一產品所參照,它就好比一張世界地圖,我們可以清楚的瀏覽到我們的中國在哪,身邊臨近國有哪些,對比國家的領土大小等等。
對用戶群體分類是比較重要的一個內容,它的主要作用是幫助我們預設用戶類型,通過不同維度對用戶進行分門別類,然后對他們依次設定不同角度的問題,最終獲得不同有價值的結果。這就好比一線城市設計師收入和三線城市設計師收入是完全不一樣的,針對這些不同,我們在詢問問題時,也是需要區分對待的。
這種情況一般問卷中是高頻出現的,比如我們在回答問題三后,如果選擇A,那么會跳轉到問題五,如果選擇B,則跳轉到問題四,這就是設計問卷者在編寫問卷前就已經預想到不同的用戶群體類型了,然后對他們進行了多種類的問卷設計。這么做的好處是可以快速驗證出產品的目標用戶類型和比例,降低用戶調研成本,進一步推進培養種子用戶,然后再次接受高質量產品反饋,最終提高用戶的整體調研質量。
最后一個是問題屬性,其實這里大家可以將這個詞看成是一個“盒子”。我們在開始設定問題時,大家慣用的手法是直接羅列問題,按著主邏輯開始進行,然后依次往下寫,其實這并不是最有效的方法。我在這分享一個更加有效的方式,就是在調研問卷編寫之前,你要先預設幾個問題屬性的“盒子”,也就是問題維度,比如說:基本屬性、購物能力、行為特征、興趣愛好、心理特征、社交網絡等等,這里先不考慮問題的邏輯性,先按照問題屬性進行編輯,比如先想基本屬性,那么就針對用戶的基本內容進行編寫問題(這里的方法是想到什么就寫什么),比如你會想到“用戶的姓名、年齡、月收入、家庭情況、在哪個城市等等”,這些都是所有用戶所具備的基本屬性,當你將第一個屬性寫到寫不出來的時候,就開始在第二個問題屬性“購物能力”的盒子里開始寫問題,繼續編寫一堆和購物消費有關系的問題,直到將所有“盒子”寫到寫不出來后,再從新開始進行問題梳理,依次按照邏輯關系進行排列即可。
大家可能比較疑惑我這個方式,這種手法看似笨拙,但卻是符合我們人類的基本思維的,在心理學和行為學中,科學研究表明我們人類其實真正能專注做的只有一件事,而如果有人可以同樣完成兩件事或三件事,那么這其中只有一件事是刻意行為,其余的事件都應該是下意識完成的(也就是刻意練習后的下意識反應),比如我們開車途中躲避其他車輛時可以和別人交談,可以從口袋里掏出香煙然后對準點燃,在開車和交談、點煙這個事件中,開車就是下意識的行為,而點煙或交談就是刻意行為,雖然開車是一個高技術能力且具有交通危險性,但由于你已經練習了很多遍,所以并不需要刻意思考就能打轉方向并調整到合適角度進行開車。
問卷也是一樣,如果你在用大腦完成問題邏輯梳理的刻意行為下,同時又要絞盡腦汁的想問題怎么寫,寫什么,那么可想而知,當兩個事件都是刻意行為時,你哪件事都做不好。所以,不妨嘗試下我建議的方法。
以上都是關于寫問卷時做的前期準備工作,雖然絕大多數都是需要自主完成的,但不妨有些內容確實比較有阻力,比如說:行業的研報,行業的數據報告、產品所涉及行業的宏觀分析。所以為了大家方便學習,我這里為大家提供了一些我日常慣用的工具網站,其中就包含:行業白皮書、行業洞見研究報告、數據分析、調研問卷模版等一系列相關內容。
該網站包含所有行業的研究分析文案,市場宏觀策略,一個高質量的行業分析網站。
該網站包含了大量的問卷調研模版,可以輔助你增加對問題的靈感,同時做參考。
七麥數據可以輔助你去查找一些相關行業競品,同時根據排名進行選擇性對比。
360趨勢是一個開源數據平臺網站,在這里你通過關鍵詞輸入可以查看到行業或產品的關注度、曝光量、需求分布等重要信息。
https://data.iresearch.com.cn/
艾瑞數據和七麥類似,同樣是查詢和瀏覽產品的排名、競品類型的平臺。
其實還有很多相關的工具類網站,部分是需要付費的,部分是強制需要注冊的,價值度不高的我就不再推薦了,本著與大家分享的心態,將真實可落地的資源與大家共享我認為是最好的。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:站酷 作者:西瓜的設計
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近我們產品做了一次全新改版的項目。作為此次項目的設計師,從項目的前期分析、設計、交付開發、驗收上線,整個流程,在項目走查驗收階段我們設計師投入了30人/天!在我們覺得應該設計投入最少的階段,卻占了我們大量的工作 且最后還原度也遠不達預期。
在這個項目中我遇到了哪些問題:
還原問題不單單是設計師把設計稿做的多精準,標注的多仔細,這么簡單就能解決的。是設計和開發,團隊之間的合作共識問題。我把整個和開發對接工作分為前中后三個階段,在這里從頭來梳理一下,聊一聊設計師和開發如何高效對接,也是對自己的一次復盤總結。
在評審環節,設計師本人一定要將自己的設計稿進行宣講、幫助開發理解。注意給技術講述一些適配要求、設計規范、交互狀態及動效等,同時解答技術同學的一些疑問,這樣就能將一些可預見的問題解決掉,解決后期的溝通成本。
有一些地方有多種實現方式,如果前期沒有跟開發溝通清楚,就會導致最終實現的效果存在誤差,比如:下方這個tab項,單給一張圖,開發根本不知道設計師想要的實現方式是什么,固定間距還是固定菜單寬度,還是每項平分寬度,最后很大可能就會按照自己的理解去做了,導致出現重復返工的現象。
再比如一些點擊熱區,如果不手動標明,有可能就做的很小
下圖是我們手動標注的熱區
每個開發負責的具體頁面模塊不一樣,別人對具體了解程度也不會不一致,所以在評審會議上,一定要具體開發者在場,如果對應開發沒有發表意見,設計師可詢問,確保他已經理解需求。
設計師在講解自己的要求后,開發也要及時反饋是否有還原困難,如:是否有技術限制?是否有組件改動困難(牽一發而動全身)?實現成本過高(投入產出的性價比不夠)?等意見和原因,設計師也可拋出之前是否遇到過類似的阻礙,幫助開發去了解。
評審過程的問題和重要講解點,一定要記錄下來,會議中開發提出的一些問題及解決方案、或者沒有達成共識的地方,記錄下來等領導決策,在會議結束后以郵件形式、或wiki文檔發送前端們,抄送產品,確保會議內容的傳達到位。后面也好跟蹤。
還有一點就是,我們之前遇到的情況,在宣講會上 講解的一些要求,開發在做的時候可能就忘記了,讓開發改他認為設計沒有明確要求、會有點難推動,就會搞得雙方都有抱怨。有會議記錄也可避免此類情況發生
在前面我們做了詳盡的溝通和評審,但有時也避免不了在開發過程有些問題才發現暴露。這個就需要開發同學能重視還原問題,積極溝通反饋,和設計確認商議 是否有其它可替代方案,切勿自己發揮,等到后期驗收的時候才說出問題可能會影響進度
開發者在完成自己負責的模塊界面時,可自己對齊設計稿自查一遍,參考【3.1驗收標準】的表格,可幫助判斷問題,在此階段也可發給設計者確認效果。
這里可以提前在項目排期階段,設計師將所需的驗收工時同步給技術和測試,將驗收時間考慮進去
為什么要求測試同學保證還原度至少在70%呢?
因為如果不要求測試走查還原度,設計驗收的時候就會有大量的問題,最后變成設計在測試界面而不是驗收。設計師不像測試對整個流程的測試配置那么熟悉方便,反復驗收需要測試和設計不斷配合,雙方的工作量都會加大。
理想的狀態應該是測試整個流程走通,視覺和交互還原問題也要著重測試,設計和產品在測試沒什么大問題后再進行驗收。
參考【驗收標準】的表格,可幫助判斷還原問題
最好是提前知道模塊的開發者,這樣驗收的時候一對一進行模塊的打版驗收效率更高
技術對功能上的BUG,可以自己很好的判斷哪些是嚴重的緊急的,但對于視覺和交互層面的感知就比較低。在提問題單的時候,我們可以幫他標注出優先級,告知開發哪些是比較嚴重的需要優先修改的,不然 開發自己很難判斷,可能就會挑一些比較好改的先改了,重要的問題反而被擱置了。尤其在項目時間比較緊張的時候,有優先級標注 開發能夠看出哪些是可以為項目進度做出妥協的,哪些是必須要修改的。
設計提BUG單的不能簡單的說這里出錯了,請參考設計標注重新調整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術提高更高效率,也能避免開發自己去看又出現誤差、又要返工修改。
設計師在驗收過程中容易遇到的一個比較頭疼的問題就是,技術和產品小伙伴可能因為項目上線時間緊,覺得視覺還原和頁面交互體驗上的問題不重要不給予修改,優先保障功能上線。
除了這些原因,設計側也在檢討總結,自己有哪些做的不足的地方,所以 以上文檔也是對接下來工作的優化方案。設計還原度也是日??己酥唬枰蠹抑匾?,好的產品要嚴格把控精心打磨,希望這次的總結、相關流程和經驗,在接下來工作中能夠提升設計驗收效率和還原度。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:站酷 作者:飛行的考拉
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
導讀:系統設計當中除了按鈕之外,文本輸入框(Text Fields)應該是最常見的交互元素了。當你在淘寶買個東西,當你注冊個新賬號,當你買單輸入個金額時,各種使用場景簡直無處不在??梢哉f把握好輸入框設計,我們的表單設計就成功了一大半。
今天直接單刀直入不講別的,直接把google的Material Design對于文本輸入框結構分解圖放上來,
這里需要指出Material Design對于文本輸入框結構是經過多年設計發展洗禮,然后基于它規范之下而生成的標準構造體。我們拋開一些非必要元素之后會得到一個基礎版本文本輸入框的構造。
一個表單項從結構上來看可以分為標簽、表單域、提示三個主要的元素。
1、標簽文本(Label Text)
“標簽文本”該表單項唯一的名稱,告訴用戶填入什么信息。
2、幫助文本(Helper text)
“幫助文本”在該處位置可將提示用戶的相關信息放置于此。
3、容器(Container)
“容器”用戶輸入文本信息區域,可以是單行文本,也可以是多行文本。
文本輸入框常規情況下具有4種交互狀態:「默認狀態」、「聚集狀態」、「錯誤狀態」、「禁用狀態」
1、特別提下文本輸入框通常情況下不具有「Hover狀態」。
2、在設計聚焦狀態的時候,需要注意用戶光標的位置。比如:text fields的信息來源不僅僅于來自用戶鍵入場景,同時還有可能用戶從別處復制一段文字的場景。
標簽「Label text」的對齊問題是讓設計師這么多年來一直頭疼的問題,也是讓設計師不斷創新交互形式的源動力。它直接影響到用戶對于表單的理解成本以及表單填寫的完成率,下面我們就來聊聊一些比較常見的標簽設計形式。
標簽文本采用左對齊,文本的長短問題又會導致部分較短標簽文本與容器間距增大,讓用戶從左至右瀏覽的效率降低,并且看起來不夠協調。同時如果該產品存在國內與海外兩種版本的話,將中國翻譯成外文以后長度將會變的十分不可控。
如果標簽文本采用右對齊,標簽文本的長短問題容易導致左側的視覺隱形邊界錯亂,用戶的規律眼動容易被打亂,同時如果該產品存在國內與海外兩種版本的話,標簽長度問一樣依然存在。
介于標簽左對齊與右對齊各自存在不同的優缺點,不能完美統一,從而催生出標簽與容器頂端對齊的交互方式。頂端對齊的方式使得用戶視覺動線變得十分規律,豎直向下瀏覽可以便捷地理解標簽文本閱讀效率提高明顯,同時標簽文字長度不再成為干擾設計師進行排版的一個糾結點,很好的解決了有些同時具有國內以及海外版本產品的問題。
但是標簽與容器頂端對齊的方式也不是十全十美,在移動產品場景下或者對縱向空間使用率要求比較高的場景,標簽與容器頂端對齊的設計方式就比較尷尬。由于表單高度比其他幾個設計方式要高,造成用戶一邊填寫表單一邊不斷往下滑動。
前導圖標代替「Label text」這種設計方式在輕量級表單中較為常見,條件也比較苛刻:
同時因為每個人生活習慣、文化差異非常之大,造成對于前導圖標的認知都有很大的不同,由于這種設計方式對于用戶理解成本很高,信息密度較大的表單類型也不適用,所以沒有很強的普適性。
占位符代替「Label text」或者將標簽與占位符合二為一的這種設計方式可以很好的節省大量縱向設計空間。但是也是存在比較大的設計弊端,假如用戶填寫的表單十分復雜且場景不熟悉需要邊填寫邊理解,那么這種設計方式就不夠優雅了,會讓用戶完全忘記自己在填寫什么類型的表單。
基于上述一些存在的問題,Material Design的使用了一種比較討巧的設計策略。即采用占位符承載標簽文本,并且在用戶填寫信息時,標簽文本始終可見,由占位符轉移到文本框頂部。
這種設計方式對視覺動線、標簽整齊度、排版空間等一系列問題都有改善,但是在填寫信息密度大、理解難度高的表單上表現就不盡如人意。讀者現在可以腦補下,在一個需要填寫大量表單的場景下,這種帶有動效的方式會造成視覺混亂,不能讓用戶沉浸式的填寫信息,容易讓用戶出戲。
不過在某些商業場景下,這種設計方式對數據轉化會有比較不錯的表現。譬如在電商的搜索框當中,把一些需要重點的商品信息放在占位符上,一方面對該商品的曝光量必然有所提升,另一方面在用戶直接點擊搜索時,將會以當前占位符內容進行搜索,達到為所推薦商品引流的效果。
前文也提到過text fields的信息來源不僅僅于來自用戶鍵入場景,同時還有可能用戶從別處復制一段文字的場景。那么在用戶復制信息過來的時候,就需要特別注意focus狀態下的光標位置,必須在文字的末尾,而不是在其他什么亂七八糟奇特的地方。
合理的反饋信息對用戶降低理解成本、提高表單填寫率也是至關重要的一部分。這里我總結一些比較常見的錯誤類型供大家參考,沒有想到有缺失的類型也希望大家幫我補全。
「內容是否為空」比如必填項;
「二次確認是否相同」比如密碼校驗;
「輸入信息是否合規」比如密碼格式;
「輸入信息長度合法性」比如手機號碼長度;
「輸入信息的唯一性」比如收到的驗證碼。
從用戶體驗流派角度去分析,好的設計不僅在錯誤情況下給出明顯易懂的提示信息,也要在正確場景下給到正向反饋與鼓勵,讓用戶增強信心。
對于某些具有特殊格式的輸入信息(比如手機號碼、出生年月、信用卡到期日等等),我們在設計占位符的時候就可以預先把格式寫入其中,告訴用戶信息輸入的必要格式,起到提前防錯效果。
清除功能在pc端的表單中存不存在區別并不是很大,但是在移動端表單中小編強烈建議把它放上去,因為可以幫助用戶大大降低交互成本。
在使用多行文本輸入信息的時候,我們經常會碰到輸入文字超出文本域字數規定的情況。那么一個優雅的字數限制方式就顯得尤為重要。一般采取兩種設計方式:
顯而易見第二種方式更為優雅,也更能夠獲得用戶的尊重,畢竟最高層次的用戶體驗就是讓用戶自由的輸入。
根據相關研究機構調查報告得出每10個人當中就是1個具有某些方面的先天不足,所以恢復到初心「設計以人為本」,針對特殊人群在設計的時候我們必須要考慮周全,比如紅綠色盲。這里小編就不展開闡述了,有機會的話可以另外開一篇文章專門講講這方面設計需要注意的點。
Text Fields是我們平常表單設計工作中無法避免的一環,幾乎20%的Text Fields承擔著表單當中80%的重要功能。與表單填寫率與完成率有著密不可分的關系。如何合理的設計表單當中的Text Fields成為了工作當中的重中之重。
相關知識推薦:你到底會不會「下拉菜單」啊?
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:人人都是產品經理 作者:月亮與六便士
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn