如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前一直覺得色彩,圖形,字體是 UI設計的三大構成,任何設計都是從這三大元素開始的,所有的 UI設計都是由這些構成的,但是卻忽略了界面中空間的運用,也就是我們常說的間距。今天我想分享下幾年前從 Google 的 Material Design 以及 8 pt grid 中學到的關于間距相關的教程,這篇分享有助于我們處理好界面間距一致性問題,讓設計更加統一,同時定義規范里面的原子設計方法,能完美融合。
間距無處不在,界面中的邊距,距離上邊,左邊,右邊,頂部等各種屬性。因此作為一名設計師,我們需要很好的掌握各種間距規律,通過間距規律很好的組織好內容。
是否大家和其他設計師在合作過程中,經常打開一個設計師源文件時候,發現各種間距大小,各種不一致地方,明明同一個頁面,已經定義好規范,但是每個人使用的間距大小不一致??赡苣銈円幏兑呀浂x好了,最小單位是5,按照5的倍數去做設計,但是還是會出現各種奇葩的間距,10,12,18等等?;蛘哒f有的設計師是按照5來說的,間距會出現10,15,20,25,30,很難解釋清楚哪種場景下用什么樣間距規則。
不止是設計師,估計研發打開我們標注稿都是崩潰的。所以我們需要去統一間距規則,它的優點是能很好的讓設計師之間合理的了解我們間距系統規則,同時開發在做設計開發時候,不需要每次都重復開發不同間距,導致整個 APP 風格混亂,那么我們如何去做呢?
對于設計師:效率上,減少決策和思考,當我做一個需求時候,我不需要考慮到底用多大間距,同時能保持元素之間的節奏。
對于團隊:設計師和開發之間溝通更加簡單,開發人員能很好的按照最小單位按照增量遞增去寫間距,而不必每次都進行測量。
對于用戶:他們信任的品牌有一致性的美感,在設備上沒有模糊的像素偏移等,就和微信一樣,說不出哪里好,但就是最好的。
△ Material Design 在他的布局中有講過,他們的間距,所有間距規則都是在8的倍數上進行遞增,而且并不是毫無頭緒的遞增,只定義了幾種增量關系,克制的有序的間距彈性,最小的是8,16,24,32,48,56,72。
△ 同樣在 iPad端,間距規則也是有序的,克制的間距彈性,而不會出現我們日常設計中經常間距隨意任選的使用,毫無規則亂用。
△ 在 Airbnb 的規范中,PC 和無線所有設計間距規范原則只定義了5種,8,16,24,48,64讓規則更加簡單,更好的統一了整個風格的一致性。
這些原則除了在元素和元素中運用,其實在按鈕中,在按鈕里面文字和上下左右的距離,都是有序的,我特別喜歡一句話,設計語言只有在有序的遵循和重復使用下才有用。
1. 定最小原子單位
這個最小間距規則可以是3的倍數,像蘑菇街、豆瓣一樣,如果你希望產品留白比較多,也可以是5的倍數,例如 pinterest、亞馬遜等,這個沒有絕對的,一切根據你們產品內容豐富程度決定。
△ 亞馬遜和 AliExpress 都是按照5為倍數來做間距增量
2. 確認間距彈性
大家都買過衣服或者鞋子,一般鞋子尺碼,只會有固定幾個(36,37,38,39,40,41,42,43)如果你需要的鞋子特別大,可能需要訂制,包括衣服也是同樣(XS,S.M.L.XL)。
在定義間距上同理,以往做設計規范的經驗,在上一步定義好最小單位就完啦,然后設計師按照增量去設計就 ok,這樣只是完成一半,如果按照4的增量(4,8,12,16,20,24,28,32,36,40….)這種帶來問題就是任何間距都不可預測,提供的選擇過于接近了,在什么情況下使用24,什么情況下使用28,我們很難去決策,如何去做。
之前在團隊做過一個調研,我們問了設計師,也看了很多設計源文件,包括國外也有一個類似調查,就是在用4作為設計原子間距做設計時候,設計師使用最多的間距有哪些?結果很有意思,使用16的占一半,8和32的占一半,所以定義太多間距其實毫無意義,只會帶來設計時候的不確定元素。
3. 根據業務場景,定義間距
正如前面所說,過多間距規則,只會帶來設計師困惑,徒增界面復雜性,對開發,對設計師都是一種負擔,所以我們在定義間距時候,一定要少,要讓我們間距原則覆蓋到絕大多數場景??梢詮?XS,S,M,L,XL 為參考,小,中,大為緯度。
△ Airbnb 的間距規則 XS,S,M,L,XL 是最小為8,常用8,16,24,48,64,Airbnb 則更加克制,給設計師選擇更少,反而更能保持設計次序。
△ quickbooks 的間距規則 XS,S,M,L,XL 是最小為4,常用8,16,20,40,60能很好滿足各種業務場景,包括各種的間距場景都是在此基礎上去拓展。
△ 那么界面中所有的間距地方,全部運用8,16,20,40,60這幾個原則來做設計,保證頁面統一性。
△ 包括頁面中的元素高度,比如 banner 高度也是按照間距增量去設計高度,那么整個頁面就更加有系統性和科學性。
△ 這也是我們在做系統設計時候經常用到的,通過增量來做設計。
△ 同理,在國外很多優秀產品中,我們不難發現這種規律的使用,更好的提升了設計效率。
統一簡化間距規則,通過這些規則,構建一致性界面,所有邊距,元素空間都遵循規則時候,對于視覺設計和開發人員來說,都能很好解決一致性和效率問題。
在我們剛開始設計時候,可能會覺得沒有真正的好處,但是當項目越來越復雜時候,團隊規模越來越大,每天處理各種設計原子和設計分子時候,你會發現,當你使用固定的間距,它會比之前隨意的間距規則有更好的效果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
頭腦風暴是創意點子常用的方法,那么從用戶出發的腦暴有什么不同?從過去幾年用研發現向產品方案轉化的腦暴案例中,總結成功與失敗經驗,提煉出目前最優的流程與執行技巧,一起來提高創意點子產生的成功率吧!
關于新產品創新的成功率,有這樣一組數據:3000個原始想法,能變成300個成熟想法,300個成熟想法能產生125個項目,其中大概有9個能進入早期開發,4個能大力開發,最后成功的只有1.7個。(來自彭肯恩博士的研究)
大多數點子的失敗,可能的原因有很多,比如疏于對趨勢的關注和研究、缺乏理論的突破、缺乏執行力、難以逃脫組織思維慣性等等(來自創新管理課程),其中還有一個常常提到的原因:離用戶太遠。在最初想點子的時候,由于不知道用戶需求、腦補用戶需求、片面地針對用戶表面部分需求卻忽視深層需求來規劃,就會導致產品或功能開發完成以后,不知道目標用戶、目標場景,也不知道對用戶的價值,最終產品也會因用戶不去使用,而導致創新失敗。
作為用戶研究者,洞察和分析用戶真實需求是我們的本職和專長,但如何把這些用戶研究的發現以更有效的方式轉化為「靠譜」的好點子,則需要與團隊里各個角色一起不斷的努力。從14年起,我們在一次次從用研發現到產品點子的頭腦風暴實踐中,不斷優化流程、評估效果,形成了現在的「從用戶出發的創意腦暴」流程,在這里分享給大家。
傳統的頭腦風暴法(brainstorming)相信大家都熟悉,就是一組人圍在一起,隨意的將腦中與主題有關的見解提出來,再將大家的見解分類整理。但在實際執行的過程中,頭腦風暴的現場卻常常交錯著討論、腦補、推理、玩笑等等,然后時間很快過去,卻沒有產出「靠譜」的點子。從用戶出發的創意腦暴,是以典型用戶故事為線索,輕松、的產出點子的頭腦風暴過程:一方面,線索契合用戶真實完整的需求場景,點子變得更容易想也更符合用戶需求;另一方面,通過流程上的細節設計,可以更的激發點子產生。
整個過程分為8步。雖然常常的情況是一個人想不出方案,就馬上拉人一起腦暴發散,但其實腦暴前的素材和流程準備,以及達成共識對腦暴的最終效果起到了至關重要的作用。
產生好點子的前提是問對問題,問對問題需要跳出眼前的思維限制,但又不要太天馬行空。要做到這點并不容易,這要求腦暴的組織者在一開始就想清楚團隊真正要解決的問題是什么,而不僅僅「產品的某個功能眼下要怎么做」這種具體問題(這樣的問題聽起來就讓人疲憊)。舉個例子,當眼前的業務問題是想出一些裝扮功能,如果把腦暴的主題定為「裝扮還可以做哪些新功能」,思路就會陷入現有的裝扮流程里,這時點子的方向已經被具象和限制,有時甚至是無解的;如果定為「如何幫助用戶通過裝扮來表達自己」(前提是用戶真的用裝扮在滿足這一需求)就會更合適一些,這樣就可以去想如何通過裝扮表達自己的心情、興趣、狀態、、所屬群體身份等等,思路打開的同時又與業務結合;而如果僅僅是「用戶如何表達自己」,想出的點子,就會太泛,脫離業務。
首先,有選擇的邀請樂于分享、樂于溝通、思維活躍的人,他們會自然而然的產生想法,互相交流,否則每個人盯著自己的點子說著自己的故事就會喪失一組人在一起的意義;其次,在邀請成員時,不建議只有自己組的組員(雖然這樣比較方便),因為參與角色的多樣性一方面可以相互激發創意,同時也讓點子在收斂階段能得到更多元的評價(比如工程師對點子可行性的評估就有其專業的判斷)。在人數上,雖然6-8人是腦暴的建議人數,但因為我們的腦暴流程會讓點子批量產生,人數的增加會直接導致后續點子收斂時效率的降低,所以目前來看建議6人為佳。
用戶故事的準備是腦暴的一個關鍵,吸引著我們不斷的去改進和探尋。過去,我們也有過一些不太理想的嘗試:讓參與者分享自己的故事(如畢業生如何找房),這時很容易就根據主觀和片面的需求想點子;給出一些用戶需求的詞讓大家聯想(如不孤單),這時參與者對著普通又太正確的詞已經想過很多遍,很難進入狀態;給出一系列相關故事(如多個類似的故事)幫參與者發想,這時呈現的信息對參與者來說已經過于復雜,傳達的效率很低;給出的每個故事都帶有用戶痛點(如粉絲給明星發消息得不到回應),這時參與者往往會依照故事中的情節去推理,絞盡腦汁非常辛苦,卻忽略了沒有痛點的地方藏著用戶的真實需求(如粉絲默默的把想對明星說的話記錄在手機備忘里)。
所以,目前的做法是:
舉例來看,研究粉絲的過程中,我們發現有的粉絲會組團給偶像投票打榜并感嘆「團結就是力量」、有的粉絲會在活動現場和他人一起大聲應援并覺得暖心、有的粉絲在 QQ群和其他粉絲一起討論相互訴說并且感覺很棒。這些故事都反映出粉絲對于「群體」、「團結」的訴求,將這幾個不同人的真實故事綜合起來,就形成了一個特別在意「團結形象」的典型粉絲故事。這個「團結」的典型故事和「秩序」、「強大」等等典型故事一起反映了粉絲「群體形象」方面的訴求。
通過這樣的方式得到的典型故事不僅有真實故事的細節,而且嚴謹地反映用戶需求,信息量大,結構完整。腦暴參與者面對這些故事,就很容易理解,并聯想出更多符合用戶真實需求的點子。整個過程說起來簡單,但在實際執行時卻考驗著研究人員的大局觀、邏輯能力、洞察力、組織能力等等,整個研究過程有時可能會需要1-2個月。
在腦暴流程上的設置上,主要的嘗試點在個人想點子和大家交流點子的方式和順序安排。如果大家同時一邊想一邊交流,會出現沒空思考或有人不認真想的情況;如果大家先寫再輪流說,會出現思考時獨立思考,交流時只關心自己的說法而忽視交流發散的情況。所以在嘗試了默寫式頭腦風暴(后文會詳細介紹)后,我們就沿用了這個鼓勵思考交流、弱化發言的腦暴方式。
另外要注意的一個點是,不用在流程上對想點子的思路有過多的限制,比如告訴參與者「你可以先想什么再想什么」或「你想出的點子不能太抽象或太具體」,這種「急功近利」的做法會讓參與者困惑和緊張。相反的,應該要做的是讓他們放松,比如放一些音樂、擺一些零食等等,這樣更容易產生想法。
在腦暴前,向參與者說明本次腦暴的目的、主題、流程和規則,能夠幫助大家統一目標,提率。
頭腦風暴的四個基本規則在腦暴過程中要落到實處:
組織者也可以給出一些用戶研究的發現,幫助大家建立概念、了解用戶。
默寫式頭腦風暴是在奧斯本頭腦風暴的基礎上改造而成的一種書面腦暴方法(具體操作方式如下圖)。從用戶出發的創意腦暴在此基礎上,增加了用戶的典型故事作為線索。在開始前,每個參與者會拿到3張用戶典型故事卡;在第一個5分鐘,每人針對3個故事各寫至少1個點子,貼在故事卡上,然后傳給右鄰;第二個5分鐘,每人從傳來的故事卡和前人的點子上得到啟發,再各寫至少1個點子,傳給右鄰;這樣直到故事傳完,就能得到至少6 x 3 x 6=108個點子。這也是為什么前面提到要控制參與者人數的原因,因為每增加1人,就會多一輪腦暴的時間,點子的數量會相應增加,在下一步分類交流時的工作量和時間也會直接增加。
在已經有了一百多個點子的情況下,現場投票可以快速把「好點子」篩出來。但由于在寫點子的時候,把想法準確的表達在一張便簽紙上并不是一件容易的事,所以在投票前,還是會有一個簡單的交流,讓大家了解彼此的點子,同時合并類似的點子。
投票分為感性輪和理性輪:感性輪是讓人眼前一亮的點子,每人3票;理性輪是可行或能有效提升業績的點子,也是每人3票。這樣兩個維度交叉出來就能得到既讓人眼前一亮,又具有可行性的點子。參與者多樣的背景也讓點子的評估更加全面。
腦暴結束并不是點子的結束。最初的點子只是一句話或一個示意圖,從點子走向方案,還需要不斷地打磨交互、視覺、文案、邏輯、場景等等方面的細節;從方案到投入開發乃至上線,則需要綜合考慮優先級、人力、技術等更多方面的問題;在上線后,點子的可用性以及對業務的效果,也需要提前規劃和進一步驗證。
總的來說,從用戶出發的創意腦暴,在線索和流程設計上做出了一些嘗試,讓產生的想法更加符合用戶真實需求,以此來提高創新點子的成功率。但創新畢竟不是一件容易的事,在未來,我們也會不斷地嘗試和打磨這個流程,思考更好的方式,讓創新有跡可循。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
人人都是產品經理 2018-07-21 15:13:33
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
企業產品要想取得最大的成功,就應該為用戶提供符合消費產品標準的體驗。
在John Maeda最近的一篇文章“為企業設計與為消費者設計之間的區別”中,他解釋了為什么為企業設計與為消費者設計應用程序相比是不同的,也許更具挑戰性。
然而,作為一個為企業、小企業和消費者產品設計應用程序的人,我逐漸相信,在過去幾年中,為消費者和企業應用程序設計的區別已經迅速縮小。
對于一個企業產品來說,要獲得最大的用戶接受度和長期的成功,我們應該為最終用戶提供一種體驗,這種體驗必須滿足消費品中同樣的可用性、性能和品牌標準。
對于傳統的企業產品,過去的模式是將產品賣給公司的高管,然后員工使用他們提供的工具。如果應用程序難于使用,員工會盡可能少地使用它,而是使用耗時的、通常是手工的變通方法,以避免在工具上花費時間。
如今,團隊和員工經常選擇自己的產品,這意味著贏得勝利的是最好的產品和設計,而不是最好的銷售和營銷。Slack、Sketch、Dropbox、Sunrise、谷歌Drive和Asana都是這一趨勢的例子。
因為在不同平臺之間切換的成本比以前要低得多,所以在工作中選擇自己的工具要容易得多。我看到員工們選擇為他們工作的日歷工具、通信工具、文檔存儲系統,甚至設計工具,比如:草圖。越來越多的大型團隊工具決策,是自下而上的。用戶正在選擇他們喜歡的軟件,而不是強加給他們的軟件。
這意味著,企業產品的構建需要越來越少地考慮,如何在企業產品設計中應用消費者思維,而越來越多地考慮如何在企業產品設計中應用消費者思維。
作為一名設計師,你的目標是開發一款非常棒的應用程序,讓你的用戶想要在屋頂上大聲談論它,并與所有的隊友分享。
在這種情況下,接受是隨機的,用戶最終會對您的產品更忠誠,而不是他們被迫使用的東西。
盡管許多企業應用程序都是基于云計算的(例如:Salesforce、Quickbooks、Marketo、Infor等),但消費者對速度的預期與桌面應用程序的預期并無不同。
如果基于云的應用程序需要花費時間來加載,用戶就會離開。Gmail和其他在線應用程序,已經為響應性和性能設置了標準。
正如我與協作設計應用UXPin共同編寫的《企業用戶體驗的未來免費指南》(free guide the Future of Enterprise UX)中所解釋的,設計師還應該努力創建一種無需外部培訓的應用程序登錄體驗。
這仍然是我看到企業產品設計公司猶豫不決的地方,人們會說:
“好吧,人們理解這個工具需要一點培訓,因為它比消費者應用程序復雜一點?!?
為人們在工作中使用的產品不應該成為糟糕設計的借口,如果你遵循常見的UI結構——定位用戶,給他們一個具體的用戶好處,讓他們覺得他們已經獲得了寶貴的時間——他們將繼續學習使用你的產品,就像他們學習視頻游戲、移動應用程序和其他東西一樣。
例如:在為Intuit的旗艦產品QuickBooks設計登錄體驗時,我們詢問了關于業務的關鍵信息,然后根據所提供的信息定制體驗,為用戶做一些初始的設置工作。這有助于產品感覺它是為最終用戶和他們的業務設計的。
我們創建了一個屏幕,顯示了同一行業和位置上Quickbooks用戶的數量。在傳統的登錄體驗中,不需要這樣做,但是這種流程的轉換要比步驟更少的登錄體驗高。屏幕告訴人們:“我們將為您設置產品,從而為您節省時間”,這也強化了他們正在選擇行業領導者。
第一次使用體驗的新工具條不僅適用于嘗試使用它的人。它必須足夠好,讓他們在與團隊其他成員和他們的公司一起倡導產品時感到舒適。
企業客戶不應該接受這樣的概念:他們需要實現專家來為客戶定制產品,客戶應該能夠自己做到這一點。
如果您設計了一個企業應用程序,它可以由使用它的團隊定制,那么您就給了他們一種對產品的投資和所有權的感覺。你賦予他們力量,給用戶信心。用戶把產品做對,從而變得更加忠誠。
此外,作為企業供應商,如果您將時間/資源用于客戶的定制實現,您將沒有足夠的資源用于應用客戶反饋和創新。
盡管企業用戶體驗和消費者用戶體驗之間的差距正在縮小,但在設計業務應用程序時,仍需要考慮一些持久的差異。
使用企業工具,您正在處理非常有價值的數據,因此如果您將數據隱藏在有趣的和不尋常的交互中,可能會讓用戶感到沮喪。作為一名設計師,您希望遵循已經存在的用戶界面標準,將您的創新重點放在產品中比現有產品更好的部分。
作為一個谷歌文檔編輯器的用戶,我不需要知道如何使用文檔編輯器,因為它大量地借用了我使用Microsoft Word所知道的東西。谷歌在執行過程中所強調的是,將創新集中在差異化上:將其與MS Word區別開來的協作工具。
我唯一需要學習的就是——如何邀請別人和我一起編輯?
一旦我有了這個概念,我就可以用成千上萬個有趣的方法來使用這個應用程序,并且在我使用擴展我的應用到其他相關產品(比如:演示)的過程中,建立我所學到的東西。(我將第一個承認,在選擇使用現有范例的地方,設計師很難做到自律,而且仍然非常專注于在哪里重新設計)
如果你是為Facebook或Pinterest這樣的消費者工具設計的,你自己可能就是用戶。對于企業或業務應用程序,情況往往不是這樣。
這意味著你必須既是一名優秀的研究者,也是一名設計師。
當我在Intuit公司時,知道如何設計一個好的web應用程序,是不夠的,我還必須了解會計結構,以及小型企業/會計師的需求。我從來沒有開過小公司,所以我必須花更多的時間與使用該產品的人交流,學習和理解他們的目標和動機,比我在其他公司花的時間要多。
我邀請了其他人(比我知道得更多)和我一起設計。值得慶幸的是,在Asana,我們使用我們的應用來完成我們所有的工作,所以我們可以體驗我們的用戶體驗。
我很高興看到設計師和設計領袖對創建企業工具更感興趣,我認為這是因為消費者和企業之間的差距正在縮小。
有了消費者應用程序,你就可以設計出一種影響到數十億用戶的工具,并將娛樂帶給世界。但隨著時間的推移,設計師會感到矛盾。許多消費者應用程序通過廣告賺錢,因此用戶目標和公司目標并不同步。用戶在想:
“我想看這個視頻,公司在想,‘我們怎么能讓用戶在看這個視頻之前看更多的廣告呢?’”
為企業和其他付費應用程序設計的好處是:終端用戶的目標和您的企業的目標是一致的,你的公司只有在用戶成功使用該應用時才會受益。通過企業工具,你正在構建產品,幫助組織及其員工實現他們的目標,幫助所有企業更好地完成他們的工作。
原文作者:Amanda Linden
本文由 @ ANG 翻譯發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Pixabay,基于 CC0 協議
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在做UI設計之初,我就有跟蹤一些app版本和更新的習慣。在互聯網行業工作久了,我總是會從他們每一個版本的產品形態去揣測這個公司的動態??吹揭恍┕δ芎徒换c,我會設身處地地思考如果我是他們的產品設計師應該如何處理;遇見一些深得我心的功能點,我也總是有一種和他們的產品設計師惺惺相惜的江湖感情。反正久而久之,我邊猜測邊總結,也是養成了自己的一套“歪門邪道”的方法論。
言歸正傳,我們來看這一篇文章的內容。
時間來到了2017年,手機空間越來越大,大家的手機中也裝了越來越多的app。很多時候,當拿起一個朋友的手機,看他手機里都有哪些應用,這些應用的優先級是如何排布的,我經常會從中得出關于這個人的另一層線索。
比如一個人手機里優先位置上有脈脈、知乎、豆瓣、一個ONE、單讀這幾個app,那我可以推測這個人一定是具備文藝屬性的互聯網從業者。
比如一個人手機封面是吳亦凡或者鹿晗,手機里優先位置上有優酷、愛奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆app,就可以看出這是一位愛綜藝、愛追星、愛剁手的小姑娘。
……
1. 意識是主觀形式與客觀內容的內在統一
如果說2013~2015年app的 UI設計上充斥了很多同質化產品的話,到了2017年,UI設計師們在dribbble和behance的風格影響下,產品的設計有了更多的發展空間。我們不得不說的是,現在的app比之前越來越好看和越來越好用了。
如下圖所示我隨意截取了九個我自己覺得UI很棒的產品和大家分享,他們分別是Enjoy、單讀、Artand、Airbnb、一個ONE、Gilt、良倉、Zeen、和氧氣。
那這里有一個關鍵的問題就出現了,為什么有些app,普通用戶一打開就自然而然地覺得它很美?用戶這種“覺得它很美”的意識到底是從哪兒來的?
在此之前,我先來說兩組哲學概念。
意識是主觀形式與客觀內容的內在統一。(馬克思主義哲學)
內容決定形式,形式反作用于內容。(黑格爾唯心主義哲學)
為了闡述用戶這種“覺得它很美”的意識到底是從哪兒來的,就必須要了解app中“內容”和“形式”之間的關系。那我們不妨來看一下什么叫內容,什么叫形式。
2.內容
如果斗膽給app設計工作中的“內容”下一個定義的話,我大概會說:內容是集成在app中,所有可被感知的圖片、文字、聲音的合集。這里之所以說是可被感知的,主要是從用戶層面上看,忽略了用戶不可感知的“代碼”層面。
那么我們有必要搞清楚的是,一個app的內容到底是如何產生的?也就是一個app到底是如何產生的?
那這里我不妨展開一下,假設我是一個產品設計師,有一天CEO告訴我最近想做一個電商app。(這里我假設我們公司很有實力,忽略了市場和運營、渠道和資金上的問題,只考慮產品設計方面。)
那這個時候我會問老板:“老板,你做電商類app,是想做平臺類的呢還是做垂直的呢?你可想好了啊,你做平臺類的想要從淘寶、京東分份額的話,那你必須要有自己的特色。比如國內app‘xx’、‘xx’和‘xx’、他們都有自己的特色?;蛘哒f你是想做垂直一些的么?比如‘xx’是專門做化妝品領域的,比如‘xx’是專門做美食的?!比缓罄习灞晃乙环榜Z化”之后得出的結論是我們來做一個美食電商,但是這個美食電商不會對標Enjoy那樣的高檔人群,而是做成類似于“什么值得吃”這樣的大眾場景。
好,故事講完了,現在我化身為這個產品設計師,簡短片面地闡述我的思考過程:首先我拿到的目標是做一款“什么值得吃”app,它的目標人群是全中國吃貨,且要滿足吃貨推薦、評價和在線下單支付(前期無法做渠道的話需要跳轉淘寶京東鏈接)等功能。
經過一番思考,我認為這款app的MVP狀態應該需要如下圖所示的功能。
這里簡單說一下MVP是啥意思?!癕VP=Minimum Viable product(最小可行產品)”是《精益創業》的作者埃里克·萊斯提出提出的一個概念,字面意思就是可保證產品正常使用(主邏輯閉環)的最小產品單元。MVP又分為Validating MVP和Invalidating MVP,在這里就不展開了?!毒鎰摌I》是一本特別贊的書,推薦大家閱讀。
我設計的這個其實是Invalidating MVP,大概需要四個部分。
“推薦”是核心,以帖子形式或者別的什么形式推薦一些東西并附上鏈接?!皩n}”方面做一些可供運營和推廣的專題,比如“情人節送什么巧克力”、“最適合食辣族的幾款辣醬”之類。“商城”里面會放一些自營的物品?!拔业摹崩锩鏁形业耐扑]、我的收藏、我的訂單之類的一堆東西。
你們發現了嗎,其實這個時候,產品設計師就已經在定義產品的信息架構了。
第一,因為這個app叫”什么值得吃”,那我們是不是還需要推薦一些線下值得吃的店呢?如果做了是不是就和Enjoy同質化太嚴重了?那最好就是先不做。
第二,在推薦這一頁里面我大概需要什么功能,因為面向的對象不太像Enjoy那種偏一線城市的人群,那我應該用戶群體同類對標到今日頭條這種level的感覺。
第三,這個首頁我是按照各種食品屬性的分類來建立推薦列表呢,還是說我按照人的屬性來建立推薦列表呢?如果是按照食物的分類的話,給別人的感覺可能和淘寶很像,比如我在列表里面看到“巧克力”再點進去看巧克力的推薦,和我在“甜品族”這個人群標簽里看到某巧克力好吃,這兩種行為邏輯給用戶的感覺完全不同。大家體會一下,作為“什么值得吃”這款app來說,肯定是后者更適合,所以得出結論是以人的屬性建立推薦列表。(我甚至考慮到了以后迭代未來功能版本的可能性,比如到時候每個人可以有多種身份標簽,再去做匹配社交之類的。)
好,那我現在關于產品首頁大概得出了以下幾點感覺。
(1)首頁推薦按照人的屬性標簽去區分推薦列表。
(2)產品風格不宜太洋氣(尤其是一定不能像Enjoy那樣使用黑白配色),最好是產品對標今日頭條和微博的感覺,受眾偏向二三四線城市。
(3)每一個推薦應該有收藏、購買鏈接等部件,在首頁上應該有專門為運營活動或者市場換量設置的入口(可能是banner形式)。
(4)為了不使推薦屬性具有傾向性,每一個推薦都應該盡量層級平行。(比如“吃辣黨”和“甜品族”就應該入口平行。)
(5)一定要保證一個完整且通順的支付邏輯和用戶推薦邏輯,這是最基本的兩個功能。中間可能涉及到推薦里面要有商城鏈接(如果商城沒有的要跳轉淘寶),自己的商城要支持支付寶、微信等支付方式,要有訂單狀態和退單等一系列功能,余額功能或退款自動退回功能二選一(看公司需不需要資金池)。
....(此處省略N條)
其實,app“內容”的產生,就是我上述這些奇怪東西的綜合(當然其實并沒有上述這么簡單,這個以后有機會細講),比如我們從上面的論述當中,可以歸納出這款“什么值得吃”app的首頁“推薦”應該具有如下信息。
我寫這么多字其實就是想告訴大家一個app的“內容”是如何產生的,當然我這里說得十分簡單,真實情況可能比這個復雜百倍,大家意會就是了。
好了說完了內容,我們來看所謂app中的“形式”又是什么。
3.形式
如果說我們把所有集成在app中可感知的圖片、文字、聲音的集合稱作app的內容的話,那么app的形式就是“承載這些內容,使內容更好被感知的方式”。
人有五感,包括視覺、聽覺、嗅覺、味覺和觸覺。而人去和一款手機應用進行交互的時候只會從視覺、聽覺、觸覺(反饋)三個方面去感知,而觸覺涉及到交互層面,以后我寫到app的交互架構的時候會詳細說。 聽覺其實也不是本文重點,我舉個例子一筆帶過就好了。比如大家都用過滴滴,滴滴有一個“內容(功能)”是司機送一個乘客的過程中,當判斷距離目的地很近的時候會默認進行一個“下一單的匹配”的功能。我們用滴滴的這個功能來對比手機游戲里面的“匹配下一局”,我們會發現這是幾乎相同的“內容”,但是承載形式不一樣。手游是視覺展現,你必須點擊手機上的“匹配”按鈕,而滴滴因為考慮到司機在開車很難解放雙手去點擊匹配,所以從產品邏輯上設計的是“語音提示+主動匹配+手動接單”的方式,所以我們總能在快下出租車的時候聽到司機手機上傳出響亮的“開始接單啦”語音提示。
本文的重點是視覺。
可能在大家以往的工作當中并不會關注一款app原型是怎么樣設計出來的,大家可能只會關心我拿到原型以后應該如何轉化為驚艷的高保真頁面。
把一個內容整理、排列成一個app頁面,就是大家更關心的“形式”的部分。還是回到上文“什么值得吃”這款虛構的app上,綜合上面的觀點,我大致能畫出原型如下圖所示兩種。
當然這個是最粗糙的原型。(如果各位UI設計師在工作中接到了類似于這樣的原型那只能說心疼你們一秒。)那么問題來了,大家在生活中一定見到過這兩種原型的app。左邊這個很常見,比如斗魚tv這些直播平臺,早期閑魚、網易嚴選和今日頭條等都是用的這種感覺;右邊這個就更常見了,不論是點餐平臺(美團、百度、餓了嗎),還是大型電商(京東、淘寶)你都可以看到它。
那么問題來了,嘗試分析一下,上面這兩種形式到底有什么優劣呢?
第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制標簽(tag)的字數,你懂我是什么意思吧?比如今天有個運營跳出來說我們做一個新的標簽把名字叫“酸酸甜甜就是我”。產品一定特別崩潰,原因如下圖所示。
第二,由于右邊的標簽占據了推薦貼的位置,導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的,右邊的優勢在于,由于豎向排列可以讓一個屏幕顯示更多的標簽,這一點就需要取舍,比如一個產品的初期沒準備放這么多切換標簽的話,還是建議用左邊那種。
更深層次的,外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜,而且外賣產品的左側標簽一般是一家店鋪的菜的品類,用戶下滑菜品配合點擊品類,點完即走,很方便(京東和淘寶電商類平臺也是類似的)。但是比如早期的今日頭條只能采用左邊的這種形式,因為頭條是需要用戶長時間沉浸的,比如用戶選中一個“體育”的標簽一般要看好久好久,用戶需要沉浸在這個標簽下的內容中,那這個時候顯然用右邊這種設計方式讓標簽常駐屏幕左側是不合適的。
基于以上分析,作為內容+電商平臺的“什么值得吃”應該選用左邊這種設計形式。
好,“什么值得吃”這個虛擬的例子就說到這里,主要是讓大家明白內容和形式之間的關系,只有你們明白了這個,才可以正式進入本章的主題——app的視覺美成因分析。
4.app的視覺美成因分析
首先來看結論。一款app讓你感覺到長得美,一定是團隊在兩個方面下功夫了——第一是內容的視覺優化,第二是形式的視覺優化。
我先來給你們看兩張圖,讓你們感受一下什么叫內容的視覺優化。
你們可以看到左右兩張圖,左邊是Enjoy的精選頁,右邊是我隨手糟蹋的,大家會發現其實信息內容一模一樣,但是左邊的和右邊的視覺設計差距大家一眼就能看出來吧。如果出現右邊這樣的UI稿,那只能說明這個團隊在內容的視覺優化上面不用心!以上就是內容的視覺優化的作用。關于內容當中的圖片,其實大家都有直觀感受:一款app允許用戶自定義的圖片越多,這款app視覺就一定越難把控。原因很簡單,因為用戶自定義的信息里面,文字信息我們是可以通過限制字段和select(選擇)去控制的,但是對于圖片來說,哪怕控制了用戶自定義圖片的尺寸,我們也無法控制這些圖片的質量。大家去看一下秒拍這款app,它的框架設計做得很棒,包括一些empty status(無內容狀態頁)的小圖標繪制都很棒,但是我們打開app的時候,首頁的內容總是參差不齊,差強人意。同理還有閑魚這款app, UI框架做得很漂亮,但是內容頁面總會顯得沒那么“高大上”。
Enjoy,自如、氧氣、想去以及Gilt、美團等這些輕量電商或者租房app都選擇花一大筆成本自己聘請一批或全職或兼職的攝影師的原因,就是為了得到符合自己規范的優質內容圖片(比如你們去看自如的房源信息照片基本就是那種樣子,氧氣的內衣樣片背景永遠是白色)。
我之前做過一款旅行游學類app,在立項之初我們的圖庫里面就已經有了幾萬張高質量有版權的攝影師作品,然后在設計的過程中大膽采用流式布局(類似于今天開眼app),大量展示優質圖片,才使得在2015年初那個時期我們的UI風格比較具有鮮明的特色。
其實這也是一個產品團隊需要深思熟慮的點:
·比如旅行app,一定要有大量優質的圖片作為依托才可能美。
·比如淘寶這種體量的大型電商,那除了盡可能控制圖片質量以外,更多的應該在優化專題和banner上,并且告訴入駐商家(用戶)上傳優質的圖片更容易獲取用戶流量從而轉化為成訂單。
·比如知乎、貼吧之類這樣的問答和社區,用戶上傳的圖片五花八門千奇百怪,那我們可以考慮在首頁列表展示的時候就壓根不要展示圖片……
那是不是內容的視覺優化只包含圖片的優化呢?其實不是的,除了圖片的視覺優化以外,icon的優化、文字的視覺優化這些都是很重要的。
關于icon的優化大家應該已經看過足夠多的文章在這里我就不贅述了,比如線性icon里面不能摻入塊狀icon,負空間icon里面不應突然出現一個奇怪的漸變icon。我有一點心得可以分享,比如大家畫了一個2px的線性圖標用于@2x,那在plus iPhone 的plus機型,6p 7p 8p都叫plus上面應該要手動調整一下圖標變成3px而不是用png自動生成,否則會有虛邊(除非你們的工程師使用的是svg的iconfont)。
關于文字的視覺優化,幾乎市面上的所有app,只要涉及文字內容的排版,毫無例外都做得很好了。從根源上出發,為什么一個設計師需要去不厭其煩像個工匠一樣折磨開發調整字體大小間距粗細什么亂七八糟的東西?其實,字體視覺優化去達到的目的主要有兩點:
(1)輔助視覺對焦
(2)減輕視覺壓力
第二點沒什么好說的了,大家應該都明白,主要說第一點,視覺對焦這個事情是這樣的,我們在一個界面中,如果不出現特別突兀的信息,正常人眼一般是從左到右,從上到下的順序閱讀。
比如上圖是一個閱讀界面,所有問題都沒有特別突兀的地方。我們把界面做一個高斯模糊去分析視覺焦點,會發現整個頁面呈現很平和,所以,這個頁面的閱讀順序應該是一行一行地閱讀文字,也就是從上到下,從左到右。
但是,這只是頁面形式很平的情況,舉個沒那么平的例子。
上圖是知乎的一個頁面,我們把它去色并且高斯模糊去分析它的視覺焦點。大家會發現其實視覺焦點是加粗加大的標題字體和上面的小頭像構成的。
這就是使用文字優化去輔助視覺對焦。我不妨再舉一例,大家來看下面的2016年5月左右的氧氣app截圖。
左邊是氧氣的原UI,右邊是我做的對比圖。顯然,關于文字優化輔助視覺對焦這一點,氧氣的設計師深諳此道。他們沒有按照右邊那種傳統辦法設計這個頁面,而是把每一個深夜話題的題目都變成了一張圖,變成一張圖還不算,還在這張圖上面用淺綠色“劃了重點”。這樣雖然加大了設計師的工作量,但是這個頁面正是因為這樣的處理,能讓用戶第一眼聚焦到標題上。
關于內容的視覺優化,我來總結一下吧。
app內容是集成在app中,所有可被感知圖片、文字、聲音合集。那么內容的視覺優化主旨在于通過圖片,文字,圖形(icon)等的優化,去使得app更加易讀、易用和美觀。
說完了內容的視覺優化,我們再看一下形式的視覺優化案例。按說只要內容都已經優化好了,表現內容的形式不是排得特別爛,視覺效果展現出來應該都不錯。我們再重復一遍app形式的定義——能更好地承載內容,使內容更好地被感知的方式。
我們該如何去排列不同的內容讓它們更好地被感知呢?
這里面最常見的方法就是UI組件化設計,關于UI組件化設計我個人的定義是一款app里面同樣形式排列但是不同內容的單元。這樣的例子不勝枚舉,我們每天都見到的最常見的一個組件化設計是微信里的每一個table view (表格視圖)。
大家打開你們的微信,可以看到其實微信的聊天列表的每一個單元都是由固定的內容組成的。內容包含一張圖(頭像),兩段文字(名字和信息),一段時間組成。
再看以下兩個頁面。
先看左面這個頁面,雖然第二個品牌故事被遮擋了很多,但是由于我們看到了第一個GUCCI的banner之后,用戶心理預期就有了,用戶左滑一下屏幕大概率出現的也是這樣形式的不同內容。
再看右邊這張圖,一個app的每一個專題都是以一本雜志的形式呈現的,所以當你看到這個頁面的時候,用戶心里會有“我左滑右滑都是一本專題書”的預期。
在設計過程中,我們往往會把相同屬性的內容設計成同一形式。這樣做有什么優點呢?最大的優點是減少用戶認知負擔,使得內容更好地被感知。
舉個大家都懂的格式塔的例子。
看上圖A,大家都知道接下來一個一定是正方形,但看上圖B,下一個別說你們不知道是什么,我也不知道。格式塔相似律告訴我們,人們在知覺時,對刺激要素相似的項目,只要不被接近因素干擾,會傾向于把它們聯合在一起。
那么我們就很容易解釋下圖。
大家看到這里是不是很熟悉?聯系上下文,現在應該知道為什么市面上的app都這么設計了吧?還不就是為了讓用戶更好地接受信息。
5.總結
一切UI設計本質上是為了更好地展現信息。
更好地展現信息是為了更好地指引用戶完成交互操作,從而讓用戶更好地去接收信息并完成一定功能目的。
本章一直在講述app信息呈現上的視覺優化。其實視覺優化也好,邏輯優化、交互優化也罷,都是為了使得app更加好用、易用、有效。
在我剛開始接觸UI設計的時候,也曾經沉迷dribbble,不斷模仿那些大師們的驚艷界面。在長達一兩年的學習和工作中,我一直認為UI設計師的本職工作就是畫一個漂亮的殼子,把信息裝進去然后能讓app變得更好看而已。
但是后來我完全不這樣想,如果現在讓我評價一款app的UI,我可能真正最看重的那個維度已經不是“視覺感覺”上的好看,而是“視覺邏輯”上的嚴謹和“視覺風格”上的一體化,比如分割線,比如icon的樣式,比如tableview(表格視圖)的設計,比如字體的主次對比等。
當我沒有理由的畫一條分割線,只為了分割兩個也不知道是啥的元素時,當我沒有理由地就是想要為卡片化組件加上一個box-shadow(陰影)時,當我沒有理由的設計一個奇怪的交互方式還硬說它特別好用時,我都在警醒自己一句話:每一個UI界面的設計都應該被賦予應有的理由。希望以此共勉。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
美團點評 UED 總監崔穎韌(下文簡稱崔校長)認為:曾經設計師僅靠一技之長就能在行業內生存,但互聯網行業瞬息萬變,如今,人工智能的設計水平都可以達到設計助理的級別。在互聯網變革下,設計師只有不設限,擴展自己的價值空間,才能在這場持久戰中成為最后的贏家。1. 設計師已經開始被人工智能取代
2018年緊跟2017,是人工智能重點發力的一年,關于「人工智能會完全取代設計師」的話語層出不窮,很多從業者倍感危機。
崔校長表示,AI 時代是真的來了,設計師也開始被人工智能所取代。
現在,很多負責垂直業務的運營設計師已經參與到智能體系建設中,建設素材庫、設定配色、排版規則和標準,幫助訓練 AI 等。
甚至美團點評也開發了可以做 Banner 的智能設計系統,不光可以做 Banner,今年內還可以自動生成活動主頁和簡單 H5 頁面,而且是多品類覆蓋,包括餐飲、休娛、麗人等。
相應的,設計部門原先計劃申請的運營設計師人數就減少,甚至不新增了。
盡管 AI 的強勢沖擊很嚇人,但是設計師工作中,例如設計師對目標受眾的理解,現階段是沒有機器可以替代的,頂尖設計師的專業技能在沖擊之下,反而會更加突出、顯眼。
2. 國內設計師普遍話語權不高
在國外,很多優秀的公司都是設計驅動,而國內設計師普遍話語權不高。
針對這個現象,崔校長認為,實際上國外很多「設計驅動」的公司,本質上是 CEO 驅動,有一個重視用戶體驗的 CEO,那么全公司做事都會重視用戶體驗。實質上是 CEO 在驅動,設計僅僅是執行。
而在國內,行業環境沒有那么舒服,特別是偏傳統的公司,高管層對用戶體驗的價值認知非常弱,所以才會有設計師話語權低的問題。
如果要解決這個「歷史難題」:
那么一定是可以在業務團隊那邊贏得認可的。
有了實際案例證明價值,下一步就可以做一些跨團隊的用戶體驗概念普及,去提供相關的認知度。
美團點評是一個高管層很重視用戶體驗的公司。在美團點評,用戶體驗部的價值是可以得到足夠認可的。
在這樣的情況下,大家依然會努力拓展自己的價值空間,會突破邊界,比如說交互設計師會做一些用戶研究和產品分析相關的事情。
項目產品 Leader 只需提供一個產品目標,而在「戰略層、范圍層、結構層、框架層、表現層」五個層面的分析研究和輸出工作,交互設計師都可以完成,產出一個完整的項目提案報告。
由此可見,設計工作者只要有實際案例證明價值,得到 Leader 的認可,加上持之以恒的拓展自身價值,提高自身話語權不是問題。
3. 對產品設計的認識還停留在圖形界面
很多剛工作的設計師擺脫不了專業的束縛,認為設計只是圖形的搭建,沒有更多思考。
對此,工作經驗豐富,且閱人無數的崔校長表示,這是一個普遍現象,也是一個正常的現象。
在社會化精細分工的時代,設計師從專業入手,自然而然地,一開始認知會局限在圖形界面上。隨著專業級別的提升,會擴大認知范疇,看到界面之外的東西。這是基本規律,沒有捷徑。
古語說:
不謀全局者,不足謀一域。
設計師應該有意識去突破邊界,這是正確的方向?,F實中有很多人無法突破瓶頸,往往是拒絕突破邊界,思維的局限導致了個人價值的局限。
4. 設計的好壞沒有絕對的評判標準
大家都知道,設計是有好壞之分的,但卻不一定清楚這個評判好壞的標準。
崔校長認為,設計師沒有一個絕對標準來評判好壞的。
在商業團體中,一切資源投入都是為了達成商業目的,所以能幫助達成這個目的的設計就是好設計,這是一個評判標準。而具體的標準,根據團隊的商業目的差異,有很大區別。
在商業團體中,用戶體驗是實現商業目的的一種手段,脫離商業目的,講純粹的用戶體驗就是耍流氓。
只有擺正了這個認識,在職場中就更容易獲得成功。
1. 保障用戶體驗是第一標準
現在,很多人都在倡導,設計規范化、組件化,這種趨勢是有利有弊的。
針對這個趨勢,崔校長建議,不能唯規范唯組件論。雖然規范化、組件化這類比較基本的設計增效手段,可以明顯提升基層效率和基礎質量,但是規范和組件只能保障底線,無法拉高設計質量的上限。
比如有的設計師會跟產品說,我們的規范如此,所以只能這么設計,這是錯的,規范不是一刀切的標準,保障用戶體驗才是第一標準。
該用規范組件的時候就用,如果場景上不適用也不能硬用。
2. 用戶體驗設計,不僅僅要把界面做好看
作為用戶體驗設計師,要有把界面做美觀的能力。
除此之外,崔校長還說:
界面好看是最表層的設計體現,真正的用戶體驗遠不止于此。
《用戶體驗的要素》所描述的「戰略層、范圍層、結構層、框架層、表現層」五個要素,要做到都充分、專業、邏輯連貫,最終才能獲得一個在線產品的良好用戶體驗。
在構建一個良好的用戶體驗時,更重要的是表現層背后的商業體系、產品目標、用戶心智模型,對設計依據做充分的研究和挖掘才是根本。
3. 方法論為主導,找靈感
遭遇設計瓶頸時,找靈感也是有技巧的,有一部分設計師,憑空想靈感,這是低效的。
崔校長建議,以方法論為主導,找靈感。
崔校長說:
設計的目的是為了解決問題,應該以理性思維為主導,去定義問題,分析問題,解決問題。如果以 Idea 導向,也就是通過試錯來驗證有效 Idea,這跟碰運氣差不多,效率非常低下。
在美團點評上海用戶體驗部的設計路徑中,總體是以方法論來主導,僅在方案的表現層,會運用頭腦風暴和素材搜集的方式幫助激發靈感、發散方案。
4. 注重自身和團隊的共同成長
在學習、成長上,每個工作者都更注重自我的成長,這是必然的,設計師也不例外。
但工作究其根本,是自我成長、團隊成長、產品成長的結合,優秀的團隊一定都是非常注重這三方面成長的,美團點評也是如此。
崔校長說,美團點評有涵蓋各個專業的互聯網+大學,在設計方面設有設計學院,沉淀了很全很豐富的方法論和案例,同時公司還有復盤文化,大家會從每次的項目實踐中,總結經驗、獲得知識。
崔校長建議,設計師應該嘗試「跨界」,個人能在其中飛速成長,這是經驗之談。
校長本人是學計算機專業的,做過產品經理,最后在設計領域深耕。
這樣的綜合角色幫助他更宏觀、更完整地去看產品體驗搭建的過程;能夠更好的理解上游產品角色到底關心什么,下游開發角色需要什么;能夠更好的跟相關角色溝通,并讓設計發揮更大的價值。
所以設計師不僅要注重外部學習環境,還要注重自身的跨界、不斷拓寬邊界,自身和團隊共同成長,這對你職業生涯的發展產生不可估量的價值。
5. 優秀的設計團隊不能沒有管理者
設計不是單打獨斗。
一個優秀的團隊應該注意哪些問題呢 ?
對團隊進步起著關鍵性作用的管理者應該是怎樣的呢?
對此,崔校長認為,優秀的設計團隊在團隊建設上,要有完善的管理制度、完善的專業體系、扎實的人才梯隊,在結果上要有優秀的產品案例。
作為 Leader :
剛剛成為 leader 的同學,可能會不適應與設計師完全不同的工作模式。
對此,崔校長建議,此時你最需要注意的是思維轉換。思維轉換首先需要明確三個角色,崔校長總結為「三位一體管理模型」,分別是教練、裁判、經理,這三者缺一不可。
6. 保持溝通
溝通,在設計師的工作內容中占了不小的比例。
跟團隊同事進行合理的溝通,在一定程度上,能提高工作效率,專注設計質量,將更多的時間放在設計本身。
對此,美團點評崔校長很有發言權。
美團點評上海用戶體驗部現在有100多位設計師,對接的產品經理在500人以上,對接的程序員在1000人以上,而且上下游部門都是分散的。
產品部門和研發部門都是多個的,不像 UED ,只有一個部門統一管理,那么溝通方面確實有很大的難度。
崔校長表示,為了團隊溝通更,美團點評內部要求 Leader 跟相關部門的 Leader 建立良好的溝通機制,保障信息通暢;然后,用設計流程規范,來要求設計師跟自己的上下游對接方充分溝通;最后,團隊風格上推動設計師走出去,深入上下游討論和協作,跟進產品討論會,多到開發位置上確認實現的細節。
崔校長還分享了一個關于溝通的小故事:
在搬了辦公區之后,產品的座位離設計師只有一個過道之隔,于是設計師開始有了一些「小煩惱」。產品經理一有問題就隨時找設計師討論,設計師的工作總被打斷,卻不太好意思拒絕產品。
這是一個比較有趣的現象,說明產品跟設計師之間溝通非常緊密,而且很信任設計師的專業度,能夠一起有效地解決問題。
這個場景在團隊內部時有發生,這個「煩惱」對設計師而言,可以說是不可避免的。
對此,崔校長建議設計師要做好時間管理,掌握好溝通的時間安排,不能影響了總體的設計效率。
設計不設限,是每一個設計師都應該思考的方向。
只有自己不甘現狀,勇敢突破,才能以更高的速度進步,才能在互聯網高速發展的現在,甚至未來,成為最后的贏家。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
一個產品最后出來的樣子,是各種妥協的結果。
互聯網產品和平面類型的設計工作最大的區別,可能是在于工種的細分上。之前做平面相關的工作(品牌,視覺,電商),自己一個人可能就充當了基本上除了印刷以外的所有主要工作,既要和客戶溝通,了解用戶需求和想法以及存在的問題,又要思考和制定設計方案,向客戶展示設計提案,又要執行獲得認可的設計提案,保證設計成果符合客戶預期并落地,如果是最后要交付印刷品,可能還要跟進印刷的過程,保證印刷物料的質量。好像一個人把所有的活都要干了。
但是互聯網產品不太一樣,首先最大的問題是如何讓方案落地的過程,這個工作一般來說沒有辦法一個人干(除非是牛到精通前端后端和客戶端的各種開發語言的全棧設計師),因為會涉及到程序開發,有一些設計師,就算你厲害了,你能把產品交互和 UI 都搞定,然后你還會(web端)前端開發語言或者客戶端開發語言,但是你還是需要一個能寫后臺的工程師,所以,正常情況下,互聯網產品的開發,是環環相扣的,至少都需要兩到三個人來配合工作。這還是比較小型的產品,如果是復雜的產品,那每個環節都必須細分出來,而且可能每個環節都不止一個人,產品,交互,UI,前端,客戶端,后臺,因為每個環節的工作量都太大了!
△ 圖源:Nick Taylor
既然有這么多的分工,那必然會導致不同的工作崗位看問題的點都是不一樣的。舉個例子:經常會聽到開發說,明明用 A 就可以,為什么非要用 B?一開始的時候,其實我真的不太理解,但是后來慢慢熟悉了開發的工作之后(尤其是自己開始學習一些代碼知識之后)慢慢理解了,其實開發在實現我們的設計的時候,最關注的是功能的實現,而功能就是各種交互的集合,一個頁面上,如果交互不變,功能不變,只是改一些視覺上的樣式,這是相對來說簡單的,如果牽扯到交互的調整和修改,那個工作量可能就成倍增加,所謂牽一發而動全身。所以我們在設計的時候,更要注意模塊和組件的一致性和可復用性,這樣不僅可以提高我們的設計質量,也可以有效的減少開發的工作量,提高開發的效率。
同時,開發在實現的第一個版本的產品中一般很多時候視覺上會有各種各樣的問題,開發人員在開發過程中,為了提率,不太在意還原 UI 的細節,比如這個間距是多少,那個間隔是幾個像素,所以最后產品上線前都會有 UI走查的環節,在這個過程中就是要一點一點地改進產品UI 實現中不符合設計稿的地方,這個時候才是我們設計師關注所謂的每一個像素的時候,在那之前,還是先關注功能和流程的實現吧。
其實不僅僅是因為每個崗位的職能不同會導致很多不同的意見,有時候也可能是因為每個人的審美或者是性格的問題,也會產生不少的摩擦,所以,學會妥協,在妥協中堅持是團隊合作中的一門大學問。
以攻為守,讓自己從更全面的視角去思考 UI 的工作。
△ 圖源:Nick Taylor
一個 UI設計師的未來在哪里?有時候我會思考這樣的問題,有可能是因為我已經30了。這一兩年,危機感很重,每次看到非科班群里各種90后、95后的年輕設計師,心生羨慕的同時也充滿了莫名的壓力。
這半年多因為自己團隊中沒有專門的交互設計師,所以我就同時肩負了大部分交互設計的工作。一開始做交互設計的東西,其實自己的認識還是很淺薄的,雖然平時自己也看很多用戶體驗,設計心理學、交互設計等等的書籍,但是真的上手干活,還是會經常一頭霧水,因為交互設計太需要縝密的邏輯思維了。市場上常見的 app 的標準化的交互設計因為都有競品參考,還是相對來說簡單的,在我看來比較難的是工具型的產品和 CMS(內容管理系統后臺),尤其是 CMS 的交互設計,如果設計不好,分分鐘讓用的人感覺要崩潰。交互設計是一門很深的學問,也是 UI設計師必須去了解和熟知的,它絕不是簡單的頁面之間的跳轉,也不僅是酷炫的動效,它是能讓產品的使用體驗得到質的飛躍的關鍵。
如果把一個產品比作一個人,那產品本身的方向是這個人的靈魂和思想,交互是這個人的舉止和修養,而 UI 是一個人外形和穿衣品味以及整體氣質,優秀的人,三者缺一不可,三者是共生的關系。
在我看來。成為一個產品設計師,了解產品思維,熟悉交互設計,精通視覺設計,這樣的設計師覺得才是以后互聯網設計師的標配。高配是什么?我覺得至少是全棧設計師吧。這就像平面設計領域,不懂印刷各種工藝和材質的,都稱不上好的平面設計師。好的建筑設計師,也得懂很多建筑學和建筑材料的知識。
我在這半年的實際工作中,雖然第一個產品的概念定義和原型我沒有參加討論(我去的時候已經定下來了),但是我還是嘗試去思考這個產品到底意義在哪里,目標用戶是哪些人,解決了目標用戶的什么需求,他們的使用場景有哪些。我一直都認為互聯網產品的設計工作始終更是貫穿著設計思維,只是每個具體的分工的側重點不同,你可以不精于產品需求的整理和篩選,但你是得明白你你所設計的是為了滿足什么需求,有目標和方向才能做出更好的設計,你連問題都不知道,怎么去解決問題。設計的工作,終究都是為了解決問題,不了解問題的來龍去脈,便不能梳理出問題的本質,更無法做出好的設計去解決問題。
把自己定位為產品設計師,稍微多花點心思去思考產品,去學習交互,別讓自己的眼界停留在只畫幾個好看界面,畫幾套特別的圖標,不然你早晚要被這個行業淘汰,不對,是被其他更優秀的設計師淘汰。
很多公司并不真的在意所謂的 UCD。
△ 圖源:Nick Taylor
我相信大部分的設計師還是在中小型的企業里工作,這樣的企業的設計工作有一個很明顯的特征,就是以主管或者老板的喜好為第一滿足目標,所有的設計方案都會以老板的喜好為基準參考,只有老板說 ok 才算是 ok。當然,我們公司也是,畢竟我們也是一個小型公司,而且老板的個人風格特別強烈。所以在做第一款 app 時,僅僅是首屏的視覺方案,都出了不止七八個版本。在進入更加深入的其他頁面的設計環節時,我們也沒有去做什么用戶場景分析或者用戶需求分析之類的工作,都是依照著老板的一些想法去一步一步的實現,當然,這并不是一定是錯的,只是大部分公司的設計工作的現狀,這樣也可能會有好的產品,只是可能性更低而已。很多公司沒有很專業的設計團隊,也沒有很專業的產品經理,更沒有很專業的產品設計師,做很多設計決策的時候基本上都是靠拍腦袋,或者依靠個人的生活或者設計經驗,在不知不覺中,就把 UCD 的設計方法忘在腦后了,UI設計師只是負責機械式美化下每一個元素,做一下視覺風格的統一,變成了一個不折不扣的界面美化師。
但我們 UI設計師不能只是美化一下界面,雖然我們可以沒有專業的設計團隊,沒有很厲害的產品經理或者交互設計師,但是我們也要在設計過程中不斷地提醒自己,要以用戶體驗為中心,用戶在這個界面需要的是什么,什么信息對他來說是最重要的,怎么樣設計可以減少用戶的瀏覽負擔,提高用戶的使用效率,雖然可能我們思考的方向和結果的不一定對,但是只要去想,才能不斷強化我們自己的這個設計思維,避免自己產出千篇一律的設計方案,提高自己的設計能力。如果能把每一項工作都盡百分之120的努力去完成,那就算你現在是在一個微不足道的小公司,你也一定能成長為一個設計大牛。
現在作品不好,沒問題,如果一直都不好,那就是你自己真的出了問題。
△ 圖源:Nick Taylor
我以前很羨慕那種設計師,年紀輕輕就進大公司,或者20歲不到作品就讓人感覺眼前一亮。對于我這種非科班的,大學畢業7年了,認真靜下心來干設計才3年多,似乎還沒開始跑,就已經被人甩開一大截了。
看起來似乎很糟糕,但其實真不是,你所經歷的一切艱難,如果挺過去了,那就是你人生寶貴的財富。那應該怎么做呢?只能不斷努力地去縮小和別人的差距,不對,不是和別人的差距,是和自己對自己期望值的差距。
那么提高審美和眼界就是最基本要做的事情,同時我也認為這是作為一個設計師需要持續不斷提高的最基本的能力。審美和眼界的提高是需要日積月累的,軟件操作和技法可以短時間內突擊學習,也可以臨時偷師,但是如果你審美不行,你永遠都不可能做出好的設計,因為在你的眼里的高級和在高水平設計師眼里的高級,可能是天差地別。審美和眼界就像是一種設計師的隱藏屬性,會在你日常的設計當中不自然的流露出來,你不需要去調動它,它自然而然的就會在你的工作中不斷地幫助你。
但是往往很多設計師不把這個當一回事。其實你只要每天堅持不停地看優秀的作品,堅持幾個月或者半年一年的,你的審美肯定都會有質的飛躍。以前你覺得設計很棒的作品,可能你以后看起來就會嗤之以鼻了。
看作品這件事其實很簡單,你只要每天打開 behance,打開首頁推薦的十個作品,花個十幾二十分鐘細細看下來,覺得好的就分類收藏一下,以備以后可以用來做設計的參考。
但是,關鍵是堅持。
別總看國內的設計網站了,外面的世界更精彩。
為什么要重新學習英語?(我就是想萬一以后牛X了,可以混到國際舞臺上,嗯,這個可以有)
一開始決定重拾英語的契機,這還要感謝砂姐組織的翻譯小組。我也只是想試試看,能不能把英語重新撿起來。于是從17年2月份開始我給自己定了個目標,每個月翻一篇英語的設計類文章,很慶幸自己堅持下來了。同時在工作中遇到的不少問題,會逼著我去看一些外文的資料,讓我覺得我必須得更努力地把英語撿起來,于是最近幾個月同時也開始背單詞,每天堅持讀英語的設計文章,跟一開始比,感覺還是很有收獲的,看文章的速度越來越快,閱讀時的語感也越來越好(這個越來越好是相對于自己很糟糕時候的狀態)。
慢慢地,我感覺,學好英語,對于一個設計師的長遠發展是很有幫助的。
如果你想去了解世界上更多優秀設計師的想法,學習他們的經驗,那么就得親自去獲取第一手的信息,而不是等著其他人的翻譯,而且很多各種設計領域的優秀的教材和資料都只有英文版本,如果不把英語學好,自己學到的不僅僅是很多殘缺不全的二手資料,甚至連學習的機會都沒有。把英語學好,是給自己打開通往更廣闊領域的鑰匙。你的眼界,決定了你成就的上限。
學習從來都不是件輕松愉快的事情。
做界面的同學有沒有遇到過這樣的情況:我明明是設計成這樣的,為什么開發出來之后就變成那樣了?
這就是我下定決心想學習代碼的導火索。我就想,為什么我不能自己學習代碼自己實現自己的設計么?這不是很厲害么?加上我之前也斷斷續續地對前端技術有過學習的念頭,于是一鼓作氣下定決心就開始學了。
出于想給自己開發個人網站的初衷,我就選擇了前端的開發語言作為我的學習內容。我目前主要學習的是 Javascript(html 和 css 已經學了個大概)。
一開始學習的時候真的是痛苦不堪,但是在度過了一兩個月的痛苦的煎熬之后,已經慢慢地發現學習代碼的樂趣,但同時,發現這個坑是越來越大,感覺要學的東西是自己預想的要多太多了。雖然過程很糾結也很痛苦(我估計這種痛苦的感覺還會持續好長時間),學習代碼的過程對于提高設計師的邏輯思維確實很有幫助,因為編程思維和設計工作的思維相比,更注重邏輯性(設計工作也很注重邏輯性)。同時,多了解一些編程的知識(編程開發的語言很多,但是思維方式是類似的)對于理解開發人員的工作內容和工作方式,也會有很大的幫助?;ヂ摼W的設計師,我覺得在學有余力的情況下,都應該多多少少學習一些代碼的知識,因為這畢竟也是產品開發的其中的一個重要環節,你不需要擅長,但懂一些,可以讓你更好地和開發人員進行有效的溝通,知己知彼,減少撕逼。但是不建議設計工作經驗較少的同學學習代碼,畢竟這需要很多的時間去學習,不要把自己變成什么都是半桶水,在不影響設計工作之余可以抽出時間的話讓自己嘗試一下,說不定你也會喜歡上編程這件事。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
最近一段時間一直在建立APP的設計規范,從一開始的立項到現在落地上線,可以說是從零開始進行APP全部細節的梳理并且規定規范,這一路走過來還是能總結出很多心得,本文將分為3個部分,闡述如何從0到1建立設計規范。
目錄:
一、如何確定內容,規范里要寫什么
二、如何寫
三、如何推動規范落地
一、如何確定內容?
這里我總結了三步:
1)確定目標用戶、用戶目標、設計目標
根據不同的用途和目標,不同的團隊對設計規范的制定是不一樣。比如為了指導與規范全球第三方開發者進行設計和開發,Google建立的Material Design覆蓋面廣,每個組件細節寫得非常細致。Ant Design則是直接做出了組件,方便直接進行調用。有些國內設計團隊的規范則是主要描述常用控件和色值。因此我們需要確立用戶目標和設計目標,這樣才能確定我們的規范側重點是什么,需要做成怎么樣的形式。
在這里我列舉了自己撰寫規范時的用戶與目標:
2)模范大平臺,先列全
一個規范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個,列一個,這樣我們很容易疏漏很多情況。在這里我采用的的一個辦法是:首先熟讀iOS,Material Design規范,并且模范他們,在腦圖中,把規范中應含有的所有內容羅列出來,羅列一個大綱。
這里我列舉當時自己做的一個腦圖大綱,覆蓋了主流規范中的所有細節,大家可以進行參考并模仿:
3)針對自己情況進行刪減
列完齊全的大綱后,我們需回顧設計目標,對大綱里的內容進行刪減。(比如在組件、模式這些地方,可以對著自己的APP,進行挨個尋找,看自己的APP當前是不是運用了這個組件,沒有的話就進行刪減。)
在這里我列舉了針對自身APP的情況刪減后的大綱圖:
二、如何寫
進過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規范的階段。
這里我總結了3步:
1)確定優先級
我們可以通過版本迭代計劃+性價比+重要性(該組件在頁面出現的場景次數以及當前的不統一對APP體驗影響程度)這幾個維度分別確定每塊內容的優先級和分工。基礎的、必要的、高性價比的放在第一期,復雜的向后放,隨著產品的迭代,我們的規范也會越來越完整。
同時需要留意版本規劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內容的優先級。龐大復雜,牽涉到很多頁面的,我們可以先降低其優先級:比如全局提示框的規范,toast的規范。
同時,我們也需常與開發溝通,爭取把可復用性高、組件日后變化幅度少的組件做成開發組件庫。
2)確定規范書寫格式
我們制定的規范本身也是設計的交付物,假如每個設計師都按照自己的喜好來編寫規范,那么這個規范本身也會變得不規范,規范自身保持一致性是提高規范閱讀效率的一部分。
我們可以回歸我們之前制定的用戶目標和設計目標來制定我們規范的書寫格式。規范的用戶群是誰,主要想達到什么作用,是通過文檔展示還是網上展示,確定了這些問題后,就可確定規范的詳細程度、主要的展示形式(比如前文說到的Ant Design和Material Design)。
這里我的思考點是:假如規范寫太多字就會變得很臃腫,沒有人喜歡慢慢仔細的閱讀你寫的規范,所以我們應該做到寫得簡明扼要,再輔以例子說明(根據開發的習慣,都是喜歡直接看例子,看標注)。
我的書寫格式是:先寫描述這個組件是什么,再列舉出現的場景,然后編寫交互規則,最后給出視覺標注+例子。
3)逐步對單個規范進行整理與書寫
當確定了要寫什么東西和格式之后,我們開始進入到細節,對每個內容進行整理,制定規范了。
通過對每個內容制定規范規范也是有方法的:
下面我通過整理“列表”這個規范來講解:
1.收集出現的所有的場景。
當一個產品已經趨于成熟,這個組件出現的場景就會非常多,比如對話框,toast,列表這些組件出現的地方很多,需要我們自己仔細地體驗產品,把所有頁面都找出來。
2.提取共性,歸納分類
我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起,眾多的頁面場景就能整理成幾個典型的種類,然后只需對這幾個典型的種類進行定義和描述即可。
在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表
3.編寫規則
在分類好后,我們可以對每個種類編寫規則,在這里我們需要描述好每個種類有什么特點或屬性,什么時候場景下適用,并且給出標注和例子,方便閱讀者理解。
4.多與組內成員討論修改
在制定好初稿后,我們可以與組內成員宣講下自己制定的規范。多從別人的角度出來,確保你編寫的規范是否易懂,是否包含了全部的情況,是否容易執行落實。
三、如何推動規范落地
寫完內容后,最重要的一步就是推動落地,規范要真正有人用才能體現價值,在這里我給出幾點幫助推動規范落地的小建議:
1.制定規范推進進度表
表格里面應該包含規范制定的優先級,分工進度,分工人員,并且確定每一期進度的交付時間,開會討論的時間,作為負責人,也可以適時提醒成員每次的開會時間(畢竟deadline是第一生產力)。
2.編寫過程中多與其他成員討論,達成一致性共識
制定規范后,與部門其他人員進行宣講,灌輸概念,針對如何更好的落實進行討論調整。在設計中都不可能一次就完美,我們需要不斷的在修改中逐漸完善。
3.規范建成后放在網上
同步在網上,方便部門內的其他成員能隨時查看和團隊成員對規范的更新修改、同步。
4.強制性制定規則要求團隊成員執行。
有明確的懲罰機制和要求才能更好的執行,不然在規范制定后很容易健忘此事。(我們組的懲罰機制就是罰錢)。
5.規范保持持續的更新迭代。
規范推動落地后并不是完全了事,要根據產品的迭代,保持規范的更新。
這整個制定規范的項目中,還是有不少反思的地方,值得我們深思和注意:
1.切記不要為設計規范而做規范
規范最重要的點是能推動落地,能確確實實改善產品,達到統一性。因此我們在設計規范時,并不需要“高大上”術語,給出一大堆的設計理念用來提升設計逼格。而是真正的回歸到我們的設計目標,針對目標用戶制定規范,做到簡樸、易懂、能落地。
2.沒人愿意閱讀長篇文字
我們應該盡量控制文案長度,做到通俗易懂即可。
3.要時刻圍繞我們的目標做規范
比如,我這次做的規范中有一項是去工具化,在制定控件中,空白頁面中就會加入很多趣味化的設計。
4.靈活變通
規范只是適合大多時候的場景,對于一些規范中沒有包含或者不符合規范的場景,我們可以靈活變通,積極創新或者是補充新的規范(前提是與組內積極溝通,達成共識)。
總結:
再來回顧如何從0到1建立規范
一、確定內容
1.確定用戶目標和設計目標
2.模仿大平臺,列全
3.針對自己情況進行縮減
二、寫
1.確定優先級
2.確定規范書寫格式
3.逐步對單個內容進行整理與書寫:a.收集全部情況 b.分類歸納 c.提取共性,編寫規則
三、推動
1.制定規范推進進度表
2.編寫過程中多與其他成員討論
3.把規范建成后放在網上
4.強制性制定規則要求團隊成員執行
5.規范保持持續的更新迭代
今天分享的內容就是這些了,希望能幫助到大家,感謝閱讀~
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
今天的譯文同樣來自設計師 Eugen E?anu,他將經典設計書《Don‘t Make Me Think》中的內容梳理出來供你參考。這些老問題依然能夠給我們今天的新局面以啟發。
「好設計應該是顯而易見的」,這句老話在過去的幾個世紀當中影響到了各個不同的領域,從美食到音樂,從建筑到哲學,我們如今的生活幾乎是在這句話的影響下被逐漸被塑造出來的。
但是同樣的,人類的進化并沒有我們想象中那么快速,我們的思維和本能仍然被深刻地影響著我們的決策。換句話來說,人類的行為模式有著很長的保質期,在許多事情上,20年前很難做,在今天依然不那么容易去執行。
Steve Krug 的這本《Don’t Make Me Think》中文譯本名字是《點石成金:訪客至上的網頁設計秘籍》,譯名可能沒有它的原名那么直接,但是也傳遞出這本書所要表達的核心概念。
這本書成于2000年第一次互聯網泡沫時代之后,Krug 在這次浪潮之后提出了不少實用的設計原則,直到今天仍然有著極高的價值。這本書隨后多次再版和修訂,其中的設計案例幾經迭代升級,我們可以看到現代網頁設計的提升和進步,同時也能從中感受到,用戶——人類行為本身的模式化?!冈L客至上」的表述太過客氣,「不要讓我思考」這一表述更能表現用戶行為的特征,而今天我們所面對的絕大多數的優秀產品,無論是手機電腦還是汽車,同樣遵循著這一原則。
這本書的成功是建立在無數痛徹心扉的教訓之上,這也使得它本身的價值無與倫比。今天的文章本質上也是一篇讀書筆記,設計師應該對于用戶、人性有足夠的認知,方可作出足夠優秀的設計。下面的10個總結,既是常見的認知錯誤,也是成就好設計的契機,就看你怎么把握了。
當我們在查看內容和信息的時候,絕大多數情況下我們都會下意識尋找讓自己感興趣的東西。比如,我們很少會完整地瀏覽網站上所有的文本和內容,為什么?絕大多數的用戶打開網站都是在試圖完成某項任務,達成某個目標,而網頁中的不同部分的內容往往是服務于不同的功能和目標的,我們努力達成目標即可,并沒有閱讀全部的必要。不過,作為網站的設計者,我們往往還是提供了足夠豐富的內容和完善的功能,一方面是因為我們覺得人們需要知道,另一方面也是應對不同用戶的需求。正如有的設計師所說的,它們「增加了體驗」。
所以,通常而言,我們可以作出下列優化:
視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。視覺層次能夠呈現出頁面中不同元素之間的優先級和關系,在設計的時候,同樣需要遵循下面的幾個原則:
我們明白,用戶總會期望看到新東西,但是,市面上有太多的工具和應用,如果各行其是,忽略約定俗成的規則,特立獨行地采用自己的規則,會讓每個應用的學習成本都提高,這對于用戶幾乎是毫無益處的。
當設計師被要求設計某個東西的時候,內心是充滿重新發明的沖動的,這個我們都明白。而設計出和別人相似的東西看起來又有點「政治不正確」,甲方總會希望設計作出點不一樣的東西。更何況,這還是一個少有鼓勵和贊揚的行業,也很少為「最貼合用戶需求」的產品頒設計獎。
但是設計仍然需要在各方之間作出最佳的平衡。
在重新發明輪子之前,你必須了解破壞和創新所意味著的真實的價值(時間,體驗,耗費的精力和所需的知識)。
我們的工作是要讓產品清晰明了,讓事情便捷易行。即使做不到明顯,也應該盡力向著不言自明的設計靠攏。說明書這種東西是沒有人會主動去看的,它們的存在意義本身就不大,你需要通過合理的設計,讓產品本身發揮指引性的效果。即使說明書必須存在,也盡量讓它簡短明了。
如果功能并不明顯,我們應該盡量讓它明顯一點,讓目標更明顯。
以宜家為例,一個需要買回家組裝的柜子,絕大多數的用戶可以在簡短的指引之下就可以輕松正確地組裝,為什么?因為絕大多數情況下,一個柜子長什么樣,用戶眼前有清晰的畫面,哪怕說明只有幾張簡單的圖片,用戶也不會犯錯。
絕大多數的用戶并沒有興趣了解你的產品的工作方式,并不是因為他們不夠聰明,僅僅是因為他們不在乎。所以,一旦他們確定你的產品是能用的,就很少會去注意其他的部分。
以蘋果的無線耳機 AirPods 為例,從價格上來說,它并不親民,但是它的交互方式和使用體驗確實非常的獨特和優秀,這也不難理解許多用戶會選擇它。用戶在購買它之后,并不會去思考它是如何運作的,其中所包含的諸多新技術,對于用戶而言,只是潤物細無聲地發揮著作用而已。
我的母親就使用的 AirPods ,她從來不會問我它的原理,但是她很清楚,耳機需要放在充電盒中充電,和手機配對之后就能用了,并不復雜。
這一條可能是我最喜歡的。我們設計師總喜歡為用戶帶來微妙的視覺效果,來給用戶帶來樂趣。對吧?可是如果我告訴你,用戶并不關心它們,你會怎么想呢?他們也根本不會告訴你他們有多在意或者多不在意,也不會在一次又一次看到的時候對于這些設計有多少感覺。
為什么會這樣?生活環境賦予每個用戶以復雜多變的情境,他們很少有機會去感受微妙的設計所帶來的奇妙情緒。風在吼,狗在叫,小孩還在滿屋跑,水壺里面水開了,老婆在耳邊抱怨著工作中的細微末節,而你正在填寫著表單準備預訂明天的高鐵票,在那個時刻,APP 當中微妙的動效和視覺線索,手一抖,你可能還會多買一個沒有必要的捆綁銷售的酒店折扣券。
但是另外一方面,對于優秀體驗的追求不應該因此而放棄,還有很多用戶會從中受益,這也是促成優秀產品的必須因素。只不過確實有很多用戶沒法去在意它們罷了。
焦點小組是做什么的?一小群人圍坐在桌子旁邊,討論他們對于產品的看法,他們過去的經歷,它們的感受和對于新概念的理解。焦點小組的作用是幫你更好地界定目標用戶,目標用戶的感受等等。
可用性測試則是另外一回事。做可用性測試的時候,通常是為了測試產品而觀察一個特定的用戶使用產品的過程。在測試中,你需要測試人員執行特定的操作,以此來查看整個設計中的概念是否直觀,功能是否需要完善。面對焦點小組的時候,你需要傾聽觀點,梳理思路,在進行可用性測試的時候,更多需要的是觀察,并且解決具體的問題。
我們在設計產品的時候,常常會從自己的需求出發:「我也是一個用戶,所以我知道什么好什么不好。」我們對于自己的喜好有著強烈的感受。
我們會說,當我們的產品具備_____的時候,我們會很喜歡,又或者,我們認為_____是一個巨大的痛點。當我們真正和團隊成員坐在一起討論產品的時候,大家都有各自的看法和各自的情緒,所有人的都有著極強的個性和獨特的看法,這個情況就很尷尬了。因為我們常常會傾向于認為絕大多數的用戶和我們自己一樣。事實上并不一定如此。
無論是設計產品功能還是測試產品的時候,問對問題都很重要。測試的時候,問用戶「你們喜歡下拉菜單嗎」這樣的問題,不僅銷量不高,而且不會帶來價值。這個問題,應該這么問:「在這個情況下,在這個頁面上,下拉菜單這種設計是否能夠給你帶來良好的用戶體驗?哪里讓人覺得不舒服?」
諸如「用戶喜歡這個產品嗎」這樣寬泛的問題意義不大,用戶也很難提供針對性的、具體的回復。
而且,作為設計師我們不應當專注于用戶是否喜歡這樣的問題,這樣會失去動力和專注力??捎眯詼y試可以幫你消除各種「喜歡」相關的問題,并且幫你找到真正要做的事情。這才是重點。
我在哪?我要干嘛?
我應該點哪里開始?
他們在這放的這個控件是干啥的?
這個頁面是用來做什么的?
他們為什么這么稱呼這個功能?
這個是廣告還是內置的功能?
在使用產品的時候,如果觸發用戶大腦中的各種問題,只會增加用戶的心理負荷和工作量,分散用戶注意力并不是好事,而且用戶本身并不喜歡解決各種難題。
每當用戶點擊某個控件而不起作用,或者它看起來是個鏈接實際上并不是,會消耗用戶對你的信任感,降低產品的可靠度。
炫酷的概念和新穎的趨勢不僅吸引用戶,同樣是設計師的心頭好。但是我們在新的時代,新的局面之下,始終面對的是以往的用戶,看似千變萬化的需求背后是不變的人性。
至少《Don’t Make Me Think》這本書一直在探討的問題,經過20年的世事變遷,幾次互聯網浪潮,在這個號稱互聯網4.0時代,仍然發揮著作用,依然是那么具有啟發性。
新狀況之下潛藏著老問題,想要洞悉本質,設計師要懂心理學和行為學。在之前的幾篇文章當中,我一直在試圖梳理出不會隨著時間改變,而一直存在的、亟待解決的問題以及可供使用的原理。
《為何如今的產品總給人千人一面的感覺?》揭示的是「特征蔓延」和「競爭驅動式設計」是如何讓產品走向平庸和毀滅,解決方案藏在結尾。
《熟知用戶行為的這7個層面,你的設計才會走進人心》則介紹了唐納德諾曼的用戶行為的7個層面,這是一套分析用戶行為,設計產品流程的有效方法,擁有持久生命力的產品的設計策略,和這套方法不謀而合。
《這7種廣泛存在的認知偏差,影響了我們太多的決策》 則幫你梳理了7種常見的認知偏差,認識自己了解用戶,這些知識能消除誤解,同樣能夠幫你洞悉真相,是不可多得的利器。
設計的方法和工具成千上萬,想明白道理,問對問題,接下來的路更容易走通。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
每當提到設計方法論時,總難免會給人一種比較虛空偏理論,或者說比較難應用到設計實戰中的感覺;但是這一次,經過了自己的實踐之后,我覺得確實有一個比較靠譜的視覺推進方法可以分享給大家,所以才有了這篇總結。
先直接概括一下這個方法,極限推敲法:遇到難題時,先把問題拆解成一個或者幾個維度,選取某個維度,往兩個極端進行嘗試,隨后逐漸中和極端方案,逐步找到自己想要的預期點,明確該維度的方向。
例一:雄獅的logo設計
期望比較簡潔的同時,又不能丟了獅子的辨識度,比較糾結的是,這個度該如何把握?
按照極限推敲法來,我們先確立「極簡」和「寫實」作為關鍵維度,然后優先嘗試兩端比較極限的方案;了解清楚兩種極限的可能性之后,繼續嘗試,加減細節,尋找一個符合預期的圖形狀態;最后的定稿,既保持了鮮明的特征和辨識度,同時也不失簡潔。
(推進過程中出方案的順序在圖中用數字標出,「1」即為第一次嘗試,以此類推;具體推敲過程不在此贅述。)
例二:網易郵箱大師Tab icon改版設計
在網易郵箱大師5.0改版中,常駐底部的 Tab icon 是單獨進行推敲優化的。在之前的版本中,圖標的樣式相對比較的刻板,偏向純表意,表現力不強;在5.0視覺改版的策略中,我們是以「優雅」作為一個關鍵方向進行優化的,所以軸的兩端就定為「刻板」和「優雅」,雖然并不是完全對立的兩個方向,同時也包含了一些「表意」等其他層面的因素,但是其中有部分感受是存在對立面的,我們就以此作為關鍵點進行推敲。
可以從圖中看出,在不影響表意的前提下,各方案間的圖標改動非常微小,在有限的空間內去做一些變化;幾經嘗試之后,還是選擇了更常規更偏表意優先,但是也適當加入曲線因素體現「優雅」的方案作為最終方向。
例三:內容信息流列表設計
期望內容列表的展示能給人以精品的感覺,但又不失去過多的閱讀效率。
首先確立以信息量的多少作為關鍵維度,在形成了初步的樣式之后,繼續調整在一屏內條目的疏密以及排版來感知信息量的多少;在嘗試之后,最終討論決定,在初期內容源還不夠「精」的情況下,還是最右側方案的信息呈現更為合適,并以此做了最終調整。
很多時候,極端情況是很難想象或者預判出來的,只有嘗試之后,才能更清楚的了解到實際會出來什么效果,達到怎樣的預期;在多次推敲之后,就能更好的了解期望的狀態到底應該在哪個「位置」,讓模糊的概念逐漸變得清晰;該方法最大的好處在于,讓嘗試變的更有目標,而不是胡亂嘗試,讓每一次嘗試都更有意義。
這個方法也算是視覺標準可量化的一次探索,我稱之為「偽量化」,因為最后的決策仍然是依靠感官去衡量判斷的;把錯綜復雜的感官拆解成一些更具體單一的關鍵維度也是非常關鍵的一個步驟,是開始「偽量化」的前提。
在以上所舉的例子中,有 logo設計,icon設計和界面設計(所用到的例子都是實戰,均為過往項目);其實對象可以是各種各樣的設計,只要存在某種程度把握上的糾結,無法預判或者不明確方向的情況,都可以通過這個方法有效的推進并找到當下的最優解。在實戰中,假如沒有那么多的時間和精力去細化,可以僅選取關鍵維度,然后在關鍵維度內嘗試方向探索性的方案(粗略的嘗試),只要能感受到差異,即是有效的方案;當然如果有充足的時間,那完全可以精細化出方案,這樣方案所傳達的感受也會更加精準細致。
要注意的是,這個方法并不是一種妥協的方式,也不是一種擇中方案;我們所要尋找的是在一個維度中感受符合預期的位置,如果適合,也可以是非常激進的方案。
這個方法只是提供了一種思路,如何更有效的嘗試方案來推進視覺產出的思路;其中最主要的環節還是靠自己去摸索出方案的實踐部分,去實打實的嘗試;在這其中投入精力的多少,也受其他客觀因素的影響,例如項目截止時間等等;不過我認為個人的主觀能動性才是主導,一定不能懶,要作圖,要動起來,僅靠憑空想象方案在腦中「出圖」,一來說服不了別人,二來自己也底氣不足。只要圖形圖像語言一直存在,那么我覺得對視覺設計師來說有一句話就是永遠的真理:沒圖說個XX。
本文主要從需求類型、表現形式、如何做正確設計來分析,設計師應如何洞察需求本質?如何做正確的設計?
有這樣兩種情況在設計師工作中經常會遇到:業務方改來改去,經過幾十遍的修改最終選了第一稿;一群非專業的人或領導在設計師身邊指來指去,出發點都是「我覺得」主觀感受,沒一個能提出有點含金量的意見。
實際工作里我們經常遇到業務方一直在針對幾個問題要求設計師在不停修改 :顏色、大小、氛圍等。但是卻很少看到設計師跟業務方溝通設計結果出現的場景?是為了達到什么目標?導致設計師一直處于不停「改改改」的苦逼狀態。
本篇文章內容為:設計師如何洞察需求本質?如何做正確的設計?
設計師在工作中接觸到的需求一般分為三類:業務需求、用戶需求、產品功能需求。
業務需求是指產品和公司為了實現商業目標產生的需求。不以結婚為目的的談戀愛就是耍流氓,不以賺錢為目的的產品也是耍流氓,說來說去最終目的都是為了實現商業價值。
業務需求多數來源老板、公司戰略、運營策略等,一般圍繞如何提升公司銷售額度、如何提升用戶量、如何提升利潤、如何提升用戶轉化、如何推廣運營等等。
用戶需求是指通過調研或客服投訴搜集到的用戶反饋,一般來源于用戶在使用產品過程中的需求。在 kano模型中對用戶需求一般分為:基本需求、期望需求、魅力需求、無差異需求、逆向需求。針對這些需求公司都會結合發展戰略與優先級去分析,可分為必做、應做、可做、不做。
基于業務和用戶價值進行需求分析的結果,為滿足業務和用戶提出的一組產品功能列表,功能需求構成了一個完整的產品抽象模型,是團隊之間進行產品設計研發的基礎。
這有個萬能的公式:銷售額=流量x客單價x轉化率
拿某某購物中心舉個例子:銷售額就是我們聽到的某某購物中心在五一期間賣了xxx億的額度,流量就是五一期間有多少顧客進來了這個購物中心,客單價就是額度除以購買人數,轉化率是訂單除以訪客。在同等訪客量的情況下訂單越低,轉化率越低。
這個公式換到互聯網產品中也一樣,多少用戶進入 app,有多少人產生購買行為,以及每個人購買的單價,這些因素都是決定這個產品最終的銷售額。
業務需求是流量增長
在產品發展初期,面臨的第一個問題就是訪問量,也就是產品的曝光率,用戶到達率。我們在生活中會經常看到一些公司請一些自帶流量的網紅、明星來做宣傳為公司帶來一些流量。在互聯網產品中常見的一些流量增長的策劃為拉新獎勵、高流量為低流量導流、免費效應等。
拉新獎勵:推薦有獎、注冊有獎。
導流:高流量為低流量導流。
免費:0元購、秒殺等。
業務需求是活躍度
產品活躍度是指用戶每天開啟 app 的頻次,每天停留的時間。不同屬性的產品活躍度的規律也不一定,比如:新聞類、理財類、工具類的產品,針對不同用戶、不同屬性的產品提升活躍度的方式不一樣。
比較常見的提升活躍度的策略是:獎勵刺激、有價值的內容吸引、通過成長等級來引起用戶參與。
獎勵:補貼、答題獎勵、分享得積分、返現金、簽到、打卡獎勵。
內容:推送激活、話題討論、焦點&熱點內容。
榮譽感:排行榜、等級。
業務需求是用戶留存
經過運營渠道推廣流量提升后,倒入一些新用戶,用戶經過一段時間體驗后是否留存關鍵在于:用戶需求被滿足、以及體驗流程流暢決定的。當用戶發現產品對自己沒有價值、體驗沒有好感就會選擇離開。
比較常見的留存策略是:翻倍獎勵、產品體驗迭代優化、評分、用戶成長體系等。
業務需求是品牌感知
用戶對同類產品的選擇很大程度取決于產品品牌的影響力,業務方在推廣中也會有針對品牌提升感知力。
比較常見的有:h5的情感推廣、公益活動等。
網易的h5活動在2017年經常刷爆全屏,他們主打的是情感系列,深入人心,不僅提升主品牌影響,也提升了用戶對網易噠噠的產品感知。
小結:業務需求設計要點
對于用戶提出的一些功能的需求,設計師不能盲目聽從,需要真正去識別有用的用戶、有價值的需求。我們可以通過一些調研、觀察,分析用戶的特征、習慣、場景和行為,以及期望得到什么效果,挖掘用戶的內在動機和原因,只有搞明白了用戶需求的本質,才有可能做出用戶滿意的產品。
KANO模型定義了五類需求,我主要針對下面3類經常遇見的說下,也可以分為3個步驟去做:基本需求 — 期望需求 — 魅力需求。
用戶基本需求
指用戶認為產品必須要有的屬性或者功能,比如:購買流程的完整體驗、完整注冊流程,這些基本需求一般來源產品初期迭代中的優化完善。
用戶期望需求
用戶在主流程體驗過程中增加一些利于自己快捷、便利的需求,這些功能并不影響主流程體驗,比如:購買過程中對收藏、歷史價格對比、搜索等,這些期望需求可以轉化成一些潛在的競爭優勢。
例如:下圖用戶需求搜集中用戶集中在對歷史價位走勢、提醒等功能的一些期望需求上。
△ 根據用戶期望需求調整的設計構思
用戶興奮魅力需求
魅力需求是每一個產品追尋的方向,給用戶帶來一些超越他們預期的體驗。可以理解為在滿足用戶的基本需求、期望需求的基礎上給用戶創造附加價值體驗,屬于創新設計思維范圍,可以提升好感及忠誠度。比如:京東推出vr口紅試妝體驗,天貓推出試裝直播等。
小結:對用戶需求設計要點
注冊流程簡化
大量注冊資料讓用戶失去耐心,流程簡化提升新用戶流量。
漏斗數據下的流程轉化
在公司xx流程里,我們看到每個頁面的流失漏斗,發現用戶在購買決策「結果分析」那一步流失特別多,決定砍掉了介紹步驟,把之前5步改成三步決策。
這是一個非常妙的設計:對用戶來說,直接觸達決策前的結果分析,用戶對結果的強感知轉化下一步操作,從數據來看這一步轉化率提高不少。
△ 公司實際創新項目不做露出具體頁面
留存
新用戶進入 app 后,一般分為3個時期:振蕩期間、選擇期、穩定期。震蕩期用戶流失較多,經過一些市場對比后選擇留下的用戶會進入一個穩定期。一個用戶在產品內留存越久,帶來的商業價值越高。
在產品體驗流程中根據不同需求,策略也有不同。舉一個 ofo 退押金例子:ofo 在不久前遭遇了資金問題,我在退押金這一流程體驗中誤操作了多次,最主要問題就是信息引導。
△ 主流程中對用戶再三挽留
△ 主流程操作中弱化強需求信息
小結:對功能需求設計要點
在需求發起到設計目標會經過這樣幾個過程:羅列與信息搜集?深入挖掘?聚焦核心?創新發散?實現與落地。
這五步的節奏是:先發散 – 聚攏 – 再發散 – 聚攏。
羅列與信息搜集
深入挖掘
5w:what、when、wher、who、why這五步定位法,是讓設計師清楚需求的本質與動機。
聚焦核心:濾 — 煉 — 導
結合用研結果、數據結果、定位結果去除不重要、不必要的信息、提煉有價值的信息、導出核心關鍵。
創新發散
我們發現前三步是基于一些基礎方法論,讓設計師具備一些觀察用戶、分析用戶行為、洞悉本質、同理心的訓練,目的是讓我們把思維聚焦在核心的關鍵點上,而真正超越預期體驗的來源于第4步創新設計思維。
實現與落地
對于設計師,解決問題能力遠高于單純作圖能力,而了解需求本質是解決問題的前提條件,在沒有明確需求的動機和目的,設計方向是迷茫的。洞察、分析是設計師的基本能力,勤于思考分析,做正確有價值的設計。
藍藍設計的小編 http://www.syprn.cn