互聯(lián)網(wǎng)方法論之“視覺設計”篇——合集(一)

0 評論 1385 瀏覽 17 收藏 20 分鐘

在互聯(lián)網(wǎng)平臺上,有關互聯(lián)網(wǎng)設計方法論的討論有很多,那么,哪些設計方法論是真的有用的?這篇文章里,作者梳理了視覺設計上的幾大設計方法論,一起來看看吧。

我們工作中時不時會聽到有些云里霧繞的觀點,讓人有一種“答案在空中飄的感覺”。為了在別人吹牛皮的時候保持清醒,從2018年開始我整理了100來條互聯(lián)網(wǎng)方法論。

這些方法論里,我發(fā)現(xiàn)有的借鑒的是工業(yè)設計,有的是建筑學、心理學的,還有傳播學,甚至連語義學都出現(xiàn)了……

然后就想,怎么這么多互聯(lián)網(wǎng)設計方法論?每個方法論如何應用?哪些又是瞎扯模型?

把這些分享出來希望能幫到更多的人!

我把這些方法論總結(jié)成了六大類:視覺設計、交互體驗、心行研究、增長模型、產(chǎn)品策略、數(shù)據(jù)衡量。

本次分享視覺設計篇,包括:版式設計四大原則、功能可見性、五感設計、情緒板、二八原則、意元集組、六維分析法,合集一,共7個。

視覺設計篇 01:版式設計四大原則

版式設計四大原則(對比、親密、對齊、重復)是視覺傳達中,最基礎也是最重要的設計原則,它一直貫穿于我們的設計工作,但又經(jīng)常被忽視。

當我們在設計提升階段中遇到瓶頸的時候,不妨好好回顧一下夯實一下版式基礎,基礎決定我們走多遠。

視覺傳達其本質(zhì)也是表達方式的一種,我們需要通過設計方法手段,通過將元素建立聯(lián)系有目的得引導用戶視覺流向,將信息在“最短時間”內(nèi)“快速”傳達給用戶。

任何元素都不能在頁面上隨意擺放,每個元素應當與頁面上另一個元素有某種視覺聯(lián)系,這樣才能建立一種清晰且輕巧的閱讀邏輯。

所以,我們的設計行為,是否讓信息更快速、更直接、更有效得傳達給用戶了?

對比:

無對比,不設計(沒有對比就沒有設計可言)。

合理劃分好信息層級,來引導用戶視覺流向。

親密:

在版式設計中,親密和對比是相輔相成的。

彼此相關的元素應當靠近,歸組在一起,為讀者提供清晰的閱讀架構(gòu)。

對齊:

對齊對比無處不在,對齊是設計的標配。

我們在做設計的過程中,腦海中已經(jīng)養(yǎng)成習慣得提醒自己“對齊對齊對齊對齊!”

重復:

設計的某些元素或手法需要在整個作品中重復。降低了用戶的適應成本,其本質(zhì)還是讓信息傳遞更快速有效。

1. 對比

無對比,不設計(沒有對比就沒有設計可言)。

對比的目的:

使有層級、有主次、有節(jié)奏、有設計感使閱讀方便突出重點;強化要點;表達核心信息。

做好對比的前提是我們透徹得理解了業(yè)務和將要呈現(xiàn)的內(nèi)容。有目的得將元素拉開對比,合理劃分好信息層級,來引導用戶視覺流向,第一視覺、第二視覺、第三視覺…之后讓用戶視線最終又落在哪里。

對比的手法:

  • 形態(tài):方vs圓、長vs短、粗vs細、大vs小、高vs矮、胖vs瘦、凹vs凸;
  • 狀態(tài):動vs靜、虛vs實、近vs遠;
  • 色彩:黑vs白、明vs暗、炫彩vs單色、輕vs重色。

2. 親密

在版式設計中,親密和對比是相輔相成的。

親密的目的:

使元素間有關系成為一個家族,使有關聯(lián)合理分組。

彼此相關的元素應當靠近,歸組在一起,如果多個項相互之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的設計單元,這有助于組織信息減少混亂,為讀者提供清晰的閱讀架構(gòu)。

親密的手法:

親密即編組,將相關聯(lián)的信息進行編組區(qū)分,關聯(lián)的元素組織在一起,移動元素,使它們的物理位置相互靠近,使其形成閱讀秩序。使之成為整體的一個組,而不再是一堆彼此無關的片段。物理位置靠近的,就意味著存在關聯(lián)(我們可以把它理解為元素間的父子關系)。

文字與文字、文字與圖、圖與圖間通過物理距離,控制元素之間的關系。除了物理距離劃分,也可以用線條色塊切割。

3. 對齊

對齊對比無處不在,對齊是設計的標配。

我們在做設計的過程中,腦海中已經(jīng)養(yǎng)成習慣得提醒自己“對齊對齊對齊對齊!”如果你還沒有養(yǎng)成習慣,那就逼著自己有目的得時刻提醒自己。

對齊的目的:

對齊讓設計變得更有條理對齊讓設計變得更有邏輯對齊讓閱讀變得更輕松。

對齊的手法:

對齊分為,左右對齊、上下對齊、居中對齊。

右對齊——最常見的對齊方式左對齊——最裝逼的對齊方式居中對齊——最無能的對齊方式右對齊不一定非要放右邊。

4. 重復

設計的某些元素或手法需要在整個作品中重復。其本質(zhì)還是讓信息傳遞更快速有效。

重復的目的:

重復的作用:統(tǒng)一信息、強調(diào)信息、強化信息重復就是保持設計的一致性重復縮短了我們二次閱讀的時間(比如在商品詳情介紹中,如果沒有運用重復原則版式不一致的話,用戶在閱讀過程中,需要時間適應、習慣新的版式)。

重復的手法:

標題的字體符號圖片的主色調(diào)版面的留白比例標題與內(nèi)文的距離內(nèi)文大小統(tǒng)一。

視覺設計篇 02:功能可見性 Affordance

通過模擬實體世界來暗示用戶,系統(tǒng)是如何運作,如何操作。

常用于界面中的功能設計,將用戶使用的物品的經(jīng)驗映射到界面中。如果產(chǎn)品的功能可見性與人們感官的預期相符合,那么這個設計會有很高的接納率和使用率,同時也會被用戶認為容易操作。

例如:電影選座、飛機選座,淘票票APP-電影選座,根據(jù)現(xiàn)實電影院的座位排列,可以引導用戶明確地購買電影票所處的位置,與用戶的感官預期相符,清晰明確的傳遞自身所表達的含義,用戶選擇無障礙。

視覺設計篇 03:五感設計 Design for all 5 senses

五感設計由設計師 Jinsop Lee(TED Talent Search獲獎人)提出。

據(jù)調(diào)查研究,視、聽、觸、嗅、味五感之中,感受最深刻的是視覺(37%)、其次是嗅覺(23%),聽覺(20%)、味覺(15%),最后是觸覺。人類的感官系統(tǒng)彼此之間能夠交互作用,不同的結(jié)合可以創(chuàng)造出獨特的感受。

很多設計追求極致的視覺效果,而往往忽略五感中的其他元素。有時僅僅提升其余一至兩個五感元素,就能為產(chǎn)品帶來設計上的提升。五感設計常被應用于建筑設計、室內(nèi)設計、工業(yè)設計等領域,例如我們在電影院體驗到的4D、5D電影,通過座椅效果環(huán)境特效,給予觀眾除視聽之外的觸感、嗅感等體驗。

在互聯(lián)網(wǎng)設計中,發(fā)力點有限,但我們也可以通過背景音音效等手段引導用戶心理,引發(fā)用戶共鳴,這也是運用了五感設計中的“聽覺”。

例如:各平臺每年年終報告,多頁H5測試、課程環(huán)節(jié)中的激勵音效、游戲中的實時反饋音效等等。公司中的音效內(nèi)容團隊通過使音樂和視覺結(jié)合,從而影響引導用戶情緒感受。多頁H5一般在頁面右上角放置音樂開關按鈕,或者只在最初進入H5時可設置。

視覺設計篇 04:情緒板 Mood Board

1. 本質(zhì)

我們只要記住一句:我們尋找參考資料的方法取決于我們想要傳達的情緒。其本質(zhì)在于將情緒可視化,因此它被稱為情緒板。

我們在搜索“情緒板“的解釋會有一大段貌似很專業(yè)話,不用理會它。

2. 擴展

世界存在著各種各樣的表達方式,例如音樂、舞蹈、影視、小說、漫畫、插畫、演講等等。在這各個行業(yè)中做到頂尖的專家,都是通過自己擅長的表達方式,來引導受眾的情緒。所有這些表達方式其本質(zhì)都是信息的傳達和情緒的引導。

如何通過設計來引導用戶情緒?如何建立自己的“情緒素材庫”?

在看到一個情緒表達到位的作品時,我們不能讓自己沉浸在當下的感受中,而要立刻讓自己的情緒抽離出來,分析這個作品通過哪些設計手段達到了這個效果。

情緒版通常是指一系列圖像,文字,樣品的拼貼,它是設計領域常用的表達設計定義與方向的視覺做法。

無論對于設計師,還是設計專業(yè)的學生而言,在設計過程中使用情緒板,可以更好地尋求設計方向、打磨設計過程,還可以在團隊之間傳遞設計靈感與設計思路,從而使想法充分融合,深化設計。

情緒板的表達方式,比較簡便的就是將圖片打印出來貼到書本或墻面上,由于設計不斷加深,圖面的內(nèi)容也會不斷豐富,從而展現(xiàn)出一個更加完整的情緒表達。

還可以通過網(wǎng)絡媒介建立情緒板,比如通過花瓣、Ins和Pin等常用網(wǎng)站,從大眾普遍認知中產(chǎn)生思考,尋求新奇創(chuàng)意與靈感來源。

將情緒板真正得應用于設計創(chuàng)作,輔助設計靈感的生成,而不是僅僅作為匯報工作和面試套路,才是更重要的問題。

視覺設計篇 05:二八法則/帕累托法則 Pareto Principle

1. 定義

二八法則,也被稱為帕累托法則、巴萊多定律、80/20 法則、關鍵少數(shù)法則、2/8法則、因素稀疏定律。

約僅有 20% 的變因操縱著 80% 的局面。也就是說:所有變量中,最重要的僅有 20%。

2. 來源

管理咨詢約瑟夫·朱蘭首先提出該原則。 80/20 的概念是意大利經(jīng)濟學家帕累托 (Vilfredo Pareto) 發(fā)現(xiàn)的,例如:意大利約有 80%的土地由 20%的人口所有、80% 的豌豆產(chǎn)量來自 20% 的 植株等等。

應用:

在商業(yè)思維中,屬于增長思維之一,例如良品鋪子:收入60%是由20%的用戶貢獻,這20%主要收入貢獻者被視為重點維護和運營的“忠誠用戶”。

在交互設計中,常用于引導用戶關注最重要的功能和內(nèi)容,有具體的用戶使用數(shù)據(jù)反饋,排定產(chǎn)品功能的優(yōu)先級,可以幫助提升產(chǎn)品設計的易用性和有效性。

在視覺設計中,常用于強化頁面中最重要的20%視覺信息層級,其目的是讓用戶在最短時間內(nèi)獲取到核心信息。

通常表示 80% 的結(jié)果,由 20% 的原因產(chǎn)生;同樣也表示一個頁面下,重要的信息只占 20%,重點標注提醒,其他 80% 的信息適當弱化,否則導致頁面太過繁雜,因為用戶想快速的獲取那 20% 的重要因素。

例如:

美團外賣APP地點搜索頁,根據(jù)用戶個人使用歷史數(shù)據(jù)與平臺用戶數(shù)據(jù)反饋,設計布局上排定優(yōu)先級,把熱門城市突出強調(diào),加快用戶搜索定位、訂餐流程。

視覺設計篇 06:意元集組 Chunking

為了適應短期記憶,一種把不同的信息集結(jié)歸納成模塊或單位,便于人們對信息盡心解讀和記憶的技巧。

我們生活中記憶很多事物時,也應用到了這個原則方法,比如說電話號碼、個人地址等。

例如:

招商銀行APP – 銀行的卡號的輸入四個文字成一組 ,容易閱讀審查,也更利于短期記憶。

招商銀行APP – 總資產(chǎn)和數(shù)據(jù)的突出,運用大面積形狀色塊突出信息,用戶可以在打開該頁面時第一時間感知。

視覺設計篇 07:六維分析法

很多行業(yè)都有自己的五維分析法。

我們在設計工作中常使用“五維分析法”,即“形、色、字、質(zhì)、構(gòu)”五個維度對設計作品進行分析。分析之后我們再結(jié)合“業(yè)務角度、用戶角度、設計創(chuàng)新”三個角度做結(jié)論。

該方法論是最基礎的方法論之一?。。?/p>

記得2020年拿某易公司面試練手,結(jié)果對面是一個小孩兒,在跟他講理性和感性,如何通過設計手段影響用戶情緒的時候,對方聽不懂,不讓我說話,自己巴拉巴拉講了一堆最基礎的形色字質(zhì)勾,當天面了好幾個公司也懶得多說話了,沒想到在其他公司又碰到,結(jié)果對方天天講情緒情緒…

再后來2022年當我發(fā)現(xiàn)還會有很多設計朋友因為知道五維分析法基礎方法論而很開心的時候,覺得確實有必要把自己之前的整理總結(jié)分享出來。

  1. 形 :圖形元素, icon的風格和刻畫符合內(nèi)容主題,甚至卡片圓角大小等細節(jié),都要與APP的品牌調(diào)性一致。icon刻畫過程中,要注意色彩配比、設計風格、視覺比例等細節(jié)。
  2. 色 : 色彩體系,主色、輔色用色、功能色等用色比例,在圖標、字體、修飾、按鈕等顏色使用極為重要,讓界面設計信息傳遞的更快速明確,合理引導用戶視線流向。
  3. 字 : 字體體系,結(jié)合產(chǎn)品品牌調(diào)性,選用合適的中文字體和英文字體,形成品牌文化特征,在設計中要注意字號大小等規(guī)范,優(yōu)秀的文字排版更利于用戶對于信息的識別。
  4. 構(gòu) : 頁面布局,在透徹了解業(yè)務的基礎上合理布局,讓界面具有呼吸感、通透舒適,其中對用戶視線流的理解極為重要,決定了我們?nèi)绾尾季?、定義框架。
  5. 質(zhì) :質(zhì)感與風格,不同的行業(yè)對界面整體質(zhì)感、圖片質(zhì)感、色彩質(zhì)感要求都不一樣,需要針對行業(yè)特性和用戶角度進行衡量和判斷。
  6. 動 : 動畫與動效,轉(zhuǎn)場動畫、圖標動效、跳轉(zhuǎn)動效、加載動效等方面的微交互動效,可增加用戶使用時的趣味性,安撫等待時的焦慮情緒。

六維分析法可以用來做視覺層面的競品分析,為設計改版提供理論支撐。

以2021年支持的一個繪本類改版項目為例,以下是我用五維分析法做的分析和結(jié)論:

分析之后我們再結(jié)合“業(yè)務角度、用戶角度、設計創(chuàng)新”三個角度做結(jié)論,給出有意義可落地的建議。

本文由 @胡冰茜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!