從移動屏幕到大型電視,深色的UI界面隨處可見。深色模式可以表達力量、奢華、精致和優雅,但這種設計模式也會帶來很多挑戰,應用不當難免會被用戶吐槽。所以開始設計前,大家最好深色熟慮下,是否真的需要做深色。
物理學家說,黑色并不是一種真正的顏色,它沒有光。艾薩克·牛頓爵士在通過棱鏡照耀陽光的實驗中,甚至沒有將黑色包含在顏色光譜中。
在色彩心理學中,大多數色彩代表不同的人、不同的事物。西方文化里,黑色常與死亡、神秘和邪惡聯系在一起;綠色與生長、自然相關;藍色可以使人平靜,因為它讓人聯想到天空和水,所以,顏色是飽含情感的。其他影響還來自文化,例如紫色仍與奢侈品聯系在一起,在許多古代文化中,紫色是昂貴稀有的,只有貴族才能負擔得起。
深色界面的數字產品,是未來發展的一大趨勢。人們常說,這種模式可以減輕眼睛疲勞,但并沒有相關證據表明是真的。在某些情況下,它還代表著節省電池壽命,也是一種美學意義上的選擇。
并非所有界面都適合深色主題。設計師應考慮品牌契合度、文化適應性和顏色心理學,在選擇搭配時考慮情感影響,雖然這些因素不容易平衡。針對千禧一代的金融類應用程序,可能會用深色模式營造炫酷的效果,但對于以大眾作為目標人群的銀行網站就不太合適了。當用戶想要查看自己的余額與支付賬單時,太黑暗、太時髦都會顯得華麗不實用。
B2B SaaS應用程序的深色模式很難設計,標準的Web UI組件(例如數據表、窗口小部件、表單和下拉菜單)在深色界面中看起來可能很奇怪。由于許多配色方案不適用于深色界面,對于某些品牌和產品來說,深色模式并不是最優選擇。
從未接觸過深色模式的設計師,如果想要搭建一個深色界面,不妨參照以下條件,先來判斷下是否需要,什么情況下建議使用深色模式?
-當設計版面相對稀疏,極簡型的內容比較少時;
-適用于連貫呈現的內容,例如夜間娛樂應用程序;
-想要創造醒目的戲劇性外觀時。
以下這些情況下不建議使用深色模式:
-出現大量文本時(在深色背景上閱讀相對困難);
-當設計需要多種顏色時。
深色模式下的桌面應用信息中心 by Ramotion
深色模式并不非要設計成黑色的,你可以將它理解為是一種「低光」模式。設計的核心點之一,就是表達出足夠的對比度,這樣視覺元素就會被分離開,且文本也會變得清晰易讀。大多數設計師認為多用黑色,是獲得強烈對比度的最佳選擇。我的建議是,最好不要將純黑色(#000000)用于背景或者盡量少用,把它留給其他UI元素,比如較小的圖形或邊框性質類的圖形。
Google的Material Design深色模式,推薦使用深灰色(#121212)作為界面主色,目的是為了表達出更有深度的空間感。在定義配色方案時,往深灰中添加一些微妙的深藍色,可以讓數字產品的界面擁有更好的深色調性。
Brittany Chiang網站將深灰色與藍色融合,形成了令人愉悅的深色模式
使用灰色的優點在于,它給了設計師更多發揮的空間,去表達更廣泛的顏色?;疑{同深藍色有同樣功能,幫助畫面更有深度,也更輕松地看到元素陰影。
需要特別注意深色模式中的文本對比,網頁內容可訪問性指南(WCAG)要求——「文本的視覺呈現對比度,至少應為4.5:1」,大型文本的對比度至少在3:1。設計師需要確保文字內容在黑暗模式下能夠清晰可辨認。
另外,測試其他UI元素(例如卡片、按鈕、字段和各種顯示器上的圖標)之間的對比也是一個好辦法。如果UI元素之間沒有突出的對比,那么設計就需要調整下了,枯燥無味的設計對于用戶來說也是一種折磨。
左側的深色模式中,文本和背景之間的對比明顯不足
顏色在深色模式中非常突出,最好使用淺色、飽和度低的配色方案,避免過于刺激視覺。顏色與文本一起使用時,需要參照WCAG的AA標準,至少4.5:1。Google建議顏色數量不必太多,使界面都處于深色中。
Jabra Sound +應用程序只給深色模式配色選擇了2-3種顏色
適宜的配色方案能營造出非常好的對比效果。Colorable在線工具,只要輸入色號就能看到文本和背景色組合在一起是否合適;Google的Material Design網站上也有一個調色板生成器,設計師可以使用它創建調色板,應用到UI上。
文字和基本元素(例如按鈕和圖標)在深色背景上顯示時應符合易讀性標準。如上面的Jabra Sound +應用程序所示,文本和圖標可以使用白色以外的顏色進行搭配。
“使用強烈對比色來提高可讀性。人們對于顏色的感知會受到許多因素影響,包括字號、字重、顏色亮度、屏幕分辨率和照明條件。” ——Apple人機界面指南
深色模式并不需要大量顏色來堆砌
成功的深色模式設計,需要巧妙利用負空間。如果設計不當,會使數字產品顯得笨拙與沉重。為了平衡這一點,設計師可以利用極簡主義中的負空間,讓深色界面更輕巧,也能讓用戶更容易識別信息內容。
UI元素周圍的大量負空間使界面被重新定義,而且元素也不會出現密集與混亂感。如果沒有呼吸空間,用戶在閱讀界面時,可能很快的略過,因為大腦沒有快速的識別出重要內容。
充斥著太多元素和文本的界面,是導致深色模式體驗差的禍根。設計師需要仔細考慮深色模式中的視覺層次結構,從而提升用戶體驗。
極簡主義的深色模式界面 by Denys Tyrynskyi
深色模式中的每一段文字都需要仔細檢查,更需要關注2個方面——可讀性和對比性。首先,界面中的文本必須足夠大,以確保清晰易讀(深色背景上的小文字,閱讀起來體驗很差);其次,文本和背景之間必須有明顯的對比。設計師可以通過增加對比度,為較小的文本調整字體大小、字符間距和行高,去優化可讀性問題。
W3C AAA建議常規尺寸的文本(如果不是粗體,則小于18pt)的對比度至少應為7:1。這也適用于其他UI元素——圖標、文本圖像和文本標簽(按鈕標簽),設計師有責任確保所有人都能正確應用界面。
深色模式中應用優秀字體很有必要,像Google字體和字體庫,以及Adobe Typekit都能提供便捷的設計支持。
AirPods Pro頁面使用超大字體和強烈的對比,以達到最好的效果
深色模式不應該是平淡的,在正常明亮模式下,元素的高光或是陰影都會讓界面產生深度感。而深色界面更具挑戰性,建議設計師可以使用類似3-4多個層面,以及相應的配色方案來傳達深度感。
為什么要有深度?深度感是與物理世界的一種呼應。我們的視覺有深度感知的能力,因為人們是生活在3D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隱式光源,表面就越亮。一個非常亮的表面,更容易區分組件之間的高度,還有助于查看陰影,使每個表面的邊緣線更明顯。
表面越亮,越接近隱藏光源 by Material Design
設置每個級別的表面顏色需要小心,建議不要超過4或5個級別,最好在設計系統中將元素的文本顏色指定為純黑色(#000000),以在淺灰色背景上實現良好的對比度。
基于上述原則,以下是一些優秀的深色模式示例:
The Atom Finance website
Atom Finance利用深色模式打造了精致外觀,并將其強調色限制為3種。復雜的金融網站采用了極簡設計,而且很好地使用了陰影來表現不同組件的深度感。
電子商務網站 by Daniel Klopper
電子商務網站 by Darion Mitchell
IBM儀表板 by Ruben Fernandez
盡管處理SaaS的深色模式遇到了挑戰,但IBM的數據可視化儀表板仍是典范。強調色的數量最少,并且該網站使用細微的陰影顯示不同元素的深度。
Wego,Spotify和Apple的深色模式APP(Android和iOS)
使用深色模式固然好,但需要依據實際產品屬性來判斷,不應出于時髦、流行甚至是與眾不同或模仿他人等因素確定。設計者應有充分的選擇依據,并考慮其內容、使用環境以及顯示設備是否適合來最終敲定。
深色模式適用于一些數字產品,而非所有產品,界面簡潔非常關鍵。對于復雜且數據繁重的B2B平臺,以及文本繁多的頁面,深色模式都是不適合的。對于從情感和美學角度去探索深色模式的設計師來說,他們開辟了一個新的領域。
文章來源:站酷 作者:UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這 80 個問答將分為 7 篇,每天更新一篇:
資料主要來源于:
問: 微信的頁面設計很少改,那微信的設計師們每天在做什么呢?很閑嗎?
陸樹燊答: 張小龍評審微信的功能有一個習慣:不看原型圖,不看設計稿,也不看 Demo,要體驗前后臺代碼開發好后的產品。這就意味著:如果一個功能在給到用戶之前有過 N 個方案,則微信設計師已經設計了 N 個方案,前后端開發人員已經開發過 N 個版本的代碼。給張小龍體驗,然后 100 個需求能砍掉 70 個。其中 30 個再優化 N 次,才真正發布給用戶使用。
問: 對做微信的設計師有什么特別的要求嗎?
張小龍答: 在廣研(微信事業群前身)里面我們禁止使用競爭對手的產品,特別是 UI 設計師。因為大家知道,一旦你用了競爭對手的產品,你一定會受它的影響。你會覺得“哦,那樣做是最好的”,你會擺脫不了它的影子。之前我們也經常發生這樣的情況,UI 設計師一旦用了競爭對手的產品以后,設計里面就會不自覺地帶有對方的影子。所以后來我們干脆規定不允許使用競爭對手的產品。這個問題對我們公司來說其實蠻嚴重的,有很多時候可能我們覺得只是借鑒一下,但是一旦借鑒就會受到影響。所以最直接的方法就是禁止使用。希望大家所在的團隊也可以嘗試使用這個方法。這個方法不會讓大家損失任何東西。
但我們要了解競爭對手怎么辦?我們可以讓產品經理去體驗競品,讓產品經理總結哪些體驗是挺好的,UI 設計師知道這些體驗是很好的,但是 UI 設計師要自己想辦法去實現好的體驗,而不是被對手所牽制和影響。
問: 對于微信來說,最關注的體驗是什么?
張小龍答: 操作的響應速度永遠是第一體驗。我們在做郵箱時思考:對于一個好產品來說,可能需要滿足幾個要求,比如“切入要準”“功能設計得要好”。但我們把速度這項單獨列出來,就是“速度一定要快”,這個速度是指系統響應的速度。
我們回顧 QQ 郵箱能做起來,有兩點是最重要的:第一是簡單;第二是速度快。簡單和速度快,合起來是「簡捷」,簡單快捷?!负唵魏汀翱旖荨笔怯脩趔w驗里面 最重要的兩個關鍵詞。
在微信 4.0 的時候,點擊進入一個會話群的響應速度是挺慢的,我們做了很多的改進來保證進入速度得到提高。而在微信的朋友圈里,時間線的流暢度也非常重要,我們的開發在這里做了很多次的重構才保證了流暢的體驗感,保證我們速度能超越所有有時間線的產品。雖然為了提升這里的速度,開發的代價很大,但是這樣的代價是值得的。
問: 微信 UI 設計最看重哪方面?
張小龍答:UI 里面最重要的是條理清晰。有時我們會誤認為 UI 就是怎么把用戶界面表現得更絢麗一些,但是所有的視覺表現都不如條理清晰重要。
舉個例子。微信的語音輸入條經過了很多進化,現在用的是最下面的式樣。
最下面的式樣具有美感,字體也很清晰,「加好友」按鈕在右邊也很順手。這都是經過了很多變遷的。前兩個設計,在語音和文字切換的時候,還需要通過菜單來完成。后來一個 UI 設計師朋友提出意見,覺得這個地方使用不方便,每次切換都要用菜單多點一下。但是語音文字的切換是最常用的,應該放在左邊固定。我覺得他說得很有道理,我們就在下一個版本里面修改了。
所以 UI 做得絢麗并不是最重要的。微信里面用的東西都很樸實,你不會看到花花綠綠的東西,能用系統控件的就用系統控件,而且盡可能保持一致的式樣,包括一種字體、一種控件、一種背景,所有的東西最好只使用一種,不要增加兩種或者更多種。
我們也一直鼓勵每個界面只有一個主題。學習過攝影的同事都知道,一張照片里面只有一個主題。所以我們不會做兩分式的設計,并且每個界面都會突出這個主題,把別的主題都虛化掉,或者把它放到一邊去。每個對話框都有一個明顯的默認按鈕。比如每個對話框右上角都有一個完成按鈕,并且是藍色的。我們還用了文字來規定必須這樣做。因為我們要讓用戶進到一個對話框后立即可以找到哪里可以完成,所以按鈕一定要很顯眼。
這是一個反面例子:
這個界面右上角有一個按鈕,底下有兩個按鈕,會讓人覺得很迷惑。很多用戶跟我們說,以前他是壓縮發圖,但是現在有兩個按鈕,他就會點原圖發送了。然后就忘記去點完成了,造成了一定的迷惑。這是一個不好的例子,是我們需要優化的地方。
問: 為什么微信的主題色是綠色?
張小龍答: 最初版的微信主色調是藍色,后來換成了綠色。其實我們現在有點后悔用綠色,因為在很多安卓手機上,綠色的偏色很嚴重,看起來就是黃綠黃綠的。
剛開始是藍色的,因為第一個版本是比較匆忙的,當時用的是系統的顏色。后來我們有一個版本就覺得應該調整一下顏色,就換成了綠色了。然而,這個時候微信的產品形態已經基本定型了,用戶數也非常龐大,這時再去調整品牌顏色是不太可能了。其實我們現在很糾結,但現在改起來就對形象有影響了。
問: 為什么拼多多喜歡挖微信的產品經理?
答: 微信產品經理通過微信觀察到了全中國網民的使用習慣,拼多多挖走微信的產品經理,因此才能設計出更符合在微信環境內傳播的接地氣方案。
問: 為什么微信只有 4 個 Tab?能把朋友圈做成第 5 個 Tab 嗎?
張小龍答: 源起 Tony (騰訊前 CTO 張志東),他經常向微信團隊提一些需求要加東西,我說沒地方放了,他就說沒關系,你們只有 4 個 Tab,還可以加一個。我說不能這樣。過幾天 Tony 又有一個需求,我說沒地方放了,他又說,可以加一個 Tab。我想這樣的需求反復幾次,最后會沒完沒了。然后我就跟 Tony 定一個君子協議,兩年之內,微信只有 4 個 Tab,不允許再有第五個,因為 4 個最簡單了,一旦變成 5 個就變復雜了,不好了,對整個產品會有破壞性的打擊,然后 Tony 也認同了,最終變成一個協議就確定下來了。這樣就很好啊,我們在做朋友圈的時候,也沒有把它放成第五個 Tab。然后 Tony 說這個朋友圈的入口是不是太深了。我們說,已定過協議了,所以不能放出來,我們自己不能破壞這個協議。當然“朋友圈”能不能放在第五個 Tab 上,還有別的原因。它總是有好處有壞處的,至少我們現在能保證兩年之內只有 4 個 Tab,但一切也不是絕對的。如果有一個非常大的誘惑,說不定還是會加第五個 Tab 的。
問: 微信里是怎么引導用戶設置頭像的?
張小龍答: 在我們最早的微信版本里面,用戶自己說的話是不帶自己頭像的,后面才把自己的頭像展現出來,當用戶看到自己的頭像沒有設置的時候,很快就會去設置頭像了??梢娺@樣的設計比經由別的環節去引導用戶設置頭像要自然很多。因為這是用戶自發的,而不是被“引導”的。
問: 為什么微信里很少出現新手引導 Tips?
張小龍答: 我們在討論其他產品的設計的時候,常常會想,怎么才能不打擾到用戶,特別是我們想把新功能體現給用戶的時候?,F在很常見的是用 Tips 去提示新功能,看似體貼,實則讓人煩躁,用戶會覺得為什么要把這些提示強加到我當前的操作里面,感覺被打擾了。
需要文字解釋的功能不是好體驗。做 UI 的同事盡量不需要通過文字的解釋就把這個功能做好,最好也不要用 Tips 這樣的東西。剛才微博的同事還跟我聊到,做微博的時候,有新功能了需要通過彈 Tips 來告訴用戶。我問為什么要這樣做呢,他說怕用戶不知道。但其實用戶不知道就不知道吧,又不會損失什么。為什么所有東西都要用戶知道呢?所以產品里面最好能立一個規定,能不用就最好不要用。但是微信也還沒做到完全不用。因為微信還有一些地方沒處理到位,所以偶爾也會用到 Tips。但是自己要知道一點:每一次都是因為做得不好才用 Tips。
問: 為什么 QQ 的頭像是圓的?微信的頭像是方的?
QQ 設計師答:
微信設計師答: 因為照片本來是方的,方頭像更符合用戶習慣。
問: 微信的啟動畫面是一個小人站在地球還是月球?為什么是站在月球上看地球而不是在火星上看地球?
張小龍答: 其實第一個版本是在地球上看月球,但是后來就變成在月球上看地球,有了突破性的變化。但是這個變化并不重要。有些人甚至做了一些調研:用戶看到這個畫面到底有什么感覺?然后把調研結果分享給我,發現用戶各種感覺都有,很不一樣。然后問他,我們到底是怎么想的。我回答:能讓用戶有不同的感覺就對了。如果思路太統一就變成烏合之眾和愚昧了。所以這樣是最好的。
但是如果我們把微信的 LOGO 放在那里閃啊閃的,那就沒意思了,沒有任何想象的空間了。這個畫面也讓我們看到人類的孤獨感(這個小人都離開地球了,感到孤獨了)。而孤獨是永恒的主題。
問: 為什么微信沒有“系統管理員”這種官方賬號?
張小龍答: 大概在兩三年(這里指 2009 年)以前,我突發奇想,為什么我們給 QQ 郵箱用戶的通知信都是“系統管理員”作為發信方,為什么不是我們自己的美女產品經理作為發信方,這不是顯得更加人性化一些嗎?從那個時候開始,我們就再也不用“系統管理員”這個賬號來給用戶發信了。用戶收到的每一封來自“系統管理員”的郵件,都被替換為一個真實的產品經理。如圖中案例所示,會看到真實的產品經理的落款,有她的頭像和名字。
問: 為什么微信 3.0 版本的啟動頁面上放出了邁克爾·杰克遜的圖,寫了一句話:“你說我是錯的,那你最好證明你是對的。“?
張小龍答: 之前的微信版本被批評得挺多的,特別是被業界的評論家批評。所以我想了這個辦法回應一下。剛好在那段時間里,我在上班下班的路上,MJ 的音樂聽得很多。也覺得他的音樂跟我們的產品有某種關聯性,因此覺得非常需要去感謝一下 MJ。直到有一天這種感覺越來越強烈,就做了這個設計。為了能做出這個效果,我還特地請同事們到他的車里去聽 MJ 的音樂,覺得這樣效果會好一點,讓他們能找到做這個頁面的感覺。通過這個設計我們向外界所有的評論家表達:如果你說我是錯的,最好證明你是對的。
問: 為什么微信 4.2 的啟動畫面寫著「是時候放下手機,和朋友面對面了」?
張小龍答: 拿一個停留時長衡量一個 App,這個跟我對互聯網的初心的認知是背離的。每個人一天只有 24 個小時?;ヂ摼W人的使命不應該是讓所有人除了吃喝拉撒,把時間都花在看手機上面。一個用戶每天的時間是有限的,這是次要的。最主要的是,技術的使命應該是幫助人類提高效率。比如作為一個好的溝通工具,一定要高效。
用戶其實并不會按照你的內容多少來決定它的時間分配,但我覺得這是很合理的。 如果我們非要停留時間更長的話,我們當然有很多辦法來做到這一點。但是這只會讓用戶覺得不爽,因為他的社交效率降低了。如果非要把他半個小時能完成的事情延續到一個小時的話,只能代表效率降低。微信永遠都不會把用戶停留時長作為一個目標。
問: 微信 7.0 UI 改版那么多用戶不滿,為什么不改回去?
張小龍答: 其實任何一個大的改版都會帶來用戶的不滿,因為人習慣于自己熟悉的界面,覺得是最好的。我們沒辦法讓 10 億人來投票決定什么是好的,也投不出來。那怎么才能通過改變尋求設計的優化,讓它變得更好呢?這個決策必須遵循好的設計原則。
就像微信 7.0 版本的時候我們內部使用了很長時間,我自己一直在兩個版本不停的切換,當我用了一段時間,我不愿意切換到舊的版本去。也許用戶一下子不能接受,但是我相信他們適應以后也會接受。重要的是我們必須要用我們的產品不停的適應時代,而不是因為害怕用戶的抱怨就不去改變它。
尤其是 UI 上,我們永遠不可能讓所有的人滿意。但是,我們比如讓產品越來越美,符合甚至引導當前用戶的審美,而不是落伍于時代。
問: 微信 7.0 版本啟動頁是一朵花,包括你寫的看見之類的話,靈感是來自王陽明嗎?
張小龍答: 跟王陽明的書有一定關系。當時寫的是,「因你看見,所以存在」。王陽明的書里是說,一朵花長在山里的石頭縫,你不看它,它就不在,你看它,它就在那里。在 7.0 版本,我們想表達的是說,看見的力量。如果按照王陽明的心學,心的力量是很大的。同理到社交上,如果你看不見這個朋友,這個朋友十年沒見了,他其實不是你的朋友了。當你看見他,他才是你的朋友。王陽明的書還可以跟量子力學結合。我們微信 7.0 那句話,「因你看見,所以存在」,完全符合量子力學的角度。因為一個粒子,當你觀察它的時候,它才存在。你不觀察它,它就是一道波。
問: 微信 8.0 的啟動頁是怎么設計的?
張小龍答: 做產品其實是個很枯燥,很理性的過程,無法把個人情緒和情感帶入。唯一有機會帶入的地方就是啟動頁,你可以有一些情緒的發泄。微信 8.0 的啟動頁,有個故事我跟同事們說過,有次我在開一個很正經的會,中間我開小差了,拿了當時的一張紙,在上面寫了現在開屏頁的這幾句話。我覺得可以代表這次更新的每一個功能,剛好連起來了,而且我也覺得特別簡潔,沒有任何修飾和形容詞。我自己覺得挺好的。我看見你,代表了通過視頻號看到另一個身份的你。笑臉,代表了你的狀態。煙花,是代表新的表情。一首歌代表了新的音樂播放。你看見了你,其實代表直播,通過你的眼來看到你眼前的世界。
問: 為什么張小龍說「好的產品應該是用完即走」?
張小龍答: 我發現大家對于這個詞有特別多的一些誤解。大家都會說,因為大家都離不開微信,所以才會說“用完即走”,去年對這點可能沒有解釋得特別清楚,我其實只說了上半句話,用完即走,但其實還有下半句話,走了還會回來。
用完即走的本質是任何一個工具都是幫助用戶完成一個任務,越高的效率越好。 當我們完成一個任務以后,我們當然希望用戶能做別的事情,而不是一定耗在一個工具里。
比如說用微信,我們當然希望微信能給用戶帶來更多的幫助,但并不意味著我們希望用戶一直低效率地在微信里處理事情,如果他一天信息的處理要用兩個小時,那我們應該幫助用戶盡可能在兩個小時之內處理完,而不是說一定要把兩個小時的任務變成三個小時,讓他在微信里花費更多的時間,我認為如果那樣就不是一個用完即走的概念。
所以用完即走和用戶再回來,其實并不矛盾,相反只有當一個用戶在一個工具里用得很愉悅,用得很高效,他才會下一次回過頭來使用這個工具。我們現在說的小程序也是這樣的,小程序應該是幫助用戶盡可能在短的時間里面完成一個任務,并且離開這個小程序,這樣的話他才會有很好的體驗,下一次他會繼續回來用這樣一個小程序。
問: 微信一直倡導用完即走,但 8.0 版本怎么給人感覺用完不走了?比如視頻號加了更多推薦內容,似乎增加了用戶的停留時長
張小龍答: 推薦的東西,如果把它定義為是娛樂時段的話,那么它是在這里娛樂消費的。目標是消耗時間的。在這一個板塊,并不是說非要他立即就走。用完即走并不是說用戶必須使用的時間越短越好。就像一個 120 分鐘的劇,不是說為了讓你用完即走,我用技術讓你 60 分鐘看完,這樣就不合理了。
問: 微信的「悠閑」表情怎么戒煙了?
答: 很早之前,QQ 和新浪微博就撤除了吸煙表情。據悉這是北京控煙協會活動的結果,控煙協會認為這些軟件在日常生活中使用頻率非常高,每一次發送都會產生潛移默化的影響,有誘導青少年吸煙的傾向。
問: 為什么微信對用戶稱呼統一都是“你”而不是“您”?
張小龍答: 我們并不需要用一個很尊敬的態度稱呼用戶,而是應該當朋友一樣稱呼,所以應該是一種很平等的關系,這個寫進我們的產品條約里面去了。
問: 微信是工具還是平臺?
張小龍答: 在我們對公司的一次培訓里面,有個同事問我微信的戰略是什么?我當時只說了一句話,我說微信只是一個工具,我們應當想如何做好這個工具。在同事們的心目中,微信并不僅僅是一個工具,大家認為微信是一個平臺。但我認為微信是一個工具,這是一個非常宏大的目標,我并不認為一個工具是一個很低層面的東西,事實上人類從原始人進化智能人類的過程,就是因為人會制造工具,我們所用的絕大部分的產品本質上來說都是工具,但是工具有好壞之分,能夠做一個非常好的工具其實難度是非常大的,但是如果說我們要做一個平臺,我會不知道我們要做什么?一個好的工具應該有一個很強的屬性,就是提高效率,用完即走。
問: 為什么微信的設計很克制?
張小龍答: 克制這個詞從來沒有在我的腦袋里面出現過,如果說做一些事情我們要求自己很克制的話,那是一種什么樣行為?那是一種自我壓制的行為,但是我并不認為我們在做這樣的決定時我們要自我壓制,或者說自己切割掉我們很多想要做的事情,那不是一個很好的狀態。
相反的,我們在做很多很多決定的時候,反而要去判斷什么樣的東西是最合理的,合理性才是這里面要考慮的一個最重要的因素,我們會舍棄掉很多很多本來想要做,后來發現做不好的東西,這種舍棄并不是因為說我們很克制,所以我們少做一點,而是說我們發現有很多事情做不好,或者說有很多決定它一開頭是錯的,或者說很多的想法,最后驗證可能是行不通的,那我們如果硬要去做這些事情是不合理的,我們會把它舍棄掉,而不是說我們要克制。
問: 為什么微信 8.0 浮窗從懸浮改成了左上角?
張小龍答: 我其實一直很不喜歡浮窗。因為它就像狗皮膏藥。這也是 PC 時代大部分網頁瀏覽的體驗都不好的一個原因。
為了解決一篇文章要很久才看完,而中途要不斷處理微信消息的需要,我們有了浮窗功能。但它并不完美。很多時候,一篇文章,一個長視頻,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁瑣的。
現在,微信提供了一個尚未看完的內容的列表,方便可以隨時找回這些內容繼續看完。尤其是對于長視頻,更加需要隨時可以切走,然后又能快速找到。直播也一樣需要。
問: 為什么微信安卓版不采用 Android Design 設計風格?
Kantzou 答: 我每次在「知乎」上吐槽 Android Design 的時候,總是會有人在下面說,“哎呦,原來「微信」的安卓版做那么 Low 是嫌 Android Design 做的不好啊?!边@種評論,我都不會回復。
我講一下為什么差呢,舉個例子:我給我爸買了個安卓手機,給他用?!肝⑿拧乖谀莻€時候,Tab 欄是在頂部的,然后我告訴他,“哎,左右滑動是可以切換的?!?
我觀察他用,我會發現:4.7 寸屏,他往上按的時候,他不會去滑的,因為他看到那里有個字,他就會去按,因為他沒有學習到那個程度。Android Design 的問題在于太超前,我這么說,那些喜歡 Android Design 的人心里會不會更舒服一點?
為什么喬布斯那么牛 B?是因為他知道,觸摸屏出來以后,人的自然反應就是「press」,而不是「滑」?!富乖诂F今這個階段還不夠自然。Android Design 在這個問題上解決的不好,因為絕大多數的大眾不像我們,我們是已經充分學習了的。我相信很多大眾,比方說不是我們這個專業的學生,你去讓他們用一下 Android Design,我相信大多數人都是點,很費勁的點,Android Design 為什么會做成這樣?他覺得啊:大屏一定要做的讓人方便,所以操作是滑動,這樣不用讓他點擊,就不會讓他覺得那么累。所以我為什么覺得谷歌是一個除了個別 App 設計的不錯,其他 App 設計的都很爛的公司。谷歌設計的真的不好,我說的設計的不好,不是皮毛上面,所以你不要跟我糾結這些細節,我說的是他的邏輯不對,谷歌是一個太工程師思維的公司。
Android Design 有個「應用抽屜」,我跟我爸說,“我給你裝微信了”。
他問,“在哪里???”我說,“點那個地方?!薄芭丁彼f,“知道了?!毕麓斡謫?,“微信在哪里?。俊蔽腋f,“點那個地方?!比芜€是不知道,為什么?因為 Android Design 在給他二維的導航,因為你要在桌面上面滑動,如果桌面上面滑動沒有,你還要給他一個「應用抽屜」,在一個新的地方左右滑動,簡直 Unbelievable,但是對于安卓的技術思維的人來講,這個很合情合理啊。
問: 微信「設置」里為什么會有個「插件」?
張小龍答: 給用戶選擇權。為了保持微信的簡單,在微信里面,除了核心功能,大部分的功能都做成插件的形式。這個方向很早就定下來了。這讓我們就算加了很多東西,也沒有把微信變得復雜。
陸樹燊答: 微信團隊的基因里原來就有實驗室文化的,這個要從微信的歷史說起。
微信團隊在做微信之前做的是 QQ 郵箱。QQ 郵箱里面有一個功能叫“郵箱體驗室”,用戶在這里開通一些新奇的功能。QQ 郵箱正是靠一次次的實驗,嘗試各種功能,才從一個爛到沒人用的雞肋郵箱,慢慢變成雄踞行業第一位置的七星級郵箱。
而微信從創始之初,就一直在繼承 QQ 郵箱的「遺產」,從郵箱的 QQ 對話功能到微信的「QQ 離線消息」,從郵箱「漂流瓶」到微信「漂流瓶」,從「附件收藏」到「微信收藏」,從郵箱的「閱讀空間」和「郵件訂閱」到微信的公眾號……
同樣的,微信也繼承郵箱的體驗室,有了「第一個實驗室」,那時的名字叫「插件」。所謂插件,就是把功能選擇的權限給到用戶,用戶覺得喜歡和需要,就「安裝」插件,覺得不需要,就「卸載」插件。而開發團隊屆可以通過看用戶安裝和卸載的情況來決定插件的去留。
于是,有的插件試著試著就變成不可插拔的功能了,比如朋友圈,現在已經不能卸載了;有的插件試著試著就不見了,比如微博閱讀。
后來,大概在 13 年,微信 5.0 發布前后,微信插件改叫「功能」,深埋在微信的設置選項里面。因為隨著微信用戶量的增長,用戶習慣的改變,早期的那些插件功能已經被證明不需要了,但又有個別老用戶在用,不好刪除,就把它們的入口深埋起來。比如語音記事本、QQ 離線助手、QQ 郵箱提醒、群發助手。
這個修改,某種程度上意味著,微信的第一個實驗室時代結束了。這一輪實驗,基本伴隨著微信團隊在移動互聯網的探索和成長。實驗之后,微信也奠定了它的行業地位,所謂的「移動互聯網船票」。
問: 微信為什么重視產品設計而很少提到運營?
張小龍答: 對于一個產品,我們更應該偏向產品本身還是運營?這是一個老生常談的問題。這里也沒有絕對的衡量標準,只是看各家的特長和偏好了。而且對于不同的產品,也會有不同的偏重點。
而我的觀點是做一勞永逸的事情是最好的。很多開發的同事知道,在開發上我們到底是要做「類型」還是做一個一個「實例」?如果我們不是把各種訂閱內容抽象為一個訂閱平臺的話,可能就會做了很多很多的「實例」出來,產品變得非常復雜。比如微信的「漂流瓶」和郵箱的「漂流瓶」到底有什么不同?除了微信的「漂流瓶」可以發語音,在產品結構上的不同在哪里呢?郵箱里面的「漂流瓶」有不同種類,比如「同城瓶」「交友瓶」,它更偏運營一些;而微信里面的「漂流瓶」就只有一種。因此我們發現,在郵箱里面這樣做,我們會因為用戶的需求類型增加,需要不斷地增加內容才能滿足用戶,可以想象這么運營下去,會把大家都累死。所以我們更加傾向直接做到最本質的東西,至于它能滿足用戶什么需求,那是用戶自己的行為。我們做一個「類型」,而用戶自己來產生「實例」就可以了,也就是說,我們用「類型」的思路,把所有「實例」都做了。
我們按此方法做完很多特性以后,發現已經沒有改進的空間了,也不需要去改進了,一改進可能就不對了。因為一改進就可能變成去把它「具體化」,一旦開始「具體化」以后,就需要不斷地「具體化」,就沒有可以想象的空間了。
文章來源:優設 作者:龍爪槐守望者
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語:用戶的體驗感對于一個產品來說,是至關重要的。一個好的產品能夠充分照顧到用戶的感受,從而擁有大批的忠實用戶,而品牌升級則是體現產品定位和發展策略的不二之選。當體驗設計遇到品牌升級,設計師該如何做?本文作者對此展開分析討論,一起來看看~
01 用戶體驗設計的現狀
過去,我們在用戶體驗中一直強調以用戶為中心,追求給用戶帶來更好的體驗,不斷強調一致性、易用性、可用性等等。但如今,我們放眼手機里的app的用戶體驗,在過去十幾年的積累下,用戶的使用習慣、用戶的認知都得到了很大的提升,產品的基礎體驗也基本都做到了使用流暢、一致性的現狀。
但這卻帶來一個問題:同質化嚴重。
比如,當我們打開電商類的app,發現某東越來越像某寶,xx越來越像xx??赡芪覀兡ㄈチ薼ogo之后就不知道這究竟是哪家app了。
甚至,我還發現有的公司在設計時是從B抄個設計樣式,再從A抄個設計樣式,最后在從T上抄個樣式,最后設計結果成了大家看到的現象:設計越來越趨同。
大廠的動向
最近這兩年,我們頻頻看到大廠的一些設計動作:品牌升級、設計語言升級。
很多外行人站在一個旁觀者角色對升級的設計嗤之以鼻:“這升級了什么?怎么跟沒做一樣?”“花了幾百萬就做了個這,真不值”…………
實際上,其中的背后不是簡單的設計樣式更換,而是戰略定位的調整。
比如支付寶去年突然換了logo的顏色,而這背后的戰略調整是支付寶升級成生活開放平臺的戰略。
比如淘寶去年也換了字體logo的設計,而這背后的戰略是新淘寶要更好的鏈接內容、用戶、商業。
所以,看到這里,我們首先明確了品牌升級、設計語言升級不僅僅是設計樣式變化,不是設計師隨隨便便設計畫了個圖形,隨隨便便吸了個顏色,而是基于品牌定位與品牌戰略調整的背景,是通過多維度調研,積累了很多有價值的信息,經過科學的分析推導明確了設計方向,最終才形成可落地的品牌升級設計方案。
那么,問題來了!既然品牌升級了,在用戶體驗設計中如何體現新升級的品牌感呢,如何能體現品牌的定位和戰略呢?
當我們在收到品牌設計方案后,就開始面臨到體驗設計升級如何體現品牌感了,這個時候不是倉促的先定義新升級的顏色等樣式問題,而是需要先充分理解戰略背后的意義,理解用戶、理解目標、理解新商業方向……,再聚焦收攏在關鍵點上,從而針對體驗設計中的設計體系定義好設計原則,在最終落地到設計元素上,比如顏色、控件、交互等。
設計過程:品牌戰略理解-收攏關鍵點-定義設計規則-落地設計元素
戰略理解實質上就是公司未來業務調整,方向調整,目標調整,我們的設計一定是基于這個方向的。
比如2016年我在公司一次紅藍戰略定位后進行了2.0生態電商改版,這個紅藍戰略從字面意思理解很抽象,但實質是內容化、視頻化的業務方向,我根據這樣的戰略定位設計了創新的2.0的生態電商設計方案獲得了認可。
理解完戰略方向后,一般會進行一些發散性的收集。比如滴滴在早期幾年前的一次品牌升級分享案例里,那時候升級前品牌語是“滴滴一下美好出行”,后來在專車、順風車業務發展后,各業務定位模糊,需要針對業務重新定位梳理,經過發散了很多關鍵詞,最后針對不同業務線聚焦在舒適、活力、正式三個關鍵詞,形成新的滴滴設計語言。
資料來源:滴滴李大聲《c12d調分享》
設計原則也就是我們設計中的一份指南,是建立在前面的分析推導后,他所傳達的是設計價值觀。指導我們在設計中什么該做什么不該做。
說到這里,這就讓我想起來經??吹胶芏嘣O計團隊定義自己的設計原則是:清晰、高效、簡潔。這么一看沒毛病,的確設計是要保持信息的清晰傳達、有效的展示、簡潔一些。但這些定義太過寬泛,毫無意義,根本無法指導實際的設計。
設計規則應符合什么規則呢?
首先,設計規則要貼近業務,真實而有效。
比如做外賣的要突出快、服務、準時的定位。做出行的要突出安全的定位。做金融的要突出收益增長等等,我們不能就籠統的把所有的不同行業業務規則都定義成清晰、高效、簡潔,這并不能形成差異。
以平臺要升級為“安全”為例,我們需要知道什么才是“安全”的設計規則,除了綠色、藍色,還有什么行為才會產生產生信任安全感。比如規范、統一、征信公信力、理性的設計。
這樣我們就可以針對升級“安全”的設計體系規范起來,把信息以用理性化的設計來呈現表達。
設計規則要有態度
實際上,每個設計都是有意義的,每個規則的背后都是不平凡的工作。舉個動效的例子,有的設計師會認為動效看起來很酷,那就加的越多越好,結果適得其反,用戶可能因為動效太多太酷不知道該干什么了。
谷歌在他的設計體系里提到“每個動效都是有意義的”,可見谷歌對動效的態度表達了自己獨特的設計規則的魅力。
螞蟻金服在自己設計體系里提到的獨特四點設計價值觀:自然、確定、生長、意義
這每一點都不是簡單的“清晰高效”這么簡單,具有深遠的設計指導意義。以“自然”為例,用戶對圖形、色彩、圖標等視覺感受的信息,遵從自然規律,降低用戶認知成本。舉例:明明紅色是總所周知的警戒顏色,我們用綠色來做警戒色,這就違背了自然規律。
說到這里,我們大概就能清楚明白設計原則的意義了,當面對市面各種設計潮流:抽屜設計風、大字體設計風、新擬物設計風來臨時,我們就可以從設計原則來理性判斷如何取其精華,去其糟粕,為我們的業務和品牌傳播來使用,而不是盲目的追趕潮流
最后,從設計規則推導出來后,到具體的設計元素:顏色、圖標、配圖、文字設計等,我們還需要結合品牌找到具有記憶性的點,形成dna記憶符號,這個記憶符號給用戶在視覺、觸覺等感官上加深印象。
說到最具有品牌記憶點的無疑是耐克、阿迪、可口可樂這些圖形深入人心,還有蒂芙尼藍等等。
比如最近要上市的知乎,核心定位是社區價值,他的logo以及app的開屏都體現了社區交流的屬性。
比如最具阿里云更新的品牌升級,利用光標這個符號貫穿整個設計體系,形成獨特的超級符號,可以說是一個很經典的案例。
資料來源:阿里公眾號
當然,提煉出具有記憶點的品牌dna的超級符號是需要經過長期推演和長期傳播形成的品牌記憶點。
最后,總的來說,當體驗設計遇到品牌升級,不是簡單的畫個圖形,吸個顏色,每個設計背后都有遵循的依據,都有背后的科學分析推導。所以,我們不要再盲目拿清晰、高效、簡潔來作為設計語言的理念了,需要探索真正有獨特觀點,貼近業務,貼近戰略規劃的設計價值理念,來指導未來長遠的設計發展。
文章來源:人人都是產品經理 作者:Hellen詠舍
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
相信每個用戶體驗設計師都非常期望自己全程參與從0-1的產品設計,這樣可以更有參與感,掌握業務的整個上下文,非常鍛煉個人的設計能力,還可以提升對產品的sence。
當然實際工作中不是每個人都有這樣的機會,也可能是某個已經非常成熟的產品做一些持續優化迭代的新需求。在不了解業務全貌的情況下就直接開始設計,其實非常被動。這個時候就需要花更多的efforts去熟悉業務背景、使用場景、操作流程、常用術語和設計規范等等。 一般面試中專業面試官都會讓你描述一下你之前的項目案例,如果一直做的都是一些非常零碎沒有體系的優化迭代需求,被cue到這個問題的時候就會一臉蒙蔽不知怎么回答。如果你正在迷?;蛘呦M麑で蟠鸢?,希望我可以幫到你~
今天主要分享下——用戶體驗設計師面對下面不同階段的設計思路:
1 . 立項前探索期的發散收斂(由于篇幅有限,本文重點介紹這部分)
2. 交付階段的水深火熱(下期見~)
3. 上線后的迭代優化(下期見~)
一、立項前的探索期
如果你現在處于產品意識形態還不清晰,立項前的摸索階段,就需要重點關注下Inception這個階段作為用戶體驗設計師所需要做那些事情,簡單來說就是5W(why?who?when?where?what?)+2H(how?how much?)。在項目啟動前期,通常需要制定一個簡單有效的行管計劃。不管你的角色是PM、BA還是UX,都需要迅速、主動的去推動整個項目的進展。在競爭激烈千變萬化的時代,行動和計劃都必須快速而敏捷,否則就會被人搶先一步措失良機。
有人就會問,你只是一個設計師,干嘛要做產品/BA的事情?有他們在你干嘛要搶他們飯碗???我覺得,如果你的能力允許的話,和產品/BA一起合作會達到1+1>2的結果。不要過分強調角色和分工,最主要的結果。最理想的工作模式其實就是這個項目中的每個角色都可以講清楚正在做的事情,更可能多的理解業務和上下文。
言歸正傳,在項目初期,沒有任何輸入的情況下,只有模糊且抽象的idea,應該怎么推動?
1.1 市場分析
首先要了解行業背景,站在宏觀角度上來思考,對整個行業有一個大致的、粗顆粒度的判斷。其次分析產品所在行業的市場現狀,判斷目前所在的階段和規模。最后分析產品可能的商業模式以及競爭對手對商業模式。在了解產品所在的市場業現狀、行業趨勢這個大背景后,可以通過整個大環境判斷評估未來發展規律和洞察機會點。
在討論策略走向時,最重要的無非就是找出我們自己產品的競爭優勢。這里的優勢是指別的產品無法代替或模仿并可以靈活運用的資源。為了創造競爭優勢,我們必須思考要提供什么樣的服務,用什么方法提供策略方向。
市場分析是對行業供需變化對各種因素及其動態和趨勢對分析,主要用途有3點:
· 在紛雜的行業中找到和合適的發力點;
· 在眾多競爭對手中找到普遍發展規律和優劣勢;
· 建立商業模型,形成可持續的產業。
市場分析常用的方法:
· PEST(宏觀經濟法:基于公司戰略的眼光來分析企業外部宏觀環境)
· 波特五力模型(競爭態勢分析:于競爭戰略的分析,可以有效的分析客戶的競爭環境)
· SWOT分析(優劣勢分析:幫助企業找出自身優勢,整合資源,從而形成企業的戰略規劃)
1.2 競品分析
了解了行業的大背景后,就要開始有針對性的挑選幾個在市場上非常成功有競爭力的產品去研究分析,學習他們的優點以及思考背后的原因,最后可以作為非常有說服力的設計依據或者啟發靈感。
競品分析的主要目的是通過研究競品,找到適合自己產品可執行的方向。
一般都分析競品的哪些地方呢?通常分析下面幾點:
· 產品主要目的是什么?(一般講項目背景、大環境)
· 產品定位是什么?(產品屬性)
· 特色是什么?(優勢、值得借鑒或深受啟發的地方)
· 主要用途有哪些?(核心功能都及應用場景)
· 產品設計風格是什么?
競品分析最常用的方法是用戶體驗五要素,將產品設計的過程抽象分為5個層次,將復雜的事物抽象成分層的模型,可以更直觀、清晰的獲取其內在邏輯。
具體的競品分析案例可以去我之前做的項目里面去看,采用用戶體驗五要素的方法來分析的。
1.3 用戶調研
用戶調研目的是用于決策參考和創意啟發,是周期性的一個活動,應該貫穿于整個設計過程,根據用戶調研結果提出假設并上線驗證。進行任何的產品設計,都應該是有數據支持、有理論依據、有正確的邏輯推導的,絕不該是憑空瞎想,或者拍大腿武斷的做決定。帶著問題去思考,通過調研驗證產品的合理并給出最優方案這也是用戶體驗設計師存在的價值和意義所在。
· 定性研究
定性研究是探索性的研究,致力于定性地確定用戶需求,它有助于設計師在設計初期構建想法,然后再用定量方法完善和測試。主要方法有:用戶訪談(最常用)、情境訪談和卡片分類法(最簡單)。
在產品探索階段,還沒有用戶找誰調研呢?有個好辦法就是分析完競品后,我們可以篩選使用這些競品的重度使用者或者發燒友去進行訪談,這樣能得到最精準最有價值的用戶信息。用戶訪談是真正了解用戶核心需求的一種方法,通過引導用戶聊天去收取用戶的反饋和挖掘用戶的核心需求以及潛在訴求。
當然這是針對市面上已有且業界有很成功的案例而言,對于沒有直接競品的產品,訪談的用戶可以為這個項目的發起人或者直接干系人、利益相關者。用戶訪談之前,需要有一個明確的計劃和大綱,把需要訪談的關鍵問題都羅列出來,可以細化到:訪談時間、地點和參與訪談人員分工背景介紹、受訪者的基本信息、使用場景、操作習慣、偏好、痛點和建議。通常訪談3-5位典型用戶,每位可以代表一類。 用戶訪談的之前一定要想清楚幾個問題:
· 用戶想做什么?(使用目標)
· 用戶的目標是什么?(拆分具體的ac)
· 用戶想達到什么目的?(渴望的訴求)
文章來源:站酷 作者:BridgeQ
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在百度百科的定義中,阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達到每小時 70-100km,遠超現代潛艇的航速。
人類為了擺脫自然界設計的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。
在人類社會,人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律,諸如此類的阻力都無時無刻規范著人類的行為。
類似地,對于互聯網產品,用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響,這些阻力會阻礙用戶完成目標。
在認知心理學中,我們接受外部世界的刺激之后做出反應的過程中,涉及到我們如何感知、學習、推理、記憶,以及如何把意圖轉化為行為。人類數十萬年的進化過程中,對于感知、學習、推理、記憶的神經結構已經初步進化形成,大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力,從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。
對于一件新事物,我們感知它的方式通常受到三個因素影響:過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上,幫助我們理解。一旦產品界面中與用戶的經驗預期相悖,就會產生阻力。
面對一個我們從未使用過的機器設備時,我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法。《點石成金:訪客至上的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 所存在的問題,做到了簡潔易懂和重點突出,如下圖。
表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。
同一個軟件系統中,表達相同概念的用詞一致。模塊中的相似文案,語法表達方式一致。上文提到我們人類很少愿意思考的特點,一旦一個軟件系統出現表示同一個概念,但是名稱不一樣的詞語,我們大腦就不得不開始被迫思考:“這個詞語和之前那個很接近但是有些不一樣,它們是同一個東西嗎?”這個思考過程從而形成了不小的阻力?!墩J知與設計》一書中提到一條規則:“同一個名稱,就是同一個東西;不同的名稱,就是不同的東西?!币虼?,一致性是撰寫交互文案的一條重要原則。
當信息的內在負荷不能再進行降低時,通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化,降低外在負荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題,這里就不做展開了。
阻力并不是越小越好,在某些場景下,我們需要提高阻力提高用戶的使用成本達成某些目的。
類似于馬路上的減速帶,在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力,減緩用戶的操作的節奏,達到防錯的目的。如下圖,在藍湖中如果要刪除一個項目,就需要先輸入項目的名稱后才能成功刪除,通過增加阻力提高了防錯能力。
針對涉及到用戶隱私的敏感操作,通過設計特定的交互流程讓用戶體驗到安全感,比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂,增加用戶的確定感和可控感。
生活中大部分的時刻都是單調乏味的,我們需要使用各種儀式點綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗旅程中的點睛之筆。
就像多年前堅果手機一代的包裝,設計師別具匠心的將包裝設計為一次充滿著童趣的體驗,雖然拆包裝的過程時間增加,但是給予用戶似曾相識的場景是不可替代的。
看似使用起來費力的微信搖一搖,可以加強用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗,這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。
用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多,內容質量就越高,進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區,就會同時帶來大量的負面內容,造成對其他用戶的干擾,甚至導致他們大量流失。因此,為了讓一個產品的社區生態能夠健康發展,我們需要采取一些篩選方法來設置阻力,以此來篩選出對平臺有益的用戶和內容。
很多產品在冷啟動階段,為了避免垃圾用戶和提高社區質量,會設立邀請制來控制用戶來源,然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本,保持服務器穩定,甚至可以制造一種供不應求的感覺,獲得更多的討論度。
網絡騙局在社交類產品屢見不鮮,婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量,不僅嚴防死守,還會設立價格門檻,不付費直接無法使用,這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見,但是確實有效地進行了用戶篩選。
通過設置測試題將用戶分成不同的群體,進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試,需要花費的時間成本比較高,通過這種方式篩選出真正認同 B 站社區文化的優質用戶,給予這些用戶更多在社區中互動的權限,從而也大量減少了低質量用戶的負面行為。
上述的三種用戶篩選方法是否適用,需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡單舉例。
不同的內容形式對于社區的價值是不一樣,我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發布純文字內容,需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容,附有圖片的內容對于其他用戶更具有吸引力,通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間,從而也可以使朋友圈廣告得到更多的曝光。
有時產品的商業目標和用戶目標存在一定沖突時,損失一定的用戶體驗滿足商業目標是不得不進行的選擇,這需要我們進行合理的平衡。
為了迎合商業目標,我們有時需要針對一些功能設置一定操作阻力將其進行弱化,然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見,比如通過強化按鈕對比進行功能的引導,如下圖。
歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分,針對身份等級低的用戶設置使用阻力,以便于引導其投入更多精力和資源,或者通過此方式給予高等級用戶優越感,刺激其進行分享炫耀。
16 年發布的支付寶生活圈就是一個很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點贊?;ヂ摼W產品中,每增加一個動作,用戶都會呈幾何級流失,但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作,幫助支付寶生活圈實現了刷屏傳播的效果。
雖然讓用戶暢通無阻地使用產品是我們的目標,但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下,我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路,助力你在產品優化探索中找到可行的切入點。
文章來源:站酷 作者:Ballen成名
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
QQ主題自2013年誕生,至今7年時間,保持了整個營收的Top3的成績,受到了廣大用戶的喜愛。隨著QQ數年來版本的迭代,我們也漸漸傾聽到了一些用戶對主題的反饋,為了給用戶帶來更好的體驗,我們決定對QQ主題從上游到下游進行一次全面的優化。
我們對QQ主題進行了兩輪用戶體驗反饋和調研,發現:目前的外網主題存在機型適配效果差、素材制作質量差、缺少全局美化等體驗問題;而同時,用戶調研的結果表明我們的用戶希望體驗到更好更高品質更全面個性化的主題。
基于現網產品問題和用戶調研結果,對優化方向進行了歸納分類,最終確定QQ主題體驗升級的項目設計目標:增加主題覆蓋范圍 ,提升主題的美化質量 ,提升主題的可用性。
為了達成上面的三個目標,一開始我們根據QQ主題的實現邏輯制定了初步的優化方案:通過新增素材增加主題覆蓋范圍,通過修改舊素材提升主題可用性和質量。
但在進行執行評審的時候,我們意識到,這樣的方案雖然可行,但落地成本非常的巨大,需要每個主題包內新增兩端共1800多張切圖,花耗多家cp公司至少四個月的時間和人力。
我們不得不推倒開始的方案,開始思考:是否有更好的解決方案?
在對主題制作流程、客戶端呈現邏輯、日常運營維護工作等問題進行深入的溯源挖掘后發現:QQ主題目前實現個性化的方案是后臺下發素材包替換本地客戶端資源實現個性化。而這就導致了素材包本身是固定的內容,只能被動的接受版本更新帶來的種種問題。
在這樣的情況下,即使我們按照一開始的方案執行落地,多個版本后我們仍需大量的人力去進行維護和更新才能保證用戶的體驗。
所以,我們必須打破舊方案帶來的弊端,要讓素材活起來。
在綜合設計思維,開發思維,運營思維去思考問題后,我們提出了一個嶄新的實現方案:終端染色(使用Color-filter,對png進行染色的技術)+分色映射(將資源與色值進行映射,用一套有限色板去管理無限資源的概念)。
在這套新的個性化實現方案支持下,設計師簡單的對色板進行配色,就能夠對QQ客戶端的全局顏色進行變化。而當版本更新發生資源變更時,僅需維護通用的線上映射關系,資源即可自動適配到應有的顏色。
針對主題方案的變革新方案,分別從優點、變化、難點3個維度進行綜合評估:
- 優點:
(1) 整體學習,制作,運營,維護的成本降低
(2) 美化范圍變大,下載資源變小,用戶體驗得到改善
(3) 效率得到優化,難度降低,設計師有更多時間提升主題質量
- 變化:
(1) CP學習新的制作方式
(2) 產品運營省去了過往定期維護素材的工作
(3) 設計師在版本迭代時候進行新資源的分色映射關系
(4) 開發人員進行統一的分色映射表維護管理
- 缺點:
(1) 方案工作量大,多達120+的界面檢驗,上千個客戶端資源,大量的代碼需要修改。
(2) 方案執行難度大,包括如何用有限的色板兼容更多的設計需求,資源如何在不同場景得到更有效的復用,設計與開發未來如何進行映射表的對接,以及版本的上下兼容。
設計師提出“終端染色+分色映射”的新方案后,通過積極拉動會議,向主題業務相關的多角色進行新舊方案的優劣討論,方案得到一致認同后,多方聯動形成項目組。
其次進行可行性評估,與開發結對緊密協作,共同討論難點攻克新方案落地要點。
最后基于前期可行性評估,以及難點預研,項目組規劃出階段性的落地方案。
方案的落地主要為三部分工作: 梳理標記->歸納轉化->編譯覆蓋。
梳理標記:
前端開發逐個查找界面的資源和代碼并標記,交付給設計師進行資源色值的規劃
歸納轉化:
設計師根據ui的配色規則以及個性場景需要,進行ui色板的構建及資源的顏色映射分配。
在這一過程使用騰訊文檔進行設計語言與開發代碼的轉化。
編譯覆蓋:
修改代碼,讓資源支持個性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進行實機的染色編譯并和設計師共同檢驗效果。
而在上述工作中,設計師的任務難點就在于色板的設計和染色規則的構建。
首先設計師根據QQ的ui規范,建立初步的色板;下一步,創建界面demo,模擬資源與色板的映射關系;然后替換多個不同的色板檢驗主題染色后多場景下的效果,再對色板和染色規則進行反復的調整;最后在效果符合預期的時候,再輸出色板和染色規則并最終在真機上進行驗證。
QQ舊主題:僅覆蓋6個界面、素材包內涵400+切圖、日常需要花費巨大成本維護1000多套主題。
主題新方案落地后:覆蓋范圍從6個界面擴展到60+界面、素材切圖降低至48張、600多個資源得到梳理優化、60+個舊主題存在的可用性問題得到解決、維護成本得到大大降低。
主題新方案落地后,考慮到舊主題制作時間長,難度大,設計費用高的問題,產品側希望設計師能配合新的染色方案去優化主題制作、上架、驗收的流程。
根據舊流程里各個角色反饋的問題點,第2階段的目標可提煉為:提升制作效率、打包效率、驗收效率??紤]到舊流程中效率低、出錯率高的步驟大多是人工操作部分,我們計劃設計一個智能化的主題編輯器來實現工業化的主題生產。
以提升效率為目標,首先深入制作流程勘察,挖掘制作流程的關鍵核心點,并提煉關鍵觸點、痛點問題;基于各個觸點關鍵問題,逐一給出解決方案,并全局的回顧整個流程,從全局去統領優化方案;繼而以落地為導向,明確問題解決的優先級,穩步前進規劃方案落地。在解決方案中,本地編譯體驗已實現,其他能力落地優先級如下:
- 首先解決智能切圖和智能配色,優先級最高
- 其次解決規范優化和多界面預覽,優先級居中
- 最后是直連后臺,運營做審核,優先級最低
傳統的主題制作中往往最費時間和最易出錯的就是切圖,在這里我們使用了雙重保險。
保險1:編輯器將內置一套智能化的切圖合成處理方案,設計師僅需上傳極少量的必須切圖。編輯器還會對上傳的切圖會進行命名、尺寸、格式的檢測。
保險2:官方設計師預設主題的PSD/SKETCH設計模板,附帶切圖命名尺寸格式等,畫完后一鍵即可導出全套切圖資源。
新主題的染色規則中,色板存在21個顏色需要配色。對CP來說,即使有設計規范進行學習,也存在著出錯的可能。為了讓制作通過率達到最高,我們計劃通過編輯器內置的智能配色,將復雜的配色操作簡化為2步操作,達到快速穩定地輸出合格的配色的效果。
新主題色板中,顏色可分為主色系和背景色系,兩大色系下的色值再各有不同的色值要求。
從設計師的理想角度來看,如果只進行主色和背景色的選擇,即可輸出實現21個顏色的話,無疑效率和通過率都會得到大大提升。
為了實現理想效果,我們設計了一套方案:
在選擇主色、背景色后,首先對它們進行一個檢測,在這里我們引入了WCAG2.0的標準,檢測主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們再把QQ設計規范中,對21個顏色的不同微小要求,通過HSB顏色模型轉換為數據化的代碼條件并內置在編輯器中。
這樣,CP選擇的兩個顏色,通過顏色檢測、顏色模型轉換、預設條件的微調,就變成了符合我們視覺層級規范要求和可用性要求的21個顏色。
在實現了智能切圖、智能配色、導入設計稿、在線預覽、結構化打包、手機實際預覽等能力后,編輯器的能力基本得到滿足,我們接下來對編輯器進行框架設計,在多方案權衡后,最終采用了元素作導航,右邊區域保持全局預覽的交互框架,并設計了編輯器的ui界面。
使用編輯器前:從制作到上架需要約4周時間,每月上架主題平均為12個。
接入編輯器后:僅需一天即可完成素材的制作到上架,并且得益于制作難度的降低,可制作主題的CP得到了擴充,目前每月上架主題穩定在2000+個。
在完成了主題效果優化、主題制作優化后,我們把注意力放在了制作上架之后的流程-適配維護。
舊的主題適配維護涉及到cp/設計師/運營/開發四個角色的大量人力成本。
而新主題優化后,僅需要設計師&開發工程師兩位角色進行低成本的操作。
但在實際工作中,版本中的不同更新都是由不同的設計師&開發負責的,適配工作往往很難執行。所以為了保證適配的效果,除了在產品的工作流程中增加適配規定外,我們還希望能幫助到不同業務方降低適配的成本。
新適配流程中,設計師其實僅僅需要根據染色規則對新增資源去定映射關系,而實際映射的寫入是開發操作的。那如果兩個角色的工作能合并,并且省去學習新適配規則以及溝通的成本呢?
從幫助開發去理解分色染色的層面,我們把資源元素和顏色進行了場景化的匹配應對,并且把規則關系整理成了目錄,搭建了Q-Element適配規范網站;開發同學在進行適配時候僅需根據設計稿的新增部分,尋找對應目錄下的規則關系,即可對元素進行適配。
優化前:主題的版本適配需要設計開發產品的多方配合,花費數天時間去完成適配。
優化后:僅需開發1個小時的時間即可完成適配和驗證。
通過3個階段的努力,QQ主題美化初步完成了主題效果、主題制化、主題維護成本的三大優化。上線半年后,目前QQ新主題已經達到1萬八千個,并且借助QQ美化平臺完成了外部創作人、QQ、QQ用戶三者之間的生態搭建,正源源不斷的提供給用戶更多更好的個性化主題。我們也會進一步努力,由QQ主題開始對個性化進行新一輪的優化,帶給用戶更好的體驗。
最后,廣大設計師的機會來了!如果您擅長插畫或者動畫,點此鏈接https://ycg.qq.com/qcc,報名參與我們的原創空間和QQ美化平臺項目。按照頁面引導提交作品審核,經原創館審核后,就可以獲得創作權限。 您的原創作品將被QQ及QQ空間數億用戶付費使用,并獲得相應比例分成。
文章來源:站酷 作者:騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
針對不同的受眾我們會做不一樣的設計,今天是針對兒童進行的產品設計思路的內容分享,面對兒童產品,我們需要從心理生理上的區別分析,進而推動內容、交互、視覺、動畫等設計,一起來了解下吧~
“小山上的風,沒有一個人知道,沒有一個人能告訴我;風從什么地方來,風到什么地方去?!?
英國的詩人米爾恩在給孩子的詩歌《小山上的風》里如是寫道。
在不同的年紀,這個世界帶給我們的觸動和感知都是不一樣的。那么當我們為兒童進行設計時,該如何去呈現呢?讓我們一起來探討下吧。
近年來,兒童產品的市場是比較火熱的,由于兒童的生長變化較快,他們在心理和生理上都與我們成人有較大不同,對于外界的信號,他們更喜歡得到視覺和聽覺上的反饋。并且常常能夠從挑戰和沖突中獲得快樂,他們不在意結果,目的性較弱,還有著非常強烈的好奇心,無法預見其行為會引發的后果,其模仿能力的強弱隨著年齡成長呈曲線狀呈現。當我們在設計時,應將兒童的這些特性考慮進去。
任務旅程的設計
在某種程度上,兒童產品的客戶形態有些類似我們的 ToB/G 產品的客戶。使用產品的一線用戶,并非最終具有購買權的客戶。孩子的父母是兒童類產品最終具有購買權的客戶,他們對早期教育、智力投資、內容是否健康積極等等都有較高要求。
因此我們在內容的設計上應更加的多元化,將任務完成后的數據量化體現,使父母便于了解孩子情況,同時也可以從側面激勵用戶后續的付費行為。任務旅程有多種類型,在兒童品類的設計上,我們通常采用下面這 4 種任務類型去設計。
好的設計可以減少認知負擔, 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時期,他們的記憶容量比成人小,我們需要關注到這一點,怎樣的信息容量,交互層級和人機互動才能讓他們更好的理解和認知產品界面。
比如 LG 有一款面向低齡兒童的手表,表盤上只有一個按鈕和出聲孔,并且在噪雜環境下,還考慮到家長的心情,非常貼心的設計了 10 秒自動接聽的人機交互方式。
△ 圖片來源 | 文章作者&Roobo 設計團隊
通常,我們成年人對交互體驗,產品易用性都抱有較高的期望,我們期望產品能為我們帶來效率的提升、便捷的操作、強烈的視覺沖擊力等等。但是,兒童與成人在人機交互的互動上卻有著天壤之別。當產品功能無法正常運行時,孩子們并不會像成年人一樣感到失望。當設計不如他們所希望的那樣時,雖然也會暫時感到沮喪,但他們在自己生命旅程的學習嘗試中,也習慣了那些常常無法正常進行的任務。隨著成長經驗的增加,他們會逐漸熟悉了解世界的運行規則。
△ 圖片來源 | 文章作者&Roobo 設計團隊
有研究表明,在對 120 名學前兒童(3—6歲)進行了12種顏色和12種圖形的辨認實驗中顯示,實驗刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現。結果表明:呈現速度對辨認正確率有著明顯的影響。3-6歲兒童對顏色和圖形的辨認能力均隨年齡增長而逐步提高。學前兒童對顏色的辨別,在三種呈現速度條件下,均對黃、紅、綠三色的辨認正確率為最高。
圖標 icon 的設計上,簡約、塊面化、造型避免抽象,例如 3 歲+的孩童已經可以理解向前、向后的箭頭,有研究顯示,在短時段內,兒童對圖形的辨認在不同呈現速度條件下出現優勢與劣勢圖形之分。優勢圖形的正確辨認率百分比較高,而劣勢圖形則較低。
現在市場上有很多兒童品類的硬件,深受家長和孩子的喜愛,在軟硬件的結合上,我們要善加運用,例如硬件自帶的攝像頭、觸摸屏、聲控等等。當硬件與產品內容相結合,可以碰撞出更加多種多樣令人振奮的新的交互方式。
△ 圖片來源 | 文章作者&Roobo 設計團隊
在任務旅程中,內容合理優質的動畫,廣受家長及兒童的歡迎,但是動畫頻繁變換的畫面容易引起視覺疲勞,大多數動畫片每 6 秒會變換一次畫面轉場,超出了幼兒視覺神經的承受能力。在兒童不同的年齡段,注意力集中程度都是有所不同的,皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時長為 10 分鐘,4-6 歲兒童注意力集中平均時長則可達 15 分鐘。在我們為孩子們設計他們喜愛的動畫時,要充分考慮到這些因素。運營類動畫一般控制在 1 分半之內是較為合理的。
市場上很多 AI 兒童伴讀機器人,是可以自動推送產品內容的,考慮到兒童的健康使用,推送動畫的播放時間要善加利用,并減少觀看所需的步驟,在家長端也需要設計對應控制內容的開關,并將音量的控制開關放在顯眼易點的位置。
文章來源:優設網 作者:JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
不同的階段,臨摹的目的不盡相同。一般來說,前期臨摹更多的是練習軟件、技法,后期練習別人的風格表達,綜合運用。所以,我把臨摹分為技法臨摹、半原創到原創 3 個階段,每一個階段沒有絕對的界限,都是在積累創意,完全是可以用到自己的項目中去的。
今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。
大概是在 15 年左右,在網上看到錘子設計師設計的一個圖標,覺得非常驚艷,當時就想把它臨摹下來,這是當時臨摹的一個效果。
△ 原作
△ 這是我當時臨摹的圖
我在臨摹這張圖的時候,想達到的目標是能根據自己的 logo 色及文字,做一個半原創的設計。
然后實際練習中,不斷觀察原作發現有一些細節值得學習:
當時,對我來說,在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度,因為其中包括了粗細變化、虛實變化、明暗變化等等,單純的用圖層樣式或者矢量去畫的話,難度都比較大。這個細節當時耗費了我不少時間,后面突然想到其實也可以用合成的辦法來實現,然后我去找了真實水紋的圖片進行疊加,很快就搞定了。所以,只要能達到效果,不能太過于局限某一種思路。
分析并完成這些細節后,就是你在做這個練習中學到的點,嘗試把它們學以致用。
記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現,多彩顏料是當地的一大特征,所以決定以染料為關鍵詞去畫一個圖標,又因為顏料本身自帶多彩的特點,所以以它為主題圖標就很合適了。
然后在思考這個圖標的時候,首先會應用參考圖中的配色,并結合染缸的造型做出了第一版的效果。
這個效果雖然是表達了那個意思,但缺乏亮點,聯想之前練習過水的技法表達(臨摹中第 3 點細節運用),正好可以利用水的紋理做下強化,這樣就優化出了第二版。
嗯,看起來感覺有了一些特點,但感覺缺乏細節,接著思考水除了有紋理高光,應該還會有邊緣高光(結合臨摹中第 5 點細節),所以在邊緣嘗試加了高光,增加體積感,做出水要漫出來的感覺。
如果只有這一層高光的話,細節度感覺還是不大夠,在之前的文章《如何從優秀作品中偷師,用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用(臨摹作用中的第 7 點),這里因為是液體的材質表現,所以增加一個高光點增加水的通透感。
到目前為止,似乎看起來已經差不多了,但考慮到現實世界中,溢出的彩色液體在透光性很好的情況下,也會對周圍環境產生影響,所以我在顏料設計的四周,配上對應的四種顏色的模糊投影(臨摹練習中的第 6 點)。
在思考下,在臨摹的圖標中為了使得圖標更加自然,作品中其實結合了很多真實世界中會發生的情況,比如水的折射,氣泡的比例,深淺等等,那對于染料來說,會有怎樣的真實情況發生呢?我當時想到一點是,染料在用的過程中其實很容易灑出來,所以圖標背板上現在太過于干凈了,增加一些細節能夠使得背板能夠跟主體物產生關聯,也更加自然。嗯,又是一個小細節。
最后,我們對比下第一版和最終版的效果,細節確實豐富了很多。
一張動態圖可以更加清晰的看到變化。
這次圖標的優化過程,我覺得有幾個要點對我來說印象深刻的:
圖標的風格可以是扁平的,但想要增加自然舒服的細節,一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界,就算是一張照片中也能有非常多可以利用的細節。
碰到難做出來的細節,多想想有沒有更效率的辦法。比如在做水紋理的時候,一開始就想著完全靠鼠繪畫出來,結果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出來。
對于圖標來說,要注意其整體性。比如圖標中的主體物不要跟背景脫離,不要讓圖標背板只是作為一個容器,而要讓背板也成為圖標本身的一部分,這樣圖標的整體性會更好。
臨摹的過程中,一定要多分析,多記錄自己覺得是細節的點。每一次記錄,都可能是將來設計時提升細節的靈感來源。
以上內容只是我在日常練習中應用到實際項目中的一個小案例,其實還有非常多的靈感想法都來自于你平時做的練習,關鍵是要多動手,多總結,才能增強自己對細節的把握能力。
文章來源:優設網 作者:彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計系統基本就是組織如何構建數字產品的故事,在公司內部,設計系統改善了產品團隊之間的協作,而設計和工程團隊之間面臨的一個常見問題是:共享品牌準則和界面信息。在開發過程中,應該遵守還原設計的內容,但是我們都知道這并不是那么簡單。
從目標達成的角度來說,設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色,都能記住設計規范,結合設計原則(Perceptual Pattern )最終達成界面展示在用戶面前的樣子。這也就需要設計系統內,有一套控制性強、拓展性高的方法來維系產品的風格呈現,也就是我們今天將要討論的設計變量(Design Token)
什么是設計變量(Design Token)
在數字產品的概念中,許多中心和微小的UI信息片段將在多個平臺上使用,被稱為:設計變量(Design Token),他們是設計系統中設計語言的構建塊,也是設計決策的呈現。他們維護核心樣式的所有值:間距,顏色,版式,斷點,動畫,字體,平臺比例尺,組件狀態等,最終通過數據表示。命名規范和結構化的約束,可確保產品體驗的統一度與靈活性,更進一步可為產品打造賦有情感的品牌認知。
而對于SaaS類或者APass類的公司而言,設計變量還可提供給多個合作商所用,滿足多種定制化的訴求。
在以往的真實產品中,示例(如下),設計人員會發現,實現和樣式管理的環節在開發過程中是完全斷掉的,設計語言轉化為開發的語言時,缺少風格系統完整性的延續。我們通??吹降膕tyle代碼都是一些幾乎沒有體感的參數,且公司產品體量越龐大復雜,想要全局迭代就越是痛苦。
但如果我們將這些參數封裝起來,用語義化的方式來進行描述,就增強了“系統下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設計準則下情景化的歸類與描述。
但語義命名只是一個最終呈現,真正讓設計與開發者都能”讀語義,識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表,并讓大家對它們有著清晰的記憶。
這里我們將以群核科技旗下,工具設計系統(Tools )中的設計變量為例,來給大家進行詳細分析。首先在設計原則下,我們引申出設計變量規則的制定原則:精準、靈活、易讀。
意指歸類與對象的精準性,配置化的靈活度,語意命名上的易讀性。
對所需范圍進行定義,命名規則與前端書寫規則達成約定。
變量的“結構完整”,有助于設計與工程團隊在長期維護上,提升靈活度,3層繼承結構,很大程度保證了“精準”“靈活”這一原則。
主題定制
我們找到產品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動畫,陰影,斷點等等。通過這些具有統一命名規則的實體,用于代替硬編碼的值,直接集成到設計系統下的組件庫里,也在日常的產品界面開發中使用。
通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現,從而實現主題功能。
單個主題可供多個產品團隊使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”,“產品定位差異”等,也可通過創建新的主題,完成新的對應表,繼而產生相應的風格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業品牌”定制模式等等。
主題功能在產品中體現
跨平臺呈現
多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄,包括音樂,照片,文件和快捷方式,更加高效。它使iPad更具Mac感,也降低了學習成本。
目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加,設計和開發會消耗較多的時間在上面,而且很難去統一把控。
Design Token 在跨多端設計中不僅是存儲樣式的變量,更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動化的映射。
假設在移動端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會自動根據設備來取不同的值,通過一套設計就能實現多端運行,提升效率節約成本。
擁有了強大的設計變量樣式庫之后,它對我們的工作流程將帶來什么革新呢?
顯而易見的是,團隊將節省非常巨大的工作量,我們不再依賴單個工程人員的修改質量,且能更大程度減少跨組依賴。此外,早期設計工具無法與設計變量生成器進行本地通信,我們通過優化Sketch插件,完成了變量命名數據的輸出,使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。
產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整,設計師和產品團隊都將收獲全新的迭代方式,這是有歷史意義的一刻。
簡而言之,設計變量作為一個管理風格樣式的有效手段,可集成主題管理,對跨平臺開發也同樣起到作用。簡化團隊合作協作流程,提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。
文章來源:站酷 作者:酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
要讓創意產生粘性,有效而又持久,你必須有目的性提升對用戶的吸引力。如何提升?
「讓創意產生粘性」
這篇文章將梳理《行為設計學中的讓創意更有粘性》中的經驗,思考設計背后的六大原則,目的是要幫你把創意變得更有“粘性”。
這里黏性是針對創意而言的,黏性是指你的創意與觀點能讓人聽懂,能被人記住,并形成持久的影響,關注點在聽懂—記住—影響。而我們平常談到創意,想到的是創意的巧精妙。
那么我將用一句話,開啟我的分享“萬物皆可設計,創意設計也不例外?!?
所謂“黏性”,是指你的創意或觀點能夠讓人聽懂,能被人記住,并形成持久的影響(換言之,他們能夠改變受眾的思想或行為)。
簡單(simplicity):如何才能找到觀念的根本核心?表達必須簡短且深刻。簡單=核心+精煉,找到創意的核心,并用精煉的話語將它表達出來,那么你的創意將擁有強大的影響力,舉例:王老吉涼茶廣告:怕上火,喝王老吉。
意外(Unexpectedness):如何才能吸引聽眾注意我們的想法?必須打破人們的期待,違反直覺,利用對方的驚訝來提升警覺度和關注度,激發他人的興趣和好奇。粘性創意最忌諱的是平淡無奇,最基本的吸引力是引起別人的注意力,打破固有思維,最能抓住大家的吸引力,如海底撈各種出乎意料的個性化服務。
具體(Concreteness):如何才能把自己的觀點表達清楚?必須借用身體行為和感官信息來加以闡釋,因為我們的大腦總是樂于記住具體的事物。實驗得出,人們更擅長于記憶具體化的詞,而不是抽象的,形成一個長期的記憶力,如:香飄飄一年賣出七億杯奶茶,連起來可繞地球兩圈。
可信(Credibility):如何才能讓別人相信我們的創意?必須具備相應的信用背景。我們必須設法幫助他人親自證實這些構想,也就是觀念世界中的“先試再買”的行事哲學。如現在的老爸測評,先進行專業權威的測評報告,得到消費者的信任,最后進行流量轉化最后形成賣貨的電商渠道。
情感(Emotions):如何才能讓別人關注我們的創意?必須得讓他人有所感覺。人們更有感覺的往往是人,而不是抽象的事物。很多創意都采用創意本身與情感的聯系,如互聯網大廠都在進行動物的 IP 設定,其實也是通過故事性的包裝增加與消費者情感聯系紐帶。
故事(Stories):如何才能讓別人依照我們的創意行動?我們可以講故事。故事往往有鼓舞人的力量,我們并不需要創意來激發這些力量。我們只需要準備好生活中每天產生的好東西,通過故事的情節進行吸引粉絲,如快手、抖音很商家都會通過自己的故事情節進行吸引,樹立自己的人設形象。
打造成功觀點的六項檢查表:簡、奇、具、信、情、事。合起來的英文首字母為(SUCCES)。
以上是體驗設計學的一些理論,我們經常會在實際商業項目中思考,如何把商業目標與設計做結合?
我們進行設計時候首先應該關注三點:
設計師針對這三點我們應該怎么提升思考?
1. 了解商業目標
詢問你的產品經理或者運營,從他們那邊了解產品想要達成的商業目的是什么?
2. 設計上的支持
從中思考設計該如何支持商業目的,產生商業價值。
3. 監視市場反饋
關注目標完成后的商業價值指標,理解當初的設計思考是否吻合市場的思路。
市場中有很多好的商業案例都在,如增加用戶(拼多多砍一刀“簡單”)、提高轉化率(網易考拉會員卡片“具體”)
提高客戶貢獻度(iCloud 升級儲存空間,多種選擇“具體”)、留住用戶(刪除軟件后哭泣的形象“情感”)
在這些營銷設計中,他們是如何使用打造成功觀點并且運用體驗設計法則,使用原則后,我們可以通過數據化的監視市場反饋上,如轉化率、點擊率、UV/PV 增長,如果你所在的公司沒有數據怎么辦,其實我們可以做問卷、電話回復、App 評價,微博/公眾號評價獲得反饋。
文章來源:優設 作者:土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn