藍藍編輯
你可能會認為,要建立同理心,最可靠的辦法就是選一些人,看看誰是屬于“常態”用戶,或典型用戶,
這在做戰略設計時其實是會帶來麻煩的,因為典型用戶很少能讓我們了解到我們不知道的東西,我們需要的是異常值,極端的使用者和非使用者,從這兩類人身上是可以獲得的,我在把極端用戶作為我們的靈感設計目標,在創新工作中,對極端問題做同理心是比對處于舒適地帶的典型用戶做同理心更富有成效的。
當你同理心的時候,如果可以走出你的舒適區,你會學到更多。
一且你投入做極端用戶,并從他人的視角去思考這個世界,很重要的一點是要深入去做,而不僅僅是
在表面上聽他們說什么和看他們做什么。
全身心投入進去,捕捉到一些微妙的信號,都可以幫助我們解讀他們的肢體語言和情緒,真正理解到他們的想法和感受。我們是天然能夠做到這一點的,因為神經學的研究發現,我們大腦里有“鏡像神經元”,能夠賦子我們同理心的能力。
當我們專注于某個人的時候,我們能夠確確實實地在大腦中感覺到他們的受。通過專注的觀察,我們可以知道他們在做什么以及他們的感受是怎樣的。然后,我們就可以超越事實和數據,清晰地將他們的想法和感受描述出來,用草圖的方式可以有效地把它們可視化呈現出來。
很重要的一點是,在早期的探索階段,你是專注在清晰地定義一個極端用戶個體,而不是一個用戶角色的總結。你希望他們獨特和的地方能夠被挖掘出來,幫助你看到機會。他們不是具有典型代表性的,但是卻非常能給人以啟發。
編輯:藍藍
陌生人的眼睛
它是指試從陌生人的視角來考慮問題的方法,這樣你就能看到一些可能的事實。
與此相似,我認為請一些系統之外的人也是有幫助的,他們對干我們在做的排戰是陌生的,可以提供一些他們看待此事
的想法。
去找一些與商業結果不相關或對這個商業不熟悉的人,可能會很受啟發。這些人擁有新鮮的,天真的視角,看問題的角度會跟你不同,他們或許會提出一些很好的問題。
和系統之外的人喝杯咖啡或聊天,或許可以打開你的思維,看到機會在哪里。有時候,去找一些平時經常反駁你觀點的人,聽聽他們如何評估這個局勢,也是很有幫助的。
我知道你能夠貢獻很有價值的東西,但同樣重要的是你要認識到你可能還需要學習一些有價值的東西。開放心態,聽取一些和你的視魚不同的觀點,會幫助你找到事情的核心。
編輯:藍藍 這篇文章挺好的。
利益相關方管理的流程是:
“識別出內部和外部的利益相關方,以界定清楚項目的需求,
以及所有涉及團體的期望”,
與此同時,“管理不同利益相關方對于項目需求上的影響,以保證成功的產出,這一流程具體包括:
利益相關方的管理很關鍵,因為:
每個利益相關方清晰界定一個角色:
(1)整個系統用傳統的圓形符號,意喻著系統(可滲透)的邊界。
(2)系統里的利益相關方是指能回答以下問題的人
為什么我們要做這個?
我們在做著什么?
我們要怎樣做?
·什么是可能的?
在現實中發生了什么?
(3)這些問題產生了一系列“聲音”,在項目中扮演著不一樣的角色。
意向的聲音—限定了“對于這個方案來說哪些方面是可能的”?以及總體日標是什么?
消費者/用戶(或者公民、客戶等)的聲音—告知我們
“具體的目標是什么?以及“在現在經驗的聲音——展露出“在現實中,我們所看到的正在發生的事情呈現著怎樣的模式?
現實中存在什么問題?
“我們如何可以讓事情在這個系統中發生?
設計的聲音—想象可能的解決方法有哪些?”
和“我們如何讓這些解決方案發揮作用利益相關方對于項目長遠的成功都很重要。
意向的聲音
首席執行官—首席執行官負責標識已知事項,申請這個項目和設定整體的目標。
發起人—發起人直接向首席執行官匯報,他是確保項目資金和資源順暢的主要倡導者,需要排障和確保項目進度。
指導委員會—組織一系列直接向首席執行官匯報的執行人員,設定整體的項目方向和做出高層決策,在重要會議之前,我們會和每個人過一遍流程,這樣他們可以進行提問,有備而來。
經驗的聲音
顧問團——由于我們在使用的基于設計的方法對于組織來說是創新的,我們會組成小型的、非正式的咨詢團隊,對于如何建立項目以及有效地和利益相關者合作的問題提供咨詢服務。團隊包括戰略,執行者、戰略經理和外部顧問。
反饋團—我們經常向由服務領導者和客戶關系代表組成的跨部門的團隊傳遞項目信息和獲取經驗的聲音聽取反饋。他們曾被不好的服務表現所影響,我們就依靠這個團隊去驗證我們的結果,和代表“客戶的其他有關的人—一些對于項目好奇,可能幫助識別風險的利益相關方,例如風險部、法務部、人事部和其他同事等,但在方案會議和非正式聯系之外的更深層的投入,他們就很少有意愿介入了。
全體員工——我們與內部溝通團隊合作,確保整個組織的所有人都能獲得關于項目情況的基本信息,知道我們項目進行的階段,還能引導他們在合適的時機表達反饋意見。
設計的聲音
企業主——負責日常輔導,服務團隊的中層主管大概為項目投入50%的時間。他們和我們一起討論決定如何使利益相關者參與其中,如何展示調查結果及清晰地表達建議。
項目團隊——項目團隊的構成以及所需要資源的靈活配置。由于把項目團隊視為利益相關方,我們采取的是沉浸式的導入流程,以及持續、透明、積極地參與、合作及溝通。
課題專家——我們時常聽取多方專家的意見包括服務領袖、客戶關系經理、保險商、分析專家、市場營銷人員、顧客設計專家和科技領袖。
外部銷售代理商—提高外部銷售和服務代理商的體驗是我們首要的目標。相反,一個終端用戶在幾年的時間里可能只與業務產生一次單向的體驗,銷售和服務代理商卻每天與服務團隊共事,因而客戶服務人員——我們的服務人員也處于這一挑戰的核心。盡管非常努力地工作,我們的服務團隊還未能成功。為了弄清楚出了什么問題,我們運用設計人類學的方式來聆聽客戶電話、觀察員工的行為,并且記錄我們所發現和學到的要點。重要的是他們并沒有介意我的研究是針對他們的,因為他們知道我們不是在做績效考核。如果能公平地體現他們的觀點,也就意味著進步。
終端顧客——雖然我們的顧客沒有受到和外部銷售、服務代理商一樣大的影響,但他們仍然是受到影響的,我們監測他們的反饋,確保所作出的對代理商有利的決策同樣有益于顧客。
1.包容性過程的優勢
多元的視角
多元化的想法以及信息的交叉傳遞可以讓我們的頭腦始終處于活躍的狀態,不斷激發創造力,當你把整個系統整合到一起,能夠從每個不同的角度看待問題的時候,就等于賦予了團隊一個機會去看到全貌,能夠產生新的滑見,并考慮到所有需求,創造出確實有用、可用、也可取的解決方案。
創造性張力
包容性會產生創造性張力,而創造性張力本身又是創造力的重要構成因素。管理創造性張力(或任何類型的張力)是一種微妙的平衡藝術—管得太多是不利的,但管得不夠又不能充分發揮它真正的價值。
協同作用
當人們為某事感到興奮的時候,產生的能量是驚人的。包容性利用這種能量,構建協同作用(產
生于人際、信息和想法的網絡之間的自然的存在和偶然的活動)。包容性是在為未來構建關系,這很重要,因為社會資產(比如信任)會隨著時間的推移有機地形成。
協調一致
包容性可以建立接納和認同感,協助改變進程和加速溝通。所有的這些都創造了協調一致性,它是率、提升效果的重要因素,也使得創新所需要的轉變成為可能。
意義
當多個利益相關方因某個挑戰聚集在一起的時候,他們會創造一個共享的目標、融入自己的激,并且尋找以前可能不存在的社群和連接。包容性的結果就是,人們對于意義的意識往往會得到提高。
2.運用包容性流程來思考
包容性、利益相關方的管理以及變革管理,能促進或破壞一個戰略設計項目的成功,還會決定創新的限制因素在哪里。不能適應包容性和合作的組織、領導和個人會發現用這種方式工作會產生沖突,因為它改變了權力運用的方式。
領導者不再是被期望能給出正確答案的人,這點恰恰改變了領導力的模式。當然,使用包容性流程會擴大利益相關方管理的范疇和規模,給人一種流程被拉長的感覺。我們必須提醒自己,變革是不能用項目開始和結束的時間來衡量的。當項目早期讓更多的人參與進來,實際上也是在推動變革的流程向前—要給人一定的時間和空間,地完成變革。
藍藍整理
提到創新,領導者們的腦海里首先會想到的問題包括:什么樣的人、流程和組織環境可以促進創新?我們能否培訓哪些天生不具備創新力的員工變得有創新力?如何做呢?創新力又是什么呢?
在我們嘗試回答該問題之前,先了解多一點創新力,這種要求很高,又很難定義的能力(已經超出了職位描述所及)。
約翰·霍普金斯大學的神經學家Charles Limb的研究提供了一些有趣的線索,在他早期的實驗中,有一些非結論性的發現,指向了一個有趣的方向:創新力似乎不是與大腦特定區域的活動有關,而是與前腦一些區域的關閉有關,這些區域負責邏輯分析和自上而下地控制決策。
創新力是否是一些不必要去刻意獲取的東西?因為它已經在那里了,只是由于經常處于分析性思
維的壓制之下而難以顯現出來?對于創新領袖的發展和培訓,這又揭示了什么?組織中的哪些設置和模式需要被“關閉”,以便創新力能夠在內部變得豐富起來?
這些問題的答案涉及設計所掌握的寶貴的價值——同理心、靈活性、自由和參與。以下兩個設計思維實踐的案例不是關于個別公司的,而是關于一些企業為了變得更具創新力適應力和彈性,而選擇很多公司少走的路徑。
這里有兩個案例,第一個案例說明企業把員工派到幾千里外的地方去,在環境流程完全不同的情況下,讓他們接受項目和培訓,變得更有創造力和具有設計思維。
第二個案例通過讓他們自由地在地下室和車庫或者離他們最近的DY創客空間閑逛,也能收到良好的效果。
第一個案例:國際企業志愿者服務:在同理心中歷險
“全球化思維”這個詞經常出現在關于領導力的討論中,但它的真正含義是什么?是否只是描述上世界腳步的領導者的一種說辭?是否意味著擁有在外國文化背景下生活或工作的經驗?如果我們用“北/南”這樣一種粗魯的說法代表發達工業國家和世界其他國家各自的經濟陣營,那么“全球化思維”是否就是一種讓來自全球北方陣營的商界人士來了解南方陣營的現實的有禮貌的說法?或者只是社會特權階層的商業主營業務脫離了全球主體現實的仟悔之辭,讓他們來補上同理心這一課,不管你認為是哪種情況,很值得深入了解的是企業培養更多全球思維領袖的路徑-----國際企業志愿者服務(國際企業志愿者服務包含一系列有著多方面目標的、范圍很廣泛的項目,它為成員們提供特別的環境與來自不同地域、歷史背景和社會階層的人們分享經驗、發展同理心。)
讓我們深入探尋這樣一個項目的具體細節,更好地理解這一現象和其中所包含的設計思維原則。
百事企業是一個為期一個月的國際商業體驗項目,在深化員工對公司的引領哲學—“帶著目的,做出成績”的認同企業全球范圍的員工(可以跨職能),只要是公司的領導力發展培養對象,就可以申請加入項目,隨后企業會仔細挑選出由7-8個人組成的團隊到海外的項目上工作,他們將要運用商業上的精明采斷去解決各種挑戰,包括潔凈水資源、可持續發展的農業、可負擔的營養和婦女發展(這些都是公司關注的領域)。項目團隊需要與他們幫助的社區一起生活和工作,避開行政商務差旅的特別津貼,有助于團隊融入當地的文化和環境。
例如,百事企業最早的一支志愿者隊伍花了一個月的時間在加納的代努,與當地政府和南科圖地區的部落委員會一起工作,改善村民獲取干凈和安全的飲用水的方式,推廣可持續發展的生態旅游業,一半隊員負責做研究,向該區水務及衛生處提出改進流程的提議,并和當地政府官員一起舉辦“培訓培訓師”的課程,幫助把這些提議更好地落實。另一半隊員邀請當地政府、部落首領和社區其他利益相關方共同制定吸引中央政府和私人機構對生態游進行投資的方案和概念,每周五,整個團隊會在當地學校義務支教,面向1000多名小學生教授個人衛生習慣,通過把基礎設施的供給與經濟發展、教育和健康連接起來,團隊在用系統的方法解決社區發展問題上樹立了一個很好的典型,并激發了團隊成員在日后就后更能運用其商業技術能和專長,為解決復雜問題貢獻有形和持久的解決方案。
通過強調實地學習和面對極端限制性因素的創造性解決問題的方式,百事企業項目和類似項目在公司不斷擴大的圈子里播下了“設計”的意識和設計工具的種子,有趣的是,國際企業志愿名服務是服務于不同公司的,每個項目都是基于反映公司文化和戰略重點而設計的,因此結果也非常具有多樣性,一些企業(如1BM)希望在員工中宣傳一種服務和公民的普遍意識,另一些企業是為了培養新一代的領袖,希望他們在解決復雜問題過程中的導向是具備全球視野、充滿目的感、適應力強、能夠跨學科協作的,還有一些企業的需求可以定義為產生同理心的體驗,為創新而進行的場景式學習,為處于社會經濟金字塔底層的人們帶來積極影響。
隨著百事企業項目對百事公司社群的激發,項目參與者已經開始專注于程的下一個階段--面對不斷成長的、已經轉變為在商業中能夠帶著目的去行動的員工骨干,要做些什么?
如何把他們和相應的角色、責任相連,進一步推動“通過促進社會發展來獲得好的財務收益
共同使命?這個問題其實是企業樂于擁有的。
第二個案例:儉約創新(Jugaad)—印度企業鼓搗創新的藝術
印度的“曼加里安”號火星探測器于2013年11月成功發射到太空,已經完成了預定目標一半之
截至寫這本書的時候)。這是亞洲國家成功發射的首個火星探測器,將使印度與其他21個經嘗
但失敗的亞洲國家拉開距離。“曼加里安”號背后的故事還有很多,它可能是世界舞臺上最引
目的“儉約創新(Jugaad)的例子,即以印度式的態度和方式進行創新(和生活),其原則正在被全世界頂尖跨國公司學習和應用。
在印度語里面,儉約創新(Jugaad)的意思就是在解決問題的過程中要足智多謀,并且很節儉。
印度火星任務只花了印度空間研究組織約75,000,000元,相反,美國家航空航天局
“MARVEN”火星探測器花費671,000,000元。前者耗費15個月來建造,后者用了5年。
如果更進一步來說明,儉約創新的精神既是深深植根于印度(這種聰明才智是這個超過10億人口的國家在應對各種難以想象的限制性因素的情況下做出的應變反應),同時也是具有明顯的普適性的,因為還有數十億人每天也要面對和解決相似的沖突,從巴格達、開羅、底特律、德班、拉各斯馬尼拉、墨西哥城到圣保羅。儉約創新和設計思維的精神也是緊密交織在一起的,例如它也是聚焦于問題背后的環境因素、模塊化組合拼湊和重復運用,也采用了在不斷測試中學習的方法。
在“曼加里安”號這個案例中,儉約創新的方法具體表現在:充分利用其他太空飛行任務中已經發展出來的發射能力和設計元素,快速和更有效地測試,以及非常機敏地運用一些有利條件。
這是一個普遍的設計哲學——最大限度地充分運用已有的資源(相反的做法是構建一組理想的規格)的具體應用。
正如印度空間研究組織主席K· Radhakrishnan對《衛報》解釋說:“我們使用我們能獲得的、具備最佳效力的發射裝備,特別定制了發射時間和發射角度,以確保它到達正確的軌道。”
簡要地說,作者們從豐富而多樣化的觀察中,總結出了三個關鍵的結論:
(1)創新的關鍵驅動力,是不斷生長的自由,而不是不斷增加的預算。這個發現打破了一個流行的說法—創新是一件昂貴的事情,需要大量的研發投入和高科技帶動。這并不是說研發和技術不能幫助創新,關鍵是看企業如何更有創意地運用研發和高科技,而不是在上面投入多少資金,所以企業創新向前的關鍵,是提供適合的環境和工具促使員工用自己的雙手來做創新。
(2)說到創新的成功,靈活的方法比傳統分階段的流程化控制更勝一籌。
Naii和sm所經歷的最激動人心的時刻,就是把實證的斧頭揮向了傳統對于創新的商業思考----認為創新是另外一種企業行為,像技術一樣可以通過六西格瑪來管理和優化。
如果創新管理這個說法本身是自相矛盾的,怎么辦?企業不得不從“漏斗式”的創新管理方式轉變為創造一個生態系統,各個部分是共生的,可以自適應特定的需求,例如速度、干擾、規模等。“對模糊的舒適感”是設計和前瞻很常用的創新原則,可以很好地匹配一些任務,幫助企業適應新的創新模式,使用框架和流程作為導向和航線,而不是被框住,這是在企業當中可以有很多方面運用的設計思維的一個方面。
(3)驅動創新的是參與式網絡,而不是秘密的孤島作業。對于儉約創新也是同樣,在歷史上它也根植于社會最貧困的階層,儉約創新本質上是主張民主化,憎惡階層和精英主義的透明和合作。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
我們都知道UI設計并不僅僅是做出好看的東西,還涉及到交互和數據還有轉化率,就像是設計師通過界面在于用戶交流一樣,而底部導航欄就是交流對話中的一個。因為如果用戶連他們在產品的哪里都不知道,那么我們的設計再好優秀也是沒用的。
底部導航欄的用法
底部導航欄在屏幕底端展示3至5個目標選項,每一個選項由一個圖標和文字標簽展示,點擊底部導航圖標時,將帶領用戶前往與之關聯的視圖。
這里將目標選項放在底部的原因是,在手持的移動設備上容易被觸及,符合拇指定律,方便用戶單手操作。
底部導航欄的展示
根據我的觀察,底部導航欄的表現形式一般分為三種,首先我們先來說第一種:
1、文字+圖標
大部分的平臺都是使用的扁平風格,只有在節假日的時候才會出現,而多數情況下,我們常見的底部導航欄都是以文字+圖標的形式出現,在選中的狀態下,設計師也會根據對整體風格的把控和產品調性,增加一些變化和趣味,來突出產品的風格。如下圖所示:
全名K歌和知乎的底部導航欄就是使用文字加圖標的形式,其中全名K歌的底部圖標增加了一些有趣的變化,讓底部圖標變得更有趣,同時文字的存在能夠更好的讓用戶對圖標進行理解,提高用戶識別效率。
2、文字
文字按鈕目前來說產品里使用的也是比較多的,大多出現在以圖片和視頻為主的產品和界面中,如下圖所示:
抖音、美圖秀秀、小紅書,這三款APP的底部導航欄都是文字作為模塊切分,在使用的過程中,更能夠關注與閱讀內容,底部操作欄視覺層級相比上面的那種層級比較低,不影響瀏覽視覺,同時文字按鈕降低了用戶的理解成本。
3、圖標
單圖標按鈕是很少見的,很多圖標都沒有很強的識別度,所以僅僅用圖標放在底部操作欄,會造成用戶的認知負擔,不建議使用獨立的按鈕。如下圖所示:
VSCO是一款給用戶推薦產品的APP,因此底部操作欄只有三個按鈕,從設計的架構和產品的邏輯上來說,比較有利于用戶對圖標點擊操作。
Same的是一款社交的APP,有別于目前的大部分產品,它的底部是使用的單圖標的形式,雖然整體界面比較簡約,但是辨識度比較低,造成了使用產品時的認知負擔。
小總結:
1、當頁面圖片以圖片為主時,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾,但是純圖標的底部導航欄降低了用戶的識別度,引起用戶使用時的認知負擔。
2、文字+圖標的搭配屬于最穩妥的方式,適用于大部分的產品底部圖標設計。
底部導航欄圖標的設計
當我們準備做APP底部導航欄設計的時候,不知道大家有沒有遇到過經常不知道該用面性還是線性的糾結中,究竟要選擇哪種對用戶來說才是合適的呢?
大多數的人會覺得是出于個人喜好,但是一項名為《面性圖標vs線性圖標,對于可用性方面的影響》的研究表明:不同的圖標存在著不同的識別效率,而面性圖標一般會比線性圖標更快被用戶所識別。
1、特征線索
用戶要辨認圖標依靠的就是特征線索,如果一個圖標沒有明顯的特征,是很難被用戶所識別出來的。如下圖所示:
如上圖所示,發現的特征線索是它的眼睛,沒有眼睛,發現就是個橢圓;目的地的線索特征就是中間的圓,沒有了中間的圓,就是個小氣泡;行程是做成了行李的樣子,而沒有了行李箱上的特征標志,就變成了一個很普通的包。
所以圖標上的特征線索是用戶識別的關鍵,在我們設計圖標的時候,一定要確保它包含了用戶識別的線索。
2、什么情況下用線性圖標?
圖標除了要包含特征線索以外,線性和面性圖標之間也有區別,當一些圖標的外部特征為它的特征線索時,線性圖標會比面性圖標的識別度來的更為突出。
當我們的底部圖標的信息屬于特征線索比較微妙,并且出現在邊緣的時候,我們可以使用線性圖標,或者換個角度來說,就是當我們選擇底部圖標為線性的表現形式的時候,在圖標的表現形式上,盡量往形狀的邊緣特征來靠,這樣能夠讓圖標更加突出并且很快被識別。
3、什么情況下用面性?
大多數圖標其實就是將現實生活中的對象變成一個小縮影,因此面性剪影的圖標形式認知高于線性圖標。
盡管如此,用戶還是能夠識別線性圖標,但是當圖標的內部空間比較狹窄的時候,用戶識別線性圖標需要花費更多的時間來識別。
對于內部空間比較擁擠,或者線條比較多的圖標,最好使用面性圖標,剪影的表現方式提供了一個更簡潔也更具辨識度的方式,從這里我們可以發現一個事實,線性圖標的設計表現要求要高于面性圖標,因為線性圖標要在具有表現力的同時還需要有很高的識別度,同時不能太過復雜,內部不能過于擁擠。
劃重點
1、當頁面圖片以圖片為主時,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾;
2、文字+圖標的搭配屬于最穩妥的方式,適用于大部分的產品底部圖標設計。
3、圖標是由有識別度的特征線索組成的,而面性圖標的識別度速度更快;
4、線性圖標的內部間距比較寬的時候,更容易識別,內部間距比較窄的時候,使用面性圖標會更好;
5、圖標的特征線索在邊緣的地方,使用線性的圖標識別度更高。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
簡介說明1. 理論表述
對于許多事件,大約 80% 的影響來自 20% 的原因。
2. 理論背景
1896 年,意大利經濟學家帕累托出版了《經濟政治學課程》(Cours d’economie Politique),其中描述了他所觀察到的一些現象,比如意大利 80% 的土地掌握在 20% 的人手中;比如花園里 20% 的豌豆莢產出了 80% 的豌豆。
上世紀 40 年代,美國一位管理顧問 Joseph M Juran 觀察到一個在商業以及生活中普遍存在的現象:在某一過程中,80% 的影響來自于 20% 的投入。他將這一現象以帕累托為名,稱為「帕累托原則」。
80/20 雖然只是一個相當不的數字,在很多具體情況之下,這個數字會有細微的波動,但這個數字背后所蘊含的思想或是規律卻是不變的:更集中的投入將產出大于預期的結果。
一般來說,一個 APP 大多擁有幾十上百個頁面,但是這些頁面并不是用戶都能用到的,有時候大多數用戶只會常用那么幾個頁面,所以將有限的時間和精力投入到這些頁面將給你帶來更大的收益。
案例1:網易云音樂的 UI 迭代
最近網易云音樂和蝦米音樂都迎來了大版本更新,UI 也幾乎重新設計了一遍,但我們所看到的重設計,只局限在那些關鍵的頁面上,一些次要的頁面基本沒改。比如網易云音樂,首頁這種重中之重的頁面不僅風格、排版大改,連產品邏輯都改了(比如快速入口由四個變為五個,改變了私人 FM 的位置等),但是等級頁這種無關緊要的頁面,除了頭部的全局性改動外,其他地方一點沒變。
那我換個角度想,如果我們的應用已經存在了這么多需要花費時間和精力的頁面,現在產品經理希望增加另一項需求量小但確實存在的功能,我們應該怎么辦?奧卡姆剃刀指出「如無必要,勿增實體」,這是我們對此欲增加的功能的終極評判標準。
要知道,頁面中每增加一個元素,對于用戶體驗的影響是巨大的,這意味用戶著需要花費額外的時間去理解新增加的元素是什么;在所有元素中尋找特定的一項又多了一些備選;瀏覽頁面時的視覺噪聲又多了一些。
所以到底要不要增加這個功能,關鍵在于能否很好地控制上述的用戶體驗成本,以及后續的迭代成本。從帕累托原則的語境來看,小眾但是確實存在的需求大概率不足以產生能夠克服用戶體驗損失的收益,哪怕我們投入了一定的精力去做,日常依然無法給它百分之二十以上的關注去修改,去完善,去迭代,所以這個功能也大概率不需要增加。
說起帕累托原則就不得不提到長尾模型,長尾模型的分布曲線與帕累托長得很像,但是結論卻完全相反,長尾模型提醒我們無法忽略那條長長的尾巴的影響,雖然它收益低,但架不住數量多,比例高。所以我們可以看到「尾巴」所占據的面積幾乎和「大頭」相當。
04 年長尾模型被提出來的時候,很多人認為長尾模型是對帕累托原則的顛覆,諸多例子都側面佐證了長尾模型的正確性,比如 Google 目前約有一半的生意來自小網站,比如亞馬遜圖書的總盈利中少數暢銷書占一半,絕大多數的冷門書占另一半。
聽起來好像很有道理,長尾模型好似在控訴著開發者不去關注那些小眾而眾多的瑣碎需求。事實真的如此嗎?
長尾模型本身隱藏了兩點不可或缺的前置條件,一是尾巴真的要足夠長(小眾需求真的有這么多),二是這么長的尾巴能被用戶發現。無論哪一點,都建立在海量的用戶資源之上,所以中小型 APP 大多望塵莫及。能夠有余力去關注長尾模型的大多是用戶量達到一定規模的產品,比如之前例子中所舉的 Google、亞馬遜,國內的微信、QQ、淘寶、支付寶、京東,這些產品的用戶量足夠多,用戶類型足夠廣,尾巴足夠長,哪怕再隱蔽的功能入口也能擁有不錯的曝光度(總會有用戶發現它),所以才能發揮長尾模型的作用。
所以在用戶量達到 QQ、淘寶的級別之前,長尾模型看看就好,帕累托依然是主要的指導原則。
注意點1:不得不做的需求
雖然我們要將精力放在重要的事情上,但有些功能和標識即使對于用戶意義不大,和產品的增長也沒有實際聯系,但我們也依舊需要花費大量精力投入。最常見的就屬于法律規定和平臺規則相關的需求了。
比如 18 年的大事件,歐盟推行《一般數據保護條例》俗稱「GDPR」,所有國際版的應用都需要針對這個條例對注冊流程做出大改,比如這篇文章介紹的:《GDPR合規下的 App 產品設計——啟動頁面和賬號注冊》。
注意點2:最重要的「少數人」
滿足大多數用戶的需求是一個必要條件,但不代表在任何情況下少數人就是可以被忽略的群體。對于工具化的應用而言,真正為應用帶來收入和傳播的,恰恰是占比較低的付費用戶,可能連 20% 都不到。
在這類應用開發的周期中,前期完成了滿足大多數用戶的基礎功能,之后更多的精力會被分配在滿足少數付費用戶的需求上。產品的方向和目標都可能隨著不同的時期發生變化,帕累托原則是一個決策工具,但決策方向是需要經過我們充分思考以后得到的,切勿盲目地服從一個指標。
理論表述
當存在多個相似的物體時,與眾不同的那個更容易被記住。
理論背景
馮·雷斯托夫效應(Von Restorff Effect),也稱為隔離效應(Isolation Effect)。1933 年,德國精神病學家、兒科醫生 Hedwig Von Restorff 在研究中發現,對被測試者提供一系列相似的項,而只有一項顯得特別、孤立、與眾不同的時候,這一項往往更容易被記住。
在此之后,對馮·雷斯托夫效應的研究也有進一步的進展,比如從生理學上,大腦對特異點有著更加明顯的 ERP(事件相關電位),這或許可以解釋特異點更容易回憶的原因;再比如馮·雷斯托夫效應與年齡有著密不可分的聯系,老年人對特異點的記憶就沒那么深刻。
不管如何,我們還是在頻繁地應用著馮·雷斯托夫效應,并能夠看到它在視覺設計中卓著的效果。
馮·雷斯托夫效應可以應用的場景分成兩種:環境差異和經驗差異。環境差異是指在空間尺度上做出的差異(同一平面內),而經驗差異是指在時間尺度上做出的差異(不同時間點的同一平面),我們來詳細聊一聊這兩個尺度。
環境差異──獲取視覺焦點
也有的文章中會表達為「背景差異」或「情景差異」,這不重要,我們只需要知道這個差異產生的原因:即在相似的周圍環境中出現差異。參考百度百科我們來進行一個簡單易懂的小實驗。
案例1:環境差異小實驗
請試圖去記住上面那幾串字符串。好吧,我放棄了,但如果努力一下,我們就會發現最容易記住的是與周圍環境最不一樣的那個。第一行是數字「5」,第二行是星號,第三行是紅色的字母「F」。
這就是環境差異所帶來的識別度與記憶度的提升,也是我們經常能在 UI 設計中所看到的一種有效吸引用戶點擊的手段。
案例2:起點、大眾點評
比如起點希望用戶在個人頁時去點擊「版本測試」按鈕,比如大眾點評希望強化「訂單」按鈕的視覺特征以便用戶能夠更快速地找到,所以在列表中這兩者都會長得不太一樣。這種區別于環境中的其余功能按鈕,為了吸引或暗示用戶點擊的按鈕有一個專門的名字,叫做「Call-to-Action 按鈕」(CTA 按鈕/行為召喚按鈕)。一般來說,CTA 按鈕大多會利用馮·雷斯托夫效應的環境差異來達到 Call to action 的目的。
經驗差異──強化時間特征
與用戶過往的經驗或記憶做出差異,叫做經驗差異。這種差異可以放大時間點的特征,使用戶對差異所在的時間點記憶更深。
案例3:google doodles
我們都知道 google 會在一些比較特殊的日子改變 logo 的設計,給 logo 加上一些非常有趣的涂鴉,與平時的 logo 做出差異,就是為了利用經驗差異使用戶在記憶中強化時間特征,更好地記住這個時間點。
記住時間點有什么好處呢?比如 Google 可能是為了傳播世界上那么多有意義的節日,也帶給公司一種具備著人文關懷的氣質。再比如淘寶、京東和 Steam,在「雙11」、「618」、「圣誕特賣」一定會改變主頁的設計,就是為了讓用戶記住這幾個被創造出來的節日,好讓大家每年這個時候都心甘情愿地剁手。
注意點1:所有都不一樣 = 所有都一樣
頁面中的特異點終歸只能屬于少數,如果整個頁面所有元素都想做得不一樣,都想突出,那不僅沒辦法突出任何一項,頁面的整體視覺都將崩潰。
反面案例1:新手常常會陷入什么都想突出,但什么都不能突出的境地
注意點2:把差異放在該放的地方
當用戶被特異的那一個點吸引的時候,對其他的注意力就將下降,這是馮·雷斯托夫效應天然的副作用。我們能做的就是把特異點放在最關鍵的地方,而不是次要的地方,這樣副作用就不會太過影響體驗。
反面案例2:閑魚、虎課的退出登錄按鈕
前幾年我們經常能看到這樣的退出登錄按鈕,使用高飽和紅色的背景,成為了這一頁最亮的那個按鈕。之前我們基于「警示用戶謹慎按下」的理由,將退出登錄按鈕做成最具警示意義的紅色,但是你看,一旦我們這么做了,這個按鈕就成了頁面中最不一樣的那個,強勢地拿下「Call to action」的大旗,時時刻刻都在散發著快來按我的氣息,這顯然與我們「不希望用戶隨意退出登錄」的意愿相違背。所以,我們現在去看微信、QQ 這些巨頭應用,都已經把退出登錄按鈕的差異做到最小,甚至沒有差異,就是基于上述的考量。
理論表述
人們對未完成任務的記憶比已完成的更深刻。
理論背景
Bluma Wulfovna Zeigarnik,前蘇聯心理學家和精神病理學家。她的導師首先注意到了餐廳服務員能夠很好地記住未付賬單,但是卻無法記住已付賬單的更多細節,針對這種現象,她進行了更加深入的研究。在研究中,她發現了人存在一種天生的,做事有始有終的驅動力,這種驅動力使得人們對還沒有完成的任務念念不忘,而對已經做完的任務印象不深。
蔡格尼克效應被用于證明格式塔現象不僅在感知中普遍存在,在認知中也是如此。勒溫的場論給出了一種解釋:一項任務被啟動之后人會形成一種處于緊張狀態的場,這會增強對所有與該任務相關信息的認知;任務完成后緊張的狀態就會得到緩解。
注:勒溫的場論(Lewin’s Field Theory)是格式塔心理學的一條分支,該理論受現代物理學場論的影響頗深,認為人在認知過程中大腦會形成一種場,這個場影響著人的感官信息的處理。
對未顯示完全的信息設置「懸念」
在文字較多的組件中我們時常能看到這樣的一個符號出現:「…」,這個符號用于表示文字信息未顯示完全,點開可以看到完整的信息。
案例1:新草、bilibili
就是這個小小的符號,時刻提醒著我們當前所顯示的信息并不完整,吸引著我們點開它繼續看下去,旁邊還伴隨著「全部」、「展開」等詞都是為了強化這一特征。
當然,不止如此,Web 端也會出現文章顯示不完全的情況。
案例2:知乎、簡書 web 版
通過這種方式,激發用戶繼續往后看,產生把文章完整看結束的驅動力。
提醒用戶任務還未完成
如果一個任務存在多個步驟,那么在任務結束之前應該用某種形式(比如進度條)提醒用戶任務還沒完成,這能夠激發用戶完成任務的欲望。
案例3:多鄰國
在選擇和測試過程中,頂部都會出現一條進度條清晰地表達著目前任務還沒完成,進行到了哪一步。在這樣的提示之下,用戶會有更大的動力去完成整個任務流程。
有效的任務激勵
越來越多的應用(尤其是技能學習類應用)開始對學習進程進行更細致的任務分解,然后利用蔡格尼克效應的影響對用戶的學習進程進行激勵。
案例4:Drops
在任務進行中始終展示任務的完成進度,任務完成之后會有對應的完成提示,并且可以獲得勛章/成就之類的小物件兒。也包括很多番茄類應用、習慣養成類應用,都會有類似的設計,比如 Eggzy、Forest、美妙激勵等等,都是通過這種方式激勵用戶完成自己的目標的。我們可以從中看到蔡格尼克記憶效應發揮著不可或缺的作用,正是我們追求有始有終的驅動力,在進度條的提醒下才能一步步完成目標任務。
注意點1:任務已完成同樣需要提醒
另一方面,已完成的任務同樣需要給予用戶相應的提示,不然用戶會感到壓力,會困惑自己到底有沒有做完這件事,這樣緊張的情緒將會一直存在,而緊張過后就是不安和不信任。
反面案例1:起點任務結束沒有反饋
起點的新手任務是我最近遇到的一件特糟心的事兒。我明明已經完成了「添加一部作品到書架」的操作卻沒有任何完成的提示,甚至我不知道自己究竟有沒有完成。明明做完了,卻依然顯示著「去完成」,是還有隱藏條件沒做到?還是我加的那本書不算?還是必須要兩個任務一起做完才算完成?還是我沒氪金不讓我完成?還是純粹的 bug?我不知道,用戶不知道,或許只有產品團隊的人才知道。
所以,如果已完成的任務沒有給予用戶合理的提示或者反饋,這樣的體驗是很差的。
注意點2:避免過分強迫
過長的進度條會給人形成壓迫,進度極其緩慢的任務,或者長時間完不成一項任務會讓用戶產生挫敗感,對完成整個任務來說尤為不利。
反面案例2:百詞斬讓人絕望的進度條
192/6270,相信這個進度不僅僅是讓我,讓所有看到的人都感到窒息和絕望。我并不是在為我的拖延癥找借口。我想表達的是,這種超長的進度條和超緩慢的任務進度,每天 50 個單詞也就是進度條每天推進 0.8%,不足 1%,對用戶形成的壓力是巨大的,過長的任務周期也會讓用戶快速失去信心。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
簡介說明1. 原理表述
系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。
2. 實驗背景
上世紀 70 年代后期,計算機研究人員依然認為計算機可以花費兩秒的時間對使用者的操作做出反饋,因為他們認為人們大概正好需要兩秒時間來決定下一步的操作,所以 2s(2000ms)一度成為了當年計算機響應時間的標準值。直到 1979 年計算機的算力開始大幅提升,也有了足夠的能力在 2000ms 內做出響應,這時 IBM 的研究員 Walter Doherty 進行了一系列研究來評估算力的增長對生產力的影響。
研究結果表明,計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間(這個時間被稱為用戶響應時間),換句話說,計算機相應的時間越長,用戶就要花費越多的時間來思考和決定下一步的操作。
上面這張表格充分說明了這一觀點,橫縱坐標分別為用戶響應時間和系統響應時間,我們可以看到系統響應時間如果從之前的 2000ms 降低到 300ms ,使用者作出下一步指令所需要的時間就能夠縮短 5s 以上。Doherty 認為人們會將工作需要的一系列操作步驟存儲在短時記憶之內,如果系統響應時間太長,就會打斷人們的短時記憶,換句話說,思路都不連貫了。
不僅如此,Doherty 還認為響應速度低于 400ms 的系統或者程序,會讓人上癮。放在當下的環境來看,這當然只是一句比較夸張的話,但是結論是需要我們重視的,程序的響應時間,務必在 400ms 之內。
要說「多爾蒂門檻」帶給我們的啟示,上一節最后一句已經表達得足夠清楚:系統或程序的響應時間小于 400ms 。為了讓讀者有更加直觀得感受,我們先來一組小動畫感受一下高響應延遲有多讓人抓狂,快速響應又多么讓人舒服:
應用案例 1:模擬延遲效果
注:請務必挨個觀察,不要看整體,看單個的效果。
從動畫中可以感受到,50ms、200ms 還算可以讓人接受,當響應時間達到 600ms 時已經讓人有些不耐煩,而達到 1000ms 時會讓人不自覺多點幾下,2000ms 時我手機已經被我砸了。
在如今的計算機算力之下,響應時間輕輕松松便能夠達到多爾蒂門檻的閾值,甚至能夠遠比 400ms 更小,但是這就夠了嗎?「多爾蒂門檻」說到底只是給出了響應時間的上限,400ms 的響應時間或許在多爾蒂那個時代確實能夠大幅提升操作員的操作效率從而產出更大的經濟效益(比如銀行系統),但是現在互聯網已經越發成熟,不少公司的用戶體驗研究者都已經意識到,系統響應時間已然不是影響用戶響應時間的唯一因素了,另一個因素是過渡動畫的持續時間。
就像谷歌在 Material Design 中明確規定了過渡動畫的 Speed 這一項,這是為什么呢?用戶體驗是一門關于情感和邏輯的學問,而不僅僅是一個統計數字就能解釋的,讓程序對某一操作的反饋時間(包括響應+動畫)符合用戶對該操作的預期才是讓用戶「上癮」的關鍵。
應用案例 2:iOS 中的動畫
所以,哪怕我們的手機、電腦已經可以做到在 100ms 之內做出響應,快到完全有能力在用戶反應不過來的情況下給出反饋和結果,但是這樣是不夠的,我們依然需要「合適時長的」動畫作為計算機反饋和大腦反應之間的潤滑劑,而不至于讓程序使用起來太「干澀」,也不至于讓大腦一直處于應激反應的階段而感到疲勞。
在真實世界中我們使用應用時會發現,有時候響應速度沒辦法做到如此迅捷快速,比如 APP 啟動時;還有時候即便系統可以響應,網絡卻不行。網絡并不能在用戶操作的一瞬間就把所有需要的資源都下載好,用戶必須等待幾秒的時間,那么這時候就需要考慮如何減少用戶等待的焦灼感,優化等待的體驗。
比如有趣的加載動畫、閃屏頁等,都算是解決辦法。
應用案例 3:Netflix 的啟動動畫以及新草的加載動畫
動畫的持續時間應當在適當的區間中取到最短,而不能太突然或太緩慢。
反面案例 1:過快或過慢的動畫
在現實的上線 APP 中,也會有故意把動畫做得很慢的例子,這比較影響操作的流暢性。
反面案例 2:Eggzy
左右滑動的時候動畫效果在實際體驗中非常慢,對于想要進行連續滑動操作的用戶(即便這樣的使用場景不多),已經慢得無法忍受,有一種「不跟手」的感覺,這么慢的動畫已經很輕易就能讓用戶感受到自己在等它了。
仔細瀏覽 Material Design 中給出的案例便可以發現,動畫的持續時間大致可以參照以下幾條規律去嘗試:
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在設計的時候,各種視覺要素以有序的方式排列,設計師需要通過對各部分空間的精妙設置來實現這一點。通常而言,我們的目光總會被最引人注目的部分吸引——無論它是視覺主體還是負空間。視覺主體和負空間,兩者都很重要,尤其當你需要平和地呈現一個和諧、連貫、天衣無縫的設計。那么在一個網頁設計作品中,設計師到底利用空間傳達出怎樣的一個故事呢?這就牽涉到我們今天要聊的主題了,格式塔原理。人類的大腦天生就能把規律性的散點連接起來,并對目之所及的事物賦予意義。設計是一個創造性的領域,是形式和空間的相互融合,并隨之創造各種各樣的體驗。無論我們接觸到什么樣的設計作品,我們的大腦都會本能地將作品解構為更簡單的各個組件,這些組件由基本的形狀和不同的形態組成,而這些形狀和形態則與空間息息相關。過往豐富的體驗與經歷,使得我們的腦海中充滿了各種各樣的記憶,于是我們很容易就能識別出這些特定的設計形式。
正空間,或者說顯著的設計主體,構成了設計的「肉體」,它是你看到形狀、顏色、圖案等部分。相反,負空間多數情況下是指背景或大量留白。
文森特·梵高(Vincent Van Gogh)的這幅廣受歡迎的作品,是一個以正負空間之間有著強對比的經典設計案例。
就像正空間似乎支配著負空間一樣,兩者都被用來平衡地傳達一個和諧、連貫的設計理念。
在平衡的構圖中,設計的正負空間都是相互配合、相互補充的,形成一個無縫、美觀的整體。相反,不平衡的構圖會讓觀眾感到不適,傳達出一個不完整的、扭曲的故事。
網頁設計的好壞很大程度上取決于它的實用性和可用性。如果你的設計技巧很差,那么網頁設計的整體效果和表現都會受到影響。但從另一個角度來看,在「內容為王」的時代,如果空間布局使用不當,內容將對您的網站產生顯著的負面影響。
如果你認為你的開發技能很棒,但你的設計技能可能需要更多的改進,那這篇文章對你就太合適了。在本文中,我們將討論:
我們還將討論一些真實的網頁設計實例,探討每個案例如何體現格式塔原理,以及它對空間的創造性使用。
話不多說,一起開始學習吧。
空間由兩個主要維度組成:正空間和負空間。正空間是可被直接感知到的視覺元素,負空間則為元素以外的留白和間隙。如前所述,正的是物體,負的是物體后面可以通常被忽略的留白區域。一個是焦點,另一個是背景。在前者產生活動和刺激時,后者則保持靜止和模糊。一個是月亮,另一個是環繞著它的暗夜。
在網頁設計中,正負空間相互作用,共同形成構圖,傳達理念。只有當正負空間通過對比來區分,同時又向更大的區域延伸時,才會產生視覺層次(腦補一下陰陽太極圖吧)。
正負空間的交匯之處就是信息的交匯點。負空間拱衛著正空間元素,讓后者更加突出和顯著。
通常而言,正空間在絕大多數時候起主導作用,實際上負空間同樣重要。負空間的優點在于:
設計中的負空間相反并不是負面的。當正負空間比例平衡得當時,兩者在視覺上會顯得非常舒適。而當其中一個占據主導地位,并給人一種「過于擁擠」或「空洞無物」的印象時,混亂才會發生。在這兩種情況下,受眾都無法處理如此復雜的信息,因此,而這樣的空間設計是不符合網頁設計的基本原則和設計動機的。
這是一個網頁模板,它展現了何為「內容錯位」和「空間混亂」:
△ 布局混亂
△ 空間失衡
△ 適當的布局調整
△ 網頁設計中空間的合理運用
有意思的是,當談到空間的概念和布局出現時,質疑聲也隨之而起。
類似的問題只能在理解基本概念后再來作答。黃金經驗法則告訴我們——簡單是最好的策略。
在文章開頭,我曾提到在設計網頁的時候,盡量創建簡單的用戶界面,這是一舉兩得的舉措,既可以造福你自己,也可以惠及用戶。或從表面上看,網頁設計的重點在于增加網站的視覺吸引力,使用戶操作更為簡便。
我們的大腦總是在扮演偵探的角色,試圖尋找隱藏的線索和空間之間缺失的聯系。因此它會將當前的視覺信息與之前的經驗進行比對。為了成為一名的網頁設計師,你必須先了解大腦是如何感知周圍環境的。它可以幫助你選擇特定的視覺元素,利用它們來影響觀眾的感知。
偉大的設計師明白心理學在視覺感知中所扮演的強大角色。當某人的目光與你的設計作品相遇時會發生什么?他們對你的文章所傳達的信息有何反應?——勞拉·布什,Autodesk 品牌內容策略師
作為設計師,你必須清楚地了解視覺設計和心理學是如何相互聯系、相互影響的。換句話說,開發以用戶為中心的簡單界面,借助正負空間進行設計主要依靠格式塔原理,它可以幫助你理解和控制視覺和心理的聯系。
格式塔在德語中是「形式」的意思。它更多的是一個概念而不是一個單純的詞匯,它最基本的概念是:
整體大于各個部分的總和。——庫爾特·考夫卡(美籍德裔心理學家,格式塔心理學的代表人物之一)
當單個部分的集合以某種方式統一時,它們在我們的感知當中就是一組。我們把元素看作一個整體,這一概念或理論基本適用于所有的設計媒介:我們不把文本、顏色和形狀看作單獨的元素,而是把整個網頁看作一個整體。同樣的道理也適用于森林:我們看到的不僅僅是一堆樹,就像我們在看海洋時看不到水滴一樣。
格式塔原則描述了當特定的條件出現時,人類大腦是如何感知視覺成分的。它幫助大腦創造視覺圖像。因此,格式塔原理通常會應到下面六個主要類別:
1. 圖像和背景
「圖形」是直觀地、明顯地與背景分離的物體。
目前最經典的例子是圣杯——兩個鏡面對稱輪廓構成了花瓶。當你第一次看到這張照片的時候,你的眼睛會立即被吸引到畫面上看起來最聚焦的視覺主體上,可能是相互對立的面孔,也可能是花瓶。當你的大腦在調整你的焦點時,背景或花瓶被模糊了,在那一刻,你的大腦直覺地在圖像中感知到背景。
過了一會兒,你會注意到背景中的花瓶,并意識到它本來就在那里。盡管圖形和基本原則看起來模棱兩可,設計師常常創造視覺上吸引人的超現實和虛幻藝術,并將之運用于網頁設計。
有時,圖形與背景之間的關系是穩定的,而這種穩固的視覺關系使得兩者之間,產生區別。這種關系有的時候又是不穩定的,這意味著圖形和背景是無法清晰區分的。由于這種關系的模糊性,用戶會很自然地開始困惑。
為了讓大家直觀地感受到圖形和背景之間的關系,讓我們詳細的拿幾個案例來進行討論。這些例子都集中在圖形-背景關系中的三個主要方面:對比度、Box 區塊和陰影。這三方面涉及到諸多屬性,包括顏色、尺寸和信息量,它們關系到內容的區分和視覺的縱深。
在下面的第一個例子中,Trellis 使用了一個全屏大圖背景,并且搭配上清晰的 CTA 元素,圖形-背景關系明確,該關系清楚地展示出了細節、色彩和尺寸上的差異。
頁面中的文字是位于中央的手寫風格字體,與背景中的圖像相比顯得很突出。和灰色背景圖片構成對比的白色文本是吸引用戶注意力的焦點,這使得文本在畫面中是高度可見的。從另一個角度來看,背景圖片是模糊的,所以清晰的文本會非常醒目。這些都表明,這里的文本被優先考慮為圖形或正空間,而模糊的圖像被用作背景或負空間,從而強烈地暗示了圖形和背景之間的關系。
下一個案例是下圖方框里的內容。 Ocean Health Index 巧妙地利用了框內區域的內容將圖片與背景分離開來。這是你在瀏覽他們的網站時看到的:
當你第一次瀏覽這個頁面時,哪個部分會吸引你的注意力?你會發現,它的主要文本為白色和藍色背景構成對比,而更加醒目的是是兩個與文字對比鮮明的 Box 區塊。前者借助了深色背景和文本色彩上的差異,構造對比度。而 Box 區塊本身的色彩和背景色構成對比的同時,還和更靠前的文本構成色彩對比。
背景使用了微妙的色調,使數字得以鮮明地展現,并突出細節。方框的運用使它們在頁面上清晰可見。
一些網站還通過添加陰影來表現物與背景的關系,產生一種圖象被置于背景之上的感覺。以下截圖來自于 serious unsweet.com:
Seriously Unsweetened 的著陸頁使用了不止一種方法來保持圖形與背景的平衡關系。明亮顏色和陰影的配合;背景是純粹的白色,使得前景元素更容易從中出來。背景之上的元素都是「正空間」,圖中的物體呈現在背景的映襯下,有一種被置于「頂部」的錯覺。而陰影并沒有直接用在圖片和文本上,而是應用在圖片的內部,這讓我們注意到在主要圖像內部還有另一層視覺元素,這意味著里面還有一層圖片-背景關系——這是一個非常智慧的設計。
2. 接近性原理
接近性是指頁面中元素之間的接近程度。網頁中的不同元素可以組合在一起,不同的接近程度會帶來不同的關聯屬性。除了視覺特征上的接近性之外,這些元素與其他頁面元素之間的距離接近度也會自動地在觀眾的腦海中產生關聯感。
從圖像到文本、導航欄到網頁表單,這種接近性原則在網頁設計中適用范圍非常廣。將類似的內容組合在一起時,它將在元素之間創建關聯,為觀者提供更好的視覺體驗。
以下是 Mashable 網站導航顯示的運用接近度的案例:
在上方的截圖中,我們可以清楚地看到如何將相同類別的元素放在一起,以顯示它們與主菜單的關系。由于顏色和文本大小的選擇,使觀者的目光自動被吸引到主標題下的子欄目上。
除了導航欄外,基于網格的內容也符合黃金比例的接近性。亞馬遜的產品列表就是最好的例子:
這個案例體現的是接近性還是相似性還有待討論。如你所見,具備視覺接近性的同類產品使用狹窄的留白進行分組和分隔。這種接近性會指示用戶在類似的產品列表中,對其目標產品基于購買偏好進行排序。此外,封閉性原則也在類似項目的清單中發揮了作用。
現在,我們來仔細看看 Basecamp 的網頁表單設計,它在網頁設計中顯示了另一種接近性的理想情況:
可以看到上圖中的表單是被劃分為兩個主要部分的:個人信息和 ID 生成兩個部分。第一部分被暗示為最重要的字段,第二部分則是一個次要的需求。這兩個部分的標題都因顏色和字體大小的不同而產生區別。在這個網頁表單中,接近度是一個重要指標,它將網頁中呈現的信息按優先級排列。
3. 對稱和秩序
對稱是指兩個元素呈現出鏡像關系。它可以被看作是把一個物體一分為二的平衡。真實的對稱圖形包括等邊三角形、圓形和正方形等幾何圖像。
人類的大腦會本能地渴望在面孔中找尋「平衡」和「對稱」,這在美學上是令人愉悅的。大腦也傾向于在其他物體中找到對稱,因為對稱創造和諧,讓觀者在觀看圖像時感到舒適。
下面是 HvD Fonts 在網頁設計中體現對稱性的一個很好的案例:
這個頁面不僅顯示了典型的圖形-背景關系,而且強調了對稱性原則的運用。頁面被分成四等份,字體大小和顏色相似。四個部分中的每個部分的背景都具有相同的主題色和灰度效果。你也可以注意到負空間不一定是白色的,黑色甚至其他的顏色也可以以圖像作為背景。
對稱性原則還可以衍生出了另一個概念:在網頁設計中,不對稱會使觀感不佳,必須謹慎使用。許多網站使用不對稱作為平衡間距的元素——非常規的正空間元素與中性的背景相互平衡,反之亦然。而 Xplode 的營銷理念是不對稱,Xplode 以獨特的美觀悅目的方式引發不對稱。
這個網頁利用視覺錯覺和不對稱,抓住了觀者的眼球。作為正空間的物體被放置在一個不對稱的布局之下,在負空間中創造了強烈的視覺吸引力。色彩是兩個空間和諧的主要因素,并為觀者創造了一種自然的聯系。左邊的圖形也有很強的平衡性,而右邊的則是帶來更強的視覺吸引力。你覺得這個設計如何呢?
4. 相似性原理
相似性與接近性原理密切相關的原因,是相似分組對象之間共享屬性的質量。無論是顏色、形狀、形態、大小、方向或任何其他屬性,當這些屬性中的一個或多個在鄰近對象中共享時,相似性將占上風。
即使正空間的元素看起來沒有明顯的聯系,由于相似性原理,它們也會與負空間元素區分開。
看看這些 UrbanDecay 的商品列表:
雖然上面的商品各不相同,但在位置、色彩、產品布局、表現方式等方面卻有一定的相似性。唯一不同的是左上角的眼影廣告,在同類產品中獨樹一幟。這顯然是一種營銷策略,目的是在不損害頁面整體對稱和美觀的情況下吸引注意力。這里要考慮的另一點是,尺寸上的相似性使其他圖像與相似的產品類別區分開來。
除了產品展示之外,正空間可以與相似度結合使用,也可以與負空間結合使用。
讓我們來看看 influenster 的著陸頁:
上面例子中對齊的邊框也運用了相似性原理。雖然每個正空間元素是不同的,但是相似的感覺是通過整個頁面中一致的文本字段來傳達的。風格、布局和主題都是相似的,因此帶來了統一的視覺效果。
5. 封閉性原理
你是否曾經遇到過這樣一幅畫面,看上去是閉合的,但實際上是開放的?這是由于它采用封閉性原理。我們的大腦傾向于「腦補」不完整物體的空白,并利用我們的視覺感知來使圖形完整化。
正空間和負空間一起構成一個整體。最好的案例就是負空間中隱藏的形狀和形式,這要求對正空間中要傳達的信息進行評估。在封閉空間創造性地使用著正負空間,可以產生有趣但簡單的設計。
下面是 Magu Kambucha 的設計圖:
在這個案例中,可以看到封閉性和圖形-背景關系的平衡。瓶子和后面的粗體文字構成對比,背景則是和兩者都構成對比的柔粉色。封閉性體現在哪里?看到瓶子后面的文字了嗎?雖然你不能完全看到它,但仍然知道它是「Kambucha」。除了第一個「K」和最后一個「A」,其他字母都是半隱藏的,這些字母都是憑觀者的直覺自動完成的,整個形式開始成形,意義也隨之成形。
下面是 Cult 的截圖:
即使文本沒有寫得很清楚,我們的頭腦可以很容易地讀到 CULT 這個詞。即使單詞不完整,文本的排列和對齊也可以使其易于辨認。
6. 連續性原理
最后,根據一般格式塔原則,連續性遵循模式,即引導實現遵循一致的路徑,建立從一個對象到另一個對象的線性模式。
在上面的圖片中,盡管圓形色塊的顏色變淡了,但是觀者更傾向于將中間的間隙其看作一條直線。這使我們相信連續性的原理比色彩的力量更能引導用戶的視覺感知。當我們借助負空間在視覺元素中畫出路徑,我們的眼睛傾向于優先感知正負空間之間的界限。
腦補出來的這條連續的線條是我們在設計中更應該引入的視覺線索。
讓我們來看看 Crypton Trading 網站中的視覺線索設計:
看到頁面右半部分設計的完美延續了嗎?不管背景的明暗色調如何變化,圖案在頁面上的變化都非常顯著。當你向下滾動時,你會看到圖案和顏色是如何以連續和無縫的運動變化的。在這里,色調的變化是可以忽略的,我們所看到的是一個連續的線和點的模式。
另一個很好的例子是 OscilloScope 網站:
該網站借用連續性法則,將網站用戶引入到工作室的 360 度視角中,他們可以在導航中選擇所需的子欄目。
影片《Cargo》的著陸頁也使用了連續性法則:滾動式的導航,以線性運動的方式讓文本漂浮在網站上。由于 LOGO 是垂直展現的,所以用戶必須向下滾動才能看到它的全貌。當頁面向下滾動時,靜態 LOGO 開始與并行的文本塊一起浮動。導航引導用戶經歷不同層次的體驗,而不會干擾隱藏在下面的內容。
由于我們的眼睛通常遵循最平滑的路徑,設計師可以使用這樣的方式來創建引導路徑。
在這篇文章中,我們討論了格式塔原則與網站 UI 的正負空間之間的關系。通過一些真實的案例,讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候,可以達到 1 + 1 > 2 的效果。
人類是根據感知來思考的——主要是基于視覺。根據格式塔原理,我們傾向于看到更大的整體性圖景,而不是第一眼看到的某一單個元素。
正負空間幫助我們區分、回憶、感知并識別理解。在格式塔原理的引導下,我們能夠更好地在網頁設計中利用不同元素來創造吸引人的作品。因為空間對于任何設計師來說都是一件復雜的事情,所以最好的方法就是保持格式塔原則的完整性。只有這樣才能真正認識到空間在設計中的重要性、有效性,繼而使自己成為網頁設計領域的佼佼者。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn