前些天對用戶習慣進行了總結,這兩天重新優(yōu)化了一遍。我們在互聯(lián)網(wǎng)產(chǎn)品的設計過程中,有時會聽到一個詞:用戶習慣。設計師希望嘗試更多新穎的交互方式、視覺效果,卻常常容易被其他人挑刺指出不符合用戶習慣,建立在用戶習慣上的創(chuàng)新才是好的體驗。
盡管設計師經(jīng)常將用戶習慣掛在嘴邊,但是卻很難有人說出用戶習慣究竟是什么?我們?nèi)绾闻袛嗨龅脑O計是否符合用戶習慣?用戶習慣是否始終不能打破?道理我都懂,就是不會做,實際上確實是這樣,因為很大程度上取決于設計師對用戶習慣的理解深度。
用戶習慣本身很難被量化,但是不代表就是一個模糊的概念,你仍然能從用戶反饋、操作行為數(shù)據(jù)對比等分析中一窺究竟,用戶習慣是可以隨著設計師的學習、經(jīng)驗、眼界等的提升而提升的。
心理學上認為,習慣是人在一定情境下自動化地去進行某種動作的需要或傾向?;蛘哒f,習慣是人在一定情境中所形成的相對穩(wěn)定的、自動化的一種行為方式。 習慣形成是學習的結果、是條件反射的建立、鞏固并臻至自動化的結果。
所以,習慣有兩大特點:
需要注意的是,“長期”本身是是沒有明確時間界限的,更強調(diào)多次的重復。這里的習慣,側重于描述“習得性”,即人們通過經(jīng)歷、學習、刻意練習等方式形成的,所以這種習慣理論上是可以被改變的。
此外,習慣還有一種潛藏特性,區(qū)別于上面描述的“習得性”,是天生的、物種特有的行為模式。比如人空腹狀態(tài)下,聞到香的食物會產(chǎn)生強烈食欲。這種特性習慣是刻在基因里的,幾乎無法被改變。
試想,我們在使用 App 時,是否遇到過因為習慣的問題而感覺到不適應的場景?
舉個最常見的例子,Windows 與 Mac 系統(tǒng)的軟件關閉方式。使用 Windows 的電腦時,我們形成了關閉操作在右上角的自然習慣。后來開始使用 Mac 電腦,關閉方式都在左上角,在一段時間內(nèi),每次關閉時都感覺到格外不習慣。而 Mac 的關閉方式?jīng)]有比 Windows 產(chǎn)生顯而易見體驗升級,改變操作習慣成本高,部分用戶可能會認為 Mac 的關閉操作不好用。
當然,假如最開始接觸的是 Mac 電腦,再使用 Windows 電腦,也會自然認為 Windows 不好用,這是先入為主的觀念,一旦產(chǎn)生習慣,改變習慣將產(chǎn)生一定的學習成本。
設計師需要思考用戶行為的本質(zhì),而盡量減少主觀判斷。產(chǎn)品是給人使用的,所以了解人們的行為特征很重要,而只要涉及到對人本身的了解,就是極其復雜的,人類對自身的行為特征了解遠遠不足,但這不妨礙我們以現(xiàn)有知識去做一些分析和判斷。
用戶行為習慣的產(chǎn)生,與記憶的特點有很大關聯(lián),我們可以把記憶劃分為外顯記憶和內(nèi)隱記憶。
外顯記憶大家比較習慣和容易感知到,比如我們在學校學習時背誦的課文、公式法則等,可以用語言、文字等顯性方式描述出來的記憶。
內(nèi)隱記憶也叫非陳述性記憶,我們無法用行為描述而又確實存在,比如騎單車,學會之后很難會遺忘。剛開始學習時,會需要意識的介入,經(jīng)過多次練習,行為會逐漸“自動化”,比如學習開車時,我們會注意力很集中,而習慣開車后,可以一邊開車一邊聊天。
我們平時說的肌肉記憶、條件反射也和內(nèi)隱記憶息息相關,而且一旦形成,不太容易改變。需要注意的是,肌肉記憶只是一種簡單描述,負責此記憶的是小腦,其實肌肉沒有記憶。
所以有時候,我們感覺體驗某個 App 時,會習慣性在某頁面尋找某功能,或者覺得體驗和其他 App 有區(qū)別,都可能是內(nèi)隱記憶的用戶習慣引起的。舉個例子,某天你剛使用一個沒用過的 App ,這時你想要找設置功能,那你大概率會不自覺的點擊 App 的最后一個主 Tab (如“我的”),因為大部分 App 的設置功能都在這個場景,用戶自然也就形成了習慣。
這里我且采用由心理學家基思·斯坦諾維奇(Keith Stanovich)和理查德·韋斯特(Richard West)率先提出的術語,用以說明大腦中的兩套系統(tǒng),即系統(tǒng) 1 和系統(tǒng) 2。
·系統(tǒng)1的運行是無意識且快速的,不怎么費腦力,沒有感覺,完全處于自主控制狀態(tài),也叫快系統(tǒng)。
·系統(tǒng)2將注意力轉移到需要費腦力的大腦活動上來,例如復雜的運算。系統(tǒng)2的運行通常與行為、選擇和專注等主觀體驗相關聯(lián),也叫慢系統(tǒng)。
而這兩個系統(tǒng),是可以互相轉化的,慢系統(tǒng)通過刻意練習,把新的習慣注入快系統(tǒng),而這時快系統(tǒng)就是習慣的表現(xiàn),這樣快系統(tǒng)可以在日常生活中完成大部分工作,這就是我們常聽說的熟能生巧,習慣經(jīng)常能幫我們節(jié)省思考的精力,這又讓慢系統(tǒng)進一步通過刻意練習,向快系統(tǒng)不斷注入更多好習慣。
舉個例子,你剛用一個 App 時,可能需要先體驗一下你要的功能在 App 的哪個位置,但你用久之后,就會不假思索地找到它。就像你用微信,最常用的功能可能是回復信息、看朋友圈,所以一定會形成習慣。但是假如有人讓你找一下微信里面“生活服務”的入口,你可能會先想一下可能出現(xiàn)在什么入口,這就是因為平時比較少用導致的。假如你常用這些入口,也會形成習慣,下次要使用這些功能的時候,就能夠快速找到。
既然說到用戶習慣的特點是“長期養(yǎng)成”且“不易改變”,那么挑戰(zhàn)用戶習慣一定會造成不適,甚至引起強烈反感。幾年前 Ins 的 logo 改版,將 logo 由擬物化改成了扁平化,顏色也發(fā)生了變化。暫且拋開視覺效果不說,從用戶視覺記憶上,已經(jīng)習慣了下圖左側的效果,而右側新版效果很難與左側產(chǎn)生記憶上的關聯(lián)。
許多用戶反饋桌面上找不到這個應用、許多用戶吐槽很丑甚至不想再使用。所以我們比較容易理解,為什么有時候 App 改版容易反而引起用戶的反感,這很大程度上是用戶習慣的影響。
了解產(chǎn)品的用戶是誰、用戶的行為特點是什么。不同產(chǎn)品由于定位不同,所以用戶群體也不相同,用戶群體的不同自然代表用戶行為特點的不同。如果設計師知道用戶群體,但是不清楚具體行為習慣特征,可以嘗試讓你身邊的用戶幫你體驗。
舉個例子,B 站的整體用戶畫像相對而言更偏年輕化,所以產(chǎn)品設計上,無論是代表形象、UI 風格、交互體驗都更顯年輕化。而“小年糕”小程序的用戶群體主要為中老年人,所以設計上不會顯得很年輕,而是以操作明確、字號偏大、去除多余信息為主。
關注主流產(chǎn)品的用戶體驗很重要,這些競品的操作往往代表用戶的習慣操作(或被培養(yǎng)出來的習慣操作)。大多數(shù)情況下,你需要了解競品能做到什么程度,用戶容易將習慣從一個場景帶到另外一個相似場景。
比如點外賣,有的用戶可能會下載美團和餓了么,盡管平臺不同,但是在用戶習慣中,操作模式是相似的,所以如果你要讓用戶的體驗不突兀,那就往往遵循相似的操作邏輯。當然這些不是為了讓一個產(chǎn)品去抄另外一個產(chǎn)品,而是要追尋更好的使用體驗,你的產(chǎn)品比競品體驗更優(yōu),就更能吸引用戶的青睞。
每個人本身都會具有相對穩(wěn)定的行為、操作、信息閱讀習慣,我們能見到的體驗好的產(chǎn)品,都是符合用戶的基本行為習慣、信息閱讀習慣的,要想了解這些習慣,需要了解深層次的交互行為特征。
從操作而言,需要了解用戶與界面交互的行為習慣,比如用戶的操作(手勢操作、信息布局如何才能便于操作),比如尼爾森可用性原則等。
從信息閱讀角度而言,需要考慮人們眼睛觀察事物的規(guī)律,比如格式塔原理:接近性原則、相似性原則、連續(xù)性原則、閉合性原則、主體/背景原則、簡單對稱性原則、共同命運原則。
就移動互聯(lián)網(wǎng)產(chǎn)品的領域而言,大家都是與手機互動,目前手機系統(tǒng)的兩大平臺:iOS 和 Android 也都各自有提供關于人機界面設計有清晰的指導,尤其是 Android 的 Material Design ,對于設計師快速了解設計規(guī)范、設計原則有很大作用。
iOS 與 Android 的人機界面規(guī)范鏈接:
iOS:https://developer.apple.com/
Android:https://material.io/
我們提到挑戰(zhàn)用戶習慣會有風險,但用戶習慣并非是永遠不可改變的,有時我們需要培養(yǎng)新的用戶習慣,也就是大家常說的“教育用戶”,否則世界可能一直很難進步。
移動互聯(lián)網(wǎng)興起之前,大家都是線下打車,但是滴滴打車顛覆了傳統(tǒng)線下打車的用戶習慣;以前大家都是現(xiàn)金支付,但是微信支付顛覆了現(xiàn)金支付的用戶習慣。
《設計心理學》里面有這么一段話:“如果用新的方式做一件事只比原來好一點,那么最好與以前保持一致。如果必須做出改變,那么每個人都得改變。新舊混雜的系統(tǒng)會讓每個人困惑。當新的做事方式明顯優(yōu)于舊的方式,那么因改變而帶來的價值會超越改變本身所帶來的困難。不能因為某樣東西與眾不同就認為它不好。如果我們故步自封,我們將永遠不會進步?!?
這里的價值包括但不限于用戶價值、商業(yè)價值(短期價值、長期價值)等,當新習慣會需要用戶改變舊習慣時,這個設計帶來的價值有多大,值不值得讓老用戶付出學習成本。有時候,明知改變會引起用戶的強烈抵觸,仍然改變用戶習慣,可能因為改變的價值大于改變的困難。
剛才提到的 ins 的例子中,有的人不知道 ins 為什么要改版,創(chuàng)新咨詢公司 IDEO 的溝通設計主管 Remy Jauffret 說:“當品牌、組織超越了最初的商業(yè)意圖,或擴展業(yè)務提供不同的產(chǎn)品,或領導希望吸引新的客戶,這些情況都可能需要新的品牌視覺。變化總是大家不舒服,然后又平息,我認為時間才是檢驗真理的唯一標準?!?
我們在設計中,有時候會遇到自己的產(chǎn)品某個功能體驗比較差,但是延續(xù)了很久,而市面上其他同類產(chǎn)品在相同功能的體驗上已經(jīng)做的很好,我們可以往主流交互體驗上改版嗎?這時需要權衡改變之后是否能帶來明顯的體驗升級,還是說對于用戶來說是不痛不癢的變化,可改可不改?
以安卓為例,在幾年前,安卓手機的底部有 3 個實體鍵,后面手機更新迭代,變成了虛擬三鍵設計,因此底部存在3個不同功能的熱區(qū)。而在 Android 4.0 設計規(guī)范中,為了避免底部標簽欄與已經(jīng)存在的底部虛擬鍵產(chǎn)生交互上的沖突,安卓明確說明了不要使用底部標簽欄。
但這種規(guī)則,在使用體驗上、開發(fā)者的適配上都發(fā)生了問題,用戶更接受 iOS 的體驗,后面谷歌在 Material Design 中,允許了底部標簽欄的存在。這相當于和原來的用戶習慣不一致,但卻帶來了更好的用戶體驗。
這里結合上癮模型的觸發(fā)、行為、多變的酬賞、投入進行闡述,這四個步驟是一個循環(huán),當用戶越沉迷于這個循環(huán),說明你的產(chǎn)品對用戶的吸引力越強,用戶習慣也就越強,這里會側重于從培養(yǎng)用戶習慣的角度進行拆解。
外部觸發(fā)說白了就是加強產(chǎn)品曝光,讓用戶一下子就能想起你。舉個例子,“充電五分鐘”下一句是什么?你大概率會想到“通話兩小時”,這種經(jīng)過外部的長期觸發(fā),最終已經(jīng)轉變成了內(nèi)部的習慣,會讓你記憶深刻。
外部觸發(fā)的類型主要有4類,通過將信息滲透進用戶生活,吸引他們采取下一步行動:
付費型觸發(fā):做廣告、搜索引擎推廣都是付費型觸發(fā),爭取新用戶;
回饋型觸發(fā):公關和媒體等領域的觸發(fā),比如對產(chǎn)品做正面報道、推薦等;
人際型觸發(fā):熟人之間的口碑傳播是一種極其有效的外部觸發(fā),可以為產(chǎn)品帶來“病毒式增長”;
自主型觸發(fā):以驅(qū)動用戶重復某種行為作為重點,讓用戶形成習慣,比如新聞訂閱、每天早晨的鬧鐘等。
內(nèi)部觸發(fā)是用戶心理產(chǎn)生的使用動機,內(nèi)在情緒驅(qū)動自己去使用一款產(chǎn)品。
當某個產(chǎn)品與你的思想、情感或者是原本已有的常規(guī)活動發(fā)生密切關聯(lián)的時候,那一定是內(nèi)部觸發(fā)在起作用。對于習慣刷朋友圈的人來說,拿起手機就不會自覺打開微信;對于習慣刷微博的人來說,拿起手機就會刷起微博,甚至自己都沒有意識到。一再重復這種場景,會用戶就會對此形成一種穩(wěn)定的聯(lián)系,進而形成習慣。
斯坦福大學福格博士曾提出“福格公式”,福格行為模型可以用公式來呈現(xiàn),即 B = MAT。B 代表行為,M 代表動機,A 代表能力,T 代表觸發(fā)。只有動機、能力 、觸發(fā)三者皆備,才能跨過“行動線”。
觸發(fā):即上面所提到的外部觸發(fā)與內(nèi)部觸發(fā)。
動機:動機決定你是否愿意采取行動。福格博士認為,驅(qū)使我們采取行動的核心動機主要是三種:追求快樂,逃避痛苦;追求希望,逃避恐懼;追求認同,逃避排斥。
能力:這里要詳述的是能力,所謂習慣,是指人們在幾乎無意識的情況下做出的舉動。一種行為的復雜程度越低,無論是體力上的還是腦力上的,被人們重復的可能性就越大。越簡單的操作成本,記憶成本越低,越容易形成用戶習慣。
舉個例子,刷抖音就是用戶行為成本極低的場景,你在刷抖音時,不需要多余的交互行為,切換視頻甚至不需要點擊,只需要向上滑動。除開抖音算法的精準推薦不說,從交互層面而言,也是足夠簡單并且形成習慣了。
如果改變會打破認知習慣,要讓用戶能快速了解新設計的使用方式。最好的方式是能夠讓用戶快速與已其他競品的操作習慣產(chǎn)生關聯(lián)。比如采用其他主流應用成熟的交互方式。
如果改版會很大程度上改變用戶行為,也可以考慮嘗試以下的方式。
· 改版操作指引:這種方式較為常見,但是仍應注意避免繁瑣的操作指引,切勿把操作指引當作體驗差時的解決方案。
· 兼容多種用戶習慣:這種方式可以讓不同用戶選擇適合自己的交互方式,最大程度考慮到所有用戶,但同時也可能造成了功能冗雜的情況。比如安卓底部三大金剛鍵,后面手機全面屏時代,新增了全面屏手勢。考慮到安卓老用戶的使用習慣,三大金剛鍵(底部虛擬按鍵)始終被保留下來;
· 允許切換新舊版本:這種方式一般是改版變化過大,用戶一時間不容易接受新的體驗方式,常見于網(wǎng)站,如站酷早期的大改版,但是僅適用于過渡期。
當然,除上述方式外,肯定還有一些其他讓改變行為習慣更舒服的方式,這里不一一列舉。
多變酬賞主要表現(xiàn)為:社交酬賞,獵物酬賞,自我酬賞。這幾種酬賞會加強用戶對產(chǎn)品的使用習慣。
社交酬賞:人們從產(chǎn)品中通過與他人的互動而獲取的人際獎勵,比如被認同、重視、喜愛等。比如人們喜歡發(fā)朋友圈、微博等,期望得到回饋,某種程度上都是為了獲得社交酬賞。
獵物酬賞:人們從產(chǎn)品中獲得的具體資源或信息。比如瀏覽信息流,豐富的信息流內(nèi)容為用戶提供了資訊,比如刷抖音,人們追求視頻的新鮮感、追求內(nèi)容的豐富性都是屬于獵物酬賞。
自我酬賞:人們從產(chǎn)品中體驗到的操控感、成就感和終結感。在目標驅(qū)動下,我們會去克服障礙,即便僅僅是因為這個過程能帶來滿足感。就像你玩游戲,希望贏過對面,或者期待將游戲玩通關,本質(zhì)上屬于自我酬賞。
如果希望繼續(xù)培養(yǎng)用戶習慣,與產(chǎn)品產(chǎn)生更緊密的聯(lián)系,就需要鼓勵用戶進行一些投入,以增加他們使用產(chǎn)品的可能性。行動只是用戶使用的第一步,促使用戶對產(chǎn)品的投入,才會真正增強用戶與產(chǎn)品之間的聯(lián)系,形成更強的用戶習慣。但是如果用戶自身沒有投入,即替換成本低,那么隨時都可能有被其他產(chǎn)品取代。
舉個例子,移動互聯(lián)網(wǎng)時期,微信早早入局,人們的關系鏈都在微信里面沉淀,即人們越使用微信,關系鏈沉淀越多,就越難以更換其他產(chǎn)品,所以兩年前想要挑戰(zhàn)微信的多閃、馬桶 MT 和聊天寶這三款社交 App 不可避免的失敗了。
用戶越愿意投入,就證明用戶粘性越高,在此過程中,用戶習慣也會不斷加強。
現(xiàn)階段,人人大談用戶習慣,但是用戶習慣不以自身為標準,而是需要考慮產(chǎn)品用戶的行為特征,以及人們在使用產(chǎn)品時更加深層的、甚至用戶本身都沒有發(fā)現(xiàn)的習慣,這就需要設計師對習慣的產(chǎn)生、習慣的判斷、習慣的培養(yǎng)有深入的認識。
一般情況下,產(chǎn)品不適合貿(mào)然改變用戶習慣,但是在有特殊需要的情況下,還是不可避免的改變產(chǎn)品的用戶使用習慣,當然我們需要如何讓用戶更加容易接受。大多數(shù)產(chǎn)品,都希望用戶能夠形成對自己產(chǎn)品的習慣,所以需要了解用戶如何對產(chǎn)品產(chǎn)生習慣、加強習慣,使產(chǎn)品擁有更強的吸引力,但是良好、正向的用戶習慣一定是基于用戶體驗的。
文章來源:站酷 作者:熱風_
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
逐幀分析方法是一種針對動態(tài)的、短暫的過程對象進行對比分析的方法。該方法可幫助設計師以微觀視角完成差異分析并得出相應結論。與傳統(tǒng)的靜態(tài)截圖、動態(tài)錄屏方法相比,其優(yōu)勢是可以看到過程的全貌,對動態(tài)細節(jié)一覽無余,具有較高的分析可控性。
逐幀分析方法的產(chǎn)生源于一次針對加載場景的體驗調(diào)研項目。百度百科對于加載的定義是:所有軟件要運行必須加載到內(nèi)存,加載就是把需要的文件及信息讀取到內(nèi)存里。簡單說來,所有從服務器讀取信息并顯示在手機屏幕上的過程都屬于加載。以百度APP舉例,加載的典型場景有:啟動、打開FEED落地頁、打開搜索落地頁等。這些場景都有一個共同的特點是:動態(tài)的過程,且過程較為短暫。
基于以上特點,運用對比分析里最常見的靜態(tài)截圖或動態(tài)錄屏方法,是無法完成分析的。原因是,靜態(tài)截圖對于一個動態(tài)過程來說,無法看到過程的全貌,可對比點較少,分析要素不可控(一張靜態(tài)截圖中,無法做到涵蓋所有分析元素)。而采用動態(tài)錄屏的方法進行分析時,問題也同樣明顯:過程太快,無法看清細節(jié);不同視頻節(jié)奏不同,對比起來比較困難。因此針對加載這種特殊的場景,就需要采用一種全新的方法既能看到過程全貌,又可以對細節(jié)一覽無余。
小時候我們都玩過跑馬燈的游戲,即一系列靜態(tài)圖片通過快速輪轉,由于視覺滯留效應,便可看到一段動態(tài)影像。如果把產(chǎn)生動畫的過程翻轉過來,也就是說如果可以把一段動態(tài)影像拆成一系列序列幀,那么是否可以更好的完成影像觀察?
以百度APP打開小視頻落地頁的加載場景為例,當我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發(fā)現(xiàn),除了可以清楚的看到過程全貌外,對于過程中的所有細節(jié)也可以一覽無余。同時,序列幀可以進行任意拆分,以便完成多角度觀察。
到此為止,逐幀分析方法的雛形已經(jīng)產(chǎn)生。在之后的章節(jié),我將為大家具體介紹如何完成序列幀分析以及如何導出序列幀。
面對一系列序列幀,我們可以通過“序列幀三要素”來導出關鍵數(shù)據(jù)及結論。
要素1:序列幀全流程
首先,我們進行序列幀觀察的時候,需要明確定義目標對象的起點與終點。由于逐幀對比方法適用的觀察對象均為短暫的動態(tài)過程,明確定義全流程的起點與終點是為了讓觀察過程和結論更加精準。
以百度APP打開搜索落地頁為例,起點與終點分別是:點擊搜索結果手指松開的第一幀與搜索落地頁首屏內(nèi)容全部加載完成的最后一幀(可以通過觀察前后幀是否有變化得出結論)。這一要素中,可以采集到的關鍵數(shù)據(jù)為時長,時長可以幫助我們觀察加載性能的好壞,甚至在進行競品對比的時候,快速找出與競品在時長方面的差異從而得出優(yōu)化建議。結論輸出時,需要將幀數(shù)轉換成為時間單位(如何將幀數(shù)轉化成時間會在后續(xù)文章中為大家講解)。
要素2:序列幀子流程
在前文中提到,逐幀分析法的一個優(yōu)勢是,逐幀序列可以進行任意拆分,以便完成多角度分析。在分析的第2要素中,我們可以最大限度拆分子流程,同時需要明確每一個子流程的起點與終點。這一要素的分析中,可以采集到的關鍵數(shù)據(jù)為子流程時長,缺失或多出的子流程,以及子流程內(nèi)部的差異。
例如在百度APP Android端熱啟動過程中,全流程被拆分為:啟動至全屏、持續(xù)白屏態(tài)、內(nèi)容加載3個子流程。通過換算,可以看到每個子流程的時長。并且在和競品的對比中發(fā)現(xiàn),百度APP缺失了持續(xù)白屏態(tài)這個子流程。而在啟動至全屏的子流程中,百度APP因為沒有添加過渡動畫,與多數(shù)競品是有差異的。
要素3:用戶體驗節(jié)點
用戶體驗節(jié)點的對比是逐幀分析法的第三要素,這一要素進一步深入到過程的微觀視角,使得分析結論更為全面。而用戶體驗節(jié)點是逐幀分析法所提出的一個全新概念,其定義是:產(chǎn)品界面上任何一次用戶可感知的變化,都叫做用戶體驗節(jié)點。以百度APP Android打開搜索結果頁為例,整個過程的用戶體驗結點有5個。通過用戶體驗節(jié)點可以采集到的關鍵數(shù)據(jù)有:用戶體驗節(jié)點的數(shù)量以及用戶體驗節(jié)點的順序。
我們以Android打開搜索落地頁為例為大家進一步講解如何完成用戶體驗節(jié)點數(shù)量的分析。通過對比發(fā)現(xiàn),百度APP在整個加載過程中的用戶體驗節(jié)點數(shù)量多于競品,多出的節(jié)點為:白屏節(jié)點、文字加載節(jié)點。雖然百度APP加載時長與競品相差無幾,但是由于節(jié)點數(shù)量較多,導致用戶在等待過程中經(jīng)歷了過多的頁面狀態(tài)變化,形成了較強的視覺閃跳感,從而引發(fā)用戶感知層面的錯覺,認為百度的加載時長較長。因此我們可以通過減少非必要的用戶體驗節(jié)點,從而提升加載場景的流暢感。但是,用戶體驗節(jié)點的數(shù)量并非越少越好,這還要根據(jù)實際業(yè)務與優(yōu)化方向來輸出具體結論。
用戶體驗節(jié)點順序的分析,可以參考百度APP iOS FEED打開圖文落地頁的示例。在這一示例中,百度APP圖文落地頁內(nèi)容加載節(jié)點位于框架轉場節(jié)點之后。但是對比競品發(fā)現(xiàn),多數(shù)競品在這個過程中,內(nèi)容加載是先于框架轉場的,而這種節(jié)點順序的優(yōu)勢是,轉場完成后,用戶即可開始瀏覽內(nèi)容,整體感知較為流暢。這種導致閱讀流暢感體驗差異的原因很難通過肉眼或常規(guī)競品對比法觀察得出,由此可見逐幀分析方法針對特殊場景的分析優(yōu)勢非常明顯。
在此,我們回顧一下逐幀分析方法的“序列幀三要素”。
要素1:序列幀全流程,可采集的關鍵數(shù)據(jù)有:全流程時長。
要素2:序列幀子流程,可采集的關鍵數(shù)據(jù)有:子流程時長、子流程是否缺失、子流程內(nèi)部的差異。
要素3:用戶體驗節(jié)點,可采集的關鍵數(shù)據(jù)有:用戶體驗節(jié)點的數(shù)量與順序。
工欲善其事,必先利其器。進行逐幀分析前,我們首先要將錄制好的視頻轉化成序列幀。以下章節(jié)將為大家講解如何導出逐幀序列。
整個過程可分為:錄制、創(chuàng)建合成、輸出3個環(huán)節(jié)。
由于系統(tǒng)特性,iOS和Android手機雙端建議采用不同的錄制手段。iOS手機可直接通過數(shù)據(jù)線連接到電腦,并使用電腦的QuickTime進行錄制。這樣的好處是保證了錄屏的幀數(shù)基本穩(wěn)定在60FPS(每秒傳輸幀數(shù));Android手機建議采用機內(nèi)功能或其他錄屏應用完成錄制,但是安卓中低端手機很容易出現(xiàn)掉幀的現(xiàn)象,因此就需要我們在合成和輸出階段制定一個合理的輸出幀數(shù),讓分析的結果更加接近真實。另外,建議錄制的起始點適當延長,這樣便于素材在合成階段精準切割。
這里要為大家講解一下如何將幀數(shù)換算成時長。以iOS的輸出幀數(shù)為例,換算公式為:iOS時長= N(幀數(shù)) x 16.6ms。例如:在iOS打開圖文落地頁的加載過程中,百度APP總時長為:73(幀數(shù))x16.6ms= 1217ms(約等于)。
創(chuàng)建合成階段所使用的工具是AE。AE的好處是:
1.方便查看原視頻幀速率,對不穩(wěn)定的幀速率進行統(tǒng)一處理;
2.可以將視頻轉換為圖片序列,便于后續(xù)的逐幀分析;
3.AE也可以將多個視頻進行同步播放來進行對比驗證。
第一步:打開AE>合成>新建合成。
這一步的目的是通過合成設置,統(tǒng)一幀速率。通過一系列實驗,我在新建合成時,將iOS錄屏的幀速率設置為60幀/秒,Android錄屏的幀速率設置為30幀/秒,這樣可以保證最大化的減少空白幀,使分析結果更加準確。
第二步:導入錄屏
第三步:截取起止點關鍵幀。
在進行素材處理的時候,需要精確到每一幀,由于逐幀分析所針對場景的時長極為短暫,很可能由于一幀的差距,導致分析結果相差甚遠。
以百度APP iOS端熱啟動過程為例,我們將錄屏中手指抬起的前一幀(即icon顯示出點擊態(tài))做為起點,將APP啟動后填滿手機屏幕的第一幀(可通過觀察法,在AE中查看前后幀是否有變化)做為終點完成素材處理。
輸出的路徑為:菜單欄 文件>導出>添加到渲染隊列,在渲染隊列中找到待渲染視頻,再在 輸出模塊>格式選擇JPEG或PNG以序列導出。這一步的目的是,將一段視頻文件拆分成可提取對比的逐幀畫面。
最終導出的序列幀如下:
在完成分析對象序列幀導出工作后,便可開始進行逐幀分析了。
逐幀分析法是在實際項目中總結并提煉出的一種全新的分析方法。該方法對于短暫的、動態(tài)的過程非常適用,可以幫助我們從微觀視角發(fā)現(xiàn)問題、驗證問題、得出優(yōu)化結論,極大的提升了分析效率和精準度。逐幀分析法也在后續(xù)的多個項目中也得到了推廣和驗證,希望可以幫助到大家。
文章來源:站酷 作者:MEUX
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
Meet more beautiful colors.
“色彩是我們感知世界的重要媒介,對于信息傳達有著重要的作用,能使人們能夠更有效的感知設計的意圖和內(nèi)涵,使傳達更高效。且人對色彩的視覺感知與想象能力,能夠指導人做出預測、理解和決策?!?/em>
-- lyft kevyn arnott
——————————
隨著世界的數(shù)字化轉型進程大爆發(fā),科技把每一張有形的辦公桌移到了云端,用戶沉浸在數(shù)字構建的世界中。騰訊文檔作為先進的生產(chǎn)力工具,產(chǎn)品生態(tài)越來越多元豐富,多品類多終端的復雜環(huán)境展現(xiàn)在我們面前,開始真正的朝復雜龐大的大規(guī)模設計邁進。我們希望能以更加專業(yè)、高效的設計姿態(tài)迎接騰訊文檔的未來挑戰(zhàn)。
色彩是體現(xiàn)品牌與基因的關鍵因素,構建科學高效的色彩系統(tǒng),建立產(chǎn)品的品牌形象,對產(chǎn)品設計極具指導意義。
騰訊文檔在色彩上也進行了一些深入的挖掘和沉淀,一方面希望帶給用戶全新的品牌印象和認知,另一方面構建科學有效的色彩系統(tǒng),為產(chǎn)品的發(fā)展提供優(yōu)質(zhì)高效的設計系統(tǒng)基礎。本文將聚焦于色彩系統(tǒng)的構建。
騰訊文檔代表著效率協(xié)作的先進生產(chǎn)力,從云端創(chuàng)作到云端協(xié)作,打破了辦公空間的實體界限。我們希望,新的品牌色,能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知。
我們將標準色由平靜的天藍色,升級為更加生動、進取、科技、可靠的明亮清澈的鈷藍色。這種藍色具有更多的電子意味,蘊含了更多的活力和想象力,承載了騰訊文檔對未來數(shù)字世界新挑戰(zhàn)的態(tài)度和形象的進化。
同時我們認為灰色在騰訊文檔的色彩系統(tǒng)中起著至關重要的作用,為產(chǎn)品界面創(chuàng)造結構、表達邊界、建立信息層次。我們將灰色賦予了統(tǒng)一的品牌認知感受,將藍色加入到中性灰色里,生成了騰訊文檔特有的藍灰色。
至此,騰訊文檔標準色進化升級,它體現(xiàn)了騰訊文檔對可靠穩(wěn)定的技術、產(chǎn)品體驗的追求,以及對未來智能的數(shù)字世界的不斷創(chuàng)新和進取,蘊藏著無限的可能性。
在一個科學有效的色彩系統(tǒng)里,往往包含至少兩種色彩:主色+輔助色,兩者互相搭配組合成產(chǎn)品體系的整體色彩感受,減少用戶在產(chǎn)品體驗中對反復出現(xiàn)的主色的視覺疲勞。
騰訊文檔的產(chǎn)品生態(tài)愈來愈豐富多元。我們擁有多品類的產(chǎn)品,為用戶提供了豐富的產(chǎn)品功能,其中云端協(xié)作、文檔資產(chǎn)的沉淀管理是騰訊文檔的非常重要的能力,在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導圖、在線流程圖以及文件夾等的品類圖標,又是用戶在對文檔進行協(xié)作分享及沉淀時,識別不同類型文件的關鍵因素?;诖?,騰訊文檔相較于其他產(chǎn)品需要更多的輔助色。
于是,如何有效的選擇既符合品牌調(diào)性又有區(qū)別度的輔助色是構建騰訊文檔色彩系統(tǒng)的關鍵。在輔助色選擇上,我們以鄰近色、互補色、對比色為主要方法構建了輔助色彩體系。
我們以騰訊文檔標準色#1E6FFF(H 218 S 88 B 100) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以218°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。
● 鄰近色 在色相環(huán)中,相差15°的顏色為鄰近色,凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍。鄰近色之間往往是我中有你,你中有我,色彩之間比較和諧。
● 對比色 在色相環(huán)中,角度相差120°-180°之間的色彩,文檔使用了120°為角度來選擇對比色。
● 互補色 在色相環(huán)中成180°角的兩種顏色,互為補色,當這兩種顏色彼此相鄰放置時,它們會為這兩種特定顏色創(chuàng)造最強烈的對比度。
為了保持騰訊文檔的基礎品牌調(diào)性,并保證其具有極清晰的識別度,我們以品牌藍色為起點,選擇了相對較多的鄰近色,以保證在色溫上保持騰訊文檔整體色調(diào)的清爽感。并利用對比色及互補色,選擇更加豐富多元的色相,以保證能夠滿足各種使用場景下對色彩的需求。
總的原則是利用鄰近色構建有質(zhì)感、品牌感的色彩家族,利用對比色及互補色擴展色相,以制造更強烈的色彩對比,滿足一些沖突性場景。
雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發(fā)光度較高,藍色就稍微偏暗一些,導致色板看起來不一致。為了讓不同色相看起來更加協(xié)調(diào),需要調(diào)整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。
校正原則:
● 色相必須保持是 同類色(色相環(huán)中15°夾角內(nèi)的顏色)
● 保持感官明度同頻
● 保證視障群體的識別度
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進行了色彩測試。
灰色是產(chǎn)品體驗設計中至關重要的一節(jié),工具型產(chǎn)品大部分是由各種各樣的容器、面板、列表組成?;疑珵楫a(chǎn)品界面創(chuàng)造結構、表達邊界、建立信息層次,保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。
前面我們已經(jīng)定義了騰訊文檔的藍灰色,在界面的設計中,我們將其與中性的灰色結合,共同構建灰色的色彩體系 。
● 擴展藍灰色相,應用于圖標、容器,構建有層次、舒適清爽的產(chǎn)品界面 。
● 用帶透明度的黑色,應用于字體等。
為構建一個高效易用的灰色調(diào)色板,我們將藍灰色彩作為Y軸,有透明度的中性灰色作為X軸,兩者透明度保持一致,建立起騰訊文檔有梯度的、豐富的灰色調(diào)色板。
對比度是否合理是閱讀體驗是否舒適的重要評價維度,過高或者過低的對比度都會影響閱讀體驗及識別度。下圖是對比度的鐘型曲線圖,隨著對比度的增加,舒適度和識別度都在上升,但一旦超過一個界點,對比度越增加,識別度和友好度亦會逐步下降。
為保證視障用戶的使用,保證足夠的對比度,遵守 WCAG 2.0 的標準,我們對調(diào)色板灰色的對比度進行了可用性測試,以指導騰訊文檔體驗設計中灰色調(diào)色板的使用。
是:對比度在AA標準以上,符合W3C標準,可以使用。
中:僅可用于disable狀態(tài)。
否:對比度在AA標準以下,不符合W3C標準,不可使用。
定義好文檔的主色、輔助色以及中性色后,我們需建立完整的調(diào)色板來滿足不同場景下顏色的使用。以傳達品牌精神,建立色彩層級,或傳達信息,或強化界面層級。
在色彩系統(tǒng)中,很多產(chǎn)品使用 Tints and shades 系統(tǒng),通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調(diào)色板。但這種方法得到的調(diào)色板往往比較刻板僵硬,故騰訊文檔采用了另一種方式,將已生成的灰色色板與色相疊加,在符合無障標準的區(qū)域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調(diào)色板。
Tencentdocs_blue:
生成主色-藍色色階:
用同樣的方法將輔助色生成色階:
現(xiàn)在,我們有一個梯度豐富,能夠支持騰訊文檔設計系統(tǒng)的調(diào)色板了~
實際案例
實踐才是硬道理,我們嘗試以這個調(diào)色板為指導來調(diào)整優(yōu)化騰訊文檔鏈接色的優(yōu)化調(diào)整。
為保證用戶閱讀體驗的舒適度,鏈接之類的彩色文本,要求顏色在背景下可以達到4.5:1對比度以上,以使它能夠清晰的從灰色文本、背景中脫穎而出。于是,我們放棄了品牌藍_1E6FFF,選擇了品牌藍70_175CEB 作為鏈接色。
以后,選擇顏色,so easy~
這個長長的制作調(diào)色板的故事就要結束了,我在這項工作中,重新審視過去設計中的設計決策方法,在其中學到了很多東西,希望本文對您也有所幫助。
我們經(jīng)??焖俚膭邮?,依靠主觀情感去選擇顏色,在剛開始可能沒遇到什么特別的問題,但隨著產(chǎn)品的壯大和發(fā)展,往往會越來越凌亂。抽絲剝繭的搭建色彩系統(tǒng),真正讓色彩為設計服務,簡化團隊的工作,相信您會有更愉快的工作體驗~
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
為什么那么多人覺得應該先學UI設計再學交互設計,因為UI門檻低所以入手快。其實交互比UI更早出現(xiàn),從需求理論可以看出人們在追逐主觀體驗的感受,在基礎需求未被滿足前是不會出現(xiàn)更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知,如果底層的交互和產(chǎn)品的可用性未被滿足,那么UI做的再好也是徒勞。
市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設計,就是因為大家都在按照現(xiàn)有的,常用的模版在設計,現(xiàn)在其實比早兩年會好很多,很多設計師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動或者價值探尋的工作。
例如下面的案例,這是一個電瓶車電池租賃的一個產(chǎn)品。
從美觀角度,左側的界面更加簡潔信息也有規(guī)律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經(jīng)被這個頁面所拉入到不可自拔的漩渦中去了呢?
如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態(tài)就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質(zhì)沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產(chǎn)品好用的,也要讓產(chǎn)品走對方向。
另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現(xiàn)在人們?nèi)粘K佑|到的大部分媒介,并且與之產(chǎn)生聯(lián)系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產(chǎn)品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調(diào)溫等等。
交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現(xiàn)代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。
所以在當時人們?yōu)榱诉m應非常有限的工具資源,改變了自然的操作方式。但現(xiàn)代社會如果說你的產(chǎn)品不為用戶的使用和場景去考慮,那基本也就涼涼了。
從2g到5g時代的發(fā)展,除了生活方式發(fā)生翻天覆地的變化外,我們所接觸到的媒介也發(fā)生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內(nèi)容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。
平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰(zhàn)術競技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。
在現(xiàn)在非?;馃岵⑶夷J胶蚫ota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。
同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發(fā)出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。
另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業(yè)務后臺切換到移動端是一件很麻煩的事,因為在網(wǎng)頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯(lián)動的左側標簽導航和頂部聯(lián)動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯(lián)動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現(xiàn),所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業(yè)務功能的后臺系統(tǒng)就不適宜遷移到移動端上。
web端的工具和網(wǎng)頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統(tǒng)一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變?yōu)槌蜂N按鈕,有待考量。
到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網(wǎng)上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現(xiàn)的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質(zhì)。
中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進化過程。但現(xiàn)在其實很多的交互形式都是來源于一些大流量產(chǎn)品的模仿,更多的是擔心用戶成本過高而妥協(xié)為滿足用戶預期。
事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語
例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區(qū)分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?
當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。
同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸,但設計者覺得現(xiàn)在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。
我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發(fā)還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發(fā)的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發(fā)知識,開發(fā)也盡可能的去補充設計背景。
在這里,交互設計師產(chǎn)出的交互說明文檔就是能夠幫助設計師與開發(fā)有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。
再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經(jīng)常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”
所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。
我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統(tǒng)。不同的種族有不同的語言,不同的專業(yè)有不同的語言例如在圍棋中有長、立、并、空、頂?shù)鹊?,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業(yè)領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。
所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規(guī)范,而并不是語言。語言擁有更強的普適性和通用性。
那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。
語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進行狀態(tài)的變化和所進行的任務跳轉。
這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態(tài)的,比如點擊之后的跳轉頁面,另外他也可以具備產(chǎn)品賦予的自定義屬性,例如底部滑出picker。
還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數(shù)也可能是實數(shù),但是在交互設計中,我們?nèi)绾伪硎军c擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜恚缂酉聞澗€的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。
那我們發(fā)現(xiàn)如果把交互設計能夠做成類似于語言的系統(tǒng)是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產(chǎn)品團隊中大家都能夠有一套共性的交互語言系統(tǒng),無疑是一件非常提高效率的事。但是目前的很多交互規(guī)范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創(chuàng)新,這就導致了很難會有新的、有用的交互形式的出現(xiàn),比如很多搜索控件都是承載在頂部導航欄中,那么在做規(guī)范的時候也只能在這個組件上去微調(diào),殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規(guī)規(guī)范形式就能和很多產(chǎn)品區(qū)分開來了,當然要視產(chǎn)品形態(tài)不同。
市面上有許多的新零售電商產(chǎn)品,頁面中的信息流也是大同小異,但是無論是交互還是產(chǎn)品在做設計師必須要考慮的就是產(chǎn)品定位與當前狀態(tài)。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據(jù)算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。
所以這樣的產(chǎn)品首屏策略就顯得非常關鍵。我們可以看到常規(guī)的電商產(chǎn)品中,首屏基本上都是呈現(xiàn)這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區(qū)這樣的布局,從基本上能夠滿足一個大量sku電商產(chǎn)品的所有需求,但是如果用戶定位和產(chǎn)品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?
從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現(xiàn)更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。
通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經(jīng)常看到的營銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現(xiàn)。
最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業(yè)務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規(guī)范去搭建界面更加有效。
不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產(chǎn)品設計中使用的。
大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內(nèi)存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內(nèi)還有3種對不同頻率光敏感的細胞。我們經(jīng)常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環(huán)境中使用的多。
視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。
大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調(diào)那這個交通事故可能要發(fā)生的頻繁的多。
我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后,不在這個環(huán)境中直接進行邊緣對比,那就不會出現(xiàn)漸變的情況了。那光說原理,我們也來看一下在產(chǎn)品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。
還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產(chǎn)生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們?nèi)プ⒁饣蛘呖杀稽c擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。
一般來說,產(chǎn)品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產(chǎn)品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫?、有趣、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。
但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產(chǎn)品進行通用。例如之前的嚴選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。
而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。
我們在上一篇十萬個為什么文章里提到了人們?nèi)绾伍喿x信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產(chǎn)品,使用了高亮色來引導用戶視覺。
當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區(qū)分層級。
同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現(xiàn),但不具備交互的特征和狀態(tài)。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。
所以不是所有的元素都要賦予顏色,這樣會使整個頁面非常混亂
另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態(tài)。
色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產(chǎn)品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區(qū)域都會用品牌色在活動時段內(nèi)進行氛圍打造
在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。
然而其實很多的產(chǎn)品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規(guī)人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質(zhì)沒什么關系的顏色
在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調(diào),“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調(diào)同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。
會讓人產(chǎn)生“幻覺”!讓人產(chǎn)生視覺疲勞,例如我將餓了么這個界面的色調(diào)調(diào)整一下大家看一下,不亮瞎算我輸。
為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的
讓界面或者插畫看起來非?;靵y。一般來說顏色的使用也需要有側重點,所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!
在很多dribbble的飛機稿中,經(jīng)常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。
說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內(nèi)障”。另外我們常說的一點就是所有元素都強調(diào)就等于什么都沒有強調(diào),這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。
為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。
例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼
首先我們必須要說,色彩肯定是需要結合產(chǎn)品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發(fā)現(xiàn)大部分的產(chǎn)品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。
在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。
文章來源:站酷 作者:應駿
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
在工作中常常被問到如何表達講述自己的設計,為了讓自己的設計有理可依,對接上下游匯報工作的時候,總結以下一些方法和觀點,幫助不知從何講述自己設計的人一些語言技巧。
以下僅是個人觀點,用作探討交流,文中所有舉例均為本人工作設計輸出。
設計師能做出好的設計,卻缺乏系統(tǒng)化的語言包裝,“如何講設計”不該讓它成為難題,做一個有產(chǎn)品思維的設計師,讓你的設計以理服人,我們要不止停留在視覺表層,更要從多緯度看待產(chǎn)品設計,本文將從以下三點簡述:01.產(chǎn)品設計的五個層面,02.講述設計的流程,03.關于本次總結
做好產(chǎn)品設計的第一步,是了解產(chǎn)品, 要對于產(chǎn)品的需求如何確定、產(chǎn)品定位如何決定有一個基本的認識,在產(chǎn)品常識里面最重要也最常用的就是產(chǎn)品設計的五個層面,也簡稱用戶體驗五要素——
作為UI設計師,所處的視覺設計是表現(xiàn)層,是確定產(chǎn)品的最終形態(tài),因此也處于產(chǎn)品設計的頂層(能被看到),是一個具象畫的呈現(xiàn);其次,往里推框架層,是確定產(chǎn)品外觀,將界面信息和導航設計有序歸類,讓用戶使用或者理解;結構層是為用戶設計一個結構化的體驗,將零散的元素轉化為有序立體的空間;范圍層確定產(chǎn)品的功能和需求;最后戰(zhàn)略層是確定產(chǎn)品目標和用戶需求;底層邏輯結構決定上層意識形態(tài)表現(xiàn),因此在設計前我們要知道產(chǎn)品是屬于洞察階段,設計中是屬于產(chǎn)品設計解決方案階段,整體的產(chǎn)品設計是一個概念通過無數(shù)個層面的努力,經(jīng)過時間,轉化為具象表現(xiàn)的過程,所以我們在完成一項設計時,應該講述一個完整的設計思路 ,不要讓自己的設計思路僅停留在表面。
整個產(chǎn)品的設計產(chǎn)出是一個抽象到具象化的過程,設計的前期屬于產(chǎn)品洞察階段,這個時候一般由團隊的老板領導結合當下市場需要,有用戶的需求就有商機,想出產(chǎn)品大致的方向(戰(zhàn)略層)然后通過產(chǎn)品經(jīng)理整合梳理高層的意見確定產(chǎn)品大致的功能和內(nèi)容輸出原型(范圍層),交給交互設計師優(yōu)化產(chǎn)品細節(jié)邏輯和信息具體框架,經(jīng)過研發(fā)評估能夠技術實現(xiàn)產(chǎn)出交互稿(結構、框架層),這里已經(jīng)過渡到設計解決問題執(zhí)行階段,最后是給到界面設計師美化視覺產(chǎn)出高保真(表現(xiàn)層)。
也就是到我們自己設計輸出之前要經(jīng)歷這么多,如果能在講述自己設計的時候,提前去了解這些,那么設計內(nèi)容就不愁沒法兒講,光是闡述自己的設計思路就可以講出一個故事,這也是為什么現(xiàn)在很多品牌賣貨都開始營銷產(chǎn)品背后的故事由來。我們設計能做好,也要會用語言推銷自己的設計成果。
設計是對于某件事精心準備的過程。好的設計作品,應該擁有完整的設計流程,因此我們在講述自己設計作品的時候,有一套完整系統(tǒng)化的方式是非常有效的。完整的設計流程包含以下4個步驟:
第一是我們需要去了解設計的需求背景,知道大概的方向——
來源(簡單理解就是誰提出的問題)需求有可能是你的老板、你的產(chǎn)品經(jīng)理、或者交互設計、或者視覺上的問題···
背景(籠統(tǒng)一點,就是這個需求是新需求還是原來有然后進行改版優(yōu)化)需求的基層性質(zhì)是什么,原本調(diào)性是什么,我們要做什么樣的產(chǎn)品···
目標(目標一般都是需要解決什么問題)搞清楚為什么做這個需求,能解決什么痛點,不做無用功。
誰提出的問題,是新的需求還是舊的問題,或者我們要解決什么?圍繞這幾個方向?qū)⒛愕脑O計概述出來,會讓非專業(yè)的人也能聽懂你做了什么,舉個簡單的例子,我們公司后臺一個很小的產(chǎn)品bug需求,往往這種需求就是產(chǎn)品經(jīng)理的一個截圖和他標注的兩句話——
然后你完成了這個需求單,在傳達給非產(chǎn)品經(jīng)理以外的人的時候,你有可能是以下轉述方式——
毫無疑問,你就是將需求者的意思一字不落的轉達了,但是對于其他的聽者來說,你的轉述平平無奇、毫無意義,甚至都沒有印象你做了什么,所以你應該講清楚這個需求的背景——
設計需求來源是誰,原本屬于產(chǎn)品哪個模塊(來源),他原來功能是怎么樣的,界面上展示的結構哪里有問題(背景),視覺用了什么樣的方式改成什么樣,解決了什么痛點(目標)
講清楚誰給的需求,需要解決什么問題,是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的,才讓你的敘述更完整,聽起來更有邏輯。如果是一項新的需求,沒有背景,那還得從設計分析說起,設計分析就是讓你更專業(yè)的去做事,設計分析分為——用戶分析,設計目標,和設計手段三個要點:
首先用戶分析就是,分析你做的東西給誰看,而用戶又分為群體用戶和獨立用戶,在c端常見的就是獨立用戶,他們通常不定性,且有很多特征;在b端,目標用戶一般是群體,他們大多數(shù)是有場景特性和行業(yè)特性,針對獨立用戶和群體用戶,我們得出的用戶特征、基本信息、需求結論也是不一致的,所以我們應該結合產(chǎn)品的調(diào)性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有:用戶畫像、用戶訪談、問卷調(diào)查、焦點小組、眼動測試、用戶反饋以及大數(shù)據(jù)分析,這些方法中最簡單的是用戶畫像,就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數(shù)據(jù)分析和用戶反饋,這兩種方式通過對接需求的上下游就可以得知。
通過用戶分析得出需求結論,滿足需求就能達成設計目標——
設計目標結合卡諾模型來分析,卡諾模型—反應產(chǎn)品性能和解決用戶需求的滿意度的一種非線性關系,具體想了解的可以自行百度,站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 :1.必備屬性:滿足這個需求,用戶滿意度不會上升,但不滿足這個需求,用戶不滿意會大幅度降低 ;2.期望屬性:提供個性化需求,用戶滿意度會上升,不提供此需求,用戶滿意度會降低; 3.魅力屬性:用戶意想不到的效果,提供此屬性,用戶滿意度大幅提升,不提供也不會降低 ;4.無差異:無論提不提供,用戶滿意度都不會改變,根本不在意;因此在做需求的時候我們應該盡力滿足基本需求和期望需求,而可有可無的需求盡量不去做,降低效率。幸福需求是不容易達到的,如果能滿足是非常棒的~這里就像是滿足了設計心理學的三個層次——本能、行為、反思。
接下來是大家都熟知的設計手段,適當?shù)闹v一些述專業(yè)的設計技法,用不同的手段去實現(xiàn)的主畫面,最后達到完成設計目標這樣的結果,會讓你顯得更專業(yè)。設計的手段有很多種,這里主要講述常用的三種,構圖排版(采用什么構圖方式,為什么這樣構圖是因為什么設計原則)、色彩運用(為什么使用這個顏色,因為這個顏色給人的心里感知是什么樣的)、設計風格(采用什么風格最貼近產(chǎn)品調(diào)性,為什么用這個風格),但是講設計時一定要記住產(chǎn)品的調(diào)性,不能偏離產(chǎn)品本身,不要盲目套用絢麗的技法,否則是不合適的。
很多時候面對非專業(yè)需求方收稿時,可能看到如下話語————
(心里是不是xxxx····“萬馬奔騰”,用個文明點的詞)
非專業(yè)人士無法理解這二者的區(qū)別,他們認為他們的設計手段能達成設計目標,而作為專業(yè)設計師的我們就應該引導對方說出設計目標,再用我們專業(yè)的手段去滿足對方的目標,去實現(xiàn)減少改稿次數(shù),而不是讓非專業(yè)人士去指導專業(yè)人士修改設計手段。分清這兩者的區(qū)別,我們就可以在設計引導中更加主動。用設計分析的方法來講述設計,舉個例子——
會議管理——會議預約移動端優(yōu)化,因為這是我們原有產(chǎn)品EKP里面的模塊,PC端和移動端都有,因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像,得出他們的一些需求結論,然后目前幸福需求是沒有的,純屬個人建議,日后如果有此功能,想必用戶的滿意程度也會大大提升。
概括一下已完成的整體主要頁面,分析設計目標:
頭部屬于流量量較高的區(qū)域,采用卡片式設計,將會議內(nèi)容置于此處,作為頁面信息關鍵層,采用左對齊方式排版,突出會議標題和時間提醒用戶。
通過不同的顏色標簽,區(qū)分參會人員狀態(tài)——
待進行未有操作反饋,選用橙色,屬于可以持續(xù)進行并有明顯提醒作用
已做反饋屬于成功操作,選用已有用戶認知心理的綠色
已知信息拒絕參與,是不太重要的,屬于不再進行的階段,選用灰色
接下來是設計作品的產(chǎn)出過程,一般情況下不可見的過程,為什么要去講, 因為一個東西從無到有是很不容易的一件事,如果能講述過程,就可以引燃情緒共鳴,讓別人記住,讓自己的設計作品也能有始有終——
設計過程一般分為四個階段:初期階段、中期階段、最終定稿;具體的關鍵詞和描述可以通過以下方式提煉出來,這里就不做詳細說明了。
拿運營宣傳來舉個例子,我們公司中秋節(jié)月餅禮盒包裝主視覺設計——整個過程應該是有一個系統(tǒng)化的說明的,省略為寫字的地方是我們可以插入的具體圖片和過程,步驟差不多就是上述這些,可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節(jié)刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優(yōu)化…主畫面的誕生是不容易的,強化這種過程參與,讓不被看見的事也能展現(xiàn)。如果實在不好記錄,你可以從一開始就截圖你繪制的過程——
上圖是用PS截圖,再用時間軸將每一幀動態(tài)循壞播放,導出GIF然后截一張不變的底圖合成就可以了。
最后是數(shù)據(jù)驗證階段,這個是設計落地的直觀證實,包含主觀認可和客觀數(shù)據(jù),具體內(nèi)容就是通過用戶或者專業(yè)的人士反饋給你設計落地的好壞,來判定你做的是否優(yōu)秀成功。通常這一塊的數(shù)據(jù)決定你驗證你前面所有的過程,只要按照該流程認真做了,最后效果通常不會太差,如果出現(xiàn)很大的偏差也往往是意料之外的,因該尋求團隊一起解決,不是某一個人的問題。
根據(jù)以上最后我們總結,好的設計就是滿足以下4個方面:好看,好用,好記,能實現(xiàn)。設計師要考慮的維度不僅僅在視覺層面,什么是有產(chǎn)品思維的設計師,就是在執(zhí)行時候要考慮上下游不同職能的工作內(nèi)容,如果你的設計不能實現(xiàn),再好看也是白費功夫的~從產(chǎn)品交互視覺多層面談設計,會讓你的設計包裝顯得不那么單調(diào),系統(tǒng)化的方法總結到此,不足之處多多包含~謝謝你的閱讀!
文章來源:站酷 作者:YiVi_eleven
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
盡管在工作中對于設計方案提出建設性和針對性的評價確實是非常難的,但不得不說,這一項技能對于每一位設計師,乃至每一位與設計師配合的職場人,都是非常重要的。
「只要我們付出了百分百的努力,最終結果一定會比第一版的設計要好。工作中,以專業(yè)的手段直接面對要解決的問題,切莫把過多的個人情緒帶到工作中去,就像馬東老師的米未傳媒貼在墻上的標語:“有話直說是一種能力,也是一種責任。」
從業(yè)這么多年,合作過的產(chǎn)品、運營、市場、研發(fā)、測試形形色色,但是對于設計師專業(yè)度的評價,每個人都不一樣,進行綜合分析,我認為,最核心就是一下3點:
「但這里我要說的是,你自己必須做到足夠?qū)I(yè),以下的這些是基于你給出的設計方案確實是經(jīng)過認真思考后的,否則被業(yè)務方懟了也是活該?!?
PART 01
在進行設計評價時,不要單純的只是描述”我覺得…“、”我喜歡…“或者”我不喜歡…“,這無法真正解決問題,相信很多設計師也比較反感這樣的評價。
我們需要深挖的是:
1、你對業(yè)務目標了解嗎?該業(yè)務是用什么樣的策略給目標用戶帶來什么價值,以及是如何實現(xiàn)盈利的?
2、你對設計目標清晰嗎?設計師是通過何種設計策略來給用戶帶來價值從何實現(xiàn)業(yè)務目標的?
3、你有全局觀嗎?就是這樣的設計方案是否是在現(xiàn)有的技術限制、用戶認知約束、時間周期等等諸多條件下得到的結果?
如果沒有以上,非設計師的朋友們直接指點界面顏色不好看,排版不合理,不夠高大上等諸多評論,其實是很不負責任的。希望大家不要做坐在設計師背后指點江山的神。
PART 02
提問有助于設計師和業(yè)務方更好的溝通和信息傳遞,但在提問中不要夾雜感性的評價,而多用理性的思考。比如不要指著某個東西說”這個按鈕太大了“,而要問”你為什么選擇這個尺寸的按鈕?“通過這種方式,你可以得到更多的背景和每個設計細節(jié)背后的原因,并感受到設計師是專業(yè)的,而不是一拍腦門的。
說服心理學中有一條鐵的定律就是:”沒有人喜歡被改變“。當你對我的設計指指點點的時候就證明我可能錯了,為了捍衛(wèi)我的設計我會非理性的做出防御性的對抗,感性的情緒表達只會讓雙方彼此矛盾升級,理性的表達和提問會讓人更愿意交流。
所以,學會提問,比提出問題更重要。
PART 03
評價者的品味對于設計方案來說并不重要,也不應該成為討論的重點,就像我上面說的”我覺得…“,此時你可以發(fā)出黃曉明的動圖:”我不要你覺得,我要我覺得…“
不要發(fā)表“我只是個人不喜歡,最終還是看你們設計師的”這樣的評論,說實話我每次聽到這樣的話都很火大,你都沒想清楚這樣不合適的理由,你跟我說什么?難道只是為了反對而反對嗎?
下次如果遇到講廢話的需求方,可以直接回復:如果你不能推薦一種更好或不同的設計方案,那就別說了,不要浪費彼此的時間。
另外就是,建議必須清晰明確且可行,如果讓設計師誤解了你的意思,那可能比你什么都不說更嚴重,因為事態(tài)可能會朝著完全相反的方向發(fā)展,因此詳細的闡明論點,也是一種職場溝通的能力。
PART 04
收到反饋后,首先,我們要分清哪些反饋對我們有用,哪些其實只是表達者的主觀感受,把有用的吸納進來,并做好筆記,先自我情緒冷靜下來,不要急于去修改調(diào)整設計方案,多多思考流程和鏈路的問題。
很多設計師可能是出于多年的工作習慣,喜歡將別人的評論(尤其是有經(jīng)驗的設計或者領導)視為行動指南,在沒有經(jīng)過仔細思考的情況下采取和實施他們的想法,這很容易把自己變成一個提線木偶,久而久之徹底失去了設計師原本該有的創(chuàng)造力和反思能力。
設計是在美學與功能、解決用戶問題與業(yè)務之間平衡的探索,設計師的方案也是在用戶、公司也利益之間尋求平衡,沒有一個永遠正確的決定。每個人都會犯錯誤,每個人可能都有其背后的一番道理,無非是看問題的角度不一樣而已,不要糾結于某一個細節(jié),也不要執(zhí)著于某一種特定的方案。
提升自己思考問題的視野和維度,知道如何拒絕毫無意義的反饋和評價,當你從界面細節(jié)跳脫出來看問題時,離一名真正的專業(yè)設計師就不遠了。
文章來源:站酷 作者:設計情報局
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
“作為用戶體驗設計師,我們的使命之一就是如何以最正確,最有效的方式將產(chǎn)品意圖傳遞給用戶。”這也是行業(yè)中大家的共識,關于設計原則也有很多,今天想給大家介紹的是 Don Norman 在《日常事物的設計》中提到的七項基本設計原則,我們將套理論付諸實踐,然后通過測試,驗證和迭代來提升設計體驗。
PART 01
諾曼(Norman)的七項基本設計原則可以幫助確定一系列問題的答案,這些問題從目標開始,然后通過將結果與預期進行比較后結束。這七項基本原則是:發(fā)現(xiàn)、反饋、概念模型、示能、意符、圖示、約束條件。接下來我們將從一個實際問題出發(fā),來談談以下設計原則改如何運用。
我們的第一個問題是目標—我們實現(xiàn)目標的動力。舉個例子來說:
「目標:“我們需要找到一雙新的,合腳的,確定顏色和尺寸的跑鞋?!?/strong>
下一階段是計劃如何通過發(fā)現(xiàn)和評估我們的選擇來實現(xiàn)我們的目標。
假設我們選擇了耐克網(wǎng)站作為首選購物平臺。當我們初次進入網(wǎng)站,我們會看到很多不同的選項。
「發(fā)現(xiàn)模塊」提升了選項的可見性。清晰的導航,突出的焦點和自然的視覺層次使其更容易發(fā)現(xiàn)和理解。
清晰的導航有助于我們輕松找到并了解網(wǎng)站的主要產(chǎn)品。但是,移動端的體驗實際體驗效果并不佳,因為漢堡導航很容易將信息遮蓋。
耐克網(wǎng)站的產(chǎn)品詳細信息頁面通過清晰的導航,突出的焦點和自然的視覺層次結構選項更容易被識別。不過,您可能會爭辯說,這些復雜的信息干擾到 “添加到購物袋”的這一關鍵行為。
焦點是吸引人視覺的主要區(qū)域,其中包括引人入勝的圖像和視頻,描述性標題以及清晰的號召性用語,例如“了解更多”和“添加到購物袋”。
以上所有組件均作為視覺層次結構的一部分進行排列,以幫助我們按照接收到的重要信息的順序進行瀏覽。它們的位置也符合最佳的閱讀模式——例如,導航欄,過濾器控件和跑鞋結果分別組織在類別頁面的頂部,左側和右側。
其他設計原則(包括概念模型,示能,意符,映射和約束)也可以幫助我們弄清楚如何使用該網(wǎng)站。
許多網(wǎng)站功能中都存在概念模型,尤其是用于對結果進行排序和過濾的導航和控件。這些熟悉的設計模式告訴我們它是如何使用的。例如,我們知道通過過濾器將有助于優(yōu)化篩選結果。
功能可供性應用于各種網(wǎng)站組件,例如按鈕,選擇框和手風琴導航,使我們可以了解如何控制和使用它們。但是,某些能力依賴于意符來闡明預期的操作。
意符被廣泛用于傳達應在何處執(zhí)行操作,尤其是示能較弱的扁平化按鈕。一個簡單的描述(例如“查看更多”或“添加到購物袋”)足以告訴我們預期的操作。
映射向我們顯示了對象之間存在關系的位置,例如產(chǎn)品詳細信息頁面上,當我們選擇適合的款式和顏色的選項時,我們會看到可用的尺寸和價格會與之對應產(chǎn)生變化。
約束限制了可以使用信息的位置,地點和時間,以減少雜亂并降低認知負擔。例如,導航最初僅向我們一級導航。
購買工具為我們提供了可能選擇的選項序列的概念模型。禁用狀態(tài)還用于將我們的操作限制在只能選擇有庫存的商品的范圍內(nèi)。
了解了如何使用網(wǎng)站后,現(xiàn)在我們可以指定要執(zhí)行的一系列操作。讓我們在網(wǎng)站上繼續(xù)進行以下活動:
「行動:購買時需選擇產(chǎn)品規(guī)格,包括合身性,顏色,尺寸,然后將其添加至購物籃?!?/strong>
概念模型、可發(fā)現(xiàn)性、映射、約束、示能和意符可以幫助我們確定操作順序:選擇合適的→選擇顏色→選擇尺寸→選擇添加到購物袋。
在某些情況下,某些選項(例如大小和顏色)可能缺貨。如果產(chǎn)品不可用,則禁用按鈕狀表達了操作行為的限制,只能選擇有庫存的商品,這是非常必要的。
不同的控件交流其功能,用法以及如何向我們展示其效果
現(xiàn)在,我們需要實際執(zhí)行我們選擇的一系列動作。示能,意符和映射將幫助我們執(zhí)行操作。例如,按鈕的感知外觀使我們想要按下按鈕,標簽告訴我們控件的功能,而映射使我們能夠看到剛剛操作的效果。
一個簡單的確認消息會通知用戶發(fā)生了什么,并提供一些其他選項的可見性
一旦執(zhí)行了選擇的一系列動作,我們就需要收到有關請求的信息,這就是反饋。
購物車確認消息為我們提供了有關所選跑鞋的有用反饋信息,包括名稱,顏色,尺寸,價格和數(shù)量。同樣還提供了成功的信息和一些其他選項。
看到這些變化之后,我們現(xiàn)在需要將其轉化為有意義的東西。反饋對于再一次為我們提供足夠的信息來確定我們的行動結果至關重要。成功信息——“已添加到購物袋”和綠色的勾號圖標說明發(fā)生了什么,其他選項表示我們現(xiàn)在已選擇購買這雙跑步鞋。
每個粉絲都希望看到的確認消息–真是令人高興的時刻!
最后一個問題詢問了結果是否符合我們的期望。我們可以將結果與目標進行比較。
到目前為止,我們已經(jīng)使用了所有七個設計原則來確定問題的答案?,F(xiàn)在,反饋將能夠確認我們的行為是否帶來了成功的結果。如果結果不是我們期望的,那么我們至少需要了解發(fā)生了什么以及下一步該怎么做。
反饋可以誘發(fā)積極和消極的情緒。如果結果不是我們所期望的(例如錯誤),則它們可能會引起混亂甚至憤怒的感覺。但是,當我們實際執(zhí)行的動作可以實現(xiàn)我們的目標時,我們將感到非常喜悅!
例如,在耐克移動應用程序 SNEAKRS 中,客戶可以參加抽獎來購買限量版鞋。緊張的 30 分鐘倒計時結束后,獲勝者會收到一條特別的消息,確認他們的抽獎結果,這為他們的經(jīng)歷增添了很多樂趣。
「結果:看到此消息給我?guī)砹苏嬲钊藵M意的體驗——幸運的贏家?!?/strong>
PART 02
應用設計原則進行 UX 設計是非常表層的。當人們在使用該產(chǎn)品時,我們需要了解他們的想法,感受和看法。他們可以使用嗎?他們覺得有用嗎?他們會再次使用它嗎?
比設計原則更重要的是與真實用戶進行測試,以了解他們對設計的行為和態(tài)度。然后,可以利用豐富的用戶見解來改進產(chǎn)品。
我們?nèi)裟軌蛟皆缜以筋l繁的測試我們的想法,就能夠越早的迭代產(chǎn)品,以更快的速度滿足用戶需求以及幫助實現(xiàn)業(yè)務目標。以下是一些流行的研究方法的概述:
遠程用戶測試是非??焖倥c靈活的,并且非常適合于早期經(jīng)常需要設計驗證的情況。參與者使用屏幕錄制軟件收集有關設計的反饋。遠程用戶測試為獲得更多的洞見提供了便利。
面對面用戶測試,就是我們常說的線下用戶訪談,這種測試要適量,通常會有一個主持人。在研究期間,主持人可能會根據(jù)問題提出任務或新的活動。這種類型的研究比較花費精力和時間,但與大多數(shù)方法相比,它可以為您提供更有價值的見解。
游擊隊測試是指調(diào)研團隊無拘無束地采訪隨機人群。您可以選擇某些地點來確定適合您所測試設計的受眾特征。迄今為止,這種研究方法是比較節(jié)省成本的,盡管您可能需要考慮向參與者提供少量獎勵,以感謝他們的時間和努力。
定量測試涉及對大量用戶進行研究。典型的測試包括卡片排序,樹形測試,點擊測試和超時測試。這些研究可能無法為您提供用戶做出某些決定的原因的答案,但是它們可以幫助確定點擊次數(shù),思維模型和完成任務比率的時間。
PART 03
一旦用戶測試有了結果,就可以對結果進行了。這可能需要一個漫長的過程,即整合意見,將見解歸類并提出新的改進建議。
研究建議可以幫助確定要解決的可用性問題和要關注的痛點,以及增強整體用戶體驗的機會。這就是 UX 流程的迭代。使用相同的原理進行設計優(yōu)化,然后進行測試,直到產(chǎn)品滿足用戶需求為止。
諾曼的原則可以幫助我們加深對用戶交互的理解,包括人們提出的問題類型、他們的認知過程以及情感水平。如耐克網(wǎng)站的案例研究所示,這七個基本設計原則可以幫助我們確定問題的答案,并找到影響積極情緒(如愉悅感)的方法。
但是,設計原則實際上只是UX過程的開始。為了確定產(chǎn)品的體驗質(zhì)量,我們需要與真實的用戶一起測試設計,然后使用洞察力進行必要的迭代。
以上內(nèi)容源于 Don Norman 的暢銷書《日常事物的設計》。它是 30 多年前編寫的,但至今仍然對設計行業(yè)有著深遠的影響。當然,還有更多的原則可以采用,但是 Norman 的設計哲學可以作為我們在設計工作中遵循的 UX 基礎。
文章來源:站酷 作者:設計情報局
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
前言
在企業(yè)工作中,每一個問卷調(diào)研都始于一個商業(yè)問題,問卷的質(zhì)量也決定了最終結果是否能對業(yè)務起到幫助。本文將從定義問題-問卷設計-數(shù)據(jù)清洗與分析-報告撰寫這四個基本步驟相對完整地闡述企業(yè)問卷調(diào)研,希望可以給大家提供一些研究方法上的思路。
定義問題:情境分析法(SCQA)
在商業(yè)問題解決的過程中,既有公司內(nèi)部的因素,也有外部行業(yè)的因素,影響因素錯綜復雜;周圍的環(huán)境也比較容易發(fā)生變化,具有很大的不確定性;同時又要保證解決方法的可落地性,產(chǎn)生實際的價值。相對來說,會比較復雜。在進行問卷設計之前,更有必要的是將問題梳理清楚,再決定是否采用問卷這種方式。
1.1 結構化思考:使用SCQA描述項目
SCQA是將不確定性考慮在內(nèi),一種結構化的問題分析方法,可以比較好地系統(tǒng)思考、查漏補缺。它包含四個環(huán)節(jié):
情境(Situation):由大家都熟悉的現(xiàn)狀或事實作為起點,包含對象、所處階段等
沖突(Complication):實際情況往往和我們的目標有沖突,顛覆了穩(wěn)定的狀態(tài)。說出行動的原因,包含威脅、機會和等著我們?nèi)タ朔睦щy點
問題(Question):基于沖突提出問題,要怎么解決這個困難點
回答(Answer):我們的解決方案是什么,定位出需求點
1.2 如何洞悉情境和沖突:搞清楚為什么做調(diào)研
假設我們拿到上述案例作為調(diào)研項目,可以有兩種方式去進行洞悉情境和沖突:
一是思考為什么要做這個研究;二是跟相關利益者訪談盡可能多地獲取信息。
1)思考為什么要做這個研究:
- 需要回答什么問題?
- 為什么回答這些問題很重要?
- 打算如何使用最終的調(diào)研結果?
2)跟相關利益者訪談:
- 核心業(yè)務方是誰?其他業(yè)務方是?
- 每個業(yè)務方的關注點是什么?難點是什么?
- 各個相關方的目標之間是否沖突,是什么沖突?
根據(jù)上述方法,可以得到對應的情境和沖突:
情境:目前有三種產(chǎn)品方案A/B/C,分別對應的價格為100元/1000元/10000元。通過上述思考和信息了解,會知道這個事情和誰有關,在這個事件中承擔什么角色。
沖突:B的銷量不佳,跟其他方案差異不明顯,瞄準客群很有可能有重疊,未成交客戶難轉化,希望可以方案B進行調(diào)整。在用戶層,可能其他方案中的功能能滿足需求,不需要購買方案B;在公司層,整體收入結構可以更優(yōu)化、健康;在業(yè)務層,系統(tǒng)和流程可能不太合理,有些可能需要重構。
1.3 問題拆解其實是建立一個假說/邏輯樹的過程
我們可以將問題進行拆解,拆解應遵循MECE原則(相互獨立且完全窮盡),這么做的好處是可以把問題進行逐層分解,逐級分析,最大可能保證需要考慮的因素全面不遺漏。
案例中的問題,可以從用戶方面、競品方面、成本/利潤方面進行拆解,針對每一個層面的問題又可以進行拆分。
對問題進行細致拆分之后,針對每個問題有不同的解決方案,有一些問題可以用問卷來解決,有一些問題需要使用其他方式進行解答。
問卷并不能解答所有問題~~
問卷設計
2.1 問卷的用途:定量為主
一般通過問卷來進行大樣本的數(shù)據(jù)收集,主要以用戶的基礎數(shù)據(jù)、行為數(shù)據(jù)和態(tài)度數(shù)據(jù)為主,既可以作為獨立的調(diào)研項目,可以跟其他方式進行結合,比如說結合訪談、結合企業(yè)內(nèi)部的數(shù)據(jù),本文比較推薦的方式是多種方式結合進行交叉驗證,提升調(diào)研結果的可靠性。
2.2 問卷設計的原則
基于第一部分的定義問題階段,已經(jīng)對問題進行了分析,在此基礎之上,我們需要確定哪些問題可以由問卷進行解答,并明確問卷的研究目標與參與對象。特別地:利益相關方(項目組成員間)在項目前期應該達成統(tǒng)一,避免后續(xù)產(chǎn)生分歧,付出額外的溝通成本不說,還有可能相互甩鍋。
2.3 問卷的基本結構
一份問卷的基本結構包含標題、招募語、甄別題、主問卷、用戶基本特征、結束語。
2.4有邏輯的設計問題
一份有效的問卷需要從如何提問、如何措辭、如何設置答題邏輯、如何設置題目選項這些方面去考慮,設置有效的問題。以下是問卷設計中的一些基本原則:
2.5 提升回復率的tips
個性化:在說明信件/郵件或郵件開頭注明回復者的名字、研究活動的目的、所需時間。向回復者強調(diào)他們反饋信息的重要性。需要注意的是,這里出現(xiàn)信息錯誤,會降低回復率。
控制篇幅:問卷完成時間不要超過10分鐘,注意控制問題數(shù)量,避免出現(xiàn)需要大量思考、較難回復的題型。
用戶激勵:獎勵參與者油卡/現(xiàn)金紅包/優(yōu)惠券等,昂貴的激勵物沒有特別顯著提高回復率,所以小的激勵就可以。
數(shù)據(jù)清洗與分析
3.1 數(shù)據(jù)清洗原則
剔除有效范圍外的數(shù)據(jù):排除異常作答時間值(比如作答時間為10秒),判斷為作答不認真。可以根據(jù)題項來確定,一般10道題設置篩選出60秒之內(nèi)的問卷。
剔除連續(xù)重復值:在時間范圍內(nèi),再核查問卷是否出現(xiàn)連續(xù)重復值,出現(xiàn)的問卷予以刪除。如果問卷數(shù)量較大,可以使用STATA軟件編碼或Excel條件函數(shù)判斷進行處理。
剔除違背邏輯一致性的數(shù)據(jù):在時間范圍內(nèi),核查問卷是否存在前后邏輯不一致的題,比如總體滿意度打分為非常滿意,但后續(xù)題目都選擇了非常不滿意。
剔除有缺失值的數(shù)據(jù):嚴格來說應該將有缺失值的用戶予以刪除,但有時候回收樣本量沒有那么大,則可保留。
3.2 數(shù)據(jù)分析方法
數(shù)據(jù)分析方法有非常多,要在眾多的分析方法中選擇一種也是比較難的事,無論選擇什么樣高大上的方法都是其次,最重要的是選擇的分析方法能說明問題,能體現(xiàn)數(shù)據(jù)的價值。
比較分析是一個簡單的、比較通用的、易于理解的數(shù)據(jù)分析方法,可以分成趨勢分析、特征重要性、分組分析三種。
報告撰寫
最后,條理清晰地展現(xiàn)數(shù)據(jù)信息,表達你的觀點。報告寫作的過程是一個相對費勁的過程,特別是數(shù)據(jù)量多的情況下,總是覺得還有一些數(shù)據(jù)價值沒有被挖掘出來,但此時不要拘泥細節(jié),細節(jié)可以回頭再補,會大大提升效率。
4.1 問卷的報告框架
報告主要發(fā)現(xiàn):將總結放在最前面,閱讀者可以通過簡短的總結大致了解報告觀點,方便他們決定是否需要繼續(xù)了解詳細內(nèi)容
目錄和分目錄:報告包含的內(nèi)容組成部分,讓閱讀者對報告內(nèi)容有初步概覽
調(diào)研背景和目的:陳述整個報告的背景和目的,對調(diào)研的范圍進行必要說明
單頁-詳細內(nèi)容描述:有邏輯的描述項目的發(fā)現(xiàn),總結數(shù)據(jù)表現(xiàn),挖掘價值
單頁-詳細內(nèi)容描述示例:
問卷調(diào)研不止是問卷本身,還包括前期項目組溝通、項目成員分工與配合、后續(xù)結果推廣、結果推動落地等,前期做好項目組溝通、明確項目分工,建立一個清晰的運行機制,有利于項目組成員對結果的認同,后續(xù)也有清晰的路徑去分工解決問題。所以,每一個環(huán)節(jié)都體現(xiàn)工作的價值,都同樣重要。希望大家在關注研究方法提升的同時,也可以更多關注更多工作方法提升。
文章來源:站酷 作者:酷家樂UED
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
當公司的發(fā)展規(guī)模到一定程度時,考慮到信息安全、持續(xù)采購成本與相關風險,企業(yè)會采取自研的方式來實現(xiàn)部分協(xié)同工作軟件的自產(chǎn)與自用,本文將以內(nèi)部目標管理系統(tǒng)為例,闡述我們是如何系統(tǒng)化的做企業(yè)系統(tǒng)設計改版?
什么是OKR?
OKR,是Objectives 和Key Results 的縮寫,即目標和關鍵結果,它是企業(yè)進行目標制定和過程管理的重要手段。酷家樂同樣采取OKR的管理方法,將公司目標層層分解到團隊,部門再到個人,在各個層面貫穿和統(tǒng)一起來,以幫助實現(xiàn)目標達成。
理清業(yè)務目標,制定設計策略,是系統(tǒng)性改版產(chǎn)品的前提,在實際工作中設計師很容易被產(chǎn)品的原型、對產(chǎn)品的描述蒙蔽,只有非常清楚的理清業(yè)務的目標,才能制定系統(tǒng)性、合理的設計策略來支撐業(yè)務,通過專業(yè)的設計方法來助力業(yè)務結果的達成,在這個項目中我們是如何做的呢?
OKR系統(tǒng)的改版項目最開始是高層的訴求,提的業(yè)務要求很簡單“ 讓大家用起來,目標管理起來”,那么如何讓大家用起來、利用系統(tǒng)將目標管理起來是當前需要解決的的問題。
以一個普通員工【小何】為例,在OKR系統(tǒng)中進行OKR制定時,通常需要與多個角色產(chǎn)生關聯(lián):
③結束回顧,包含查看、追溯、復盤
(1) 清晰的頁面結構:
讓用戶能明確的感知到系統(tǒng)的整體結構是有規(guī)律的,可以簡單被理解的,即左邊全局控制,右邊內(nèi)容展示
我們把消息類型通過兩個維度定義消息的優(yōu)先級:“重要性”和“緊急度”,通過四象限法則,我們拆出來了:
通過此模型和產(chǎn)品確定了每一個消息類型的所在位置,且清晰表達的了每個消息應當?shù)奈恢?
在設計的過程中,為了進一步的驗證設計合理性和易用性,針對角色代表進行了8組可用性測試,最終普遍反饋新版的操作體驗更好。
落地追蹤,拿到結果
文章來源:站酷 作者:酷家樂UED
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
你是否有在聽別人說某某原理法則時一臉懵B的時候?明明知道這個原理卻說不出它的名字?不要緊,本文就來介紹與人機交互設計相關的15個常見的設計心理學原理,約13000字,幫助你了解產(chǎn)品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設計予以理論支撐。
1956年美國科學家米勒對人類短時間記憶能力進行了研究,他注意到年輕人的記憶廣度為5-9個單位,就是7±2法則。與席克定律類似,神奇數(shù)字 7±2 法則也經(jīng)常被應用在移動應用交互設計上。
因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛,例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號、身份證號,我們總是喜歡把一長串數(shù)字拆分開來讀寫,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。
Web導航欄選項卡數(shù)量不超過9個
在設計網(wǎng)頁導航時,如果希望用戶記住導航區(qū)域的內(nèi)容或者一個路徑的順序,那么數(shù)量應該控制在7個左右(不超過9個),如蘋果、Dribbble、behance等網(wǎng)站的導航分類。
Web導航欄選項卡數(shù)量過多時
如果導航或選項卡內(nèi)容很多,可以用一個樹狀層級結構來展示各級別關系,但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和Dribbble,把更多子類別收在二級目錄里。
移動端選項卡導航
在移動端應用設計中,常見的電商app例如奈雪和樂凱撒分類模塊,兩個產(chǎn)品的商品分類布局形式很相似,都是用了選項卡的方式來分類商品,層級明確,相應的提升了用戶找尋單品的效率。
Tabbar區(qū)標簽最多不超過5個
在移動應用設計中,底部Tabbar最少3個,最多為5個(幾乎沒幾個超過5個),這樣做除了減輕用戶記憶負擔,超過5個會降低視覺和操作上的體驗。事實上就算只有4個,我們也經(jīng)常想不起微信底部的4個Tab分別是啥。
頂部導航欄頁簽
我們看到的大部分app頂部導航欄的頁簽數(shù)量都嚴格遵循了7±2法則,雖然在橫軸可無限滑動,
但在顯示區(qū)域只保持7±2法則的顯示數(shù)量,例如馬蜂窩、飛豬旅行等。
金剛區(qū)圖標不超過8個
我們常說的“八大金剛”就是一屏顯示8個圖標,超過的則放在第二屏。如果兩行10個,往往第十個是“更多”入口,總的來說也沒超過9個。
banner文案不超過9個字
產(chǎn)品運營banner主文案字數(shù)通??刂圃?個字以內(nèi),在設計時也通常把長標題一分為二排兩行,便于用戶快速閱讀,提升點擊率。
在交互設計中,7±2法則是減少用戶認知負荷,提升用戶體驗的重要環(huán)節(jié)。同時還強調(diào)了在設計過程中對產(chǎn)品的預見性,避免在不斷為產(chǎn)品添加功能時,破壞原有的視覺基礎。
0無需說明書
喬布斯曾說過:“蘋果應該創(chuàng)造所有人都可以使用的產(chǎn)品,即使沒有用戶指南”。
1 一看就會
簡單易懂,看一眼就明白你想說什么,不用教學就知道怎么用。
2秒法則
所謂“2秒法則”,是指用戶在使用某類系統(tǒng)時的等待時長不超過2秒。在極短的時間內(nèi)展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達,也許有一點隨意,但是這卻是一個合理的數(shù)量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長,達到快速瀏覽的目的。
進入App的首頁加載時間如果過長就會導致用戶產(chǎn)生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。
下拉刷新也是一個設計點,為避免刷新時間過長,設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情,無形中降低了用戶對等待時間的感知。
APP里面的banner設計要有視覺沖擊力,如果兩秒之內(nèi)沒有抓住用戶的眼球,可能就被用戶忽略了。
因此,在設計互聯(lián)網(wǎng)產(chǎn)品的頁面時,用戶等待的時間越短,用戶體驗越佳。反之,就會讓用戶產(chǎn)生焦慮的情緒。
3次點擊法則
用戶在3次點擊之內(nèi)如果還沒有找到他們想要的信息或了解網(wǎng)站特色,他們就會離開該網(wǎng)站。這條原則突出了清晰的導航,符合邏輯的結構和易于理解的網(wǎng)站層級的重要性。(來自《眾妙之門》P133)
其實在交互體驗中,點擊的次數(shù)往往是無關緊要的。只要每次點擊都是無需思考的,毫不費力地順勢進行,那么用戶的挫敗感就會大大降低。如果你的網(wǎng)站能夠讓用戶知道他在哪里,從哪里來,要到哪里去,并且能夠讓用戶了解如何完成目標,這樣的點擊即使有10次也是沒有問題的。例如,在京東購買一件商品需要經(jīng)過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買,這過程中可能還穿插其他的點擊行為(比如選擇地址、優(yōu)惠券),用戶并沒有感受到不方便,使用過程流暢而自然。
在可用性測試領域,“三次點擊”定律一直是一個很具爭議內(nèi)容。體現(xiàn)在以下幾點:
·研究表明,用戶在超過3次點擊還沒到達想去的頁面時,往往并沒有退出網(wǎng)站,而是會繼續(xù)多點幾次;
·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發(fā)現(xiàn)目標頁面的能力反而提升了600%;
·合理的導航系統(tǒng)比點擊次數(shù)更重要;
·比起“3次點擊”,有人提出了“1次點擊”定律,即用戶的每一次點擊都應該讓他們更接近目標,同時盡量減少能干擾實現(xiàn)這一目標的因素;
·用戶抱怨要花很長時間才能找到某個產(chǎn)品,實際上他們是在抱怨無法找到想要的東西,如果用戶找到了想要的東西,他們就不會抱怨點擊的次數(shù)了;
英國心理學家William Edmund Hick認為,在簡單的判斷場景中:一個人所面臨的選擇越多,做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。
生活中我們也經(jīng)常會面臨選擇困難癥,比如早上起床就糾結今天穿什么?中午去食堂就會糾結吃什么?造成我們?nèi)绱思m結的原因就是因為選擇太多了(遠古人就沒這些煩惱,尋找食物時逮著什么就吃什么)。
在設計中的應用
應用到界面設計中也是如此,選項越多,意味著用戶做出決策的時間越長。
例如APP Store首頁,改版前的首頁把眾多app平鋪出來,對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數(shù)量,卡片的設計方式簡潔且目標清晰。
不得不面對較多選項時, 對主要和次要的選項做視覺權重區(qū)分,做好設計上的歸類,提升用戶做決定的效率。例如美團外賣金剛區(qū)第一行5個入口的圖標在尺寸和表現(xiàn)手法上都比下面的入口圖標要大更醒目。“我的”頁面把一些低頻率功能或不太重要的功能收納到“設置”里,此外還可以通過置灰、鎖定等方法間接減少選項,降低干擾。
對于多流程的任務進行分步操作,讓用戶專注眼前任務。 例如Clubhouse注冊時,把需要用戶選擇的選項分步引導完成,讓用戶能專注當前行為。
對于多種類別的選項應當做二次分類的區(qū)分,我們都知道電商平臺的品類繁多,僅通過單一分類是不夠的,比如數(shù)碼頻道下面還分相機、影音娛樂、數(shù)碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的,所以分類不怕多,就怕混亂。
適用邊界
雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導致負面效果。
如上圖右,如果在刪除App的彈窗中只有一個“刪除”選項,沒有明顯的取消之類的途徑,那么用戶會覺得特別難受,感覺被強迫去刪除。如果當下有急需使用手機處理一些事情,那么這樣會把這種負面情緒給無限放大,讓用戶抓狂。
??硕芍饕苡绊懹谶x項的多少,但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項(學渣竊喜),那也太容易蒙了,這就是??硕稍诖鸢冈囶}中的局限性。
??硕墒且粋€可以適用于設計的指南,記住要盡量減少用戶在一次決策中要做的選項,因為決策效率是一個產(chǎn)品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇,以便快速將他們送到某個地方(例如賬單支付),這將大大提升用戶體驗并達到你的目標。
費茨定律由心理學家Paul Fitts提出,用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動,接著你會放慢速度直至找到杯子把手,這個杯子把手的大小與你“抓住”它有著一定的關系。
如上圖所示,如果光標現(xiàn)在在任易地點想要去點擊目標target,最短路徑一定是D,最短路徑上容錯的最長路徑是D+W,只要水平上移動超過了D+W你就點不到了,而這個點擊動作所耗的時間是一個常數(shù)加上一個以D為正比W為反比的函數(shù)的和。
詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。
相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。
但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。
按鈕越大越容易點擊
在頁面中,大而近的目標區(qū)域意味著用戶不需要做太精細的調(diào)整就可以輕易的觸達目標。比如頁面中的大按鈕。
將按鈕放置在離開始點較近的地方
夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域,相比常見頂部搜索欄更方便操作,效率更高。
相關按鈕之間距離近點更易于點擊
注冊登錄界面,通常將「注冊」和「登錄」放到一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 。
適用邊界
費茨定律鼓勵減少距離,增加目標大小以提升用戶效率,但反過來亦適用。比如iPhone關機按鈕,沒有使用點擊關閉,而采用滑動操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進而避免了用戶誤操作。
App彈窗經(jīng)常把“關閉”按鈕放在卡片的右上角離手遠的地方,希望用戶先完成彈窗提示的任務。還有啟動頁廣告,喜歡把“跳過”按鈕放在難以點擊的右上角(恰飯重要),以提高用戶的誤觸機率提高轉化。
思考小結
按鈕越大越容易點擊,因此在程序開發(fā)中,會增加按鈕點擊的熱區(qū)范圍,減輕用戶精準點擊的壓力。但也不能過分的大,容易引起誤觸;
讓相關聯(lián)的內(nèi)容更靠近彼此,用視覺手法增強用戶對它們相關性的認知。距離產(chǎn)生美,注意不要靠的太近,會出事;
將按鈕放置在離出發(fā)點較近的地方,比如頁面主按鈕一般會放在屏幕底部易操作區(qū)域;
屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調(diào)”,參見macOS底部dock欄;
定律的反向使用可以適用一些特殊場景,比如想達到某種目的而降低按鈕被點擊的可能;
“任何事物都具有其固有的復雜性,無法簡化”。
泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復雜度守恒定律」。
該定律認為:每一個過程都有其固有的復雜性,存在一個臨界點,超過了這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。
生活中很多我們習以為常,感覺便捷方便的生活方式,是無數(shù)卓越的數(shù)學家、工程師、設計師等無數(shù)的時間投入,才實現(xiàn)的某個小功能,是他們把這些復雜性轉移到自己身上替我們簡化了。
說回移動端,每個應用中都有其無法簡化的復雜度,也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看,而一搬到線上就面目全非。常見的復雜性轉移有:“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉,比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中,把用戶的操作范圍轉移到另一個地方。
除此之外,還有一些降低操作復雜度的方法:
刪除、組織、隱藏
視覺層面的“降噪”方法,刪除會干擾用戶操作的選項;功能分類明確,圍繞用戶行為組織信息內(nèi)容;隱藏那些不常用而又不能少的功能,延遲及階段性展示。總的來說就是將復雜的信息收起來,展示重要且簡潔的界面。
簡化交互設計
可以用代碼節(jié)省用戶操作時間的地方,是互聯(lián)網(wǎng)人一致的追求。例如,B站的一鍵三連,用戶長按點贊按鈕,會同時觸發(fā)點贊、投幣和收藏,省時省力。
算法解放“生產(chǎn)力”
個性化算法就是通過技術手段,將用戶復雜度降低,而轉移到開發(fā)者身上。抖音為什么會讓人上癮?是算法知道了你的喜好,專推給你喜歡的內(nèi)容而不用自己去找,誰都喜歡私人定制。這對用戶來說是一件好事,但就像魯迅說的:“你覺得好,一定是有人在負重前行”,這里的簡化復雜的難度就轉移到設計和開發(fā)身上了,還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。
我們常說以用戶為中心去設計,就需要從用戶角度出發(fā),在交互設計中盡量簡化操作的復雜度,降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說:“任何事物都具有其固有的復雜性,無法簡化”。因此,如何取得復雜度的“平衡點”就是重要的部分,是讓工程師及設計師花費大量時間去降低產(chǎn)品的使用難度,還是在設計中保留一定的復雜度是我們需要思考的事。
該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論,她強調(diào)結論先行,論點自上而下。
你是否遇到過這樣的場景,部門開會時有人口若懸河的講了半天,到最后你都不知道他想說什么。所以如果開會時你會走神,這不怪你,只怪講演者說話沒有邏輯,沒有重點。
金字塔原理指示結構化表達遵循結論先行的原則,即任何問題都能歸納出一個中心點,讓受眾能夠第一時間清楚你想談論的主題。然后由數(shù)個論據(jù)作支撐,而這些一級論據(jù)可以繼續(xù)由數(shù)個二級論據(jù)支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。
應用到交互設計上,即將信息展示的重點與交互行為的主任務優(yōu)先展示,再根據(jù)用戶在這個界面上所愿意停留時間逐級給予更多細節(jié)補充。以京東的商品詳情頁為例,首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕,其次是商品的頭圖和用戶評價這些,讓用戶了解更多信息,進一步促成購買,最后一層是提供商品相關的全部信息、參數(shù)、評分等,確保交易的最終完成。在這個過程中,用戶在每一層花的時間也在逐級增加,呈金字塔狀。
映射到設計師身上也是如此,從設計新人到設計總監(jiān),中間差的就是一個完整的設計技能金字塔。就像升級打怪,每完成一項任務獲得相應的經(jīng)驗值,累積的經(jīng)驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后,你的設計水平會在不知不覺中更加精進,形成一套自己的設計風格,成為一名優(yōu)秀的設計師。
有趣的是,把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下,激勵用戶成長。它告訴我們:
用戶的需求是永遠滿足不完的,所以什么值得做,什么是可分階段去實現(xiàn)的是決策人需要明白的。如喬布斯所說:“消費者并不知道自己需要什么,直到我們拿出自己的產(chǎn)品,他們就發(fā)現(xiàn),這是我要的東西”;
不斷完善主要功能,以滿足金字塔頂?shù)暮诵挠脩羧?。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個廣告位;
如何優(yōu)化完善產(chǎn)品架構,檢驗產(chǎn)品策略的合理性和完整性;
防錯原則由世界著名的品質(zhì)管理專家新鄉(xiāng)重夫提出,即在過程失誤發(fā)生之前加以防止,是一種在作業(yè)過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。
防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,可以通過優(yōu)化設計把過失降到最低。該原則最初用于工業(yè)管理,后來應用于界面交互設計中,當使用條件沒有滿足時,常常通過功能失效來表示。
自動檢測提示
bilibili在登錄時輸入框沒有內(nèi)容或沒有輸密碼時,登錄按鈕處于禁用的置灰狀態(tài),只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網(wǎng)絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。
Twitter發(fā)帖時只允許用戶輸入140個字,為了提醒用戶,其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符,超過會以負數(shù)警示。知乎發(fā)布文章標題過長時也會提示錯誤預警。
消除可能的失誤
防錯法則認為大部分的出錯都是產(chǎn)品設計的不夠優(yōu)秀,而不該責怪用戶操作疏忽,通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是,如何有效的在用戶出錯之前就盡量避免錯誤的發(fā)生。比如,美團外賣在接受短信驗證碼時,系統(tǒng)會自動提取驗證碼在鍵盤上方顯示,用戶點一下就可以自動填寫,省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程,有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號,避免手動輸入的出錯率。
將失誤降至最低
二次確認,在一些比較重要的場景讓用戶二次確認,通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果,進一步降低出錯率。例如,最近大家都在用的報稅App,會在提交信息前再次確認。
視覺暗示
可在視覺(置灰或隱藏)上屏蔽那些不能選的選項,避免用戶點擊后才報錯或點擊沒反應。
其次,一些不可恢復的操作,視覺上通常會給強標識。例如,刪除短信時的文字顏色“變紅”。
為用戶犯的錯買單
當用戶輸入錯誤信息時,比如打錯字,系統(tǒng)應該給予用戶想要的信息,而不是無動于衷,冷漠視之。
范圍限制
其實限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。例如,Airbnb訂房可選日期和設置鬧鐘時的時間范圍。
研究得出,使用產(chǎn)品時有77.7%的錯誤都是人為的,防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案,做到操作前、中、后都有及時的反饋,預測到他們有可能發(fā)生的誤操作狀態(tài),讓用戶更快完成目標,幫助用戶減少出錯率。
每次拿起U盤插入電腦時,我就呆住了,到底朝那個方向才是對的?
防呆(Fool-proofing)是一種預防矯正的行為約束手段,運用避免產(chǎn)生錯誤的限制方法,使出錯的機會降至最低,進而達到“第一次就把工作做對”之境界。
設計師應謹記:不要認為用戶是專家。比如,我們都知道“漢堡”圖標就是菜單,點擊這個按鈕就會調(diào)出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App,在他們眼中產(chǎn)品只是眾多工具中的一個。因此,一定要把交互和設計做的簡單,通用的圖標、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復學習的負擔。每個頁面應強調(diào)一個重要的功能而不應該讓用戶做選擇題,這些都是有效防呆的好方法。
△頁面的中主按鈕更突出
防呆設計是預防錯誤發(fā)生的方法,讓非專業(yè)、無經(jīng)驗的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時時為用戶思考。
又被稱作“簡單有效原理”:“如無必要,勿增實體?!?
通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情?!被蛘弑硎鰹椤霸谄渌麠l件相同的情況下,要求得越少的那個就越好,越有價值”。
應用到設計學領域,該法則認為做產(chǎn)品時功能上不可過于繁瑣,應該保證簡潔和工具化。例如,產(chǎn)品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設計元素會導致使用效率降低,還會增加不可預知的后果。建議在不損及功能的前提下,干掉多余的元素,當兩個設計方案都能達到設計目的時,選擇較為簡單的那一個有利于更好地傳達內(nèi)容更好地用戶體驗。
總的來說,我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。
刪除:關注核心,讓用戶注意力集中在自己要完成的目標上,刪除不必要的功能、流程和造成視覺混亂的元素等;
組織:繁瑣的功能通過分塊,被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎,把項組織到7加減2個塊中;分塊越少,選擇越少,用戶負擔約輕;
隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過漸進展示和適時出現(xiàn)的方法減少干擾;
轉移:把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提,就是先搞清楚把什么工作交給計算機,把什么工作留給用戶。
小測試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。
可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達
雷斯托夫效應又稱隔離效應(isolation effect),以及新奇效應(novelty effect),前蘇聯(lián)心理學家馮·雷斯托夫認為,某個元素越是違反常理,就越引人注意,收到更多的關注。
一樣東西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。比如人生中的很多第一次,第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現(xiàn)在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。
該理論以多種不同的方式應用到設計中,最明顯的就是如果想要突出某個重點內(nèi)容,就要使它特殊化,通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區(qū)、tab欄的運營活動廣告,特殊化的設計讓它們在背景中脫穎而出。
個人中心的會員卡為了吸引用戶注意,增加開通率,都成了重點設計對象。
與以往不同的界面設計可以更加的吸引用戶,加深用戶的記憶,同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。
Google doodle 會在一些比較特殊的日子改變 logo 的設計,把logo設計成與這個日子相關的插畫或涂鴉,與平時的 logo 形成差異化,幫助人們更好地記住這個日子。
因此我們在界面設計中,若想讓用戶對哪個模塊或者是元素引起注意或點擊,就可以打破常規(guī)對該元素進行強調(diào)設計,使他在背景中脫穎而出。但是不要任何元素都強調(diào),因為什么都強調(diào)就等于什么都沒強調(diào),就沒有重點,所以要謹慎使用這個方法。
回到開篇的題目,答案是「嶗山可樂」。相比其他飲料,嶗山可樂遇到的少,反而成了最特別的一個了。你的答案是什么?歡迎在下方留言探討。
食之無味,棄之可惜
損失厭惡是指人們面對同樣數(shù)量的收益和損失時,認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感,也就是說要至少撿到300塊才能平復之前的心情。
生活中類似的栗子還有很多,比如旅游時,雖然這個景點很爛,人們依然覺得來都來了,還是要看完再走才“不虧”;吃自助餐時,明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應了那句話:“食之無味,棄之可惜”;花了50塊買了張電影票,過了10分鐘發(fā)現(xiàn)是部爛片,就算在電影院睡覺也不愿提前走,覺得這50塊錢不能白花...
那么,該如何將“損失厭惡”賦能給產(chǎn)品設計呢?
最典型的莫過于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現(xiàn)在不買就會錯過的套路,用戶也會覺得失之可惜。一年一度的天貓雙11,京東618,還有情人節(jié)、中秋節(jié)等各種有的沒的節(jié)日都是商家利用“損失厭惡”心理為基礎刺激消費。
我們App的用戶粘性不太理想,增加一個“簽到”功能吧,產(chǎn)品經(jīng)理如是說。如是我們看到各種簽到得禮品,贏紅包等活動。中間還不能中斷,要連續(xù)簽到多少天才能得到獎勵,用戶也擔心中斷的損失。
某網(wǎng)盤下載文件時,會給你一個10秒VIP高速下載的體驗,計時過后又恢復到龜速,讓你恨的牙癢癢。雖然這招有點損,但用戶體驗到了VIP的快感,很多人還是會乖乖成為付費會員。
產(chǎn)品運營中會經(jīng)常發(fā)一些優(yōu)惠券,雖然知道自己不會用,也要先領了再說。這些券也都有時間限制,快過期的提醒也會加快用戶決策。還有0元開通會員,套路是第一個月免費,次月開始按正常價自動續(xù)費,典型的“騙”進來養(yǎng)肥了再“殺”。
人天生會對危險的,不好的東西避而遠之。如是我們就看到保險行業(yè),他們會用一些負面信息(空難、車禍)刺激你,用戶就會產(chǎn)生焦慮,自然就想規(guī)避掉這些概率小的風險。例如購買機票時的意外險,QQ退出登錄時的提示。
還有就是有用戶自己的內(nèi)容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉移過去也是件很心累的事,太麻煩,還是繼續(xù)用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。
用戶會將大部分時間花在其它網(wǎng)站上,因此他們會希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣,擁有相同的使用模式和習慣。
Jakob定律是由Jakob Nielsen提出的,他認為用戶在其他網(wǎng)站所積累的經(jīng)驗教會了他們?nèi)绾问褂镁W(wǎng)站,所以他們會希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣,相似的使用方式,在使用你的產(chǎn)品、服務、內(nèi)容和信息的時候,他們不會感到恐慌,而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式,以避免混淆用戶或?qū)е赂叩恼J知成本。
例如YouTube2017年改版前后的對比,在新版中,網(wǎng)站框架和功能上幾乎沒動,只是在UI上做了順應新的設計準則,比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒太大區(qū)別,而且還給用戶提供了舊版的選擇。
在移動端App中也應如此,在具有相同功能的頁面,盡量保持一致。大到頁面底層框架(比如電商應用中的購物流程),小到UI設計中的一個按鈕,一個圖標,甚至一句微文案。
在設計產(chǎn)品時,要先延續(xù)大眾早已習慣的概念模型。然后再從自己的產(chǎn)品出發(fā),對其進行改善。而不是從零開始制定自以為是的流程。
日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調(diào)整等功能都放在底部操作區(qū)域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學習成本提升使用效率。
也許你會質(zhì)疑當所有產(chǎn)品都遵循相同都設計模式,會讓產(chǎn)品同質(zhì)化嚴重,答案是必然的。此時需要深入了解用戶的目標和心智模型(用戶訪談、用戶畫像、用戶體驗地圖等),并將其應用到我們的產(chǎn)品設計中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗。上文YouTube例子中,就是通過簡單的用戶授權(新舊版本選擇),避免了心智模型的不一致會帶來的問題,當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時,因為新的布局未能確保改版前后用戶心智模型的一致性,導致大量用戶流向競爭對手Instagram那里了。
但是也要注意設備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。
思考總結
1、用戶會把在其他產(chǎn)品使用中已熟悉的操作習慣轉移到另一個看起來相似的產(chǎn)品上;
2、利用現(xiàn)有的思維模型,使用戶可以專注于自己的目標上,而不是學習新的操作方式;
3、在進行必要的改版時,請給用戶過渡到新版本的機會,即可以選擇短時間內(nèi)繼續(xù)使用舊版本;
看名稱挺拗口,另一種翻譯叫做“對角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁面是由左上至右下的視線流,左上角是視覺第一落點區(qū),右下角是視覺最終落點區(qū),因此右上角和左下角都是一個強烈的視覺盲點區(qū),大多數(shù)時容易被忽略。
在進行信息排布時,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創(chuàng)建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對角線移動,符合用戶習慣性的眼動規(guī)律。
古騰堡圖表應用最典型的例子就是商品詳情頁,在界面的頂部展示商品圖片、名稱、價格、快遞和優(yōu)惠等用戶主要關心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購買按鈕。
我們都知道一般頁面按鈕都在界面底部是因為離手近,方便操作,但不僅僅如此。還因為瀏覽是用戶的第一行為,他們的視線會根據(jù)頁面元素進行移動,最終停留在底部結尾的地方。
看各種社交產(chǎn)品評論、點贊的位置,就知道產(chǎn)品希望用戶先干什么的想法。
彈窗的按鈕擺放一般都是左「取消」右「確認」,目的是讓用戶最快地看到主要操作內(nèi)容。
余額寶的「轉出」在左,「轉入」在右,畢竟誰也不想財往外流是吧。
既然如此,為什么“發(fā)布”頁面的按鈕都在右上角呢?因為發(fā)布頁是屬于“編輯頁面”,需要用戶謹慎操作,這里關注的核心應該是可編輯內(nèi)容區(qū)域,而不是按鈕本身。
類似的例子還有很多,設計中與此視覺流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局,合理運用這些節(jié)奏模式,使用者會跟隨你“設計”的視覺流和運動規(guī)律來瀏覽頁面,有效提高用戶閱讀的節(jié)奏和理解能力。
美國心理學家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動機的角度提出需求層次理論,該理論強調(diào)人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現(xiàn)需求,依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實現(xiàn)更高的需求和目標。
馬斯洛需求層次理論有兩個基本出發(fā)點,一是人人都有需求,某層需求滿足后,另一層需求才出現(xiàn);二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵作用。例如,在能感受到愛之前,他們的生理和安全需求一定要得到滿足。
回歸到產(chǎn)品,一款產(chǎn)品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產(chǎn)品的需求分析指明了方向。
生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用;
安全需求:人生安全、財產(chǎn)保險,也是強需求。如是各類投資理財軟件層出不窮。
社交需求:包括友情、親情、愛情多個層次,滿足人類社會關系,讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;
尊重需求:每個人都有被尊重的需求,都希望展現(xiàn)自己,獲得人們認可。此需求可以深度結合在社交需求中。
自我實現(xiàn):最高層級的需求,完成與自己的能力相稱的一切事情,實現(xiàn)自己理想的需要。結合到產(chǎn)品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。
由此規(guī)律可以看出,越靠近底層需求越是剛需,越往上,就變得越來越不必要,如自我實現(xiàn),變得可有可無,不再是所有人的剛需。一個優(yōu)秀的產(chǎn)品,深諳人性滿足用戶核心需求,才能形成持續(xù)穩(wěn)定高用戶粘性的產(chǎn)品。
序列效應法則又叫系列位置效應,是指一種記憶現(xiàn)象: 在列舉項目時,排在最前面與最后面的元素,要比排在中間的更容易讓人記住。
因為人們對排在頭、尾的項目,要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級里我們一般都知道成績最好的第一名和倒數(shù)第一名,至于排在中間的很難記住。因此對排在開頭的項目產(chǎn)生加強的回想效果,稱為“首位效應”( primacy effect)。對排在結尾的項目產(chǎn)生加強的回想效果,稱為“近因效應”( recency effect )。
分類頁簽中,我們通常都會記得“精選”、“熱門”這類標簽,是希望給用戶進入App后看到的主要內(nèi)容。這就是“首位效應”,把重要性高的內(nèi)容放在首要位置。
我們都知道界面中“返回”按鈕放在左上角,除了操作習慣和防誤觸外,還因為它出現(xiàn)在頁面左上角最開始的地方,更長久地儲存在長期記憶之中,需要“返回”時能夠快速回憶出來。
tabbar數(shù)量不管是3個還是5個,用戶通常都會記得第一個“首頁”和最后一個“我的”,對排在中間的都會選擇性的忽略掉。
有時候新上一個功能,產(chǎn)品想提高它的位置引起用戶注意,會和“我的”互換位置。例如網(wǎng)易云音樂,新版本中把“我的”放在第三個tab,為了提升“云村”重要性,把它放置最后一個tab,正是利用了“近因效應”。
近因效應常用于及時進行反饋的設計界面中,比如點贊、評論、分享等功能置于底部不僅可加深印象,同時用戶在看到有趣的內(nèi)容,想要評論或分享時,不用等到文章看完即可操作。從而增強內(nèi)容粘性,提高互動率。
用戶的記憶具有系列位置效應,而且人的短期記憶非常有限,通過序列效應法則的應用,我們可以幫助用戶減輕記憶負擔。在排列項目時,把重要的放在首位或末尾,以達到最好的記憶效果。
文章來源:站酷 作者:Fyin印跡
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.yvirxh.cn