在百度百科的定義中,阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達到每小時 70-100km,遠超現代潛艇的航速。
人類為了擺脫自然界設計的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。
在人類社會,人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律,諸如此類的阻力都無時無刻規范著人類的行為。
類似地,對于互聯網產品,用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響,這些阻力會阻礙用戶完成目標。
在認知心理學中,我們接受外部世界的刺激之后做出反應的過程中,涉及到我們如何感知、學習、推理、記憶,以及如何把意圖轉化為行為。人類數十萬年的進化過程中,對于感知、學習、推理、記憶的神經結構已經初步進化形成,大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力,從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。
對于一件新事物,我們感知它的方式通常受到三個因素影響:過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦產品界面中與用戶的經驗預期相悖,就會產生阻力。
面對一個我們從未使用過的機器設備時,我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法?!饵c石成金:訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think(不要讓我思考)”,作者認為設計者在設計一個界面時,最好能夠做到讓界面清晰易懂、一目了然,讓用戶能夠不必過多的思考就能夠使用它,幫助用戶跨越思考過程,讓用戶能夠輕松做出復雜的決策,減少認知壓力。
我們可能都經歷過心流狀態,當我們在極度專注地做某件事時完全沉浸其中并且非常高效,但如果意外地被打擾,會讓我們很煩躁。
有關任務執行的研究文獻中就曾經提到過:中斷會導致錯誤,而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個,重新啟動需要的時間會讓每個任務都變慢。
打擾我們的事情可能是工作時突然的一聲噪聲,也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流,造成用戶的使用阻力。
認知負荷理論(Cognitive Load Theory)是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出,由于對人類學習認知和教學指導提供了新的理論框架,該理論在教育領域成為重要的心理學指導理論,在交互設計領域也存在著借鑒意義,理論的主要內容如下:
認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量,被分類為內在認知負荷、外部認知負荷以及相關認知負荷(如下圖)。當任務需要消耗的注意力和記憶容量超出學習者的極限時,就會導致認知超負荷,超出的部分將不會被學習者有效獲取。
不同的呈現形式形成的外部認知負荷是不同的,一般來說,文字>圖式>視聽。因此,為了避免認知超負荷給用戶帶來的使用阻力,我們應該設法簡化信息來降低內在認知負荷,通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。
如下圖,基于上述的用戶的認知能力分析,合理的降低阻力,能夠讓用戶在使用產品時效率更高,成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面,我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好,在某些場景下,我們需要增加阻力和提高用戶的使用成本,進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。
類似于一個倒金字塔結構,交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法,可以降低用戶行為路徑中的阻力。
不同的控件有著不同的應用場景,控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。
舉一個例子,在微信的朋友圈發布頁中編輯內容后點擊取消后,彈出警告框顯示“不保留”和“保留”按鈕,但是考慮到用戶可能會誤操作點擊取消按鈕的場景,此處應增加一個按鈕讓用戶回到編輯狀態,否則不管用戶選擇哪個選項都會退出發布頁重新進入,從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題,使用了默認有返回操作的上拉菜單控件作為提示方式,即使在誤操作場景下也不會增加操作步驟。
控件方面這里就不展開講了,大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。
任務都存在其復雜性,當我們無法簡化它時,可以考慮將復雜性移交給系統,使其代替用戶操作。
比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別,自動為用戶填充。
預判用戶行為分為兩種方式,第一種是在用戶操作前,預判可能發生的用戶行為,以建議的形式為用戶提供選擇,縮短用戶行為路徑。
比如拍攝照片后,打開微信聊天頁面,微信會以氣泡的形式詢問用戶是否要發送圖片,如下圖。
第二種是由于用戶的認知錯誤進行了非目標操作時,系統提前識別引導用戶進入正確的流程并完成任務。
比如支付寶聊天界面中,很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬,但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能,從而避免了用戶的錯誤操作,如下圖。
不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用,將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式,導致從一級頁面(A)進入到二級頁面(B或C)后,如果想切換信息列表還需要返回到一級頁面再次選擇,增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高,希望用戶專注于當前的信息列表,但是我這樣的用戶經常查看過濾信息列表,擔心是否有重要信息被屏蔽,多出的一步操作還是給我帶來不小的使用阻力。
淘寶訂單模塊的做法就比較合理,從一級頁面(A)進入二級的任何頁面(B 或 C)后,二級頁面可以在標簽欄互相切換,而不需要退回一級頁面再次選擇二級頁面,從而節省了一步操作。
快捷方式有跳轉類和功能類兩種,跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。
比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用,減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。
功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務,比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務,并且在下次一鍵即可完成。
米哈里·契克森米哈賴在《心流:最佳體驗心理學》中將“最佳體驗”定義為:當我們在做某些事情時,那種全神貫注、投入忘我的狀態。這種狀態下,我們身心合一,甚至感覺不到時間的存在,技術水平也會達到頂峰,在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而,周圍突然的干擾或環境刺激都有可能打破心流體驗。
用戶在使用軟件產品時很少有心流體驗,因為過多的頁面的跳轉和刷新會中斷用戶心流,冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題,我們可以提高單個頁面的動態容量,在不跳轉頁面的前提下使用戶完成任務,為用戶創造在視覺感受層面上的心流體驗,下面是一些方法舉例。
覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口,可以由用戶觸發或系統自動觸發,在網頁端和移動端都有著廣泛應用。我們通常可以將其用于輸入內容、附加信息、子頁面信息外顯、顯示操作指令等。
模態覆蓋層一般由點擊觸發,通常出現后會伴隨亮盒效果,使用戶聚焦于覆蓋層上的任務,用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定,它可以是一個小型的顯示警示信息的彈窗,也可能是一個篇幅很大的信息介紹,在保持上下文的情況下展示更多信息,避免了用戶迷失在各種頁面跳轉中。
如下圖,behance的首頁點擊一個作品后,會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容,而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中,一般只需要 1-3 分鐘的瀏覽后就會關閉頁面,模態覆蓋層的方式使得打開和關閉的操作更加流暢,提高了設計師的瀏覽效率。
模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性,為了避免用戶產生明顯的割裂感,一般適合采用模態覆蓋層的方式展示新頁面。如下圖,知乎使用模態覆蓋層展示評論。
詳情覆蓋層在網頁端通過光標移入觸發,觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時,會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息,避免了跳轉新頁面。
嵌入層類似于抽屜,需要的時候將其展開,不需要的時候將其收起。與模態層不同之處在于,展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有:拓展內容、展示下級內容。
如下圖,微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。
Xmind的嵌入層展示了格式的下級內容,可以在保持能夠繼續編輯腦圖的前提下進行格式設置。
對于內容豐富的頁面,希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。
把某些操作難度大耗費成本高的操作使用新技術解決,比如人臉識別和 OCR 技術可以降低信息輸入成本,不但幫助用戶使用較少的時間完成任務,也降低了用戶的犯錯幾率和使用阻力。
手勢的優化也是降低操作難度的可行方法,優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后,針對不同使用場景的用戶提供了三種退出的方式,大大降低了操作難度。
舉一個反例,得到的書籍詳情頁中,查看詳情的按鈕熱區只存在于文字上,但是用戶的使用習慣會誤認為整塊區域都可以點擊,因此每次點擊多次失敗后才理解熱區的正確位置,如果將熱區擴大到整個區域就可以降低操作的難度。
想要了解更多交互手勢知識可以拓展閱讀: 交互手勢的容錯性和邏輯性
用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解,會糾結和疑惑不同選擇之間的區別,最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇,同時允許用戶切換到其他選擇,以此來減少思考,降低使用阻力。
以手機淘寶查看相似寶貝功能改版為例,在舊版中,長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項,點擊后會跳轉到對應頁面。在新版中,長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品,同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是,由于舊版的第二步給用戶的兩個選項讓用戶過多思考,導致第二步的流失率過高,很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶,同時也很方便地去切換到「同款寶貝」,這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。
我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦交互界面中與用戶的經驗預期相悖,就會產生阻力。
上文提到過,我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題,我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此,當設計缺乏一致性時,不但會導致我們已經形成的條件反射和肌肉記憶失效,還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作,從而形成阻力。為了避免這些阻力,我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。
如下圖,警告框的按鈕位置一旦第一次用戶經過使用熟悉后,之后用戶會進行無意識地快速操作,此時如果某個警告框缺乏一致性就會導致錯誤的發生。
內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了,它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。
如果能夠做到簡潔,就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒,從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍,不應該使用用戶難以理解的各種黑話和行話。在此基礎上,如果能夠通過形象生動的修辭手法幫助用戶快速理解,就更勝一籌了,比如針對垃圾分類,一些網友發明的快速記憶方法就是一個很不錯的例子,如下圖。
一段文案中可能有些是重點內容,有些是解釋內容,并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶,能夠引導用戶下一步行動就足夠了,至于其他解釋性或者不重要的內容弱化即可。
針對前兩條規則,我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示,每一次購買火車票的過程中,當我遇到 12306 的這個彈窗,都會讓我用不少時間去進行理解和思考。首先在個人看來,“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在,如果沒有標題,直接展示正文即可;其次,正文的內容重點信息不突出,其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車?!边^于長和復雜,很考驗用戶的短期記憶和耐心;最后,按鈕文字沒有提供操作路徑,用戶想知道如何操作需要先閱讀完上面的文案。
飛豬的案例就避免了 12306 所存在的問題,做到了簡潔易懂和重點突出,如下圖。
表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。
同一個軟件系統中,表達相同概念的用詞一致。模塊中的相似文案,語法表達方式一致。上文提到我們人類很少愿意思考的特點,一旦一個軟件系統出現表示同一個概念,但是名稱不一樣的詞語,我們大腦就不得不開始被迫思考:“這個詞語和之前那個很接近但是有些不一樣,它們是同一個東西嗎?”這個思考過程從而形成了不小的阻力。《認知與設計》一書中提到一條規則:“同一個名稱,就是同一個東西;不同的名稱,就是不同的東西?!币虼?,一致性是撰寫交互文案的一條重要原則。
當信息的內在負荷不能再進行降低時,通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化,降低外在負荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題,這里就不做展開了。
阻力并不是越小越好,在某些場景下,我們需要提高阻力提高用戶的使用成本達成某些目的。
類似于馬路上的減速帶,在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力,減緩用戶的操作的節奏,達到防錯的目的。如下圖,在藍湖中如果要刪除一個項目,就需要先輸入項目的名稱后才能成功刪除,通過增加阻力提高了防錯能力。
針對涉及到用戶隱私的敏感操作,通過設計特定的交互流程讓用戶體驗到安全感,比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂,增加用戶的確定感和可控感。
生活中大部分的時刻都是單調乏味的,我們需要使用各種儀式點綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗旅程中的點睛之筆。
就像多年前堅果手機一代的包裝,設計師別具匠心的將包裝設計為一次充滿著童趣的體驗,雖然拆包裝的過程時間增加,但是給予用戶似曾相識的場景是不可替代的。
看似使用起來費力的微信搖一搖,可以加強用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗,這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。
用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多,內容質量就越高,進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區,就會同時帶來大量的負面內容,造成對其他用戶的干擾,甚至導致他們大量流失。因此,為了讓一個產品的社區生態能夠健康發展,我們需要采取一些篩選方法來設置阻力,以此來篩選出對平臺有益的用戶和內容。
很多產品在冷啟動階段,為了避免垃圾用戶和提高社區質量,會設立邀請制來控制用戶來源,然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本,保持服務器穩定,甚至可以制造一種供不應求的感覺,獲得更多的討論度。
網絡騙局在社交類產品屢見不鮮,婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量,不僅嚴防死守,還會設立價格門檻,不付費直接無法使用,這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見,但是確實有效地進行了用戶篩選。
通過設置測試題將用戶分成不同的群體,進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試,需要花費的時間成本比較高,通過這種方式篩選出真正認同 B 站社區文化的優質用戶,給予這些用戶更多在社區中互動的權限,從而也大量減少了低質量用戶的負面行為。
上述的三種用戶篩選方法是否適用,需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡單舉例。
不同的內容形式對于社區的價值是不一樣,我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發布純文字內容,需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容,附有圖片的內容對于其他用戶更具有吸引力,通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間,從而也可以使朋友圈廣告得到更多的曝光。
有時產品的商業目標和用戶目標存在一定沖突時,損失一定的用戶體驗滿足商業目標是不得不進行的選擇,這需要我們進行合理的平衡。
為了迎合商業目標,我們有時需要針對一些功能設置一定操作阻力將其進行弱化,然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見,比如通過強化按鈕對比進行功能的引導,如下圖。
歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分,針對身份等級低的用戶設置使用阻力,以便于引導其投入更多精力和資源,或者通過此方式給予高等級用戶優越感,刺激其進行分享炫耀。
16 年發布的支付寶生活圈就是一個很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點贊?;ヂ摼W產品中,每增加一個動作,用戶都會呈幾何級流失,但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作,幫助支付寶生活圈實現了刷屏傳播的效果。
雖然讓用戶暢通無阻地使用產品是我們的目標,但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下,我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路,助力你在產品優化探索中找到可行的切入點。
參考資料:
《微交互:細節設計成就卓越產品》作者:Dan Saffer
《心流》作者:米哈里·契克森米哈賴
《web界面設計》作者:Bill Scott / Theresa Neil
《認知與設計》作者:Jeff Johnson
《阻力設計:探索質量和數據間的平衡點》IXDC 演講,作者:王毓瑩
《點石成金》作者: 史蒂夫·克魯克
《設計心理學2:管理復雜》作者:唐納德·A·諾曼
作者:Ballen成明
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
最近新的一批應屆生開始步入職場,讓我想到自己剛入設計這一行時,遇到的大大小小問題感到很是無助。今天這篇是結合自身經驗寫給入行不久的設計,希望你們眼中有光心中有夢對設計仍不忘初心。
相信你在設計工作中一定遇到過這樣的場景,當好不容易拿著設計稿推進時,被各種角色提出意見:
“我覺得這個設計不高級”,“我覺得這里可以再大一點,顏色更亮一點”,“我覺得可以試試競品那樣”,“算了,還是用第一稿吧”等等,然后陷入無限改改改的循環中,往往做著做著就開始懷疑自己是不是不適合設計
我認為有3個方面的問題
每個人的審美不一樣,天然會摻雜著主觀因素,導致每個人都能很容易的提出自己的意見。而我們對設計的關注往往是各種好看概念稿、當前流行趨勢等等,導致我們過于追求視覺表現,而忘記從需求層面出發
每個需求都是有具體的目標用戶,用戶身份不同,同一個問題背后的需求也是不一樣的,當與真實用戶脫節,業務理解不到位,很可能就把整個需求理解錯誤,這樣修改的幾率就很大
沒有理解每個功能是什么,背后要解決的問題是什么,滿足了什么需求,能夠得到的價值是什么
產品或運營提出一個需求的背后,往往都有一個非常明確的結果預期,他們也需要層層審核。我們不應該想“他是不是對我有意見”“他不懂設計的吧,就喜歡瞎BB”“每次都這樣針對我,設計做的真沒意思”等等,而是需要主動溝通,了解為什么?只有充分的理解需求,才能尋找更正確更好的解決方案。
我們做稿子時常存在問題是我們僅僅關注了設計視覺表達環節,整個項目流程我們理解的過于狹隘,騰訊百度這些大廠設計流程往往從項目立項設計已經開始介入了
想要提升設計方案的說服力,首先要從思想上改變對設計認知,然后再從執行層上落實每個小點
這里需要設計師站在更高的視角,把設計從表現和執行抽離往前后延展,在整個過程中往前去挖掘需求和規劃產品結構,往后做到把控和沉淀,跳出視覺認知層,才能宏觀看待整個業務改版
從不同的視角看待問題,學會拆解問題和解決問題,從產品、設計、開發不同的角度來全盤看整個產品,分析這個需求的投入產出比是否足夠,是否能達到目標(包括設計目標和產品目標)。設計、產品、開發從來都不是對立的,都是不同角色為了整個產品發力。
我們在開始著手項目的時候,不要單點去看要在某個頁面要做什么改動,而是從問題入手,和產品同學對齊好目標,結合設計理念。
最后找到發力點在哪里,循序漸進,這樣很大程度上能避免項目的反復,對設計流程的準確把控也是輸出優秀設計方案的基礎。
有些新設計師認為創新就是把原項目進行翻天覆地的改變,初入職場會覺得負責的業務和項目都很小,沒有什么意思,其實創新的維度有很多,包括設計工作流程的優化,還有從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜。
陌陌情感化設計和貝殼旗下被窩家裝產品圖標設計異曲同工之處,大方向上都是利用大色塊、細節處用線條勾勒,整體設計輕量化符合年輕人喜歡,但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象,而被窩家裝圖標融入品牌IP趣味化表達,傳達出詼諧、幽默的正面情感
設計師往往對信息的獲取比較片面,很多往往坐等原型,然后刷網站找圖接著打開軟件擼圖,這種不充分理解需求就開始做設計的行為,屬于思維懶惰,就被稱為常說的美工
我們在需求階段設計師應該主動跟需求方深入溝通,搞清楚以下方向的問題:
明確目標是為了最終設計方案可衡量,設計師工作不是提供一個天花亂墜的方案,而是盡可能走在一個正確道路上提供給需求最合適的方案,只有大方向不錯的情況下才有好壞之分
在業務探索初期,舊版滿足了業務方和用戶的基本訴求。但是隨著業務擴張與更新迭代,我們逐漸發現現有的租售模塊實價登錄信息不能提供用戶有效的參考價值,該頁面點擊到實價登錄頁面的用戶量極少
這個改版的背景是在租售業務上優化實價登錄社區的需求,租售詳情頁的上內容的呈現還是舊版,現有框架和內容對社區價值點展示不足。
解決辦法:優化信息框架,豐富該房屋社區信息,滿足用戶找房時了解社區資訊需求
比如整個社區在該市的排名、整個社區的配置圖、口碑評分等以及在實際找房場景過程中,用戶會找這個社區內同格局同戶型的房屋等等
整個591APP是臺灣地區關注度最高房屋的產品,但是從二手房引流過來的用戶很少,埋點數據不理想
解決辦法:除了在視覺上也要與本身租售的業務分開,讓用戶理解注意到該模塊的價值外,另外在體驗層也需要優化
為了更好的明確實價登錄的價值定位,以及確認用戶期望什么的信息呈現,我們在實際改版時對用戶做了多輪的摸底調研,挖掘用戶在使用關注功能時的真實場景訴求。
在調研過程中,我們發現使用實價登錄的用戶分兩類,分別是觀望期的用戶和決策期的用戶,這兩類用戶雖然都使用,但是對實價登錄功能的場景訴求是不一樣的。
觀望期用戶一般是有買房計劃,但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數是了解為主,從慢慢對比中做到心中有數
決策期的用戶大多已經線下看過房,有些甚至已經到了和議價階段,他們對于自己的購房訴求已經十分清晰。在這個階段的用戶,期望提供更多有關體現房源價值的信息,比如掛盤時間、成交表、周邊完善程度等等,這些信息一方面可以展示出目前房源再市場內的定位,重新調整價格預期;另一方面也能了解到業主心里預期,提升線下斡旋的成功率
我們可以從這兩類用戶的使用訴求看到,大家都期待能提供更豐富有效的信息,幫助自己明確需求和輔助決策。
由上述信息得出我們的設計目標,提高租售模塊的實價登錄的點閱、降低跳出率,當我們的設計方案每個細節,都是以目標為導向時,你輸出的方案將更有說服力
結合實價登錄歷史現狀和不同階段用戶場景使用預期。我們在本次關注改版上制定了對應的設計策略。
舊版分析:僅滿足用戶基本使用,其中承諾的誤差率未達標,與內政部信息同步也存在問題;同時,視覺上更像是內容說明展示,點擊感不明顯
優化策略:圍繞用戶買房租房場景,為用戶提供最新的實價登錄信息,同時添加點擊指向性箭頭,告知用戶可點
通過對首屏不斷的優化和迭代,打磨體驗細節和設計細節,首頁的點閱提升了43%
從框架層對功能和層級進行梳理,原層級主要功能不突出,根據功能的重要層級以及用戶使用頻次進行梳理,將入口進行提煉,同時針對多樣化需要增加新的入口
舊版分析:用戶在不了解社區情況下缺少關注動機;折線圖不明所意;同社區是否有成交與當前用戶缺乏聯系;查看更多實價登錄卻到社區詳情頁與預期不符
優化策略:圍繞用戶買房租房場景,展示與用戶切身利益相關信息
關于顏色
整個產品主色是橙色,但是目前租售詳情頁上藍色橙色混用,當然設計的改版也需要鍥機,所以我們這次改版沿用橙色,當好區別之前的藍色,達到凸顯實價登錄模塊的目的
配色從樸素到亮眼跟從LOGO配色,“暗藍色”到“亮橙色”增強年輕感,加強了顏色的對比度,讓品牌感知更加直接,增加品牌視覺分量
關于圓角
圓角,代表友好、親和,具有更強的內指向性。我們對于圓角的取值上也做了足夠的思考:結合房屋特性,卡片內需承載的內容信息眾多,圓角太大會影響邊角信息的呈現,所以我們在圓角選取上將圓角數值整體縮小,采用了可根據場景精細程度選擇合適數值的圓角(4-6-8px),使卡片容器信息展示更聚焦。
設計師不僅要會設計,還要能夠有理有據的,跟需求方陳述自己的設計方案。尤其是在項目合作和設計推進時,非常重要。方法可以分為以下幾點:a.有邏輯;b.能堅持;c.會妥協。
向別人推進自己方案之前,先把自己要表達的內容梳理清晰,進行調整和簡化。試想你小時候全校上臺發表考試獲獎感言,是不是有個長長的稿子
多問自己一些為什么,比如下面稿子類似于廣告位的地方,當前目標是提高點擊率。但是整個模塊展示是在另外的業務上,也是存在突出的同時不能太突出的問題
初稿給出的時候也是出于2個方向考慮,方案一是出于頁面整體風格一致性同時優化視覺,稍作強調;方案二考慮到方案一視覺引導弱了,用重色強引導達到產品目標。2個設計方案都可達到產品目標,剩下的就是調優了
在符合最終產品目標的設計方案,必須堅持。但是,你要有證據證明為什么它值得或者能夠堅持。
這里再分享一個案例來,臺灣用戶往往特別注重個人隱私,基本不開通系統定位,但是買房租房位置選擇及交通地域選擇是第一步,否則后續搜索無法定位到用戶預期。所以此次產品目標是加強導航的視覺層級,當然這只是優化需求里面一個小需求
經過競品分析、加強品牌感知和用戶使用習慣等方面確定使用品牌橙。但是這個橙飽和度比較高,在測試階段非專業人士提出疑問導航這個太刺眼,讓整個頁面感覺不高級,讓產品和交互再次懷疑這個橙色是否需要調整
這個時候設計堅持是非常有必要的,因為大量結果驗證是可達到產品預期也符合用戶使用習慣,僅因為大陸同事質疑就在測試環節隨意修改,這個是非常沒必要的。測試環節離上線時間是非常緊迫的,這個急促的時間推翻重來結果也可想而知
體驗設計會有很多不可控的因素,是在各種局限下做出最合適的選擇。要處理好問題的優先級,分清楚哪些是核心目標,哪些是兼顧目標,這樣才能更有效的管理自己的時間以及項目的進度。
清晰設計層面來說就是方案能做到方向明確,方案明了;有效字從設計層面來說就是輸出的方案可以解決存在的問題,能達到設定的目標以及可以切實落地。
清晰和有效的維度是不一樣的:清晰更多是針對設計,在于不同方向/方案的差異度和側重點;
有效更多需要聯合設計上下游(用戶/產品/開發),對于優秀的設計方案來說兩者相輔相成,缺一不可
數量并不代表一個設計師的專業,最多只能說明設計師技法嫻熟。在評審的過程中,不建議將所有的設計方案直接平鋪。而是你要先經過自己思考、衡量與推敲,挑選出最優的 1~2 個方案進行方案評審,并給出設計說明,陳述方案的思考邏輯。
在設計最初期先思考有哪些途徑達到目標,確保所有實現手段的方式都有考慮到,整合途徑一致、方向近似的方案。對差異性不大的方案進行合并劃歸,才能在合理范圍內整理出具有不同思考維度與目標側重的提案方向。
之前的例子比如目標答案是提高點擊率和閱讀量,我從3個方面闡述方案的可行性
方案一:沿用當前頁面的比較扁平設計樣式,選用大間隔大標題區分模塊,在頁面里加入品牌色裝飾強調我們的模塊,吸引用戶點擊;
方案二:可以采用卡片式設計突出點擊感,吸引用戶點擊;
方案三:因為頭部有用橙色裝飾強調,所以整個頭部模塊不用卡片式呈現,突出后面2個模塊
這樣3個方案給需求方,即滿足對方產品需求,又滿足設計需求,對方就不會全盤否認設計方案,走入改改改模式了,就算對方有修改意見也能說出具體點去修改,而不是說我覺得不好,不夠突出這樣非常主觀的想法
強調一點:我們在方案都沒說服自己的情況下不要推出去,專業度是每次和對方碰撞中中慢慢建立起來的,如果說服不了自己的情況下,推出去對方很大可能性要你試無數稿對比;另外在闡述發需求方時候,也要注意語言的引導,慢慢理解對方的意圖
初入行時認為滿足了需求方便是好的設計,當其他角色提出不同意見就會覺得他們不懂的設計。這些現象是因為設計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達到團隊共同設定的目標,以及方案是否能平穩落地這三個維度
我們在實際輸出方案的時候,不能從產品經理的需求文檔開始,而是要把考量維度更前置,從項目現有的問題出發。這個問題的搜集包括外部用戶的反饋,內部團隊的聲音,同時對問題進行篩選和甄別。
比如下面同一個產品按鈕2種懸浮狀態,左側案例按鈕hover狀態是由正常狀態面型變成線型;右側案例按鈕hover狀態是正常狀態下加投影。
如果我們僅從產品需求文檔開始,不去深究其背后的原因,很可能把右側hover狀態直接變色處理,沒有去思考hover的幾種樣式哪種是更適合當前場景的的,這樣簡單粗暴的處理方式多了之后使得產品體驗大大折扣
問題還需要結合目標一起考慮,解決問題的思路并不完全等同于目標,目標是大家一起制定的未來產品的發展方向。比如之前導航的案例,未發版前部分工作人員認為顏色偏重,但是從產品目標和品牌調性及目標用戶審美上是沒有問題的
在輸出設計方案的時候,需要考慮到開發實現的可行性,需要消耗多少資源去實現這個需求,最低成本達到目標的路徑是什么。最常見的就是情感化設計,下圖案例2個空狀態下的場景,原本考慮到趣味性及品牌屬性加入動效,但是開發的業務需求已經排到下月,最后只能以靜態圖展示,先滿足基本需求后續有時間再進行優化
再例如下面三組數據的排版方案一:文字最左邊間距30px,文字最右邊間距30px,中間一組數據中間對齊;
方案二:三組數據分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理,當寬度是1200時右側不會空太多,但是按方案二的邏輯寫更加便捷,一組數據樣式可以解決3組數據的排版,大大提高開發效率,如果用方案二評審加入開發實現方式的思考,那么按過稿率大大提升了
以上是跟進項目一整個具體過程,了解背景、分析問題、設定目標、到方案推導及執行輸出、再到方案的落地,整個過程與產品研發溝通非常順利,最后也獲得良好的用戶反饋,整個團隊滿滿的成就感是非常開心的
進入互聯網公司工作初期,大多數人對設計的理解更多停留在表現層,對設計的判斷標準更多是好不好看、喜不喜歡。但作為設計師我們不要盲目的去畫設計圖,只有在設計方案前,更好的理解和分析了需求,才能很好地服務用戶幫助用戶使用產品;同時,只有站在用戶的角度去分析理解產品,才可以幫助產品站在全局的視角提升用戶體驗和設計需求,從而打造優秀的用戶體驗。這2點綜合起來才是設計師價值的體現。
原文地址:站酷
作者:貝賢設計筆記
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
“仰望星空,腳踏實地” ,做設計需要想象空間,也要有反思和總結的能力。
讓我們來看兩個毫無關聯的產品的界面。
BI產品
團隊協作產品
這兩個案例展現了如何選用不同的模式以實現不同的目的。
對于BI產品來說,目的是讓數據分析更徹底,提高數據分析效率;更好的整合數據,為企業提供報表,做為企業決策的依據;更好的幫助企業管理者管理企業,提高企業實力。
對于teambition來說,目的是輕松記錄要做的事,并與伙伴實時同步進展。讓彼此清楚地了解項目整體情況及事項優先級,從而完成目標。
基于產品目的我們可以看出BI產品重效率;teambition 更看重清晰以及使用是否輕松愉悅。
而產品的目的決定了它所采用的設計模式也會不同,下面我們再對照界面看下基于目的在界面設計上有什么不同。
BI產品
團隊協作產品
BI數據分析類產品的布局多是小部件組成,這樣做會方便用戶進行多任務處理。界面設計也會相對比較密集,整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。
設計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大(Christopher Alexander)在他的開創性著作《建筑的永恒之道》和《建筑模式語言》中提出的。
《建筑模式語言》里面包含了253個建筑設計模式,大的如城市和道路系統的布局,小的如家庭住宅中的照明和家具。
類似地,我們在創建界面時,也在使用設計模式(組件)來解決常見的問題:使用標簽頁將內容分成幾個部分,并表明哪一個選項對應于當前的頁面;使用下拉菜單展示可供用戶選擇相關選項。
標簽頁
下拉組件
設計模式分為2類:
第一類:功能性模式(組件庫)表現為界面上的具體模塊,如按鈕、標題、表單元素、菜單等。
第二類:感知性模式(視覺規范)則是描述性的樣式,以可視化方式表達和呈現產品的個性,如配色、排版、圖標、形狀、動畫等。
功能性模式有點像名詞和動詞,它們是界面中那些具體的、可操作的部分;而感知性模式則類似于形容詞,它們是描述性的。
例如,按鈕是具有明確功能的模塊,它讓用戶能夠提交某項操作。但按鈕上的文字的樣式,以及按鈕本身的形狀、背景色、填充、交互狀態和過渡動畫不是模塊,而是樣式,這些樣式描述了按鈕是什么樣的。
唐·諾曼在《設計心理學》一書中說過:系統映像(界面)和用戶模型(用戶通過與界面交互而形成的感知)之間存在著一道鴻溝。
在設計團隊內部也是如此,比如“范圍輸入框”組件,你能想象它是一個什么樣的組件嗎?相信不同的人肯定有不同的心智模型,因為這個組件不是常用組件,在ant design、arco.design組件庫中也找不到這個名稱組件,因為它是TDesign的產物。
而每個公司都會根據自己的產品特性創造一些非常規類組件名稱,這個時候就需要在所有參與產品創建的人之間共享。只有產品內部設計語言一致,才能去培養用戶的心智模型,這樣才能去除系統映像與用戶模型之間的這道鴻溝。
例如上面這個組件,每個人都需要知道這個組件叫“范圍輸入框”,而不是“輸入框”或者“數字輸入框”。
例如,teambition的目的是“輕松記錄要做的事,并與伙伴實時同步進展”。
于是,我們可以去看產品,設計體系在實現這一目標的過程中發揮了多大作用,以及這些設計實踐的效果如何。如果視覺、交互混亂,導致無法實現上述目標,那么可以認為這套設計體系是無效的。
上面介紹了設計體系包含的內容,下面我們針對這些內容進行具體的介紹:
做B端的小伙伴應該都知道ant design,但不知道有多少小伙伴有認真的看過ant design的設計原則。 可能有小伙伴會問這個設計原則有什么用,我最開始也覺得沒什么用,后來在參與設計體系優化過程中發現這個原則就是金字塔尖。
例如:用戶沒有填寫完表單,那么表單的提交按鈕能不能點?是置灰好,還是按了以后再給彈窗提示。
例如:可編輯表格,是放一個筆狀icon來提示可編輯,還是采用鼠標觸發時出現輸入框以及指針變為文本狀態。
日常工作中總會在這些細節問題上爭論很久,美其名曰“打磨設計”,其實很多時候就是設計原則在團隊內部沒有達成共識。
為了避免出現上述問題,我們要建立一套基本的價值觀和原則。在一些公司里,尤其是在處于初創期的公司里,嘗試建立一套共同的準則是很難的。設計原則是無法量化的,因此定義這些原則可能需要多次迭代。
對于原則到底是什么,可能存在一些爭議。有些公司的設計原則偏重于品牌,有的偏重于團隊文化,有的則偏重于設計流程。
例如,Pinterest的設計原則便偏重于品牌。
Atlassian公司沒有分團隊或者產品單獨制定原則。
他們的目標是在客戶可觸及的每一點上都體現一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現。
不過,盡管各處的價值觀是相同的,但體現程度并不一樣。
例如,官網就會較多的提現“”大膽”,但產品里面就不會,正如Atlassian公司的設計經理Kevin Coffey所說的,“沒有人想要一個‘大膽的’服務支持頁面”。
Atlassian 官網截圖 https://www.atlassian.com/zh
Atlassian 設計體系 https://atlassian.design/
我們以TED為例。TED的一條設計原則是“追求永恒,而不是追求潮流”。永恒這個詞不光體現在TED的界面上,還體現在TED的整個品牌和設計方法上。
這意味著他們不會為了追逐潮流而采用一項新的技術或引入一個新的設計元素。
例如:定義了原則為“簡化”(讓產品盡可能簡單,簡單到幾乎感覺不到它的存在)。這種原則就是不實用也不可操作的。
怎么能讓團隊所有人都能理解?
消除無用的部分。每一個設計元素,無論大小,都必須有一個目的,并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里,那么它便很可能不應該在那里。這樣的定義就清晰很多。
再例如:定義了設計原則為“有用”,什么是“有用”?
從需求開始。如果你不知道用戶需要什么, 就無法做出正確的事情。去做調研,去分析數據,去與用戶交流,而不是做假設。
好的設計原則也能幫我們確定優先級和平衡點。
Salesforce公司的Lightning設計體系的原則是“清晰、高效、一致、美觀”。
這些原則的優先級必須遵從以上順序。“美觀”不應該高于“高效”和“一致”,而“清晰”應該始終放在第一位。按照這種方式對原則進行排序,可以讓團隊在做設計決策時明確哪些東西應該優先考慮。
Atlassian和Airbnb的團隊成員被問及他們的設計原則時,他們都能脫口而出,沒有片刻猶豫,沒有人表現出遲疑,沒有人想要去翻看品牌手冊里的原則內容。他們為什么能把原則記得這么牢固呢?因為他們的原則足夠簡單、實用、易于讓人產生共鳴。
Airbnb公司的四條設計原則(“統一”“通用”“風格化的”“對話式的”)便深深地扎根于其設計過程之中。
每當設計一個新的組件時,我們都會確保它完全滿足四條原則。如果我們沒有這一套原則,便很難就各種問題達成一致意見。----Airbnb 首席交互設計師
每個團隊建立其設計原則的方法都不盡相同:有的會召開幾輪研討會,有的可能會征求CEO或創意總監的意見。不過,無論采取哪種方式,都離不開下面幾點:
從目的開始
TED網站的主要目的可以用一句話來表述:“盡可能廣泛地傳播演講。”因此,TED網站的精神和價值觀便是觸及盡可能多的人群,降低使用門檻,讓產品具有很高的兼容性和可訪問性。這意味著優化性能和提升可訪問性比添加華而不實的功能更重要,清晰的文案比大膽的設計更重要。
尋找共識
如果你仍處在定義設計原則的階段,那么一個有效的方法便是讓團隊的一些人或所有人(取決于團隊規模)各自回答關于設計原則的問題。例如,在他們眼里,什么樣的設計對你們產品來說是好的設計?他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設計原則?
面向正確的受眾
如果搞不清楚設計原則是為誰寫的,就一定會寫出含糊不清的原則。有的小伙伴說我們領導就喜歡“美觀”,那我們是不是把“美觀”放在第一位?一定要搞清楚為誰而寫。原則到模式
作為一個設計師,定義設計原則可能對你來說也許并不難, 但怎么把原則、品牌價值、組件相結合,怎么體現在設計模型中,這個我覺得是個挑戰。
對于 TED 來說,信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難,所以有時候標題可能很長。對標題 進行截斷是很容易的,但對他們來說,演講信息的優先級是最 高的。
因此,他們沒有選擇相對容易的標題截斷方案,而是確保他們的設計模式可以容納長的標題。
功能性模式是界面中有形的構件(表單)。它們的目的是讓用戶能夠完成某種行為(填寫表單),或者激勵用戶完成某種行為。
功能性模式可以很簡單(標簽?字、輸?框、按鈕 ),也可以組合成更復雜的模式(搜索組件)。
標簽?字、輸?框、和按鈕
搜索組件由標簽?字、輸?框和按鈕組成
隨著產品的發展,模式也在不斷發展。包括風格,甚至功能和交互方式,都有變化。然而,它們的目的基本保持不變。
我們用頂部導航舉例:
頂部導航是由logo、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的:搜索定位框告訴我們怎么快速找到想要的東西,導航帶領我們瀏覽全局,指引我們到想去的地方,而后面的的圖標按鈕讓我快速觸達。
總的來看,這些模塊都有一個共同的目的:引導用戶快速瀏覽使用。隨著產品的發展,模式也在不斷發展。
例如,隨著產品功能越來越多,可能會在導航上面新增設置功能,讓用戶自己去排布常用功能。又如,我們可能會對導航進行重新布局,把導航按模塊分類,采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代,希望它更好的實現各自的目的或者說更有效地激勵用戶使用。
在設計開始階段就闡明模式的目的,能避免在產品發展過程中做重復性的工作。
目的決定了其他的一切:模式的結構、內容及呈現。了解模式的目的,可以幫助我們設計和構建更加穩健的模塊。
如果說功能性模式是界面中的組件,那么感知性模式則更像是樣式——描述組件是什么類型的,給人的感受是什么樣的。下面,我們將探討感知性模式。
設想我們每個人各有一套房子,且每套房子都有以下這些家具:一張桌子、幾把椅子、一張床和一個衣柜。
不過,雖然都有這些家具,但每套房子給人的感覺截然不同:可能是因為家具的樣式、材料、顏色、紋理不同,或者是床罩的布料、裝飾品的樣式、房間的布局和燈光,甚至是房間里播放的音樂不 同。
上述這些屬性便稱作感知性模式。正是因為它們,可能你的房子就像是一個地中海風格的小窩,而我的房子就像是一個倉庫。
而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫,以及這些要素在界面中的組合和使用的具體方式。
有時,人們將這樣的特性視為產品的樣式,或稱作皮膚,也就是最外面的一層。但要想取得成效,它們必須不僅存在于表面,還必須存在于品牌的核心,并隨著產品的發展而發展。
只有這樣,感知性模式才會成為讓產品脫穎而出的強大力量。
同一領域的產品,哪怕具有相似的模塊,它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌,并讓品牌被人記住。
看下面的圖片,你能認出它們是什么產品嗎?
這兩張圖里面并沒有太多的信息,你只能看到排版的樣式、一些圖形和顏色,以及一些圖標。然而那些視覺上的線索極具辨識度,所以你仍然很有可能看出它們分別屬于什么產品(即釘釘和飛書)。
這些視覺元素通過有意識地反復使用,便形成了模式,這就是為什么我們可以在沒有上下文的情況下認出它們。
在模塊化的系統中,想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的,因此它們可以將系統的不同部分連接起來。如果這種連接是有效的,那么用戶就會感受到模塊之間的統一性。
例如:飛書和騰訊的相同功能的組件感知模式是不一樣的,所以兩個公司設計體系不能混用。
如果說功能性模塊反映的是用戶需要且想要的內容,那么感知性模式關注的則是他們直觀的感受或行為。
在《網站情感化設計》一書中,作者提出了一 個簡單的方法,通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺主題的絕佳工具。可以使用數字化的方式創建情緒版(Pinterest或花瓣都是一種用于創建數字化情緒板的常用工具)。
如果你目前做的產品是需要體現:科技、質感、智能,那上圖應該可以滿足這些條件,你可以通過這張圖與領導進行溝通達成一致,然后從中提煉出一些顏色、元素、材質,這樣大方向就不會有太大問題,只需在細節上進行打磨。
定義好了大致的方向之后,便可以使用樣式疊片來更加細致地探究多種可能性。樣式疊片的概念由Samantha Warren提出,他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設計交付物。”
和情緒板一樣,樣式疊片可以為用戶和產品團隊提供有價值的討論點,并呈現他們對特定設計方向的初始反應。
arco.design 首頁這張圖可以理解為就是樣式疊片,把不同的組件樣式疊片放在一起比較,有助于準確地找到設計方向。
當功能模式和感知模式建立完成后,我們將它們集成到產品的過程,它們還將進行演變。
因為在真實的界面中,模塊、交互、樣式之間相互影響下會產生新的問題,這都是很正常的,是典型的迭代過程,這個過程會一直持續,直到設計語言最終形成。
像ant design、arco.design應該都經歷過這個過程,只是我們不知道而已,要不然也不需要花費幾年的時間打磨后才發布出來。
平衡品牌性與一致性:
過分關注一致性也會扼殺品牌性。矛盾在于,讓設計達到完美的一致性無法確保它依然具有很強的品牌性。有時,這樣做反而會削弱品牌性——在一致性和統一性之間存在著細微的差別。
《英國公開大學》的創意總監曾說過:“當你專注于產品一致性的時候,打造產品質感的一些重要的細微之處就有可能會丟失。
發展感知性模式需要為設計師賦予打破常規的權力,鼓勵設計師積極地探索更多的可能性。好的設計體系能在品牌的一致性和創造性表達之間取得平衡。
小規模試驗:
后期如果發現樣式無法滿足,我們如何將新的樣式引入設計體系呢?
可以先進行一些小規模的試驗是一種相當有效的做法。如果某些元素的效果很好,我們就逐漸將它們集成到其他界面中去。
例如,在學習者完成一個步驟時,純功能性的切換按鈕缺乏慶祝和成就的感覺。于是,我們用帶有圓形樣式、彈跳 動畫以及勾號圖標的按鈕取代了先前的按鈕。
雖然新的按鈕樣式受到了學習者們的好評,但它與設計體系的其他元素格格不入。后來,我們開始在網站的其他地方應用圓形圖案、彈跳動畫和勾號圖標。如果不這樣做,那么整個設計 體系給人的感覺就是割裂的。
數字產品都是由團隊打造的。團隊里的每個人都有各自的具體目標,都有各自的截止日期。這就意味著難免會出現草率加入的模式、重復或錯誤的模塊。
我們能確保一個產品即便有多人協作,卻仍能連貫、統一嗎? 只要我們團隊對自己的設計體系及其運轉方式有共同的理解,我們就能做到這一點。
這意味著我們遵循相同的指導原則,我們對品牌愿景的理解是一致的,我們在設計和前端架構方面有共享的方法,我們知道什么樣的模式是最有效的,也知道它們的工作原理。換句話說,創建統一的設計體系需要共享設計語言。
許多偉大的建筑物(如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮)并不是由一位主建筑師在繪圖板上費力地創造出來的,而是由一群人構建出來的,這群人對能將這些建筑物變為現實的設計模式有著深刻的共識。
“幾組人可以通過遵循一個共同的模式語言,當場構思出他 們的大型公共建筑,就好像他們共有一個心靈?!?
——克里斯托弗 ? 亞歷山大,《建筑的永恒之道》
我們可以用類似的想法構建數字產品。設計語言可以讓人們創建出具有整體感的產品,哪怕不同的人負責不同的部分也是如此。
如果一個界面上的元素沒有恰當的名稱、團隊里人盡皆知的名。那么該元素就沒有在你的設計體系中成為有效的單元。一旦你給一個物件命了名,你就塑造了它的未來。
例如,如果你給的是一個表現型的名稱,那么它將來就會受到樣式的限制:“藍色按鈕”只能是藍色。
例如,如果你給的是一個狀態屬性的名稱:“幽靈按鈕”,它的特點是:按鈕形狀的透明按鈕,但有細實線的邊框,常用在有色背景上。
僅僅完成命名還不足以建立共享的設計語言。整個團隊都應該 沉浸到設計語言中去,讓它無所不在。
讓設計模式變得可見:
如果有條件,可以在墻上開辟一塊專門展示設計體系的空間,將它稱作“模 式墻”
讓你的設計體系更加開放,人們會感覺你歡迎他們的加入,歡迎他們提出問題甚至做出貢獻。
引用事物的名稱:
所有語言的共同特點是,只有不停地使用才能讓它保持活力。
它需要成為日常對話的一部分:
這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設計體系作為入職培訓的一部分將設計體系的內容作為入職培訓的一部分,新員工了解設計體系就會更加容易。當新員工入職時,他們將了解到設計指南是如何創建出來的,這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學》 內部,他們創建了一個入門性質的線上課程,其中有一章專門對模式庫進行了介紹,并包含了 一些小測驗和小課程,這樣可以幫助新員工更好的理解設計體系。
定期組織設計體系會議:
每個人都討厭開會。但是,如果你希望每個人都跟得上設計體系的發展,那么組織召開設計體系的會議就是必要的。這是所有設計師和開發人員共同專注于設計體系的時間。一開始,可 以每周舉行一次,當團隊找到節奏之后,可以每兩周舉行一 次。團隊可以利用例會時間就產品的總體模式(如圖標、排版)得出一致意見。同時,這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。
設計體系不是一夜之間構建出來的,而是通過日常的實踐逐漸形成的。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者:夜鷹YEAH 來源:站酷
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
對于B端來說,可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規范;因為之前企業要求并不高,但是隨著市場和環境的發展,企業對B端越來越重視,這些模版太類同,顯然就太爛大街了。隨后字節推出Arco Design、騰訊推出企業級設計體系TDesign、有贊推出Zan Design,很多大廠都推出了適合自己產品的模版和規范,給了我們許多借鑒,能讓我們快速作出一個不出錯的方案。不過企業、市場的要求顯然不止于此,我們的設計追求也不止于此。那么我們如何才能擺脫套模版,提高界面的精致度,提升界面的交互體驗呢?
為啥要搭建設計系統?設計系統對我們開發團隊中誰有指導作用?
◆ 設計系統可以保證我們產品風格的統一性,降低用戶對新產品適應時間和學習成本;對UI設計輸出效率有很大的提高,在團隊協同中可以大大的減少無效溝通,節約時間成本
◆ 在開發團隊中,設計系統對UI、交互、前端、測試等崗位的工作都有一定的指導作用
設計原則是傳統智慧的沉淀與未來趨勢的結合體,能夠幫助我們更好的進行設計活動時代在進步,設計原則也必然需要不斷的更新以適應發展新的設計原則要求界面更友好,操作更加人性化。
這里我歸納了8條原則僅供大家借鑒學習:
◆ 可用性:有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作
◆ 易用性:易用是首要考慮的因素,能一步解決的事情絕不兩步
◆ 統一性:頁面風格、色彩、布局等要保持全局統一,不可為了某一功能的美觀而去破壞整體
◆ 親密性:信息的關聯性強,距離就要相應的縮短,讓他們看起來是一個視覺單元;反之,則距離要加大,要讓用戶對信息的區域劃分一目了然
◆ 對齊性:在界面中,將元素進行對齊,符合用戶的認知,引導視覺流向,讓用戶更加流暢的閱讀信息
◆ 對比性:對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。
◆ 重復性:相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。
◆ 穩定性:沒有任何東西比產品的穩定重要,down機再好的產品也是徒勞。會影響到系統穩定的事情不能做
響應式布局,能夠適應各種屏幕尺寸及分辨率,確保整體布局的一致性簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統布局,常用柵格一般是16列或24列。
◆ 柵格:是對界面當中元素橫向排布的一種模式,主要用于大型區塊間距的排列,不適用于圖標與文字間隔的小型元素。
◆ 模度:為界面布局的一致性和韻律感,統一設計到開發的布局語言,減少還原損耗,我們網格基數設為8,卡片寬度及間距為8n。常用模度:4 8 16 24 32 40 48 56 64 … 1920
◆ 布局:常用左右布局或上下布局
左右布局以1920頁面布局為案例:通常B端產品左側會有一個導航菜單,假設240px,右側核心工作區域總寬1632px, 右偏移240px ,列數16列,列寬86px, 間隙16px, 左右邊距24px; 左邊導航和邊距固定不變。
上下布局以1920頁面布局為案例:通常左右會有一個留白區域,假設144px,中間核心區域總寬1632px, 右偏移144px ,列數16列,列寬86px, 間隙16px。
設計風格說白了就是用戶最直觀的感受,“商務、時尚、簡約、科技感、沉穩、年輕、高端...”?
決定設計風格的因素有這些:
色彩是UI設計的基石,人腦對于色彩的記憶度要高于形態;除了美學之外,色彩還是是情感和聯想的創造者。通過對自然的感知和行為,我們通常對色彩定義品牌色板、功能色板、中性色板,以及衍生色。
◆ 品牌色:是體現產品特性和傳播理念最直觀的視覺元素之一(例如:我們熟悉的政府藍/黨政紅/淘寶橙,他們都能直觀或間接的傳達產品特征屬性)
◆ 功能色:遵守用戶對色彩的基本認知,保持一致性,不過多的自定義干擾用戶的認知體驗,提高用戶的閱讀理解力,功能色代表了明確的信息以及狀態,比如正常、成功、失敗、警告、鏈接等
◆ 中性色:主要應用在界面的文字部分、背景、邊框、分割線等場景,根據使用場景,通常將中性色被定義為 3 類:文字、線條、背景
◆ 衍生色:B端產品中顏色的應用場景可能很廣泛,要考慮它的延展性,按照一定規則定義完畢主色,便可以自動獲得一系列完整的衍生色
設定統一的字體規范,無襯線黑體中宮更為開放,布白更為勻稱,顯示效果更為舒適,醒目利于閱讀,更利于視覺信息的傳達,在互聯網時代后期在界面設計中字體樣式還是會以無襯線體為主。
◆ 字體家族:根據系統區分Mac or Windows,如果用戶使用的是Mac系統可以優先使用Mac默認字體渲染 ;如果使用的是Win,字體兼容性選擇順序(有購買版權字體的可優先考慮),例:
◆ 字號:為了提升用戶的閱讀體驗,滿足用戶的可讀性,更為舒適、清晰,也能保證界面的層次感(結合WCAG 2.0標準),將 PC/Web 端主字體從以前的12px改為 14px。
◆ 行高:為上下文之間提供了呼吸的空間,規范的行高,可以使得界面層次清晰、重點突出
◆ 字體顏色:WCAG 2.0 中將顏色對比等級分為 3 種,A級,AA級,AAA級,等級越高意味著顏色的對比度越高,呈現出來的視覺壓力越大。字體顏色數量不建議太多,根據文字主次關系定義3-4個為宜(例:主文字、輔助性文字、提示文字、輕提示/禁用文字)
◆ 字重:字重不建議太多種,2-3種為宜(例:Regular、Medium、Light)
圖形中有圖片、圖標、圖表,都對整體風格有一定影響,設定統一的圖形使用規范,可以使視覺效果更加和諧
交互,即交流互動,也就是說我們自己通過我們的五覺:視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產生信息溝通的過程。在互聯網中交互對象個體主要是人和機器,所謂人機互動,相互配合,共同達成某種目的。
◆ 交互方式:保持產品的統一性,同類別的交互不可有不同的操作感受。要符合大眾的認知習慣,可創新但不可違背潛意識,例:wab端頁面鼠標交互操作一般有下拉、上滑、按壓、懸停,移動端一般左右上下滑動、下拉、上拉、雙指縮放...
◆ 交互狀態:按鈕狀態變化,頁面狀態變化,組件狀態變化...交互內容確實太大了,我個人也只接觸到的也只是冰山一角,只能拋磚引玉,勾起大家思維,相互探討學習
◆ 引導:引導一般常見5 種:新手引導)、步驟引導、幫助/操作引導、新功能引導、空白頁引導
什么是組件?組件是抽象概念,對面向過程而言是對數據和方法的簡單封裝。對面向對象而言是一些符合某種規范的類組合在一起就構成了組件。它可以提供某些特定的功能。組件出現的原因軟件工程中重復、反復出現、普遍的、有相似的問題的出現,導致開發過程中有大量的代碼需要不斷的重新設計,開發周期延長,開發復雜度增加。需要岀現一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現就是為了解決這些實際問題的。
在前端眼里,組件通常是指頁面上的視圖單元,可以說,UI組件是組件的子集。組件庫大致可以分為這幾大類:
◆ 導航:固釘、面包屑、下拉菜單、下拉導航、電梯、菜單、分頁器、步驟條
◆ 數據錄入:自動完成、級聯選擇、多選框、日期選擇框、表單、輸入框、數字輸入框、提及、步進器、評分、下拉選擇、滑動條、穿梭框、文件上傳
◆ 數據展示: 頭像、標題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關鍵詞、時間軸、走馬燈、空狀態、徽標數、樹、標簽、標簽頁、圖片、氣泡...
◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認框、進度條、結果、加載中..
◆ 其他: 錨點、回到頂部、圖標...
設計規范是為了更高效的做設計,但不是一成不變的,它在落地使用的時或多或少都會有問題,需要我們慢慢的去反復檢驗它的合理性,發現不合理的及時更正,不斷迭代,不斷沉淀,不斷優化,這樣才能不斷提高產品的用戶體驗。此次分享借鑒一些前輩的經驗,主要是整理歸納學習,如有需要補充或糾正的,歡迎大家相互探討!
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系
作者:小魚ID 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
臨摹是一個很好的學習方法,人類學習就是從模仿開始的,而對于設計師來說,臨摹作品對于提升學習效率尤其有用。
但在做具體臨摹練習時,就會發現一些問題,比如在星球里看到同學們做日常打卡練習時會遇到臨摹的原作本身質量不高,不會分析作品優缺點,不知道如何用到自己的項目中等等。所以我在星球里的月度分享會上跟大家聊了這方面的經驗,今天也將部分內容整理成文章分享給大家,希望能提高學習效率。
分享的內容分以下幾點:
1、為什么需要做臨摹練習?
2、臨摹的幾個階段
3、如何找到優質臨摹作品?
4、如何做臨摹思考?
5、保持行動力的秘訣
6、總結
有些新人在剛入行的時候,出于對設計天馬行空的想象,不屑于做臨摹練習,覺得作為設計師就應該多發揮一些自己的原創能力。想法是很好的,但此時更多的是手上的輸出跟不上腦子中的想法,產出的原創作品質量往往不高。而臨摹是站在巨人的肩上做事,提升動手能力的同時吸收優秀的設計思路對自己的提升來說非常有幫助。
其實不光是小白需要臨摹,很多資深設計師甚至藝術家也會采用臨摹的方式提升自己的能力,從中學習別人的創作思路、表達方式,學無止境。
不同的階段,臨摹的目的也有所區別。一般來說,前期臨摹更多的是練習軟件、技法,后期才會是練習別人的風格表達,綜合運用。所以,我把臨摹分為3個階段:
因為是練習技法,訓練的是自己的軟件操作能力和觀察解構能力,所以我通常會選擇稍難一些的作品進行臨摹,目標是跟原作盡可能的一模一樣。
比如我6年前臨摹的Mike大神作品,就比較考驗技法,適合初期剛入門階段做練習。
這個階段主要是練習思考和分析能力,嘗試理解原作者這樣設計的原因和目的。這個階段,我通常會選擇臨摹一些有特點的圖標或者界面,并嘗試改動原作中的一些小的元素,目標是有保留原作的特征,又會加入更多自己的思考讓作品在細節上有所區別。
比如在2015年做的界面練習,同時還會記錄自己的思考
其實經過一段時間的練習,你肯定已經積累了不少創意,現在有實現能力就可以盡情發揮了。雖說是原創,其實也會大量找參考。剛入行設計的時候,我一直覺得,大師應該是可以完全自己創造出新的作品,但后來知道,優秀的作品大部分都是建立在融合非常多優質作品精華之上完成的。之前看過暴雪的設計師分享,他們做一個場景效果,光找參考都要花掉一半的時間,可見找參考的重要性。
這個作品當時是我在圣誕節前做的,是有參考笑臉、塑料口袋、光碟、進度條光帶等等結合起來的原創作品。
既然是希望通過臨摹從別人的作品中學到東西才去做,那么臨摹優質作品就很關鍵。我一般會從Dribbble,Behance,Pinterest,Instagram和大廠出品的應用中找臨摹對象。判斷是不是優質作品,可以從推薦上,細節上,吸引你的點上進行選擇。
比如,我想做一些細節豐富的UI控件,那平時大家打王者的時候,里面的UI細節都是非常精致的,包括按鈕樣式,排版,造型,動效,可以從中學到的知識點可太多了。
在比如在Dribbble中,用關鍵詞進行搜索,再篩選為熱門,時間選擇最近一年,就能知道流行趨勢和設計佳作了。從中選擇一些很有感覺的作品來臨摹練手,肯定很有動力了。
不要無腦臨摹,做的過程一定要多加思考,我一般會從以下幾個方面來做分析:
同一個作品,閃光點的判斷因人而異,但你既然喜歡它肯定就有你看中的地方。你喜歡的那個細節,就可以是它的亮點,記錄下來就是你的思考。這些記錄會成為你下次創作時的靈感,在實際做項目的時候就不會腦袋空空了。
比如下面這張作品,我就很喜歡它的光影細節表達,在開關的邊緣還會有小光源的顏色影響,會有紅色和綠色的邊緣光。我覺得這張圖值得學習,所以就臨摹了下來,這張圖就是我臨摹之后的效果。
記錄你覺得是問題的地方就行,不講對錯,只需有你自己的理由就行,然后嘗試給出自己的優化方案。沒有完美的作品,但如果確實暫時看不出來也沒關系。
在做臨摹的過程中,會遇到哪些問題,比如某些效果跟原作有差異,某些字體大小間距不好把握等等,這些就是你可以學習的地方。
比如我在最初做UI的時候,就不清楚具體的設計規范,我就逐個把原作用到的間距,字體,尺寸全都量出來,然后用到臨摹的界面中,自己來摸索出設計規范,而不是去死記硬背。更多當年我的打卡日記系列請見https://www.zcool.com.cn/work/ZODAxNzI2MA==.html
做練習,最重要的是堅持,讓很多人苦惱的是做了幾天看不到效果就沒了動力了,但其實想要堅持做事也是有方法的。
就像挖井一樣,每次打井就要打通看到水才行,設計練習也是如此。一段時間專注一個能力的練習,學到會運用才算是真正掌握。這里我的方法是按主題系列來執行,比如這周我主要打卡練習美食類的圖標設計,那么就會找各種差異化的風格來練習。系列感的練習也更容易出效果,獲得滿足感。今天練這個,明天練那個,心態很容易浮躁。
往往做練習的時候,很多時間會花在糾結到底練什么內容上。減少選擇的辦法就是列好清單,提前規劃好每天做的內容,具體可以直接執行的程度。
學習最忌諱的是三天打魚兩天曬網,保持規律,每天進步一點點很重要。忙的時候,也要至少保證自己比昨天有點進度。這個進度哪怕只是改個顏色,調個比例,或者有點思考記錄都是行的。做兩天又中斷幾天,很容易產生挫敗感,而每天進步一點點的本質就是讓你獲得心態上的穩定感,這會成為你堅持下去的持久動力之一。
千萬別悶頭做東西,多尋求反饋,不論是發設計作品到平臺還是朋友圈,亦或是在星球里跟一群相同想法的人互相打卡點贊,這些反饋和認同感都會不斷激勵自己堅持下去。當你因為堅持一件事而有收獲的時候,就能體會到一種成就感與滿足感。不斷給予自己一些正向激勵會讓自己進入一個良性循環,更不容易放棄。
作者:彩云Sky 來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
最近幾年以來,大家能看到B端設計趨勢已經越來越火熱,在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計,讓設計出來的圖表高大上,符合業務需求,讓業務方和總監對你贊不絕口,本文就必須看完和收藏了,因為實在是太實用!
應用設計越來越依賴數據驅動,對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表,但我們其實可以通過遵循一些簡單的規則來改變這個情況。
選擇錯誤的圖表類型,或默認為最常見的數據可視化類型,可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容,可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。
當使用水平條時,在基線的左側繪制負值,在右側繪制正值。不要在基線的同一側繪制負值和正值。
刪數據起點會導致曲解。在下面的例子中,看左邊的圖表可以很快的得出結論,值B比D大3倍多,而實際上,兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。
對于折線圖,總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢,因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。
折線圖是由線連接的“標記”組成,通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的,并且對于較短的時間間隔非常有效,但當數據更新不頻繁時,這可能會導致混淆。
例如: 使用折線圖來代表年度收入,如果數據是每月更新的,則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值,而在特定時間實際的收入數字是未知的,所以可能會產生誤會。在這種情況下,使用垂直條形圖可能是一個更好的選擇。
平滑的折線圖可能在視覺上很好看,但它們錯誤地反映了背后的實際數據,而且過粗的線會模糊真正的“標記”位置。
通常,為了節省可視化空間,當有兩個具有相同度量但大小不同的數據系列時,可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀,而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例,只是瀏覽圖表,然后就得出了錯誤的結論。
餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下,條形圖是更好的選擇。但如果你決定做一個餅狀圖,有2個比較好的建議:
1)不要超過5-7片,保持簡單
2)可以將額外的最小段分組到“其他”切片
如果沒有適當的標簽,無論你的圖表有多好,它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。
將數據放在切片上可能會導致多個問題,在可讀性問題上和窄切片上都會有挑戰。相反,添加黑色標簽能清晰的鏈接到每個部分。
在確定餅片秩序時,有幾種常用的方法:
1)將最大的切片放在12點的位置,然后將下一片切片順時針降序排列
2)把最大的切片放在12點的位置,第二大的放在順時針相鄰位置,第三大的放在11點的位置,其余的切片按順時針降序排列
同樣的建議也適用于其他許多圖表。不要默認采用字母排序,將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖),以確保最重要的數值占據最突出的空間,減少眼球運動和閱讀圖表所需的時間。
餅圖通常不是最容易閱讀的圖,因為比較相似的值非常困難。當我們把中間部分去掉,創建一個圓圈圖表時,我們騰出了空間來顯示額外的信息,但這樣犧牲了清晰度,極端情況下,圖表就會變得毫無用處。
不必要的造型不僅會分散注意力,還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:
1)3D元素,明暗面
2)陰影、漸變和其他扭曲的多彩色
3)斑馬圖案,過多的網格線
4)過度裝飾,斜體,粗體或襯線字體
顏色是有效的數據可視化的組成部分,在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性,所分配的顏色應該是不同的。連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合,可以創建一個連續的顏色集。
發散調色板是兩個連續調色板的組合,中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。
看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以幫助你生成各種調色板。
根據美國國家眼科研究所(National Eye Institute)的數據,大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。
1)在調色板中使用不同的飽和度和亮度
2)把現有配色去色然后檢查對比度和可讀性。
確保排版能夠準確傳達信息,幫助用戶專注于數據,而不是分散用戶的注意力。
1)選擇易讀的字體,避免襯線和裝飾過度的字體
2)避免使用斜體、粗體和全部大寫
3)確保與背景有高對比度
4)不要旋轉文字
這個簡單的技巧將確保用戶能夠更有效地閱讀圖表,而不會扭傷他們的脖子。
如果你的任務是在web和移動項目中添加交互式圖表,你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?;谝讯x庫的設計將確保易于實現,并能提供大量交互想法。
幫助用戶通過改變參數,可視化數據進行探索。然后得出結論,最大化價值和洞察力。在下面的示例中,你可以看到IOS Health應用使用了各種數據表示的組合。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B 端產品主要是 Web 端產品,空間大、操作多,內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系,從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。
格式塔主要包括 7 個基本原則:
今天我們就來總結下,格式塔原理在 B 端產品中是如何應用的?
我們先看 2 張截圖,分別是不同分辨率下的界面效果。
可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關聯親密,距離遠的就各自獨立分組。
當我們想要傳達給用戶層級關系時,就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側,低頻、輔助功能放置在右側。通過增大元素間的距離,達到功能分區的目的。
相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實現信息的分組或者高可讀性。
例如在可視化圖表中,不同范圍值的指標采用不同的背景色。通過背景色的差異,將同一范圍內的數據形成視覺關聯,提高用戶對信息的識別效率。
通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁,都采用了雙列設計,左側主要以高頻的業務功能信息為主,右側是輔助運營信息。兩列尺寸寬度有明顯差異,用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異,并有效地突出業務信息。
IBM、蘋果的 Logo 設計,無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。
在 UI 設計中,則會通過對齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色,內容區借助標題、卡片對齊形成視覺閉合空間,最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。
另外閉合性是需要元素之間相互輔助的,單獨的元素無法構建出閉合空間。以下圖為例,雖然四個小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。
用戶更習慣于從左到右的橫掃閱讀,因此連續性主要體現在橫向空間中。
下圖中,雖然左側的標簽文字與右側的內容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體,而是理解為兩組信息。
在某些場景中,如果信息平均分布,不會產生連續性的視覺感知。
例如下圖指標監控中,指標都是采用小卡片,間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點,沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時,需要逐個檢索,花費的成本更高。
通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規中矩的元素和分割方式?;蛟S有些單調乏味,但是勝在簡單,不會帶來額外的視覺噪點。
特別是 B 端產品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現元素存在于內容中,而不會作為空間的劃分邊界。
主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。
當我們需要著重表現內容時,同樣適用于主體與背景原則。例如登錄界面的設計,會通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級,適當凸顯輸入框的主體地位。
而 B 端內容區是核心空間,基本都是采用純白背景,與頁面背景形成對比,從而占據信息的主體地位。
共同命運原則聽起來有點玄學,指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少,我沒有找到合適的案例解釋這個原理。
在移動端產品中有些應用案例。比如 iOS 系統中,桌面布局編輯態下抖動的圖標,可以與靜態不可編輯的內容形成隔離效果,視覺引導性更強。同樣今日頭條頻道編輯時,也采用了抖動效果。
雖然 B 端產品沒有 C 端色彩豐富,表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的,要求和諧、有序、層次分明,輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。
格式塔原理不僅限于視覺表現,產品經理或交互設計師在原型設計時,也要重視格式塔原理,輔助設計方案表達,提高團隊間的協作效率。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介: 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊,并采用相似的視覺設計。如果超過三個或四個動作,往往會采取多個分組。
例子: 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復雜的布局中,被精心安排過的按鈕組會很容易被用戶感知和使用。一方面,它們在界面上往往非常明顯,用戶能夠一眼看到有這些功能可以進行相關操作。
大家所熟知的格式塔原則(Gestalt principles)也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近,因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的,不同的按鈕分組往往暗示著不同的功能類型,因此彼此間應該保持間距,或用不同的形狀,或用分割線進行區分。
如果你需要在界面上展示許多操作按鈕,且需要確保它們隨時在界面上可見。但同時,你又需要用圖形化的方式組織它們,以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果,比如,它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產品全局有效的操作上(例如「打開」和「選項」操作),或特定的一些通用操作(「保存」、「編輯」和「刪除」),或特定的某些操作(例如布局的「對齊」、「分布」)。不同范圍的操作不應當被到一個組中。
使用條件:
· 存在大量操作按鈕;
· 希望用圖形化的方式組織這些按鈕;
· 操作按鈕間存在功能相關性和差異性;
這個模式的總結簡單到像是一句廢話:把相關的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如:
· 如果需要包含文本說明,盡量使用兩個字或三個字的動詞短語,不要使用專業術語。
· 不要把不同功能范圍的按鈕放在一個組,應當將它們分成不同的分組。
· 同一組的按鈕應該有同樣的視覺設計:邊框、顏色、高度或寬度、圖標風格、動態效果等。
· 在空間排布上,可以將它們并排起來作為橫排放置,如果空間不太適用的話,也可以考慮一列縱列放置(例如Photoshop的左側工具欄)。
· 如果某一個動作是核心動作,可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要(或期待)執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。
· 如果按鈕足夠多,而且它們都有小圖標,你也可以把它們放在工具條或者像工具條那樣的狹長條上,放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂,也可以避免一長串冗長的動作列表看起來毫無關聯或區別。
通過這一模式,你可以創建一個較為清晰的元素層級結構:用戶可以一眼看出哪些動作是彼此相關的,哪些是重要的。
用戶需求:編輯設計文件中的對象
Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個, 有很多要理解和追查。 但是得益于精心的視覺和語義組織,界面按鈕始終保持一定的可理解性。
用戶需求:按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統,按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間,文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。
用戶需求:項目執行相關操作
這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式,將項目執行的相關操作和Git相關的操作聚合在一起,中間使用了分割線進行了區分。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
①什么是IOC
②IOC設計的發展方向
③IOC設計工具(BI類設計工具)
④IOC的應用場景
以上不展開闡述,不理解的朋友可自行關鍵詞搜索,我們就應用層面發散一下;
數據指標--指揮調度--數字孿生--設備監測--設備控制--事件感知--配置中心
相信設計同學或產品同學,或多或少都有接觸可視化領域。比如B端后臺常使用到一些統計圖表、比如用研分析或者市場分析也常常用到這類圖形來表達。
而涉及B端可視化,有一個不可忽視的詞就是“智慧”
智慧到底是什么,有人會告訴你,以前是數字化時代和智能化時代,現在已經開始進入到智慧化時代。但你要具體問智慧化和數字化有什么區別,大多數人會支支吾吾給你一個抽象的概念。
人尚且不能詮釋智慧,又怎么去創造智慧呢?
所謂的智慧城市、智慧園區、智慧社區、智慧校園、智慧交通、智慧安防,甚至智慧殯葬。
扒開外衣,它真的智慧嗎?
到底什么是智慧?百科告訴你:
“ 智慧是生命所具有的基于生理和心理器官的一種高級創造思維能力,包含對自然與人文的感知、記憶、理解、分析、判斷、升華等所有能力。智慧與智力不同,智慧表達智力器官的綜合終極功能,與“形而上之道”有異曲同工之處;智力則謂“形而下之器”,是生命的一部分技能。
在我們的日常生活中,智慧體現為更好地解決問題的能力。
通常,我們設計可視化大屏都容易被局限在平面空間中
“這個屏就這么大,你還想要什么?”
要提升可視化,首先就要打破面板大小的局限性,
理解并以其他形式滿足合理的數據穿透需求
如:
“
這個餅圖告訴我未處理的還有8個工單,到底是哪8個工單,
誰在處理,處理停留時長多久了?,
你就告訴我沒處理完,能輔助我決策什么?
”
數據的穿透面板可以有多種形式,以彈窗和面板的切換居多;
數據穿透后,也需能給到更詳細的信息輔助管理者決策,
但“決策”的動作如何做?
對講機?電話?或又是其他通訊工具?
不可質疑的是,確實很多情況,對講機更有效率
但信息化時代,有時為了痕跡留存,可以犧牲一些效率或嘗試融合;
這就迎來了大屏的功能性操作,工單指派、催辦、關閉、誤報等;
當然,想象空間還有很多,
如:未必客戶的操作臺就如同公安一樣分布著各類事件的值班人員,
未必不會出現臨時替班情況,如何通過大屏指導或指引不熟悉的人員處理事件?
處置預案或者叫處理建議,也許就是另一個亮點。
數據終究是數據,沒有物理世界的直觀感,
數字孿生即是這個時代最熱也最保溫的話題,比如最近大熱的概念元宇宙;
虛擬世界的映射我們見過太多,但大多是在游戲中,
如果要真正反映真實世界,技術空間依然很深。
打個最淺顯的比方,模型基于X、Y、Z軸坐標,而現實世界基于地理位置(GIS),如何映射?
BIM(城市信息模型) 、GIS(地理信息系統)、IOT(物聯網)
關于孿生,路還很遠,但從幾何模型——數據模型——數據融合——動態孿生到自主孿生,我們已能看見光。
大家可以去瞅瞅51World,一家以克隆地球為愿景的數字孿生機構,雖然不知道他們能走多遠,但一定值得關注和祝福。
IOT物聯網?
傳統的可視化我們會羅列設備的信息列表、日志、報警事件,
但大多都是非技術人員無法理解的數據,產生不了價值,更不能輔助決策。
關于設備,我們要往實用層面多加考慮,在真實場景中找到應用價值,
比如監測設備的在離線狀態、故障事件、原因分析、設備開關控制等;
萬物互聯,未必不可能;
說到設備的故障事件,我們突然想到,傳統的故障是怎么發現的?
通過物管碼,定期巡檢,上報異常;
現在我們通過設備各項傳感器也能發現,這是設備,那人、車、消防,難道不行嗎?
人可能包括內部工作人員比如脫崗等事件,也包括外來人員的闖入等;
車可能包括超速、逆行、違停、僵尸車輛等;
現在的AI感知攝像,如執法攝像、車輛監測、熱成像攝像等,可以幫助我們感知大多常規事件。
除此之外呢,數據的比對可以分析出各類異常,當然,人工反饋也不可或缺。
數據差異多大算異常,什么時候告警,這些隨場景不同都可能截然不同,標準雖然重要,配置也不可沒有;
圖表的展示形式,是折線又或是柱狀,維度是區域又或是樓棟?,圖表的樣式和數據維度配置貌似讓人驚喜;
誰來看都展示一樣的數據?會否出現數據查看的需求不同?演示和使用的需求會否截然相反?
打個不恰當的比方:
使用時,更希望沒有告警;
演示時,更希望讓觀眾看到我們對告警事件的處理效率和大屏的智慧;
權限的配置值得深思;
文章來源:站酷 作者:互耕II乙方
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在日常的工作中,會經常接觸到一些數據方面的內容,同時我也在不斷的加強相關方面的專業知識學習,希望可以借此做一個總結,與大家分享。如果你也在平時的工作中遇到相關的數據問題、不知如何利用數據推動設計、或者對數據抱有一定的興趣,那我們可以一起往下看。
本文主要圍繞以下幾個方面來進行解釋說明:
隨著互聯網大環境從增量進入到存量市場,企業發展與產品的迭代越來越離不開數據的指導,數據驅動已然成為當下產品的主趨勢。身為設計師的我們,更應該對數據保持高度敏感,通過一系列的數據分析推動設計迭代,并讓其更合理、更具有可信度。
任何一款產品,設計師都無法根據自己的心情、想法,一拍腦門的迅速產出。好的產品,既要考慮市場價值,也離不開用戶體驗,應該明確目標而進行實現,所以設計過程中需要依靠數據給予我們指導,即利用數據驅動設計。
數據在產品迭代過程中有著舉足輕重的地位,對于設計師而言也是極其重要。在了解數據之前,簡單的理解一下為什么需要數據,在互聯網產品設計中,數據的作用主要分為以下三點。
工作中或許會常常面臨多種需求并線進行的狀況,合理客觀的數據有助于我們更好的分清任務的優先級,并聚焦于當前最緊急的任務展開進行。合理有序的安排可以推動任務的快速高效完成。
設計師與真正的用戶之間往往存在一定的差異,我們不能按照設計師固有的思維方式去衡量用戶的想法,更不能想當然的覺得用戶需要什么。
數據可以幫助我們更好的了解用戶,利用數據分析的種種方法,我們可以進行抽絲剝繭,發現更深層次的問題,不斷的去深挖用戶需求,進而更好的滿足用戶,只有這樣我們才能更好的留住用戶,促進產品增收。
在進行設計輸出的過程中,我們可能常常會遇到以下情況:
我相信各位設計師在日常的對接中,一定是根據需求文檔進行了設計輸出,但是在設計評審階段卻很難去說服各需求方。數據在此情景下就顯得非常重要,它可以幫助我們針對設計方案有一個理性的數據支撐,去衡量我們的設計方案是否合理有效。
其次在項目上線后依據數據反饋,可以驗證此次設計是否達到理想目標,是否還有進一步優化的空間。了解數據可以更好的幫助我們深耕需求、把控方向。
為了進一步了解數據,現將所有的數據進行整合區分,大致上可以分為兩個類型,分別是定性數據與定量數據兩大類。
定性數據指導設計過程,往往判斷某件事物的意義與價值。定量數據關注數據頻率,在結果上更具有說服力。這兩種數據的類型在數據分析以及設計驅動的過程中都非常重要。時常會通過定性數據來發現、定義問題,最后再由定量數據來驗證結果。
定性數據是非統計數據,在樣本選取上,數據量較少,主要收集途徑有以下方法:應用商店評論、客服反饋、音視頻記錄、筆記反饋、訪談調研等。
可以快速了解到用戶的行為和態度,這種數據具有可調查性,是可以進行深入研究的,能進一步推斷出設計的哪些方面存在問題,從而通過設計方法優化產品設計體驗。
定量數據是統計性的,可以用來問“多少”的問題,最終生成結論性的數據信息。收集途徑可以有以下方法:測試、產品數據、指標上報、實驗調查等。
定量數據提供了對設計的間接評估,可以快速了解用戶基礎信息數據以及對產品的使用感知,例如完成率、滿意度等等數據指標,它不僅可以幫助我們快速統計信息,還能驗證結果。
數據不應該是只停留在表面的數字,需要深入的了解數據,善于從這一堆數字背后,發現數據的真實意義。
由此,Google推出HEART模型,作為一套完善的用以評估以及提升用戶體驗的標準。HEART模型包括五個維度,分別為:愉悅度(Happiness)、參與度(Engagement)、接受度(Adoption)、留存度(Retention)、完成度(Task success)。通過這種方式將數據分為五個維度,可以更有效的明白不同類型的數據所體現的真實含義。
什么是愉悅度?關于這個問題,大概一千個人會有一千個回答吧,因此愉悅度更偏向于用戶在產品使用過程中直觀的主觀感受,例如滿意度、產品體驗感受、推薦指數、易用性感知等等體驗指標,通過這一類的數據可以有效的了解用戶對于產品或者某個功能的喜好程度。
可以利用定性研究的方式獲取用戶在體驗和感知上愉悅程度,例如一對一訪談、觀察小組、可行性測試等。也可以通過定量調查中的問卷、數據反饋、AB測試等了解用戶的使用情況以及推薦指數等。
指用戶在使用產品功能時的參與深度,衡量指標即為有效活躍用戶的數量。用戶參與度并沒有統一的可量化的界定標準,但大致上可以分為以下幾個指標,產品訪問頻次、平均訪問時長、訪問頁面數量、產品使用間隔。
數據的衡量只是最基礎的一步,更重要的是如何提升用戶的參與度,對于新用戶而言,可以通過引導、幫助等建立良好的第一印象;對于老用戶,需要合理的推送相關優惠與活動,也可以利用游戲化運營建立長期關系,這些都是比較有效的提升參與度的方法。
當一個新的產品與功能出現時,由于陌生感,用戶短時間內很難接受,而接受度就是指用戶在特定時間內真正開始習慣并使用。
為了快速得到用戶的認可,往往產品設計中會通過競品分析的方式確??蚣軆热菖c市場的同類產品保持一致,滿足用戶的使用習慣。而針對大部分的新用戶也會使用新功能引導以及相關通知推送等加快新用戶的接受度。
在產品運營中,留存是最關鍵的數據指標,它也是產品獲利與增長中最主要因素之一,留存直接決定了用戶是否愿意繼續使用,它是最真實的數據表現,而留存通常體現在,多日留存率、回訪率、不同平臺的使用重合率等。
針對這一數據我們需要關注的核心問題就是如何提升用戶留存率,大致的方法可以分為以下兩個維度:
(1) 產品維度
產品功能決定是決定用戶留存的關鍵。在需求設計上,通過挖掘潛在需求,刺激用戶長期使用,并且通過拓展應用場景,不斷提供細分服務,進一步滿足用戶;甚至我們也會發現在大多數產品中,通過建立社區,打造社交圈子,強化用戶的粘性。
(2) 運營維度
產品使用過程中,合理的運營也是提升用戶留存的關鍵之一,常用的方法有定期舉辦活動、例如砍價、助力、簽到、每日任務等;也可以通過消息推送挽留用戶。
完成度主要是指用戶對于關鍵任務的完成率,常常用來衡量交互流程是否合理。主要包括以下維度:首次點擊時間、操作完成時間、完成點擊次數、完成率、失敗率、出錯率等。
A: 任務完成度的衡量指標該怎么計算呢?
(1) 任務完成時間
用戶在整個任務過程中,所花費的時間即為任務完成時間。
(2) 完成率
完成率=完成的操作次數/開始操作的次數
產品設計中,為了提升完成率,需要輔助用戶進行交互并進行引導設計,不僅需要符合不同場景變化以及用戶的心智模型,還要給予用戶體驗流程中的舒適感受,進一步輔助其完成任務。
B: 如何提升任務的完成率呢?
(1) 降低理解成本
利用設計手法,降低任務流程中的理解成本,切入到實際的場景中,幫助用戶快速完成任務。
例如在列表模塊中,默認狀態下的輸入框內,展示灰色的提醒文案,提前告知用戶該區域應該填寫的內容;比如說高德地圖通過AR技術結合導航,快速幫助用戶完成導航任務;再類似于可視化數據看板,幫助用戶快速獲取信息結果。
(2) 精簡任務流程
降低理解成本只能單一的滿足用戶操作前的理解,而操作過程中的步驟長短也起到非常關鍵的作用。優化任務流程,目的就是為了提升完成率。
例如用戶在進行登錄注冊時,可以點擊右上角的文案即可實現登錄注冊狀態的快速切換,減少用戶切換的流程步驟。再比如說表單填寫類的產品,還可以將相同的內容進行整合,減少操作。甚至電商產品中,可以通過找相似減少用戶的篩選成本。
(3) 系統智能預判,提供幫助
結合用戶的場景與行為,進行合理的預判設計,有助于縮短用戶操作路徑、引導用戶轉化。例如下面的案例,在表單信息填寫中,通過智能判斷關聯內容,提供幫助,甚至通過判斷用戶的行為,進行精準內容推送。
通過以上數據的五個維度,可以發現數據的覆蓋面是十分廣泛的,不同的數據反映不同的內容。在工作中我們也會接觸到復雜且多樣的數據,對于設計師而言,常用的數據大致可以劃分為用戶數據、行為數據、業務數據這三大類別。
從字面上理解用戶數據即為與用戶有關的數據,這種數據常常用來描述用戶人群、用戶基礎屬性等。通過一系列的“用戶數據”進行支撐,可以快速梳理關于產品的基礎用戶群體,構建用戶的畫像。
不同的產品屬性,有不同的用戶人群畫像。比如說美柚這款記錄類APP,主要的用戶人群是年輕的女性,對生活有一定的追求;再比如說英語流利說這款產品,主要的用戶人群是年輕的、有明確學習英語需求的人群。
用戶數據主要包括兩大類別:用戶基本屬性與用戶生命周期數據。
用戶基本屬性通俗解釋即為關于用戶自身最基本的屬性,包括性別、地域、年齡、職業、學歷、收入、婚姻狀況等等......通過這一系列的屬性,我們可以對用戶有一個更深刻、更全面的認知。
只有更好的了解用戶,我們才能進行針對化的設計產出、精準投放,從而推動產品更好的發展。這就好比兩個人談戀愛,只有清楚對方的想法、習慣、喜好,才能減少吵架的幾率,實現和諧發展。
生命周期指的是從開始到結束,用戶都會經歷著從接觸到流失的階段,我們通過生命周期結合用戶數據可以簡單分為新增、活躍、留存、流失。
1、新增用戶數
新增用戶從字面上拆解開來即為新、增,廣泛意義上來說,我們可以將一段時間內打開產品的新用戶人數算作新增用戶,但是更嚴謹一點的話,則表示某產品一段時間內新增加的注冊用戶數量。
通常我們將下載且訪問過產品的用戶稱為訪客,這部分人群是潛在的注冊用戶。
2、活躍用戶數
活躍用戶在體驗產品的過程中會花費更多的時間與精力,相比普通用戶而言他們更加認可平臺,對于平臺的發展有著重要的地位。那什么是活躍用戶?如何具體的去定義活躍用戶呢?
通常來說,用戶在規定的時間周期內,有打開過產品,這就算做一個活躍用戶。當然,不同平臺對于活躍用戶的定義存在一定差異。而活躍用戶主要也分為兩類:新用戶與老用戶,而從商業的角度上還可以劃分為低價值用戶與高價值用戶。
活躍用戶數常見的指標有DAU、WAU、MAU。
DAU:Daily Active User,表示日活躍用戶數量,指的是從0:00-24:00一個自然日(統計日)之間,登錄并使用了某一功能的用戶數量。
例:某個產品的日活計算方式為打開該APP即算活躍,2022年1月19日這天打開APP的行為有50次,經排重后發現有30個用戶打開了APP,那么該產品的DAU就是30。
了解完DAU,我相信大家對于WAU(周活躍用戶數量)與MAU(月活躍用戶數量)應該不至于陌生了。WAU與MAU,他們兩者最大的區別就是計算周期的不同,但需要注意的是,月活的計算并不是簡單的日活相加,我們需要進行去重。
3、用戶留存率
在講解用戶留存率之前,我們應該了解用戶留存。何為用戶留存?顧名思義,就是最終留下來的用戶。用戶留存率這一指標可以反饋當前產品的質量如何,這是產品自初期開始就需要持續關注的內容。常用的用戶留存指標有次日留存、3日留存、7日留存、15日留存和30日留存。
4、用戶流失
用戶流失的定義是什么?用戶流失需要結合時間(Time)與動作(Action)這兩個指標進行,即用戶在一段特定時間內未進行關鍵行為的操作。與之常常相關聯的因素大致分為產品生命周期、負面體驗、競品策略等等。
用戶流失率的存在表明了用戶對產品的負面反映,對于產品發展有著非常重要的數據反饋。
當下市場中的獲客成本越來越高,獲取新用戶的成本要比留住現有用戶的成本高出5倍。因此降低用戶流失率,就顯得尤為重要。
行為數據常用來描述用戶使用方式,指的是用戶在使用產品過程中所產生的一系列交互相關的數據,通過分析快速了解用戶特征,為流程優化、精細化運營、產品體驗等設計措施提供判斷依據、輔助設計。
行為數據的指標主要包括轉化率、平均停留時長、跳出率、PV、UV等等。
1、轉化率
什么是轉化率?轉化率就是下一頁面與當前頁面的訪問占比。它常常被用來衡量產品路徑中的用戶體驗是否合理,從而進一步推動流程優化以及設計迭代。
以下圖為例,有200個人來到了頁面A,其中有100人點擊頁面A的按鈕進入頁面B,那么頁面A按鈕的轉化率則為(100/200)*100%=50%。
2、啟動次數
通常指的是某一特定時間段內用戶啟動應用的次數。與之相關的兩大指標分別為用戶總啟動次數與人均啟動次數,常用來反映用戶粘性與活躍度。
3、使用時長
使用時長是指某一特定時間段內用戶從打開到關閉產品的使用時間。使用時長需關注的指標為用戶總使用時長、人均使用時長、單次使用時長。這些指標常用來衡量用戶粘性與活躍度,常常需要與啟動次數一起結合進行分析。
4、訪問分析
頁面訪問分析包括頁面訪問次數、停留時長、跳出/退出率、用戶訪問頁面數和用戶訪問路徑。
(1) 訪問次數
訪問次數是指訪客完整打開頁面進行訪問的次數,常用來衡量產品的訪問速度。
(2) 停留時長
停留時長表示用戶進入產品中,呆了多長時間后離去。這一指標是考量用戶粘性以及貢獻度的重要指標。
(3) 跳出率/退出率
跳出率,指的是只訪問了入口頁面即退出的次數與入口頁面訪問次數的占比數。
跳出率越低,說明流量越好,用戶對產品的興趣越高。
計算公式為:跳出率=訪問一個頁面后離開的次數/總訪問次數*100%
退出率是指從該頁面退出的頁面訪問數與進入該頁面的頁面訪問數之比。
計算公式為:退出率=退出次數/總訪問次數*100%
跳出率為(2/8)*100%=25%
退出率為{(2+2)/(8+2)}*100%=40%
注意:跳出率與退出率較高,也不全部都是壞事。我們需要具體問題具體分析。比如說某些下單頁面,點擊提交后會進入第三方支付平臺,該頁面跳出率高則為正常。
(4) 用戶訪問頁面數
用戶訪問頁面數常常離不開兩方面的指標,PV值與UV值。
PV(Page View):指的是在一個特定周期內,頁面訪問量或點擊量,側重瀏覽量。
用戶每訪問一次就算作一個PV。
UV(User View):指的是在一個特定周期內,訪問頁面的人數之和,側重訪客數。
一天內同個用戶多次訪問僅算作一個UV。
(5) 用戶訪問路徑
用戶訪問路徑是統計用戶從進入產品到離開產品整個過程中的路徑與頁面訪問情況,不同的用戶路徑是不同的,我們需要去定位關鍵節點,針對性的產出優化方案。
如下圖所示,用戶在進行針對性的查找歌曲時,通過首頁的搜索入口進入,在搜索引導頁面中輸入歌名,最終出現結果頁。通過用戶的訪問路徑分析,可以為我們進行優化提供合理的切入點。
1、ARPU
ARPU是 “The average revenue per user” 的縮寫,是指在某一周期內用戶產生的平均收入,用來衡量單個用戶為企業所帶來的效益。
注意:ARPU值是有時間屬性的,我們在計算的時候需要有清楚的時間定義,不同的定義方法,計算出來的結果是有很大差異的。
2、付費率
不同業務模式之間的付費率計算方式是不同的,在進行分析之前,我們就需要弄清楚分析的維度。
(1) 注冊用戶付費率
注冊用戶付費率=付費人數/注冊人數
(2) 活躍用戶付費率
活躍用戶付費率=付費人數/活躍用戶人數
3、GMV (成交金額)
GMV (Gross Merchandise Volume),即成交金額。這個指標常用在電商行業,是用來衡量電商企業綜合實力的核心指標。
GMV=真實成交金額+未付款訂單金額+拒收訂單金額+退貨訂單金額。簡而言之就是GMV為已付款訂單與未付款訂單兩者之和。
4、LTV (用戶終身價值)
LTV(Life Time Value),為用戶生命周期價值。一般常用指標為3日、5日、7日、30日、60日、90日LTV。常用來衡量用戶從開始使用到不再使用產品的整個生命周期內,為企業貢獻了多少收入。
它的計算方式由兩部分組成:LTV=LTxARPU,LT為用戶生命周期,ARPU為每用戶平均收入。
數據分析不僅僅是擺數據,同時深度的結論也非常重要??沼袛祿瑳]有結論,對于決策者而言并沒有什么明確的用處。那么,面對一堆數據,我們該如何分析得出深度的結論,從而驅動決策?
數據的獲取渠道有很多種方式,接下來分享幾個我在工作中經常使用的方法。
注意:同一關鍵詞,不同平臺的搜索結果可能存在一定差異
平時的工作中,我們不能僅僅是沉浸在自己的世界,需要加強與其他同事之間的溝通交流。通過與用戶運營、數據分析師的交流,可以了解到最新的數據情況,時刻保持敏感度。
如果公司沒有專門的數據分析師,也可以從客服人員下手,他們無疑是與客戶打交道最直接的人了,他們對于用戶的痛點會更及時感知。可以通過詢問客服人員,更好的了解用戶的痛點需求,輔助我們設計方案的執行。
我們可以通過多種方式了解用戶對于產品的反饋,比如說Feedback用戶反饋,Twitter、Facebook等社交媒體,以及Google Play應用商店評論等。
針對想要查看相關數據的模塊內容,提交關鍵數據指標給到數據分析師、開發等,從而進行一個定制化的內容獲取。
注意:說到這里就不得不提到數據埋點,有一個需要我們注意的地方,那就是在進行埋點時,一定要在設計階段就提前告知開發以及數據分析師,做好溝通工作,針對需要的數據進行埋點處理。
在需求評審前,設計師可以提前了解相關數據,幫助我們對于設計層面有個更深刻的理解。在評審過程中,通過溝通碰撞了解到更多的數據,也能依據之前項目的數據資料作為參考,輔助本次設計優化。
在一些大的項目上線一段時間后需要進行數據反饋,大家針對結果做一個項目復盤,開展相關會議。在這結果之外,我們還需要關注是否產生了新問題以及是否有新的機會發掘點。在復盤之后,針對知識點進行共享,設計師可以通過這種方式了解更多信息,方便后期迭代。
數據的呈現往往告訴我們已經發生了什么,但它沒有告訴我們將會發生什么。我們應該利用數據,從歷史中吸取教訓,也可以依據過去的趨勢預測未來,甚至可能是非常準確的預測。我們需要對數據有一個理性的判斷,進行甄別。
什么是虛榮數據?如果空有一個數據,盡管該數字看起來很美,卻無法依靠該數據去進行設計驅動以及提供具體價值,那么該數據就是一個虛榮數據,毫無意義。
以下幾個指標則是常見的虛榮數據,我們需要引起注意。
1、點擊量
無論什么網站,只要頁面上存在的可點擊區域多,那么該頁面的整體點擊量數字必然都比較高。相比之下,我們更應該關注的是點擊人數,而不是點擊次數。100個用戶每人點擊1次,與1個人點擊100次,后續帶來的結果是必然不同的。
2、下載量
下載量的多少有時候會影響產品在應用商店中的排名,但是這個數據指標并不能帶來實際價值。反觀下載之后的注冊轉化率、付費轉化率等等才是我們關注的重點。
3、用戶數
用戶數量越大,這個產品聽起來似乎就越成功。但是產品的成功與否,并不僅僅取決于這一個數字,而是與之相關的一系列指標。
比如說A、B兩款產品的用戶量分別為100萬以及50萬,用戶活躍度分別為1%與30%,其他都是沉默用戶,那么就一定能說A產品要比B產品好嗎?
用戶數量再大,沒有體現出對應的價值,那么就是虛擬數據。我們不能被這些虛擬數字所欺騙,還沾沾自喜。
4、停留時長
用戶的停留時間越長就說明這個產品越好嗎?真的是由于產品的用戶體驗做的足夠好而讓用戶產生了沉浸式的體驗從而一直停留嗎?
用戶的停留時長并不是越長越好,這個指標也無法直觀反映用戶對產品的粘性。我們更應該結合完成度、內容跳出率等數據進行綜合判斷。
數據分析過程中,也會存在很多異常數據,需要從多個角度看待數據,一般來說,產品的部分數據指標存在固定的波動周期,當某項數據指標突然不符合常規波動變化的時候,我們就需要去進行深入的研究,挖掘異常背后的原因。
1、幸存者偏差
幸存者偏差是數據分析中常見的邏輯錯誤,那么簡單來說是什么意思呢?
通過以上幾個例子,想必大家對于幸存者偏差都有一定的理解了吧。所謂幸存者偏差,即我們在進行統計的時候忽略了樣本的隨機性與全面性,用局部樣本代替總體樣本。歸根到底這就是由于獲取信息知識的不全導致的認知偏差。這啟示我們在查看數據的時候,不能只看顯而易見的信息,同時還要找出沉默信息。否則,一定會存在著巨大偏差。
2、數據樣本不夠
在進行數據提取的過程中,除了需要注意上面所描述的樣本選擇問題上,還需保證足夠多的樣本數量來進行支撐。按照常規定律來說,數據樣本達到一定的數量程度,才能展示出相對真實的規律。
例:比如說我們在產品中新增了一個功能,但是由于預算、人力資源等原因在前期的推廣宣傳階段并沒有多少曝光,只有一部分老用戶知道,這就說明這個功能很失敗,沒有存在的意義嗎?答案未必是這樣。
所以在進行數據提取時,我們就需要盡可能的保證有足夠多的樣本數據,這樣才能保證最終輸出的數據結果是最客觀的。
3、存在臟數據
臟數據,也被稱為壞數據,常常是指不合理、對于業務毫無用處的數據。
臟數據產生的原因有多種,數據統計過程中可能是由于輸入了多余空格、重復插入多余數據等等。在前期數據收集分析階段,例如問卷調查,往往會存在很多無意義的問卷,為了保證問卷的準確性,可以通過設置分支題目、陷阱題目等等方式來進一步篩選問卷,做好對臟數據的防控與清洗。
接下來給大家分享幾個平時工作中常用的數據分析方法,包括以下幾種:漏斗分析法、矩陣分析法、對比分析法。
漏斗分析法是數據分析過程中非常重要的一種分析模型,能夠科學的反映用戶行為狀態以及從起點到終點各階段之間的用戶轉化情況。
常用的指標包含轉化率與流失率。通過層層的分析,觀察流程中是否存在提高轉化率的機會點,挖掘設計。(后面會結合實際項目為例進行詳細闡述,這里就不做過多講解)
所謂的對比分析,就是給孤零零的數據一個合理的參考,否則這種數據是沒有意義的。在利用對比分析法進行數據分析時,需要關注兩個方面內容:對比對象與對比維度。
在產品迭代測試的過程中,為了增強說服力,擇決出最佳方案,往往會采用對比分析,也就是常說的A/B Test。A/B Test最核心的思想是要保證單一變量,其他條件保證相同?;氐皆O計本身,一般來說每個方案應該大體上相同,只是某一個地方有所不同,比如某處文案、顏色、圖標等。然后針對不同的用戶展示不同方案,統計并對比不同方案的轉化率、留存率等指標,從而確定最優方案。
矩陣分析法常常是通過兩個指標的交叉,利用分析矩陣劃分為四個象限,找出問題的優先級。
例:如下圖所示,為某個運營活動點擊的四象限分布情況。X軸自左向右,Y軸自下而上,分別代表了從低到高。
通過矩陣分析的方式,我們可以快速定位當前最值得的MVP優化方式,指引我們在復雜的數據中正確前行。
作為一名設計師,在了解了數據基礎的內容后,就需要掌握通過數據驅動設計最關鍵的內容,接下來我將通過用戶、行為、業務三個角度來給大家分享幾個不錯的設計案例。
通過上面的分析,我們了解到用戶數據涉及到兩個方面,用戶的基礎屬性數據可以很好的輔助設計,通過數據對用戶進行分層,例如性別、年齡、地域,這些都是常見的用戶基礎屬性;
除此之外,與用戶相關并關聯產品的重要數據還包括新增用戶、用戶活躍度、用戶留存率、用戶流失率等數據,我們可以通過這些數據的表現挖掘背后的原因,進而通過設計手法深入優化促進用戶數據增長,形成閉環。簡單分享以下幾個方法。
關于產品拉新,并不只是產品上線后需要考慮的事情,在產品設計的每一環節中,都是需要去進行考慮的。產品拉新可以通過邀請碼、新手福利、邀請好友等幾個方面進行。
1、邀請碼
邀請碼通常是由企業發放,優先發放給種子用戶,然后通過種子用戶的社交圈去進行擴散,進而吸引更多的用戶參與進來。
前段時間爆火的一款國外音頻社交軟件Clubhouse,便是利用了這種方式進行擴散傳播。與Facebook、Instagram、Twitter等社交軟件有所區別,Clubhouse并沒有對全部用戶開放,而是需要得到其他用戶發出的邀請碼驗證后才能進行使用。邀請碼的稀缺性將Clubhouse的熱度炒得越來越高,使得參與其中的用戶能產生一種自我滿足感,同時這種模式大大保證了音頻內容的質量。
2、新手福利
一些產品針對未注冊或者未使用過產品的新用戶,會發放專屬福利,促進用戶轉化。
新手福利通常是以開屏頁、Banner、彈窗、活動頁、新手任務等形式進行領取,隨著市場環境的緊張,獲客成本越來越高,新手福利的成本的也在逐漸增加。
3、邀請好友
針對注冊或使用過產品的用戶而言,通過發掘他們自身的社交圈子,促使老用戶自覺邀請新用戶,提升產品的用戶數量增長。
邀請好友有以下兩個常見方式:
(1) 增加分享入口
老用戶可通過點擊分享圖標的形式直接分享給相應的好友。比如說,網易云音樂這款產品,用戶可以邀請好友一同在線聽歌,或者是單獨分享給特定的人。這種方式主要是利用了人的分享和展示心理。
(2) 福利刺激
平臺發放一定的優惠券、獎勵等給到用戶,新老用戶都可以通過這種方式獲得對應的獎勵。這種方式主要是利用了人的獲利心理。
活躍運營可以提升沉默用戶的活躍度,對于產品的發展有著非常重要的作用,常常通過一系列的方式來進行布局。
1、用戶積分體系
積分體系如果運用的好,那么對于增加用戶粘性以及提升活躍度是非常有幫助的。這個積分體系是否能夠吸引到用戶,就在于積分所兌換的產品是否有足夠價值。
比如說常見的外賣平臺——餓了么的積分體系,其核心就是圍繞下單行為而展開,下單之后返還吃貨豆,吃貨豆可兌換紅包,紅包再次消費抵扣。整個操作流程,圍繞用戶的核心行為構建獎勵并形成閉環。
2、簽到
很多產品都設置了簽到功能,希望借此方式提升用戶粘性。這一功能的常見名稱為“簽到”“打卡”,或者根據運營活動的場景來進行命名,比如說螞蟻莊園、新浪種樹等。
一種良好的簽到模式對于用戶習慣的培養是有著積極的正向作用的,但是關于在產品中是否增加該功能,也是要根據自身的產品特性去進行更細致的考量。
簽到的方式主要有自動簽到與手動簽到這兩種。
(1)自動簽到
登錄自動簽到的方式常見于游戲類應用中,比如說王者榮耀這款產品,用戶打開即以彈窗形式告知用戶,領取相應的獎勵。
(2)手動簽到
用戶點擊簽到入口,即可完成簽到。相比自動簽到而言,這種簽到方式應用范圍更加廣泛。
3、社區
現如今越來越多的產品開始打造自己的社區,比如說淘寶的逛逛,咸魚的會玩等等。為什么社區功能越來越普遍呢?社區的存在,可以讓用戶在產品有一個屬于自己的社交圈子,這樣有助于用戶產生粘性,從而提升產品活躍度。
例:Keep通過打造高品質的UGC內容社區,滿足新老用戶的價值需求。頂部Tab分為關注、精選、圈子三個模塊。關注一欄方便用戶快速查看自己感興趣的人,滿足社交需求。精選一欄承載了KOL與內容生產者的分享內容、用戶社交留存功能。圈子一欄更好的滿足用戶想要一群人打卡的情感訴求。
留存的本質是要滿足用戶的核心需求,只有滿足了這個條件后用戶才會持續使用。它應該貫穿于整個用戶生命周期,而不僅僅是局限于其中某一個節點。好了,廢話不多說,直接上例子。
1、流暢的首次體驗
用戶首次使用該產品時是否順暢,能否在第一時間找到自己所需要的內容,很大程度上會影響用戶后續的留存情況。
比如說現如今很多產品為了降低用戶的登錄注冊成本,通過手機號一鍵注冊即可實現快速登錄。若未注冊過,在登錄時系統會自動判斷并為其創建賬號。這種方式極大的降低了用戶記憶成本,同時還有安全性的保障。
2、降低學習成本
通常來說一款產品的學習成本越高,用戶理解起來就越困難,那么用戶長期留在該平臺的概率就會降低,故而我們應該通過一些設計手法去降低用戶的學習成本。
例如一些金融產品,其晦澀難懂的專業知識對于新手小白來說真的是非常困難,基本的認知都存在困難的前提下,更別說指望用戶轉化了。基于此背景,新手引導提示、新手教學視頻、在線客服服務、模擬交易等等方案,都會極大的降低用戶理解成本,為后續用戶的下單轉化提供有力的幫助。
3、遷移成本
何為用戶遷移成本?用戶選擇新產品的行為需承擔的代價。隨著遷移成本的增加,用戶長期使用該產品的概率也會相應增加。
例如有道云筆記這款產品,用戶在該平臺創作了大量的內容后,就很有可能會長期留在該平臺,因為重新換平臺的成本著實有點高。
挽留機制是留住用戶、促進用戶轉化的最后一道程序。
常見的挽留機制有以下幾種形式:
1、提供解決方案
當淘寶用戶在進行退款時,若原因是地址填寫錯誤,那么頁面會自動出現彈窗提醒用戶修改即可,避免用戶取消訂單,從而降低退款率。
2、利益刺激
當用戶退出購買頁面關鍵節點時,會以彈窗形式進行挽留。
例:知乎會員購買頁面退出時,系統會自動出現二次確認彈窗,將價值點信息以動效形式展示在視覺中心,并對支付按鈕進行突出設計,吸引用戶注意,再次挽留。
例:拼多多的二次挽留同樣以彈窗形式展示,突出利益點,同時有時間維度,使得用戶產生緊迫感,刺激用戶下單。
3、操作警告
操作警告類的文案二次提示,可以讓用戶對當前行為有更清楚的認知,并仔細思考。用戶會考慮到一些時間成本、花費精力等因素,可能會取消放棄的念頭。
例:全民K歌這款應用,用戶想要刪除之前發布過的創作內容,點擊刪除之后,會出現二次警示確認彈窗,對用戶的行為進行一個挽留。就算最終用戶刪除了創造內容,還可以在最新刪除列表中恢復。這樣既可以避免用戶誤操作引起的后果,還能最大程度的保護創作內容的多樣化存在。
行為數據描述用戶使用方式,雖然與用戶相關,但更加關注的是使用的流程、方式與產品體驗,其中重點關注的數據包含點擊率、轉化率、訪問分析等。
深入分析用戶的訪問數據,模擬行為場景,更好的把握用戶當下的心理,從用戶角度出發去設計。下面,我將以一個工作中的實際項目為例,詳細闡述如何從設計側推動項目迭代。
例如我們接到一個需求,需要進行注冊流程的優化,提升這一模塊的轉化率。很多時候,我們往往會陷于視覺層面進行調整,但這并不能從根本上解決問題。我們需要靜下心來仔細思考,真正找到這個需求背后的目的以及當前存在的問題。
那么我們可以怎樣去進行呢?首先,為了對用戶行為有更直觀的理解與感受,可以利用用戶體驗地圖的形式將用戶行為場景復現,通過對用戶的情緒曲線、想法的剖析,從中找到合適的機會點,為后續設計的迭代優化提供一定思路。
通過對用戶的旅程進行分析,可以發現在不同關鍵階段中所對應的數據指標也不同。因此在設計的過程中可以針對不同的行為場景,制定對應的數據優化目標,從而提升整體的產品價值。
用戶的行為是決策的重要因素,了解用戶的行為和意圖后,會發現大部分用戶的行為與設計會存在很大的偏差,所以需要更多關注用戶的行為數據,揣摩用戶行為下的真實心理與訴求,才能做出用戶滿意的產品。
緊接著上面的案例,咱們繼續通過漏斗模型進行深入分析,優化用戶在登錄注冊路徑上的體驗,提升轉化率。
原有的登錄流程轉化率如下圖所示
1、快速定位問題環節
通過數據反饋,發現從注冊頁面到點擊注冊按鈕這頁面之間存在較高的流失率,其次再是安全驗證頁面。我們需要對這一流程中的關鍵節點進行梳理,同時將主要的精力聚焦于該模塊的優化。針對流失率較高的主要頁面進行著重設計。
2、分析問題
通過數據分析可知,用戶很大一部分都在點擊注冊按鈕這一頁面流失掉了,當前頁面的停留時長較長,那么我們是否可以縮短停留時長,幫助用戶快速注冊呢?該怎樣設計才能提高用戶的操作效率呢?
3、方案輸出
通過聚焦問題后,發現最終我們的落腳點應該在如何提升用戶的操作效率,幫助用戶快速完成注冊。
針對此設計目標,運用競品分析、用戶體驗地圖等方式對于該模塊進行了思維拓展。提出了一些可行性方案,比如在輸入郵箱時增加常用高頻郵箱格式后綴,減少用戶手動輸入的步驟;比如增加用戶輸入錯誤之后的快捷刪除圖標,方便用戶一鍵操作.....等等(詳細的可見之前項目復盤)。
4、數據驗證
在設計上線一段時期后,查看數據情況。
經過一段時間的驗證,漏斗模型的數據轉化有了很大提升。再次驗證,此次改版方案較為成功。
以上案例大致展示了工作中如何運用數據驅動設計的常規流程與方法。從整體漏斗分析原因,定位關鍵問題節點,進而推動問題環節的優化,最終解決問題。
數據會給到我們一定的指導作用,我們需要對數據進行深入思考,從設計的層面去賦能業務。從宏觀的角度去看待業務價值的增長點,尋找設計機會。那么我們該如何通過設計手段提升業務價值呢?產品價值的實現離不開用戶,從用戶的角度進行拆解分析,可以更好的洞察到機會點。
例如我們需要提升會員模塊的開卡率,該怎么進行落地執行呢?
我們將用戶的行為路徑劃分為感知——決策——行動——傳播這幾個主要階段,通過體驗地圖,深挖可優化的空間。
通過流程的梳理,將目標進行拆解,我們可以從中找到一些值得優化的地方。
有明確的設計目標之后,我們就需要針對每一節點進行針對性的設計。
1、感知階段-用戶觸達
當前會員購買的入口隱藏的過深,很多用戶都對該模塊的存在缺少認知。要想會員卡的購買率有所提升,最基本的舉措就是要加大對其宣傳力度。因此,我們需要增強用戶感知。常見的形式有Push推送、郵件、短信等等,吸引用戶去查看相關的內容,并引導后續轉化。
我們需要提升關于會員內容的用戶感知,就可以嘗試在首頁增加會員入口。宣傳的形式可以采用Banner圖,方便用戶直接點擊就可進入了解詳情。另外,產品頁面還可增加氣泡文案引導,底部懸浮彈窗等等,增強用戶的感知。
有一個需要特別注意的地方,就是在進行宣傳引導時,一定要考慮到產品自身的屬性,進行差異化設計。比如說海外產品的用戶一般都很討厭廣告,那么我們在進行設計的時候就要做到克制。在滿足運營需求的前提下,盡量減少對用戶造成不好的體驗。
2、決策階段-價值觸達
用戶受吸引來查看會員相關內容時,我們需要對會員的價值進行一個高效快捷的輸出傳遞。只有讓用戶在該階段感受到價值大于價格,才會有后續的購買行動。在會員權益模塊,需要根據用戶的狀態進行區分,針對化展示。人群大致劃分為普通用戶、會員與過期會員。
我們可以通過一些設計手法,強化用戶的價值觸達感知。
(1)文案刺激。告訴用戶辦會員卡一年預計能省下多少錢。
(2)增加計算器功能,讓用戶根據自己的習慣輸入預計交易額,更智能的感知優惠。
(3)向用戶發放一定的優惠券,并增加倒計時,出于沉沒成本,用戶轉化的幾率很有可能會增加。
(4)人數比例展示,利用人的從眾心理,促進購買。
3、行動階段-購買轉化
到了行動階段,用戶的整體購買流程是否高效、是否順暢則成了我們需要關注的重點。我們在現階段的設計策略,可通過以下方式進行展開:
(1)避免用戶過多選擇
原有的會員頁面將三種會員模式全都展示出來讓用戶自己選擇,對于很多新手來說這無疑是非常困難的,會員的購買率也比較低。更新后,我們將會員的價值點簡單的羅列出來,讓用戶可以直觀的了解會員卡的優勢,同時會員卡按照時間周期與價格劃分為3個不同的層級,針對平臺主推的年卡,增加標簽,強化感知。
(2)減少頁面跳轉
用戶在進行購買時,無需跳轉頁面,只需在當前頁面操作即可。懸浮收銀臺的形式,可以避免用戶在跳轉頁面之間可能帶來的數據流失,最大化的保障用戶購買行為的完成。
4、分享階段-持續正向裂變
用戶完成分享即可獲得相對的獎勵,被分享的新用戶再進入產品進行體驗,即可獲得新用戶獎勵。在進行分享的操作中,有以下優化方向。
(1) 增加分享引導
可以通過文案引導、運營位的形式進行宣傳,吸引用戶進行分享操作。
(2) 優化分享體驗
增加分享的渠道,引入常用的Twitter、Facebook、Telegram等社交平臺;
增加用戶分享圖的制作,為用戶提供更多的選擇空間。
數據驅動是一項長期的工作,需要去不斷的跟蹤、反饋,通過不斷的數據驅動,才能推動設計的更優發展。在日常的工作中,我們需要對數據保持敏感,從這些數據背后找出真正的原因,并進行針對性的優化。設計師了解一定的數據知識,可以更好的輔助我們進行設計產出,使得我們的方案更有說服度。
感謝閱讀,以上就是我要分享的如何利用數據驅動設計的全部內容。
文章來源:站酷 作者:甜西瓜汁
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn