首頁(yè)

7種版面構(gòu)圖 讓海報(bào)立馬不一樣!

天宇 平面設(shè)計(jì)

在設(shè)計(jì)的創(chuàng)作重,很多設(shè)計(jì)師都喜歡追求軟件技法帶來(lái)的炫酷感,而忽略了構(gòu)圖理論知識(shí)帶來(lái)的重要性,這篇文章就是為了解決這個(gè)問(wèn)題

海報(bào)設(shè)計(jì)對(duì)于初學(xué)者而言,是一個(gè)簡(jiǎn)單入門(mén),又容易出作品集的類(lèi)目。在剛開(kāi)始練習(xí)時(shí)不要天馬星空的去想象,最好的練習(xí)就是根據(jù)一定的構(gòu)圖規(guī)范,嘗試尋找規(guī)律,建立可行的秩序,讓版面具有一定的閱讀性。

-

只有在版面具有基礎(chǔ)的閱讀性,才可以根據(jù)想法思路進(jìn)行創(chuàng)意性的表現(xiàn),而建立持續(xù)最簡(jiǎn)單的方式之一就是運(yùn)用構(gòu)圖。當(dāng)下主流的常用構(gòu)圖,我大概總結(jié)整理有七種形式,下面我們一起來(lái)了解一下,附帶案例演示。

 

 

 

第一種:四周壓角構(gòu)圖→

四周壓角構(gòu)圖指的是將標(biāo)題或者重要信息放置在版面的四個(gè)邊角處,可以是圖形或者文字,其余信息元素等則放置在畫(huà)面中間區(qū)域,使其整個(gè)版面嚴(yán)謹(jǐn)有序,平衡且具有視覺(jué)的張力。壓住四角一般會(huì)結(jié)合居中式構(gòu)圖來(lái)呈現(xiàn)版面,可以產(chǎn)生視覺(jué)聚焦。

 

 

 

 

 

 

將信息壓在四個(gè)角之內(nèi)

 

 

 

將信息超出頁(yè)面四角一部分

 

 

 

將信息沿四周環(huán)繞排版

 

 

 

第二種:對(duì)稱(chēng)式構(gòu)圖→

對(duì)稱(chēng)式構(gòu)圖指的是將版面分成上下或者左右兩個(gè)部分,上下或左右兩部分比重相同,排版相似,對(duì)稱(chēng)式構(gòu)圖可以使版面更加有秩序感,適合處理信息較多,層級(jí)較為復(fù)雜的內(nèi)容。對(duì)稱(chēng)式構(gòu)圖可以很快速的塑造出版面的平衡,視覺(jué)上的平衡幾乎就等于完成了版面的50%設(shè)計(jì)目的。是初學(xué)者中最為常見(jiàn)的形式之一,對(duì)稱(chēng)之間互相呼應(yīng),信息處理可以從中快速打破呆板狀態(tài),讓版面具有靈活性。

 

 

 

 

上下對(duì)稱(chēng)式構(gòu)圖

 

 

左右對(duì)稱(chēng)式構(gòu)圖

 

 

 

第三種:居中式構(gòu)圖→

居中式構(gòu)圖也叫中心式構(gòu)圖,是指把主體信息放在版心中間,這樣容易產(chǎn)生視覺(jué)聚焦,其他信息圍繞版面中心來(lái)進(jìn)行排版設(shè)計(jì),放在版面中心的可以是文字、圖片、圖形或者文字等。使用居中式構(gòu)圖,需要多注意畫(huà)面整體的平衡和元素之間的留白關(guān)系,讓元素組合之間留有足夠的對(duì)比與閱讀性。

 

 

 

 

 

第四種:S型式構(gòu)圖→

S型式構(gòu)圖,將主要元素按照S型排版,版面更加的自由生動(dòng),非常具有表現(xiàn)力,是一種很常見(jiàn)的靈活構(gòu)圖手法,主要元素可以是圖像、圖形、標(biāo)題文字、slogan等。S型式構(gòu)圖是講曲線與版面進(jìn)行結(jié)合,可以快速的創(chuàng)造出靈活的版面視覺(jué)以及節(jié)奏感,可以很好的提高版面的形式感,同時(shí)也可以有效的引導(dǎo)觀眾讀者的視線。

 

 

 

 

 

第五種:三分式構(gòu)圖→

三分式構(gòu)圖是指將版面分割成相等或不等的三塊區(qū)域,每個(gè)區(qū)域放置相應(yīng)的信息,三分式構(gòu)圖分垂直三分法和水平三分法,三分之后版面更有秩序感,適合處理文案較多,層級(jí)較為復(fù)雜的內(nèi)容。難度較高,同時(shí)容易讓版面連貫性斷層,所以在運(yùn)用當(dāng)中需要額外留意元素與空間之間的融合表現(xiàn)。

 

 

 

 

水平三分式構(gòu)圖

 

 

垂直三分式構(gòu)圖

 

 

 

第六種:傾斜式構(gòu)圖→

傾斜式構(gòu)圖,是指將版面整體或者主要元素作傾斜處理,也可做透視處理或?qū)翘幚?這種構(gòu)圖使版面更靈活,更加的具有形式感,作傾斜處理的元素可以是主題、圖片等元素。傾斜與對(duì)角可以提高文字或圖片的表現(xiàn)力,能很快速的塑造整體的空間感。

 

 

 

 

 

第七種:散點(diǎn)式構(gòu)圖→

散點(diǎn)式構(gòu)圖,是指將元素按照規(guī)律或者不按照規(guī)律自由的放置在版面的區(qū)域,散點(diǎn)放置的內(nèi)容通常有文字,圖片等,通常散點(diǎn)式構(gòu)圖都會(huì)結(jié)合S型式構(gòu)圖搭配使用,這種構(gòu)圖形式感強(qiáng),更具有畫(huà)面表現(xiàn)力.在運(yùn)用的時(shí)候,需要特別注意文字或標(biāo)題的閱讀性,過(guò)于搶鏡會(huì)讓版面丟失主題。

 

 

 

 

 

 

光說(shuō)不練假把戲,實(shí)操案例來(lái)一個(gè),這一個(gè)案例是圍繞四周壓角構(gòu)圖來(lái)分享海報(bào)的制作操作技巧。

涉及到的知識(shí)點(diǎn)有:

①四周壓角構(gòu)圖的技巧;

②文字編排;

③利用文字的局部輪廓化使版面更具有形式感。

我們先來(lái)看看最終的海報(bào)效果先。

 

 

 

第一步:→

所選的文案是一個(gè)攝影展,所以我們找了一張具有故事性的圖片作為底圖,新建文檔,背景填充為黑色,置入圖片,確定圖片在版面中的位置,因?yàn)槲覀儨?zhǔn)備做四周壓角構(gòu)圖型的海報(bào),所以我們與居中式構(gòu)圖相結(jié)合,這樣能使版面的視覺(jué)聚焦。

 

 

第二步:→

根據(jù)圖片的構(gòu)圖,我們來(lái)確定整體版面的構(gòu)圖形式,由于圖片是居中偏右的,所以我們用居中式構(gòu)圖加上四周壓角構(gòu)圖來(lái)進(jìn)行整體版面的風(fēng)格呈現(xiàn)。

 

 

第三步:→

將主題文案“無(wú)限的山峰”以四周壓角構(gòu)圖的方式放置在版面的四個(gè)角上,我們使用的是壓在版面以內(nèi)的壓角構(gòu)圖,并結(jié)合居中構(gòu)圖的方式,這樣能使版面更加的規(guī)整有序,而且具有視覺(jué)張力,注意圖片和文字的聯(lián)系。

 

 

第四步:→

現(xiàn)在我們來(lái)進(jìn)一步進(jìn)行處理,由于主題文案相離較遠(yuǎn),接下來(lái)就是增強(qiáng)主題文字之間的聯(lián)系,我們嘗試用線來(lái)處理,線的作用就是連接與分割,我們用線將主題文字連接起來(lái),并加上一些漢語(yǔ)拼音元素,使線條不會(huì)那么單調(diào),并且更具有形式感。

 

 

第五步:→

先不急著下一步,我們先來(lái)觀察下版面,現(xiàn)在的版面被我們分割成了四份,我們把剩下的信息分別在指定的區(qū)域內(nèi)進(jìn)行排版。

 

 

第六步:→

我們將剩下的文案分別進(jìn)行排版,重要的信息我們需要放大處理,不重要的信息可以偏小一些,重要的信息比如:參展藝術(shù)家、日期、地址等,這里要注意層級(jí)之間的劃分,要使版面顯得井然有序。

 

 

第七步:→

其實(shí)版面到這里已經(jīng)處理的差不多了,但是主標(biāo)題看起來(lái)稍顯平凡,跟內(nèi)文的文字一樣,沒(méi)有什么特征特色,所以我們可以做更多的變化,拆分主題文字的一些筆畫(huà),并使其輪廓化,我們還可以傾斜或放大一些筆畫(huà),或者局部模糊,打散等等眾多效果都可以嘗試。

 

 

第八步:→

其最后把整體的細(xì)節(jié)稍微調(diào)整下,這樣,一張具有形式感的海報(bào)就形成了,這張海報(bào)用到了四周壓角構(gòu)圖,居中式構(gòu)圖,所以可得出結(jié)論,七種構(gòu)圖方式之間是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。

 

 

→ 完成??!



作者:歐陽(yáng)威John
鏈接:https://www.zcool.com.cn/article/ZMTQxMjgyMA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

【蘭亭妙微設(shè)計(jì)分享】解鎖UI設(shè)計(jì)新趨勢(shì):界面設(shè)計(jì)色彩與布局秘籍

天宇 網(wǎng)站設(shè)計(jì)文章及欣賞

隨著新的一年緩緩拉開(kāi)序幕,UI設(shè)計(jì)領(lǐng)域也迎來(lái)了新的變革與挑戰(zhàn)。蘭亭妙微設(shè)計(jì)團(tuán)隊(duì),作為行業(yè)內(nèi)的佼佼者,始終站在設(shè)計(jì)前沿,不斷探索與創(chuàng)新。今天,我們將與您一同解鎖2025年UI設(shè)計(jì)的新趨勢(shì),特別是色彩與布局方面的秘籍,為您的設(shè)計(jì)之旅提供靈感與指導(dǎo)。

一、色彩趨勢(shì):回歸自然,擁抱溫暖

在2025年,色彩選擇將更加傾向于自然與溫暖。這反映了人們對(duì)和諧共生、心靈慰藉的渴望。以下是我們預(yù)測(cè)的幾個(gè)熱門(mén)色彩趨勢(shì):

1. 大地色系:從沙漠的金色到森林的綠色,大地色系以其沉穩(wěn)、質(zhì)樸的特點(diǎn),成為營(yíng)造溫馨氛圍的首選。這些色彩不僅能夠激發(fā)用戶的舒適感,還能與多種設(shè)計(jì)風(fēng)格相融合,展現(xiàn)出獨(dú)特的韻味。

2. 柔和粉色:粉色作為近年來(lái)備受追捧的色彩之一,其柔和的色調(diào)在2025年將繼續(xù)占據(jù)重要地位。無(wú)論是淺粉色還是略帶灰調(diào)的煙粉色,都能為用戶帶來(lái)溫馨、浪漫的感受,非常適合用于女性用戶或情感類(lèi)產(chǎn)品的設(shè)計(jì)中。

3. 活力橙色:在追求舒適與溫暖的同時(shí),活力橙色以其鮮明的個(gè)性和積極向上的態(tài)度,成為打破沉悶、增添活力的不二之選。在需要強(qiáng)調(diào)重點(diǎn)或激發(fā)用戶行動(dòng)力時(shí),橙色能夠發(fā)揮重要作用。

aaa5ecbca76cecaf6dcf978c9d86e46(1)(1)(1)(1).png

二、布局趨勢(shì):簡(jiǎn)潔明了,注重交互

在布局方面,2025年的UI設(shè)計(jì)將更加注重簡(jiǎn)潔性與交互性。以下是我們總結(jié)的幾點(diǎn)布局趨勢(shì):

1. 極簡(jiǎn)主義:隨著信息量的爆炸式增長(zhǎng),用戶對(duì)于簡(jiǎn)潔、清晰的設(shè)計(jì)需求愈發(fā)強(qiáng)烈。因此,極簡(jiǎn)主義在2025年將更加盛行。設(shè)計(jì)師們將通過(guò)精簡(jiǎn)元素、優(yōu)化排版、使用留白等手段,打造更加舒適、易用的界面。

2. 卡片式設(shè)計(jì):卡片式設(shè)計(jì)以其直觀、易讀的特點(diǎn),成為近年來(lái)備受青睞的布局方式。在2025年,卡片式設(shè)計(jì)將繼續(xù)發(fā)展,不僅限于信息展示,還將更多地應(yīng)用于交互設(shè)計(jì)中,如滑動(dòng)切換、點(diǎn)擊展開(kāi)等。

3. 動(dòng)態(tài)布局:隨著響應(yīng)式設(shè)計(jì)的普及,動(dòng)態(tài)布局在2025年將更加成熟。設(shè)計(jì)師們將更加注重界面在不同設(shè)備、不同屏幕尺寸下的適應(yīng)性,確保用戶在不同場(chǎng)景下都能獲得良好的使用體驗(yàn)。

a (2)(1).png

結(jié)語(yǔ)

色彩與布局作為UI設(shè)計(jì)的兩大核心要素,對(duì)于提升產(chǎn)品的吸引力與用戶體驗(yàn)至關(guān)重要。蘭亭妙微設(shè)計(jì)團(tuán)隊(duì)將繼續(xù)關(guān)注設(shè)計(jì)趨勢(shì)的發(fā)展變化,不斷探索與創(chuàng)新。我們相信,通過(guò)巧妙地運(yùn)用色彩與布局技巧,我們能夠?yàn)橛脩魩?lái)更加美好的使用體驗(yàn)。讓我們攜手共進(jìn),共同迎接UI設(shè)計(jì)的新篇章!

280264812fab9f60400d35504eba084(1)(1)(1).png

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格

天宇 設(shè)計(jì)思維

 
 
一、什么是視覺(jué)風(fēng)格?
在理解“視覺(jué)風(fēng)格”這個(gè)詞之前,我們先把它拆開(kāi)來(lái)看,先嘗試?yán)斫庀率裁词?ldquo;風(fēng)格”。
"風(fēng)格" ,是一個(gè)相對(duì)抽象的概念,指的是一種在作品或創(chuàng)作中表現(xiàn)出來(lái)的獨(dú)特方式或特征。
相較與“視覺(jué)風(fēng)格“,它通常是一個(gè)更廣泛的概念,可以應(yīng)用于多個(gè)領(lǐng)域,包括藝術(shù)、設(shè)計(jì)、文學(xué)、音樂(lè)等,具體體現(xiàn)在內(nèi)容、形式、技巧、表現(xiàn)等方式上。
"視覺(jué)風(fēng)格" 是風(fēng)格的一個(gè)具體領(lǐng)域,通常用在藝術(shù)、設(shè)計(jì)和多媒體上,比如我們常說(shuō)的插畫(huà)風(fēng)、攝影風(fēng)、平面風(fēng)、網(wǎng)頁(yè)風(fēng)、OS 系統(tǒng)風(fēng)格等。
視覺(jué)風(fēng)格強(qiáng)調(diào)了視覺(jué)元素和視覺(jué)方面的獨(dú)特性,如顏色、構(gòu)圖、圖案、排版、字體、動(dòng)畫(huà)等。通過(guò)這些視覺(jué)要素,創(chuàng)造出一種獨(dú)特的視覺(jué)外觀,帶給用戶情感上的感受。
一個(gè)成熟的視覺(jué)風(fēng)格,往往會(huì)給人帶來(lái)一種特定的感覺(jué),并與特定的產(chǎn)品產(chǎn)生關(guān)聯(lián),形成心理印記,從而因?yàn)轱L(fēng)格而記住它,所以視覺(jué)風(fēng)格在產(chǎn)品設(shè)計(jì)中重要性不言而喻。
我們把話題再聚焦一點(diǎn),今天主要聊聊互聯(lián)網(wǎng)產(chǎn)品的視覺(jué)風(fēng)格。
 
二、如何拆解視覺(jué)風(fēng)格?
當(dāng)我們體驗(yàn)到一個(gè)產(chǎn)品或者看到一張圖后,從哪些角度去拆解出它的風(fēng)格特征呢?
一般可以從作品中的色彩、排版、質(zhì)感、字體、動(dòng)畫(huà)、圖案、構(gòu)圖等等設(shè)計(jì)要素進(jìn)行分析,看看這些視覺(jué)元素組合關(guān)系和比重。
講到這里,在我們視覺(jué)設(shè)計(jì)領(lǐng)域的最新趨勢(shì)下,通常用六個(gè)字 ”形、色、字、構(gòu)、質(zhì)、動(dòng)“ 來(lái)制定視覺(jué)風(fēng)格帶給人的感受。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
其實(shí)我在看作品集的時(shí)候,一般也是從這些角度去分析作品的專(zhuān)業(yè)度,然后再結(jié)合業(yè)務(wù)場(chǎng)景,看做的視覺(jué)方案能否有效解決業(yè)務(wù)問(wèn)題。
另外,平時(shí)提到的審美練習(xí),講究一個(gè)多看多分析,去思考設(shè)計(jì)背后的原理,組合方式。多去研究美的東西的特點(diǎn),看細(xì)一些,也可以嘗試從以上這些角度去拆解一套視覺(jué)設(shè)計(jì)。
對(duì)視覺(jué)風(fēng)格有了理解,平時(shí)也知道從哪些角度去看一張圖了,那么接下來(lái)就需要多去了解一些比較常見(jiàn)的視覺(jué)
設(shè)計(jì)風(fēng)格
,了解具體的表現(xiàn)手法。
 
三、常見(jiàn)的視覺(jué)風(fēng)格有哪些?
當(dāng)把視覺(jué)風(fēng)格聚焦到 APP 和網(wǎng)頁(yè)設(shè)計(jì)等互聯(lián)網(wǎng)產(chǎn)品時(shí),風(fēng)格其實(shí)也有很多,說(shuō)一些比較常見(jiàn)的。
1. 蘋(píng)果風(fēng)(Apple Design)
以毛玻璃材質(zhì)為特點(diǎn),絲滑的動(dòng)態(tài)效果,輕擬物的質(zhì)感。蘋(píng)果的設(shè)計(jì)強(qiáng)調(diào)平滑的曲線和圓潤(rùn)的邊緣,常常使用明亮的顏色,注重圖像和照片的質(zhì)量。
 
 
 
iOS 17 風(fēng)格
iOS 17 風(fēng)格
 
 
mac os
mac os
 
 
iPad os
iPad os
 
 
iwatch os
iwatch os
 
 
2. 扁平化設(shè)計(jì)(Flat Design)
扁平設(shè)計(jì)是一種簡(jiǎn)化的設(shè)計(jì)風(fēng)格,通常會(huì)用明亮的顏色、清晰的圖標(biāo)和簡(jiǎn)化的界面元素。我印象中有一小段時(shí)間,這個(gè)風(fēng)格很流行,微軟是最早將這種設(shè)計(jì)風(fēng)格應(yīng)用于其界面的公司之一。
 
win8風(fēng)格
win8風(fēng)格
 
 
平面設(shè)計(jì)
中,所有元素都應(yīng)該有它存在的價(jià)值,哪怕裝飾元素也是如此。如果某個(gè)方面沒(méi)有任何功能用途,就會(huì)分散用戶的注意力。這就是扁平化設(shè)計(jì)簡(jiǎn)約本質(zhì)的原因。
然而,僅僅因?yàn)樗狈θ魏稳A麗的設(shè)計(jì)并不意味著這種風(fēng)格很無(wú)聊。明亮、對(duì)比鮮明的顏色能輕松吸引注意力并引導(dǎo)用戶的視線。
有些設(shè)計(jì)師可能會(huì)覺(jué)得這種風(fēng)格過(guò)于樸素,就給它增加了一些其他細(xì)節(jié),比如長(zhǎng)投影就是那個(gè)時(shí)期出來(lái)的。
 
來(lái)源:aiki007
來(lái)源:aiki007
 
 
當(dāng)然上面這套長(zhǎng)投影,年代比較久遠(yuǎn)了一點(diǎn),下面這套作品的扁平風(fēng)格上就更現(xiàn)代一些。
 
來(lái)源:Mike | Creative Mints
來(lái)源:Mike | Creative Mints
 
 
 
3. 材質(zhì)設(shè)計(jì)(Material Design)
材質(zhì)設(shè)計(jì)是由 Google 推出的一種設(shè)計(jì)風(fēng)格,強(qiáng)調(diào)實(shí)際材質(zhì)和動(dòng)畫(huà)效果。它為應(yīng)用帶來(lái)層次感和現(xiàn)實(shí)感,同時(shí)提供了良好的用戶體驗(yàn)。完整的設(shè)計(jì)組件,可以參考官方地址:
https://m3.material.io
在這套風(fēng)格中,能看出來(lái)也是趨向于扁平化的,顏色在使用上飽和度也沒(méi)有很高,質(zhì)感也很克制,讓用戶更聚焦在內(nèi)容上。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
4. 抽象藝術(shù)風(fēng)格(Abstract and Artistic Styles)
這種風(fēng)格常用在海報(bào)設(shè)計(jì)中,以吸引特定用戶或傳達(dá)創(chuàng)新的形象。這些風(fēng)格可能包括不尋常的圖形、顏色和排版。
這個(gè)風(fēng)格我印象最深的就是 Behance 上的一個(gè)老哥做的 365 天挑戰(zhàn),每天一張腦洞海報(bào),幾乎每一張都是精品。如果沒(méi)看過(guò)的也可以去圍觀下,我把地址也放上,ins 上還在更新。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
5. 極簡(jiǎn)主義(Minimalism)
極簡(jiǎn)主義設(shè)計(jì)注重簡(jiǎn)潔和內(nèi)容集中,通常使用簡(jiǎn)化的元素和無(wú)冗余的界面。它適用于需要用戶專(zhuān)注于核心任務(wù)的應(yīng)用。
這種設(shè)計(jì)通常會(huì)用到大面積的留白,以及黑白灰的顏色搭配,高質(zhì)量的大圖,使得整個(gè)設(shè)計(jì)具備很強(qiáng)的高級(jí)感。
這個(gè)風(fēng)格我以前也有專(zhuān)門(mén)寫(xiě)過(guò)文章《Behance 首頁(yè)推薦的作品集為什么這么高級(jí)?我們能從中學(xué)到什么?》。
 
來(lái)源:Shaban Iddrisu™
來(lái)源:Shaban Iddrisu™
 
 
來(lái)源: https://www.awwwards.com/sites/brainbox-ai
來(lái)源: https://www.awwwards.com/sites/brainbox-ai
 
 
來(lái)源:Huy Phan
來(lái)源:Huy Phan
 
 
來(lái)源:Hannes Ahremark
來(lái)源:Hannes Ahremark
 
 
6. 新擬物主義(neumorphism)
這種設(shè)計(jì)風(fēng)格,通過(guò)使用逼真的陰影和光線效果來(lái)模擬物理世界中的物體,同時(shí)保持扁平化和簡(jiǎn)約的設(shè)計(jì)。
這種風(fēng)格曾經(jīng)內(nèi)風(fēng)靡了一陣子,現(xiàn)在好像又見(jiàn)得比較少了。
我其實(shí)對(duì)這種風(fēng)格不是太感冒,原因是這種質(zhì)感似乎顯得有些多余,還會(huì)占用一部分內(nèi)容空間,信息利用率不高。它的設(shè)計(jì)樣式也做的比較搶內(nèi)容,美觀度上我個(gè)人也不是太喜歡。
關(guān)于這種風(fēng)格設(shè)計(jì),之前也寫(xiě)過(guò)文章《新擬物化會(huì)是 2020 年的 UI 設(shè)計(jì)趨勢(shì)嗎?》
 
來(lái)源:Devanta Ebison
來(lái)源:Devanta Ebison
 
 
來(lái)源:Ceptari Tyas
來(lái)源:Ceptari Tyas
 
 
來(lái)源:Sèrgi Mi
來(lái)源:Sèrgi Mi
 
 
來(lái)源:Filip Legierski
來(lái)源:Filip Legierski
 
 
來(lái)源:https://www.interaction-design.org
來(lái)源:https://www.interaction-design.org
 
 
之前 QQ 的小世界第一版出來(lái)的時(shí)候也用到了這個(gè)風(fēng)格趨勢(shì),給人眼前一亮的感覺(jué)。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
即使是新擬物風(fēng)格,其中也是可以做一些不同發(fā)揮的,這里也可以一起看下他們當(dāng)時(shí)做的方案對(duì)比,體會(huì)下不同風(fēng)格的側(cè)重點(diǎn)
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
7. 科技和未來(lái)主義(Tech and Futuristic Styles)
科技和未來(lái)主義設(shè)計(jì)風(fēng)格使用高科技元素、光效和動(dòng)態(tài)效果,以突出創(chuàng)新和前瞻性。這種風(fēng)格在科技、游戲和科幻類(lèi)應(yīng)用中常見(jiàn)。
比如現(xiàn)在的 HMI,HUD,數(shù)據(jù)可視化設(shè)計(jì),風(fēng)格都被設(shè)計(jì)的有很強(qiáng)的科技感,會(huì)用到很多偏科技感的光效,藍(lán)色,以深色居多。
 
來(lái)源:Logan Gan
來(lái)源:Logan Gan
 
 
來(lái)源:Romanov
來(lái)源:Romanov
 
 
來(lái)源:Stefan Grimm
來(lái)源:Stefan Grimm
 
 
來(lái)源:Stanislav Hristov
來(lái)源:Stanislav Hristov
 
 
來(lái)源:Breaking bad
來(lái)源:Breaking bad
 
 
8. 插畫(huà)風(fēng)格(Illustration style)
這種風(fēng)格通常會(huì)用到大面積的插畫(huà)設(shè)計(jì),有比較強(qiáng)的親和力。
既然用到了插畫(huà),在顏色的使用上相對(duì)會(huì)更大膽一些,顏色飽和度比較高。
這種風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì),天氣設(shè)計(jì),手機(jī)壁紙,冥想類(lèi)應(yīng)用中很常見(jiàn),我自己也曾經(jīng)設(shè)計(jì)過(guò)這種插畫(huà)風(fēng)格的壁紙和天氣。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
我之前畫(huà)的幾張壁紙
 
來(lái)源:Mike | Creative Mints
來(lái)源:Mike | Creative Mints
 
 
來(lái)源:Mike | Creative Mints
來(lái)源:Mike | Creative Mints
 
 
來(lái)源:Bogdan Falin
來(lái)源:Bogdan Falin
 
 
來(lái)源:Moatasem Abbas Kharraz
來(lái)源:Moatasem Abbas Kharraz
 
 
來(lái)源:Zak Steele-Eklund
來(lái)源:Zak Steele-Eklund
 
 
 
9. 2D+3D
這種風(fēng)格是一種 2D 結(jié)合 3D 的形式,現(xiàn)如今在做風(fēng)格化設(shè)計(jì)的時(shí)候特別搶眼。
核心設(shè)計(jì)方法就是把一些內(nèi)容用 2D 的形式去展現(xiàn),把一些需要強(qiáng)調(diào)的圖片,例如商品,模型做成 3D 來(lái)表現(xiàn)。
在未來(lái)隨著 vision pro 的發(fā)布,空間計(jì)算的不斷成熟,相信這種設(shè)計(jì)風(fēng)格趨勢(shì)會(huì)越來(lái)越多。
 
來(lái)源:Cosmin Capitanu
來(lái)源:Cosmin Capitanu
 
 
 
 
來(lái)源:Cosmin Capitanu
來(lái)源:Cosmin Capitanu
 
 
來(lái)源:Mike | Creative Mints
來(lái)源:Mike | Creative Mints
 
 
來(lái)源:Mike | Creative Mints
來(lái)源:Mike | Creative Mints
 
 
來(lái)源:Lay
來(lái)源:Lay
 
 
10. 自然和有機(jī)風(fēng)格(Natural and Organic Styles)
自然和有機(jī)的設(shè)計(jì)風(fēng)格使用大自然的元素、有機(jī)形狀和自然紋理,以傳達(dá)溫暖和人性化的感覺(jué)。
這種風(fēng)格適用于健康、環(huán)保和戶外應(yīng)用。
 
來(lái)源:Oyolloo
來(lái)源:Oyolloo
 
大家在一些包裝樣機(jī)中,經(jīng)常會(huì)看到一些帶樹(shù)葉投影的風(fēng)格,這種投影給人一種現(xiàn)實(shí)生活的感覺(jué),自然溫暖。
 
來(lái)源:beehouse studio
來(lái)源:beehouse studio
 
 
 
11. 草圖和手繪風(fēng)格(Sketch and Hand-Drawn Styles)
草圖和手繪的設(shè)計(jì)風(fēng)格比較強(qiáng)調(diào)創(chuàng)意、親近感和個(gè)性化。這種風(fēng)格在博客、藝術(shù)和小眾應(yīng)用中流行。
其風(fēng)格特點(diǎn)容易看出來(lái),帶有卡通式的描邊和硬投影,顏色使用上飽和度比較高
 
來(lái)源:ZhaoWei
來(lái)源:ZhaoWei
 
 
來(lái)源:Joseph Ash Sakula
來(lái)源:Joseph Ash Sakula
 
 
來(lái)源:Sajon
來(lái)源:Sajon
 
來(lái)源:creativemarket
來(lái)源:creativemarket
 
 
在 dribbble 上有一位設(shè)計(jì)師叫:Sulton handaya,特別擅長(zhǎng)這類(lèi)風(fēng)格,在他的主頁(yè)有非常多這種風(fēng)格的作品,通過(guò)把一類(lèi)風(fēng)格做到頂尖,給人留下深刻印象,建立了屬于自己的風(fēng)格標(biāo)簽。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
12. 品牌自定義風(fēng)格( Brand Custom Styles)
現(xiàn)在很多應(yīng)用選擇采用自由品牌的設(shè)計(jì)風(fēng)格,以突出其獨(dú)特性和品牌標(biāo)識(shí)。
這個(gè)風(fēng)格方向,其實(shí)也是現(xiàn)在主流的設(shè)計(jì)方式,依據(jù)公司產(chǎn)品調(diào)性和品牌特征,提取品牌超級(jí)符號(hào),包括顏色、造型、動(dòng)效、排版等等進(jìn)行延展,保證其品牌風(fēng)格的獨(dú)特性,具備很強(qiáng)的識(shí)別度和記憶點(diǎn)。
這里也放 2 個(gè)比較經(jīng)典的例子。
一個(gè)是 kakao,我經(jīng)常講這個(gè)例子,這個(gè)案例就是從項(xiàng)目的目標(biāo)開(kāi)始,以滿足用戶的個(gè)性化閱讀需求。
作為一個(gè)提供閱讀的平臺(tái),他們找到了一個(gè)以“紙”為錨點(diǎn)的超級(jí)符號(hào),并以此延展到圖標(biāo)、動(dòng)效、造型、色彩、插圖等等視覺(jué)細(xì)節(jié)上。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
另一個(gè)案例是航空公司的風(fēng)格設(shè)計(jì)案例,作品巧妙的找到飛機(jī)窗戶的造型作為符號(hào),像我這樣經(jīng)常坐飛機(jī)的人,看到這樣的橢圓形很自然的就和飛機(jī)聯(lián)系上了。這種鏈接關(guān)系很自然,可以給用戶留下深刻印象。
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
 
 
 
用一篇文章,帶你完整了解近年來(lái)流行的視覺(jué)風(fēng)格
 
結(jié)語(yǔ)
視覺(jué)風(fēng)格是一系列設(shè)計(jì)準(zhǔn)則和規(guī)范,用于確保用戶界面的各個(gè)方面都與品牌或項(xiàng)目的整體風(fēng)格和形象保持一致。
這有助于用戶識(shí)別和記憶界面,提高用戶體驗(yàn),同時(shí)也增強(qiáng)了品牌的識(shí)別度和專(zhuān)業(yè)性。
設(shè)計(jì)風(fēng)格是一個(gè)輪回,所以設(shè)計(jì)趨勢(shì)我們需要去關(guān)注,但不可以盲目選用,還需要結(jié)合我們自身產(chǎn)品想要傳達(dá)的理念,滿足用戶的訴求。
 



作者:彩云Sky
鏈接:https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

前言
在當(dāng)今的移動(dòng)應(yīng)用設(shè)計(jì)中,彈窗作為一種重要的交互元素,對(duì)于提升用戶體驗(yàn)和增強(qiáng)應(yīng)用的可用性具有舉足輕重的作用。然而,彈窗設(shè)計(jì)并非簡(jiǎn)單的堆砌信息,它需要考慮到用戶的使用習(xí)慣、心理預(yù)期以及操作流程等多個(gè)方面。因此,如何設(shè)計(jì)出優(yōu)秀的移動(dòng)端彈窗,成為了一個(gè)值得探討的話題。
本文旨在為設(shè)計(jì)師們提供一份全面的移動(dòng)端彈窗設(shè)計(jì)指南。我們將從彈窗的定義與重要性、類(lèi)型與使用場(chǎng)景、設(shè)計(jì)原則以及不同場(chǎng)景下的彈窗設(shè)計(jì)等方面進(jìn)行深入探討。希望通過(guò)本文的分享,能夠幫助設(shè)計(jì)師們更好地掌握移動(dòng)端彈窗設(shè)計(jì)的技巧,提升應(yīng)用的用戶體驗(yàn)。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
彈窗是用戶界面中的一種重要元素,它是一種臨時(shí)性的、可交互的窗口,用于向用戶展示信息、提示、警告或提供額外的功能。在移動(dòng)應(yīng)用中,彈窗通常用于在用戶執(zhí)行某些操作或觸發(fā)某些事件時(shí)提供反饋或額外的信息。
彈窗設(shè)計(jì)的好壞直接影響到用戶體驗(yàn)和應(yīng)用的易用性。一個(gè)好的彈窗設(shè)計(jì)能夠提供清晰、簡(jiǎn)潔、易于理解的信息,同時(shí)不會(huì)干擾用戶的操作流程。而一個(gè)不好的彈窗設(shè)計(jì)可能會(huì)讓用戶感到困惑或不便,甚至可能導(dǎo)致誤操作。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
1、阻斷式彈窗
模態(tài)彈窗是一種需要用戶進(jìn)行響應(yīng)的彈窗。它通常會(huì)覆蓋整個(gè)屏幕,并阻止用戶進(jìn)行其他操作,直到用戶對(duì)彈窗做出響應(yīng)。打斷用戶當(dāng)前的操作流程,屬于強(qiáng)勢(shì)的干擾行為,通常用于需要用戶確認(rèn)或選擇的操作,例如刪除數(shù)據(jù)、確認(rèn)操作等。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
2、非阻斷式彈窗
非模態(tài)彈窗是一種不會(huì)覆蓋整個(gè)屏幕的彈窗。它通常會(huì)以小窗口的形式出現(xiàn)在屏幕的一角或下方,用于提供一些簡(jiǎn)短的信息提示或警告。是一種輕量級(jí)的反饋,不會(huì)對(duì)用戶流程產(chǎn)生干擾,同時(shí)又給了用戶反饋和信息。并且有時(shí)間限制,在一定時(shí)間里自動(dòng)消失。不需要用戶進(jìn)行點(diǎn)擊操作,只需要讓用戶看到即可,常見(jiàn)的非模態(tài)彈窗包括Toast提示框、Snackbar提示對(duì)話框等。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
1、彈窗設(shè)計(jì)尺寸定義
移動(dòng)UI彈窗的設(shè)計(jì)尺寸通常取決于多個(gè)因素,通常需要考慮設(shè)備的屏幕尺寸和分辨率。以下是一些常見(jiàn)的移動(dòng)端彈窗設(shè)計(jì)尺寸定義規(guī)范:
① 彈窗寬度
在移動(dòng)設(shè)備上,彈窗的寬度通常會(huì)與設(shè)備屏幕寬度相適應(yīng)。因此,彈窗的寬度可以設(shè)置為設(shè)備屏幕寬度的80%至90%,這樣可以確保彈窗在不同屏幕尺寸上都能良好地展示。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
② 彈窗高度
移動(dòng)端彈窗的高度應(yīng)該根據(jù)內(nèi)容的多少進(jìn)行自適應(yīng),但要避免過(guò)高導(dǎo)致用戶需要滾動(dòng)查看。通常建議彈窗的最大高度不超過(guò)設(shè)備屏幕高度的80%。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
③ 按鈕大小
在移動(dòng)端彈窗中,按鈕的大小應(yīng)該足夠大,以便用戶能夠輕松點(diǎn)擊。按鈕的大小一般建議在44px至56px之間,同時(shí)保持足夠的間距,避免誤觸。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
④ 字體大小
移動(dòng)端彈窗中的字體大小應(yīng)該適中,既要保證內(nèi)容的可讀性,又要避免過(guò)大或過(guò)小導(dǎo)致視覺(jué)上的不適。通常建議標(biāo)題字體大小在16px至20px之間,正文字體大小在14px至16px之間。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
這些尺寸定義規(guī)范可以幫助我們?cè)谝苿?dòng)設(shè)備上創(chuàng)建具有良好用戶體驗(yàn)的彈窗。然而,需要注意的是,這些規(guī)范并非絕對(duì),在實(shí)際設(shè)計(jì)中還需要根據(jù)具體需求和場(chǎng)景進(jìn)行調(diào)整。同時(shí),考慮到不同設(shè)備和操作系統(tǒng)的差異,還需要進(jìn)行充分的測(cè)試和調(diào)整,以確保彈窗在各種情況下都能提供最佳的用戶體驗(yàn)。
 
2、彈窗設(shè)計(jì)版式
彈窗的版式設(shè)計(jì)可以根據(jù)需求進(jìn)行多種多樣的變化,但一般來(lái)說(shuō),以下幾種版式設(shè)計(jì)是比較常見(jiàn)的:
① 文字列表框
在頁(yè)面底部出現(xiàn),以簡(jiǎn)潔的功能描述性文字展示功能按鈕,敏感的功能操作一般顏色字體標(biāo)出。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
在進(jìn)行此類(lèi)彈窗設(shè)計(jì)時(shí),有幾個(gè)關(guān)鍵要點(diǎn)需要特別關(guān)注:
首先,文案必須簡(jiǎn)潔明了,直接傳達(dá)核心信息。避免使用冗長(zhǎng)或復(fù)雜的措辭,以免用戶產(chǎn)生困惑。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
其次,為了突出核心內(nèi)容,可以采用一些視覺(jué)上的設(shè)計(jì)技巧,如加粗、變色或增大字體大小。這樣有助于迅速吸引用戶的注意力。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
在顏色、字體和布局方面,保持一致性至關(guān)重要。這樣可以增強(qiáng)應(yīng)用的品牌識(shí)別度,并為用戶提供更加統(tǒng)一和連貫的體驗(yàn)。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
再次,對(duì)于包含大量文字信息的彈窗,可讀性是關(guān)鍵。合理使用標(biāo)題、段落和列表來(lái)組織內(nèi)容,避免布局過(guò)于擁擠或空白過(guò)多。這樣可以提高信息的可讀性和易理解性。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
最后,考慮彈窗在不同尺寸屏幕上的適應(yīng)性是必要的。通過(guò)合理的設(shè)計(jì)布局和響應(yīng)式設(shè)計(jì),確保彈窗在實(shí)際使用中的顯示效果和用戶體驗(yàn)不受屏幕尺寸的影響。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
② 圖文排列
當(dāng)功能按鈕數(shù)量很多的時(shí)候,將文字和圖片按照一定的排列方式組合在一起,以吸引用戶的注意力并傳達(dá)信息。這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。
以下是一些常見(jiàn)的圖文排列類(lèi)型的彈窗設(shè)計(jì)方式:
2.1 文字居中,圖片居側(cè)
這種方式將文字居中顯示,而圖片則位于文字的一側(cè)。這種設(shè)計(jì)方式常用于一些需要強(qiáng)調(diào)文字信息的彈窗,例如確認(rèn)框或者提示框。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
2.2 圖片居中,文字居側(cè)
這種方式將圖片居中顯示,而文字則位于圖片的一側(cè)。這種設(shè)計(jì)方式常用于一些需要展示圖片的彈窗,例如相冊(cè)或者圖片查看器。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
2.3 文字在下方,圖片在上方
這種方式將文字放置在圖片的下方,以增強(qiáng)文字與圖片的聯(lián)系。這種設(shè)計(jì)方式常用于一些需要展示產(chǎn)品或者文章的彈窗,例如產(chǎn)品詳情頁(yè)或者新聞?wù)?/div>
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
2.4 文字和圖片交錯(cuò)排列
這種方式將文字和圖片交錯(cuò)排列在一起,以增強(qiáng)信息的層次感和視覺(jué)沖擊力。這種設(shè)計(jì)方式常用于一些需要展示多個(gè)信息的彈窗,例如表單或者調(diào)查問(wèn)卷。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
無(wú)論采用哪種圖文排列類(lèi)型的彈窗設(shè)計(jì)方式,都需要注重文字和圖片的協(xié)調(diào)性和統(tǒng)一感,以保證彈窗的整體美觀度和易用性。同時(shí),還需要根據(jù)具體的彈窗類(lèi)型和目的來(lái)選擇合適的設(shè)計(jì)方式,以便更好地傳遞信息并吸引用戶的注意力。
 
③ 選擇列表框
用選項(xiàng)代替了功能按鈕,這種設(shè)計(jì)方式的好處是減少了功能流程中的頁(yè)面跳轉(zhuǎn),但如果選項(xiàng)很多而且描述文字較多的時(shí)候,還是設(shè)計(jì)成選項(xiàng)詳情頁(yè)更好些。
以下是一些常見(jiàn)的選擇列表框的類(lèi)型:
3.1 單選列表框
這種方式只允許用戶選擇一個(gè)選項(xiàng),常用于一些需要用戶做出唯一選擇的場(chǎng)景,例如性別選擇、國(guó)家選擇等。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
3.2 多選列表框
這種方式允許用戶選擇多個(gè)選項(xiàng),常用于一些需要用戶做出多個(gè)選擇的場(chǎng)景,例如定制化需求、標(biāo)簽選擇等。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
3.3 下拉列表框
這種方式將所有選項(xiàng)折疊在一個(gè)下拉列表中,用戶可以通過(guò)滑動(dòng)或者點(diǎn)擊來(lái)查看并選擇選項(xiàng)。這種設(shè)計(jì)方式常用于一些需要節(jié)省空間或者隱藏復(fù)雜選項(xiàng)的場(chǎng)景。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
3.4 彈出式列表框
這種方式將選項(xiàng)以彈出式的方式展示在彈窗中,用戶可以通過(guò)點(diǎn)擊來(lái)查看并選擇選項(xiàng)。這種設(shè)計(jì)方式常用于一些需要快速選擇的場(chǎng)景,例如快捷菜單、操作菜單等。
從用戶體驗(yàn)到細(xì)節(jié)之美:移動(dòng)端彈窗設(shè)計(jì)
 
 
另:在移動(dòng)端彈窗設(shè)計(jì)中,我們還需關(guān)注五個(gè)關(guān)鍵點(diǎn):
  1.  
    避免過(guò)度使用:過(guò)多彈窗會(huì)干擾用戶,降低體驗(yàn)。因此,要審慎使用,確保必要性。
  2.  
    設(shè)計(jì)簡(jiǎn)潔:彈窗內(nèi)容應(yīng)精簡(jiǎn),標(biāo)題與內(nèi)容需清晰傳達(dá)目的。
  3.  
    合理擺放按鈕:確保按鈕易于點(diǎn)擊,數(shù)量適中,避免混亂。
  4.  
    保持視覺(jué)清晰:色彩、字體等需與整體風(fēng)格協(xié)調(diào),動(dòng)畫(huà)效果需自然。
  5.  
    簡(jiǎn)化交互流程:操作步驟需簡(jiǎn)單明了,提供明確的反饋。
綜上所述,移動(dòng)端彈窗設(shè)計(jì)應(yīng)注重簡(jiǎn)潔的文案、突出核心內(nèi)容、保持一致性、注重可讀性和適應(yīng)性。通過(guò)關(guān)注這些關(guān)鍵點(diǎn),可以打造出高品質(zhì)的彈窗設(shè)計(jì),提升用戶的使用體驗(yàn)。
 
總結(jié)
移動(dòng)端彈窗設(shè)計(jì)是一項(xiàng)需要綜合考慮用戶體驗(yàn)和轉(zhuǎn)化率的復(fù)雜任務(wù)。通過(guò)明確設(shè)計(jì)目的、選擇合適類(lèi)型、注重視覺(jué)設(shè)計(jì)、提供明確操作按鈕、適時(shí)出現(xiàn)適度使用以及不斷測(cè)試與優(yōu)化,可以打造出更加優(yōu)秀、更具吸引力的彈窗設(shè)計(jì)。這不僅能夠提升用戶的滿意度和忠誠(chéng)度,還能為應(yīng)用帶來(lái)更多的商業(yè)價(jià)值。
 


作者:散落的那些
鏈接:https://www.zcool.com.cn/article/ZMTYwNDQ2NA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

大廠搜索哪家強(qiáng)?這些交互設(shè)計(jì)值得你收藏學(xué)習(xí)!

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

大體上分為兩類(lèi):彩蛋流和體驗(yàn)流

搜索的本質(zhì)是什么?無(wú)疑是內(nèi)容的召回和信息的推薦。

可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷,不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外,在搜索的體驗(yàn)和彩蛋上也是下了不少功夫,從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶黏性。因此今天就來(lái)盤(pán)點(diǎn)一些,那有意思的大廠搜索交互。

大體上分為兩類(lèi):彩蛋流和體驗(yàn)流

A.彩蛋流

注重提升搜索過(guò)程中的趣味程度,以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表:谷歌瀏覽器、百度瀏覽器

 

1.谷歌瀏覽器

 

可以說(shuō)是搜索彩蛋的先行者,內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋,如娛樂(lè)角色:搜索【滅霸】,頁(yè)面右邊會(huì)打響指,相關(guān)字段會(huì)被’毀滅‘掉

 

 

搜索【馬里奧兄弟】,右邊也有游戲里一樣的點(diǎn)擊彩蛋

 

 

還有各種有意思的搜索結(jié)果比如搜:is google down(谷歌關(guān)閉了嗎),搜索結(jié)果優(yōu)先顯示:NO

 

 

再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。

 

而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上,谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶參與,可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。

 

如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

 

 

 

 

 

 

2.百度瀏覽器

 

百度在搜索彩蛋里下的的功夫也不少,最著名的應(yīng)該是搜索【黑洞】時(shí),頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。

 

 

 

 

而且和谷歌相同,在其他的搜索關(guān)鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉(zhuǎn)】,頁(yè)面會(huì)左右翻過(guò)來(lái)

 

 

 

 

搜索【跳躍】,頁(yè)面會(huì)在上下跳動(dòng)

 

 

 

 

搜索【失重】,頁(yè)面上的字會(huì)飄起來(lái)‍

 

 

 

 

 

而在【活動(dòng)運(yùn)營(yíng)】上,百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì),力求給用戶一種眼前一亮的感覺(jué)。比如每年的愚人節(jié),搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計(jì),各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶帶來(lái)了新鮮感和趣味性。

 

 

 

 

 

 

 

還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法:在某年的圣誕節(jié)上,百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間,用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」

 

 

 

 

 

 

 

用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動(dòng)。另外,百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口,也和谷歌有異曲同工之妙。

 

 

 

 

而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

 

 

B.體驗(yàn)流

 

注重提升搜索過(guò)程中的交互體驗(yàn),以增加用戶的操作效率與產(chǎn)品易用性。

 

代表:蘋(píng)果產(chǎn)品、夸克瀏覽器

 

 

1.Apple/蘋(píng)果產(chǎn)品

 

·iPhone

 

iPhone的【桌面搜索】除了能查詢手機(jī)上的各種信息、文件,它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶額外打開(kāi)計(jì)算器、瀏覽器,大大減少操作鏈路。

 

 

 

 

在iOS的原生鍵盤(pán)里,可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼:當(dāng)你輸入 【打+我或通訊錄好友+電話】時(shí),鍵盤(pán)上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼,點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。

 

 

 

 

用戶無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話號(hào)碼,大大提升操作體驗(yàn)與效率

 

·Mac

 

在Mac電腦的工具欄上搜索相關(guān)幫助時(shí),系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶可以直觀地該結(jié)果在哪里,并減少尋找的操作路徑,免去多余操作

 

 

 

 

在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助,在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí),該入口的聚光燈會(huì)更清晰些,特別容易找到搜索結(jié)果。

 

 

 

 

2.夸克瀏覽器

 

夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。

 

 

 

 

降低「需要往上手指移動(dòng),才能點(diǎn)擊搜索框」的操作成本,讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。

 

而且在輸入網(wǎng)址或英文等字段時(shí),搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊,拖拽滑塊即可改變光標(biāo)位置。

 

 

 

 

而且更多有趣、創(chuàng)意的設(shè)計(jì)案例,可上:有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

 

讓用戶更方便地將光標(biāo)快速移動(dòng)到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果, 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞,上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。

 

用戶無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢的信息。

 

 



作者:和出此嚴(yán)
鏈接:https://www.zcool.com.cn/article/ZMTQ4Mzc2OA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

如何把控設(shè)計(jì)的畫(huà)面整體?這個(gè)六個(gè)視覺(jué)語(yǔ)言一定要了解

天宇 平面設(shè)計(jì)

不管是一部電影,還是一張視覺(jué)創(chuàng)意,想要消費(fèi)者或者老板買(mǎi)單,從形、意、色、字、構(gòu)、質(zhì)等一系列視覺(jué)語(yǔ)言,都需要很好的掌握。

 

 

 

 



作者:Peng蓬的芝士追光
鏈接:https://www.zcool.com.cn/article/ZMTQ4ODYwMA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

高級(jí)設(shè)計(jì)師才會(huì)的設(shè)計(jì)思維,31個(gè)細(xì)節(jié)幫你深入了解!

天宇 設(shè)計(jì)思維

1. 并不存在單一的設(shè)計(jì)過(guò)程

 

設(shè)計(jì)過(guò)程被描述為多個(gè)階段,每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段,它沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)流程,每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。

盡管存在多個(gè)流程,但一般流程和階段類(lèi)似于以下內(nèi)容:

了解問(wèn)題:初步了解問(wèn)題。觀察、采訪和傾聽(tīng)用戶。

定義問(wèn)題:解釋和定義要解決的問(wèn)題。

構(gòu)思:通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。

原型設(shè)計(jì):構(gòu)建原型并與其他人分享( 再次縮小解決方案空間,為實(shí)驗(yàn)階段 )。

測(cè)試:測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。

 

2. 設(shè)計(jì)思維是傳統(tǒng)解法和創(chuàng)造性設(shè)計(jì)過(guò)程的結(jié)合

 

傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開(kāi)始,定義要采取的步驟以及達(dá)到解決方案的工具或方法。

設(shè)計(jì)思維是一種創(chuàng)造性的策略,可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式,它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。

它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯( 布朗,2008 年 ),或作為分析和創(chuàng)造性推理模式的組合( 鄧恩 & 馬丁,2006 年;利特卡,2015 年 )。

 

3. 設(shè)計(jì)思維是問(wèn)題解法的進(jìn)階

 

設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法,常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。

 

從解決問(wèn)題到設(shè)計(jì)思維,Liedtka (2013)

結(jié)果發(fā)現(xiàn),設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程,而不僅僅是一個(gè)創(chuàng)新過(guò)程( 利特卡,2013)

一個(gè)例子是,豐田采用設(shè)計(jì)思維從頭開(kāi)始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心,在重新設(shè)計(jì)過(guò)程中,組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì),這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。

 

4. 從起床到入睡,你都在解決問(wèn)題

 

我們每天都會(huì)遇到問(wèn)題,但是當(dāng)我們解決同樣的問(wèn)題時(shí),它們就成了例行公事( 似乎已經(jīng)忘記它們是問(wèn)題了 ),我們甚至都沒(méi)有意識(shí)到正在解決這些問(wèn)題。例如,我的辦公室在 30 分鐘路程之外,該怎么到達(dá)那里?開(kāi)車(chē)、坐火車(chē)或巴士到目的地;除非車(chē)子輪胎被刺破,否則你就需要弄清楚如何到達(dá)辦公室。

 

5. “設(shè)計(jì)思維”術(shù)語(yǔ)的產(chǎn)生

 

1990 年代,IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ):“設(shè)計(jì)思維”,并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。

 

6. 工程設(shè)計(jì)思維現(xiàn)在被稱(chēng)為設(shè)計(jì)思維

 

設(shè)計(jì)思維是以人為中心、開(kāi)放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式,而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。

 

7. 設(shè)計(jì)思維的歷史早已出現(xiàn)(2000 年)

 

設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作:“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問(wèn)題的方法有很大不同。

90 年代初,認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì),擔(dān)任他們的用戶體驗(yàn)架構(gòu)師,這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ),因?yàn)樗?ldquo;涵蓋人們對(duì)系統(tǒng)體驗(yàn)的所有方面,包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)。” 從那時(shí)起,這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn),擴(kuò)展到了自己的專(zhuān)業(yè)領(lǐng)域。

 

8. “棘手的”設(shè)計(jì)思維

 

設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。

 

棘手問(wèn)題的特征

“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的,用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題,有很多未知因素,沒(méi)有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān),因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。

 

9. 設(shè)計(jì)思維不僅限于數(shù)字化設(shè)計(jì)的應(yīng)用

 

設(shè)計(jì)主題的范圍是普遍的,因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類(lèi)經(jīng)驗(yàn)的任何領(lǐng)域。

 

它可以用于:

符號(hào)和視覺(jué)傳達(dá):這包括平面設(shè)計(jì)的傳統(tǒng)工作,如排版和廣告、書(shū)籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。

材料:這包括對(duì)日常用品的形式和視覺(jué)外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車(chē)輛。

人類(lèi)活動(dòng)和組織性服務(wù):包括對(duì)物流的傳統(tǒng)管理關(guān)注,結(jié)合物質(zhì)資源、工具和人類(lèi)低效的序列和時(shí)間表,以達(dá)到特定的目標(biāo)。

復(fù)雜的系統(tǒng)或環(huán)境:生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn),或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。

10. 設(shè)計(jì)思維不僅限于設(shè)計(jì)師的實(shí)踐

 

設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專(zhuān)業(yè)實(shí)踐,但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。(布朗,2013 年)

在企業(yè)中,設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健,通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù),我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。

 

11. 了解問(wèn)題是第一

 

不管是什么設(shè)計(jì),理解和研究問(wèn)題是必不可少的,因?yàn)槲覀兡軌驈钠涑霭l(fā),從而進(jìn)行以用戶為中心的設(shè)計(jì)。

 

設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段,而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向,所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非常混亂的時(shí)刻,從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。(利特克,2013)

 

12. 設(shè)計(jì)思維需要兩種不同的思維

 

傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案,但設(shè)計(jì)思維首先使我們發(fā)散,試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維,縮小多種可能性,找到單一的最佳解決方案。

 

13. 設(shè)計(jì)思維是可以傳授和學(xué)習(xí)的,它不是一種人格特質(zhì)

根據(jù)利特卡和奧美 (2011) 的說(shuō)法,設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣,即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。

 

14. 設(shè)計(jì)過(guò)程不是線性的

 

設(shè)計(jì)過(guò)程從來(lái)都不是線性的,它由多次失敗和迭代組成(布朗,2018)。

首先,設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類(lèi)似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案,下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估,從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功,它將被實(shí)施。如果不成功,則需要重新表述問(wèn)題,并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程,即循環(huán)方法。

這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程,源于和客戶親密接觸的洞察。

 

15. 調(diào)研是設(shè)計(jì)思維非常重要的工具

 

學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著:學(xué)習(xí)收集和分析大量數(shù)據(jù);學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么;學(xué)習(xí)管理不確定感,以及與許多新的伙伴合作( 利特卡和奧美,2011)。你可以進(jìn)行的研究類(lèi)型分為三類(lèi):生成性研究、評(píng)估性研究和驗(yàn)證性研究。

 

16. “要么很快失敗,要么經(jīng)常失敗”

 

一種常見(jiàn)的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”(布朗,2009)。

當(dāng)過(guò)程早期發(fā)生故障時(shí),例如被拒絕的原型,實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見(jiàn)解。這種觀點(diǎn)與傳統(tǒng)的先形成理論,再檢驗(yàn)正誤的方式相矛盾。

 

17. 公司正在將設(shè)計(jì)思維作為解決問(wèn)題的核心方法

 

Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如,IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師,并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )

 

18. 以人為本的思維

 

設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題,并使用基于直接觀察乃至訪談的研究時(shí),我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見(jiàn)解和創(chuàng)新。

 

19. 可觀的商業(yè)價(jià)值

 

它有助于將成功的產(chǎn)品更快地推向市場(chǎng),最終節(jié)省企業(yè)資金。
IBM 的健康和人類(lèi)服務(wù)組織的設(shè)計(jì)思維實(shí)踐,通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。

 

20. 對(duì)復(fù)雜問(wèn)題的作用性

 

由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解,因此在嘗試設(shè)計(jì)解決方案時(shí),處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。

設(shè)計(jì)思維通過(guò)綜合和歸納思維,幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束,并允許通過(guò)多樣性思維和批評(píng)思維,來(lái)?yè)肀Ш吞剿髌缌x。

消費(fèi)者通常不知道他們有什么問(wèn)題需要解決,或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察,設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題,而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題,并找到解決方案。

 

21. 別名:跳脫框架的思維

 

該方法鼓勵(lì)“跳出框架思考”(“瘋狂的想法”);它蔑視顯而易見(jiàn)的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法,以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開(kāi)發(fā)新的不受約束的思維方式,或?qū)ΤR?jiàn)問(wèn)題的創(chuàng)新解覺(jué)方法。

 

22. 設(shè)計(jì)思想家的特征

 

根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法,具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。

同理心:從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心,必須傾聽(tīng)和觀察他人的行為,注意并獲得洞察力。

綜合思維:重要的是不僅要有分析能力,而且要能夠提出新穎的解決方案,還要憑直覺(jué)。

樂(lè)觀:除非你相信有解決方案,否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí),你可能會(huì)放棄。

實(shí)驗(yàn)主義:重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素,并朝著全新的方向發(fā)展。

協(xié)作:產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜,因此必須擁有一支具有不同背景的團(tuán)隊(duì),以幫助從多個(gè)角度看待問(wèn)題。

23. 有助于對(duì)抗某些偏見(jiàn)

當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí),對(duì)我們解決問(wèn)題會(huì)非常有幫助,因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定,首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車(chē)”。這也是盜賊第一次可以用信用卡撬開(kāi)簡(jiǎn)單的彈簧門(mén)鎖。

 

24. 實(shí)用

 

為了幫助設(shè)計(jì)師利用文科和技術(shù)理論,整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案,我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作,因而幫助我們更容易地了解實(shí)際解法,而不僅僅是理論模型。

 

25. 執(zhí)行

 

第一批美國(guó)公司在 2000 年代初期開(kāi)始實(shí)施設(shè)計(jì)思維,這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣,他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校(d.schools),其中一所位于波茨坦大學(xué)(德國(guó)),另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn),因此該研究重點(diǎn)關(guān)注這些國(guó)家,以尋找早期實(shí)施者。

 

26. 團(tuán)隊(duì)思考

 

設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開(kāi)發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。

觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意(卡振思,2018 年;薩梅和德拉赫-扎哈維,2013 年)。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。

決策是平等的,因?yàn)槊總€(gè)成員的意見(jiàn)都被征求和使用(卡爾格倫等,2016)。

27. 不需要花哨的技術(shù)原型

當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí),它不是什么花哨的設(shè)備,而是一個(gè)用膠帶粘起來(lái)的原型。

低保真原型制作起來(lái)既快速又便宜( 想想幾分鐘和幾分錢(qián) ),但可以從用戶和同事那里得到有用的反饋,這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢(qián)更少。此外,將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考,同時(shí)也有助于揭示某些需求。

 

28. 過(guò)程強(qiáng)調(diào)心態(tài)和行動(dòng)

 

為了創(chuàng)新,設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心( 凱莉 & 凱莉,2013;鄭,2018),而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)( 假設(shè)浮現(xiàn):assumption surfacing,這是一種評(píng)估技術(shù),涉及寫(xiě)出潛在的假設(shè)和反假設(shè)。)( 卡爾格倫等,2016;利特卡,2015)

 

29. 在組織中實(shí)施設(shè)計(jì)思維的挑戰(zhàn)

 

如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變,實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)

沃爾特斯 ( 2011 ) 聲稱(chēng),由于設(shè)計(jì)思維的模糊性,它與組織文化相沖突。

據(jù)受訪者稱(chēng),在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng), 因?yàn)樗琴Y源密集型的,增加了工作量。( 麗莎等,2016)

在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中,“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。

 

30. 設(shè)計(jì)思維的問(wèn)題

 

許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn),設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程,而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。

“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò),在更廣泛的設(shè)計(jì)世界中,我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降。—— Yasushi Kusume

弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫(xiě)道,“歸根結(jié)底,設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革,那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的。”

 

31. 為什么需要共情

 

觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng),可以為你提供有關(guān)人們想法和感受的線索。

你可能認(rèn)為你知道問(wèn)題所在,但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。

宜家派設(shè)計(jì)師到人們家中,觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義,以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上,最好的解決方案來(lái)自于對(duì)人類(lèi)行為的最佳洞察。

Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題,所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此,經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后,最終提高了客戶和員工的滿意度(利特卡,2014)



作者:用盡晴天
鏈接:https://www.zcool.com.cn/article/ZMTUyODUzNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

打開(kāi)設(shè)計(jì)思維才能突破瓶頸

天宇 設(shè)計(jì)思維

對(duì)于設(shè)計(jì)師來(lái)說(shuō),遇到設(shè)計(jì)瓶頸期很正常,入行一段時(shí)間后所具備的能力就會(huì)達(dá)到峰值,無(wú)法突破峰值就會(huì)遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限,打開(kāi)設(shè)計(jì)思維才能突破瓶頸期,通過(guò)積累優(yōu)秀的案例并進(jìn)行總結(jié)分析,可以更快的打破思維限制。

 

 

 

 

 

分享目錄

 

一、趣味性的登錄設(shè)計(jì)

二、瓷片區(qū)的趣味性手勢(shì)交互

三、營(yíng)造懷舊感的溫馨體驗(yàn)

四、趣味性的進(jìn)度提示設(shè)計(jì)

五、場(chǎng)景感的點(diǎn)擊操作

六、動(dòng)效引導(dǎo)用戶發(fā)帖

七、卡通形象強(qiáng)化瓷片區(qū)視覺(jué)感

八、不改變布局的曝光強(qiáng)化

九、可以晃動(dòng)的 Banner 圖

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

 

 

 

一、趣味性的登錄設(shè)計(jì)

 

登錄是進(jìn)入產(chǎn)品的第一道防線,也容易讓用戶產(chǎn)生排斥感,降低用戶的防備心理才能提高登錄的意愿度。

 

盯潮 App 在登錄界面中,以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì),使得頁(yè)面視覺(jué)感豐富?;蝿?dòng)手機(jī)時(shí)元素也會(huì)移動(dòng),在掉落或者碰撞手機(jī)邊緣時(shí)配合震動(dòng)感,讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感,提升了登錄的意愿度和體驗(yàn)感。

 

 

 

 

 

 

二、瓷片區(qū)的趣味性手勢(shì)交互

 

瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營(yíng)模塊,起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁(yè)面中的布局比較靈活,設(shè)計(jì)表現(xiàn)也非常豐富。

 

盯潮 App 在首頁(yè)瓷片區(qū)設(shè)計(jì)中,以柵格式布局進(jìn)行區(qū)塊劃分,占比較大的模塊類(lèi)似于 Banner 式表現(xiàn)。通過(guò)手勢(shì)可以任意拖動(dòng)實(shí)現(xiàn)切換,趣味性和互動(dòng)性相結(jié)合,提高了用戶的使用樂(lè)趣。

 

 

 

 

 

 

三、營(yíng)造懷舊感的溫馨體驗(yàn)

 

童年的記憶是我們逝去的青春,每每看到小時(shí)候的畫(huà)面,總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營(yíng)造設(shè)計(jì)風(fēng)格的產(chǎn)品,名字叫“軟眠眠”。

 

這是一款拯救失眠者的治愈系睡眠 App,以一幅小時(shí)候生活的環(huán)境插畫(huà)填充界面背景,圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品,視覺(jué)風(fēng)格營(yíng)造極強(qiáng)的懷舊感。無(wú)論是畫(huà)風(fēng)還是配色、配樂(lè)等,都勾起了我們滿滿的回憶,帶給用戶溫馨的體驗(yàn)。

 

 

 

 

 

 

四、趣味性的進(jìn)度提示設(shè)計(jì)

 

在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會(huì)選擇進(jìn)度條,通過(guò)可視化的表達(dá)提高用戶的理解,減輕信息認(rèn)知負(fù)擔(dān)。

 

軟眠眠 App 在定制睡眠計(jì)劃的過(guò)程中,完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思,是一個(gè)小孩通過(guò)拉動(dòng)繩子移動(dòng)。拉動(dòng)過(guò)程中結(jié)合動(dòng)態(tài)表達(dá),配合手繪風(fēng)的表現(xiàn)讓人感覺(jué)輕松愉快,趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。

 

 

 

 

 

 

五、場(chǎng)景感的點(diǎn)擊操作

 

在保障底層操作體驗(yàn)的基礎(chǔ)上,設(shè)計(jì)會(huì)越來(lái)越講究細(xì)節(jié)的體驗(yàn),逐步強(qiáng)化情感化的融入和場(chǎng)景感的體驗(yàn)。

 

最近在體驗(yàn)小雞上工 App 時(shí),在找工作的列表設(shè)計(jì)中加入了“搶”按鈕,在點(diǎn)擊列表時(shí)按鈕會(huì)有按壓的動(dòng)效過(guò)程。模擬搶拍按鈕獲得機(jī)會(huì)的體驗(yàn),營(yíng)造場(chǎng)景氛圍感,提高了設(shè)計(jì)表達(dá)的趣味性。

 

 

 

 

 

 

六、動(dòng)效引導(dǎo)用戶發(fā)帖

 

微動(dòng)效可以提高功能的吸引力,也能讓互動(dòng)體驗(yàn)變得更有趣,可以通過(guò)動(dòng)效引導(dǎo)功能操作和提高關(guān)注度。

 

騰訊動(dòng)漫 App 在圈子欄目中,以 IP 形象結(jié)合動(dòng)效強(qiáng)化發(fā)帖按鈕,以此引導(dǎo)用戶參與發(fā)帖。動(dòng)效不僅突出了發(fā)帖的關(guān)注度,也讓發(fā)帖按鈕設(shè)計(jì)更有親和力,進(jìn)而提升用戶的點(diǎn)擊欲。

 

 

 

 

 

 

七、卡通形象強(qiáng)化瓷片區(qū)視覺(jué)感

 

瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用,提高該模塊的吸引力至關(guān)重要,視覺(jué)感的突出也尤為重要。

 

會(huì)玩 App 在首頁(yè)“一起玩”的瓷片區(qū)設(shè)計(jì)中,以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn),各種裝扮的形象豐富視覺(jué)感。卡通形象設(shè)計(jì)風(fēng)格統(tǒng)一,卡片色彩豐富且協(xié)調(diào),整體瓷片區(qū)視覺(jué)沖擊力十足。

 

 

 

 

 

 

八、不改變布局的曝光強(qiáng)化

 

在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上,如何提高局部?jī)?nèi)容或者主推內(nèi)容的曝光度,是產(chǎn)品設(shè)計(jì)師不斷探索的方向。

 

愛(ài)奇藝 App 首頁(yè)推薦欄目 Banner 圖下方,默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開(kāi)時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá),保持當(dāng)前結(jié)構(gòu)布局不變,放大了圖片填充和推薦影片,整張畫(huà)面填充宮格,視覺(jué)張力十足。該設(shè)計(jì)表達(dá)既不會(huì)干擾當(dāng)前布局,也能強(qiáng)化推薦影片的曝光度,解決方案值得探索。

 

 

 

 

 

 

九、可以晃動(dòng)的 Banner 圖

 

Banner 可以在創(chuàng)意、造型、互動(dòng)形式等方面進(jìn)行設(shè)計(jì)發(fā)揮,也呈現(xiàn)了許多優(yōu)秀的方案,產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多的可能性。

 

最近在體驗(yàn)盯潮 App 時(shí),發(fā)售欄目頂部 Banner 圖設(shè)計(jì)引人關(guān)注。當(dāng)用戶左右晃動(dòng)手機(jī)時(shí),Banner 圖背景層不動(dòng),而文案和產(chǎn)品等元素層會(huì)跟著晃動(dòng)的頻率左右移動(dòng)??梢曰蝿?dòng)的 Banner 圖非常有意思,成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。

 

 

 

 

 

 

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

 

底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮,其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對(duì)更多一些,在背景和造型層面的案例較少,不過(guò)最近也發(fā)現(xiàn)了一個(gè)解決方案。

 

在體驗(yàn)云游萬(wàn)里長(zhǎng)城小程序時(shí),進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長(zhǎng)城墻面和結(jié)構(gòu),非常有場(chǎng)景代入感。設(shè)計(jì)了深色版和淺色版,圖標(biāo)造型設(shè)計(jì)也融入了長(zhǎng)城元素,不失為一種優(yōu)秀的差異化設(shè)計(jì)探索。

 

 

 

 

小結(jié)

 

希望本期的分享可以開(kāi)啟大家更多設(shè)計(jì)思維,從優(yōu)秀的設(shè)計(jì)方案中發(fā)現(xiàn)設(shè)計(jì)的軌跡,復(fù)用到后期的項(xiàng)目設(shè)計(jì)中。本文描述屬于個(gè)人理解和總結(jié),不足之處歡迎大家留言補(bǔ)充,我們互相進(jìn)步。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTU2NDM3Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

探究UI設(shè)計(jì)中形狀的創(chuàng)意與應(yīng)用

天宇 設(shè)計(jì)思維

形狀設(shè)計(jì)可以影響整個(gè)界面的視覺(jué)效果。通過(guò)選擇適當(dāng)?shù)男螤詈团帕蟹绞?,可以?chuàng)造出令人愉悅、易于使用和富有吸引力的界面。

寫(xiě)在前面

在UI設(shè)計(jì)中,形狀設(shè)計(jì)是一個(gè)至關(guān)重要的環(huán)節(jié)。對(duì)其選擇和排列會(huì)直接影響到界面的美觀度和用戶的交互體驗(yàn)。接下來(lái)將詳細(xì)探討UI設(shè)計(jì)中的形狀設(shè)計(jì),包括其重要性、基本原則和實(shí)際應(yīng)用。

 

形狀可以幫助用戶理解和操作界面。一個(gè)優(yōu)秀的形狀設(shè)計(jì)應(yīng)該具有清晰、簡(jiǎn)潔和易于理解的特點(diǎn),我們?cè)谄綍r(shí)做設(shè)計(jì)中,需要將這些原則深入到每一個(gè)細(xì)節(jié)中。

在設(shè)計(jì)中,形狀的識(shí)別和理解是至關(guān)重要的。一個(gè)成功的形狀設(shè)計(jì)應(yīng)該能夠快速地被用戶識(shí)別并理解。例如,一個(gè)常見(jiàn)的形狀可以使用不同的顏色和大小來(lái)區(qū)分主要內(nèi)容和次要內(nèi)容,從而引導(dǎo)用戶的注意力。

 

1、形狀的一致性

在UI設(shè)計(jì)中,一致性是一個(gè)非常重要的原則。一個(gè)好的形狀設(shè)計(jì)應(yīng)該在整個(gè)應(yīng)用程序中保持一致,從而使用戶可以輕松地導(dǎo)航和操作。例如,閑魚(yú)APP里的所有的按鈕可以使用相同的形狀和顏色,以便用戶可以輕松地識(shí)別并操作。

 

2、形狀的個(gè)性化與品牌識(shí)別

一個(gè)獨(dú)特的形狀設(shè)計(jì)可以幫助品牌在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出。一個(gè)好的形狀設(shè)計(jì)應(yīng)該能夠體現(xiàn)品牌的個(gè)性和價(jià)值觀,從而增強(qiáng)品牌的識(shí)別度。使用獨(dú)特的圖標(biāo)和標(biāo)志來(lái)傳達(dá)其品牌形象和價(jià)值觀。例如:小米的logo、京東狗、淘寶天貓。

 

1、按鈕設(shè)計(jì)

按鈕是UI設(shè)計(jì)中最重要的元素之一。一個(gè)好的按鈕設(shè)計(jì)應(yīng)該具有清晰的形狀和易于理解的標(biāo)簽。

按鈕形狀主要有直角、小圓角、全圓角三種樣式。

① 直角按鈕具有嚴(yán)謹(jǐn)、力量、高端的特點(diǎn),適用于大牌美妝、奢侈品類(lèi)產(chǎn)品;

 

② 小圓角按鈕具有穩(wěn)定、中性的感覺(jué),適用于用戶跨度較大的常規(guī)類(lèi)產(chǎn)品中,例如微信、滴滴、抖音等;

 

③ 全圓角按鈕更加溫和、親切,適用于電商類(lèi)和兒童類(lèi)的產(chǎn)品中。

 

按鈕尺寸和比例根據(jù)iOS和Android的規(guī)范,按鈕尺寸至少高于5.5毫米(36 pt),否則用戶點(diǎn)擊時(shí)會(huì)較為困難。同時(shí),按鈕長(zhǎng)度固定,文字長(zhǎng)度變化或是按鈕長(zhǎng)度根據(jù)文字長(zhǎng)短而變化的設(shè)計(jì)方式也需要考慮文字距離按鈕上下左右邊距的比例關(guān)系。

總的來(lái)說(shuō),UI中按鈕形狀的設(shè)計(jì)需要結(jié)合具體的產(chǎn)品屬性和界面風(fēng)格,以及用戶的使用習(xí)慣來(lái)進(jìn)行綜合考慮。

 

2、圖標(biāo)設(shè)計(jì)

圖標(biāo)是UI設(shè)計(jì)中另一種重要的具有高度概括性和視覺(jué)傳達(dá)性的小尺寸圖像元素。可以幫助用戶快速地識(shí)別和理解功能和信息,是靠文案無(wú)法實(shí)現(xiàn)的。

例如,天氣圖標(biāo)通過(guò)其形狀、色彩和設(shè)計(jì)元素直觀地傳達(dá)不同的天氣狀況和氣象信息,幫助人們更好地了解天氣狀況。又如衛(wèi)生間男女圖標(biāo)的設(shè)計(jì)讓人們易于識(shí)別和理解。

 

在UI設(shè)計(jì)中,圖標(biāo)的圓角度通常是怎么定義的呢?

① 大圓角:應(yīng)用在以圓潤(rùn)、可愛(ài)為主要風(fēng)格的UI設(shè)計(jì)中,以營(yíng)造出更加柔和、親切的視覺(jué)效果。

② 小圓角:小圓角作為一種微妙的細(xì)節(jié)元素,可以增加圖標(biāo)的層次感和細(xì)節(jié)。在追求設(shè)計(jì)質(zhì)感的界面中,適當(dāng)添加小圓角可以使圖標(biāo)更加精致和有品質(zhì)感。

③ 無(wú)圓角:應(yīng)用在科技或現(xiàn)代感的UI設(shè)計(jì)中,以營(yíng)造出更加硬朗、冷峻的視覺(jué)效果。但使用需要克制,過(guò)多的直角可能會(huì)讓整個(gè)界面顯得生硬和冷感。

補(bǔ)充一點(diǎn),我發(fā)現(xiàn)一個(gè)重要細(xì)節(jié),就是很多人在計(jì)算內(nèi)圓角數(shù)值時(shí)都存在困擾。自工作以來(lái),我注意到這個(gè)問(wèn)題影響了很多人,他們不知道如何正確地計(jì)算內(nèi)圓角的數(shù)值。為了解決這個(gè)問(wèn)題,通過(guò)以下方式幫助大家更好地掌握計(jì)算內(nèi)圓角數(shù)值的方法。

 

3、輸入框設(shè)計(jì)

輸入框是用戶輸入信息的重要區(qū)域。在UI設(shè)計(jì)中,輸入框的形狀設(shè)計(jì)可以根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格進(jìn)行變化。以下是一些常見(jiàn)的輸入框形狀設(shè)計(jì):

① 方型輸入框:這是最常見(jiàn)的輸入框形狀,它以方形的形式呈現(xiàn),可以在其中輸入文本或信息。這種設(shè)計(jì)簡(jiǎn)單明了,易于使用,適用于大多數(shù)場(chǎng)景。

② 圓角矩形輸入框:這種輸入框在四個(gè)角上采用了圓角設(shè)計(jì),使得整個(gè)輸入框看起來(lái)更加柔和、友好。這種設(shè)計(jì)在一些需要強(qiáng)調(diào)用戶輸入的場(chǎng)景下較為常見(jiàn)。

③ 下拉菜單輸入框:這種輸入框可以讓用戶從下拉菜單中選擇一個(gè)選項(xiàng),而不是直接在文本框中輸入。這種設(shè)計(jì)適用于一些固定選項(xiàng)的場(chǎng)景,可以減少用戶的輸入操作。

④ 按鈕式輸入框:這種輸入框?qū)⑤斎肟蚝桶粹o結(jié)合在一起,用戶可以點(diǎn)擊按鈕來(lái)輸入信息。這種設(shè)計(jì)適用于一些需要強(qiáng)調(diào)點(diǎn)擊操作的場(chǎng)景,例如站酷的登錄。

⑤ 語(yǔ)音識(shí)別輸入框:這種輸入框允許用戶通過(guò)語(yǔ)音來(lái)輸入信息,而不是手動(dòng)輸入。這種設(shè)計(jì)適用于一些需要快速輸入或不方便手動(dòng)輸入的場(chǎng)景,例如駕車(chē)、寫(xiě)字等。

總的來(lái)說(shuō),輸入框的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇,同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。

 

4、導(dǎo)航欄設(shè)計(jì)

導(dǎo)航欄是UI設(shè)計(jì)中重要的組成部分之一。它幫助用戶在不同的頁(yè)面之間進(jìn)行切換和導(dǎo)航。在設(shè)計(jì)導(dǎo)航欄時(shí),應(yīng)考慮其位置、顏色和形狀等因素。以下是一些常見(jiàn)的導(dǎo)航欄形狀設(shè)計(jì):

① 頂部導(dǎo)航欄:這是最常見(jiàn)的導(dǎo)航模式,位于頁(yè)面頂部,可以包含網(wǎng)站的名稱(chēng)、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)簡(jiǎn)單明了,易于使用,適用于大多數(shù)場(chǎng)景。

② 側(cè)邊導(dǎo)航欄:這種導(dǎo)航模式位于頁(yè)面左側(cè),通常用于二級(jí)導(dǎo)航或輔助導(dǎo)航。側(cè)邊導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實(shí)際需求進(jìn)行選擇。

③ 底部導(dǎo)航欄:這種導(dǎo)航模式位于頁(yè)面底部,通常用于一級(jí)目錄的導(dǎo)航。底部導(dǎo)航欄可以包含網(wǎng)站的名稱(chēng)、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)操作方便,用戶體驗(yàn)好,適用于大多數(shù)場(chǎng)景。

④ 彈出式導(dǎo)航欄:這種導(dǎo)航模式通常用于移動(dòng)端應(yīng)用,通過(guò)點(diǎn)擊或滑動(dòng)屏幕上的按鈕或圖標(biāo)來(lái)喚出導(dǎo)航菜單。彈出式導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實(shí)際需求進(jìn)行選擇。

總的來(lái)說(shuō),導(dǎo)航欄的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際的導(dǎo)航模式和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇,同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。好的導(dǎo)航設(shè)計(jì)應(yīng)該簡(jiǎn)單明了、易于使用,能夠提供清晰的信息架構(gòu)和層級(jí)關(guān)系,幫助用戶快速找到所需內(nèi)容。

 

5、作為底紋設(shè)計(jì)

將形狀用作底紋,可以增加圖形的視覺(jué)層次感和趣味性。尤其是當(dāng)使用如圓圈、條紋、曲線等形狀時(shí),可以使底紋呈現(xiàn)出動(dòng)態(tài)感和動(dòng)感。

也可以強(qiáng)調(diào)文字或圖片中的某些元素,用來(lái)引導(dǎo)觀者的視線,以創(chuàng)造出視覺(jué)焦點(diǎn)。比如,在一個(gè)沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋,可以將觀者的注意力集中在那些形狀上。

但是,必須著重強(qiáng)調(diào)的是,底紋的使用應(yīng)當(dāng)與整體的設(shè)計(jì)風(fēng)格和主題相得益彰。若應(yīng)用不當(dāng),可能會(huì)對(duì)畫(huà)面的整體美感產(chǎn)生破壞性的影響。因此,在決定是否使用底紋時(shí),必須慎重考慮其與整體設(shè)計(jì)的和諧度。

 

1、動(dòng)態(tài)形狀設(shè)計(jì)

隨著技術(shù)的不斷發(fā)展,動(dòng)態(tài)形狀設(shè)計(jì)已經(jīng)成為一種趨勢(shì)。通過(guò)使用動(dòng)畫(huà)和過(guò)渡效果,可以創(chuàng)建更具吸引力和互動(dòng)性的界面。例如,使用漸變效果來(lái)平滑地轉(zhuǎn)換不同的頁(yè)面或狀態(tài)。

 

2、3D和立體形狀設(shè)計(jì)

3D和立體形狀設(shè)計(jì)為UI設(shè)計(jì)師提供了更多的可能性。通過(guò)使用陰影、光照和深度效果,可以創(chuàng)建更立體、更有層次感的界面。例如,使用3D旋轉(zhuǎn)效果來(lái)突出主要內(nèi)容或使用陰影效果來(lái)增加界面的深度感。

 

3、可定制形狀設(shè)計(jì)

隨著用戶對(duì)個(gè)性化需求的不斷增加,可定制的形狀設(shè)計(jì)變得越來(lái)越重要。用戶希望根據(jù)自己的喜好和需求來(lái)調(diào)整界面。例如,允許用戶自定義選擇自己喜歡的頁(yè)面主題風(fēng)格。

 

總結(jié)

在UI設(shè)計(jì)中,精美形狀設(shè)計(jì)的關(guān)鍵是深入理解用戶需求,注重細(xì)節(jié),保持一致性,勇于創(chuàng)新,不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面,提升用戶體驗(yàn)。簡(jiǎn)潔地說(shuō),好的形狀設(shè)計(jì)來(lái)源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。

以上總結(jié)僅代表個(gè)人觀點(diǎn),如有不足歡迎大家補(bǔ)充互相進(jìn)步。



作者:散落的那些
鏈接:https://www.zcool.com.cn/article/ZMTYwMTYyNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

網(wǎng)頁(yè)用戶體驗(yàn):藍(lán)色藥丸 VS 紅色藥丸

天宇 網(wǎng)站設(shè)計(jì)文章及欣賞

那么什么才是對(duì)企業(yè)和用戶最有效的?什么情況下把所有的信息直接呈現(xiàn)比逐漸呈現(xiàn)信息更加合理?

 

 

網(wǎng)頁(yè) ( Web ) 和應(yīng)用 ( App ) 雖然不能像報(bào)紙一樣折疊起來(lái),但將重要信息顯示在頁(yè)面重要位置的案例依然存在。有的企業(yè)仍然希望讀者能一眼看到所有東西,就像在你面前說(shuō)全都在這里,我們稱(chēng)之為主頁(yè)體驗(yàn)當(dāng)中的“藍(lán)色藥丸”。還有一種主頁(yè)體驗(yàn)被稱(chēng)為“紅色藥丸”,例如 Facebook 的無(wú)限卷軸,就像一粒神奇的藥丸,可以讓你無(wú)限投入其中。那么什么才是對(duì)企業(yè)和用戶最有效的?什么情況下把所有的信息直接呈現(xiàn)比逐漸呈現(xiàn)信息更加合理?

這取決于你的企業(yè)想要達(dá)到的目標(biāo)。你是希望你的訪客去選擇他們自己想要的內(nèi)容( 例如 TED 演講 ) ,還是你想要幫他們作出選擇( 例如 Netflix )?也可能無(wú)需涉及任何決定,你希望人們因?yàn)楹猛娑谀愕闹黜?yè)上長(zhǎng)久地停留( 例如 Pinterest )。你的商業(yè)目標(biāo)將會(huì)幫助你決定主頁(yè)內(nèi)容將持續(xù)多長(zhǎng)時(shí)間:

 

如果你想要你的客戶自己去決定,就提供他們藍(lán)色藥丸。在頁(yè)面中直接展示所有選項(xiàng),那么故事就結(jié)束了。
如果他們想要一個(gè)驚喜,那么紅色藥丸就是最好的選擇。就像在仙境中無(wú)限探索,向他們展示這兔子洞有多深。
如果你想為你的客戶選擇所需的路徑,那么請(qǐng)?jiān)跓o(wú)限卷軸中編織一個(gè)扣人心弦的故事,讓他們沉浸在你為他們優(yōu)先安排的體驗(yàn)當(dāng)中。

 

 

藍(lán)色藥丸主頁(yè) —— 預(yù)先選擇

你希望你的訪客首先選擇他們想要的。只有這樣,你才能更加深入的了解他們所選擇的道路。

 

 

 

 

這取決于你的企業(yè)正在努力要實(shí)現(xiàn)的目標(biāo)。什么情況下讓訪客先做決定比較合理?

  • 當(dāng)你作為一個(gè)新手、剛進(jìn)入這個(gè)行業(yè)的時(shí)候,你并不知道什么才是受歡迎的。例如一個(gè)健身培訓(xùn)初創(chuàng)公司會(huì)提供 3-4 種獨(dú)特的培訓(xùn)計(jì)劃。因?yàn)樗麄儾⒉恢滥囊环N會(huì)變得最受歡迎。
  • 當(dāng)選項(xiàng)內(nèi)容是你的優(yōu)勢(shì)時(shí),你提供的每個(gè)選項(xiàng)都很受歡迎,并且你希望每位訪客都能先選擇以便于你深入了解用戶。例如蘋(píng)果商店會(huì)在你深入探索之前讓你選擇你感興趣的產(chǎn)品。
  • 當(dāng)談?wù)摰絻r(jià)格的時(shí)候,當(dāng)前屏幕里合理公正的價(jià)格計(jì)劃能幫助用戶快速作出決定。雖然突出中間方案是一種很常見(jiàn)的做法,但其他所有選項(xiàng)也都是預(yù)先準(zhǔn)備好的。

你仍然可以幫助人們作出正確的選擇。關(guān)鍵點(diǎn)就是不要過(guò)早的深入細(xì)節(jié),也不要挑出最喜歡的。盡管會(huì)巧妙的突出其中一個(gè),但依然要將所有的選項(xiàng)以直觀的、無(wú)優(yōu)先級(jí)的、單一視圖的形式呈現(xiàn)給客戶。

紅色藥丸主頁(yè) —— 無(wú)限卷軸

你希望創(chuàng)造一個(gè)充滿了偶然性探索和發(fā)現(xiàn)的體驗(yàn)旅程,就如愛(ài)麗絲準(zhǔn)備進(jìn)入兔子洞。你的用戶不需要去尋找任何具體的內(nèi)容,也沒(méi)有詳細(xì)的目標(biāo)或特定的規(guī)則,無(wú)限卷軸就是這里的答案,用戶可以沉浸在內(nèi)容的海洋里。就像 Pinterest 和 Facebook 這樣的網(wǎng)站,伴隨著大量用戶生成的內(nèi)容而使用無(wú)限卷軸。

 

 

盡管驚喜是主旨,但是人們依舊需要時(shí)間感和空間感。一方面,用戶必須知道還存在多少信息,即使它正在下載;另一方面,用戶必須知道他們所在的位置,這樣更容易向兩個(gè)方向?qū)Ш剑?前進(jìn)或后退 )。如果你的目標(biāo)只是為你的客戶安排一個(gè)旅程的優(yōu)先級(jí)而不是一個(gè)無(wú)止境的旅程,那么你該怎么辦?我們需要第三個(gè)藥丸.....

綠色藥丸主頁(yè) —— 長(zhǎng)卷軸

你希望為訪客們安排一條線性路徑的優(yōu)先級(jí),你為他們省去了選擇的麻煩。想象一下你的衣櫥是根據(jù)你今天要穿什么來(lái)安排的,還是為你即將到來(lái)的旅行計(jì)劃來(lái)安排的?

 

 

 

在什么情況下這是一個(gè)好的主意?

 

  • 當(dāng)你的業(yè)務(wù)數(shù)據(jù)表明了在你的產(chǎn)品中有一個(gè)明顯的贏家時(shí)。假設(shè)你是一家擁有 12 張信用卡的銀行,但是其中一張卡的銷(xiāo)售額占到 80%,你知道大多數(shù)人最終還是會(huì)買(mǎi)這張卡。
  • 當(dāng)你的商業(yè)目標(biāo)是銷(xiāo)售新產(chǎn)品或服務(wù)時(shí)。例如,你出版了一本新書(shū),你得想盡辦法去宣傳它。
  • 當(dāng)你有故事要講的時(shí)候。它可以是一份郵件、一封老式的推銷(xiāo)信,比如約翰.卡爾頓和丹.肯尼迪寫(xiě)的那些,甚至是一份如下圖的視覺(jué)簡(jiǎn)歷!

 

 

 

圖片來(lái)源:http://www.rleonardi.com/interactive-resume/

長(zhǎng)卷軸在你的內(nèi)容里提供了一個(gè)連續(xù)的、自然流動(dòng)的節(jié)奏。回想一下你在閱讀紙質(zhì)書(shū)時(shí)獲得的樂(lè)趣,在鼠標(biāo)上輕輕滾動(dòng)或按下小鍵盤(pán)就像翻頁(yè)一樣,它是毫不費(fèi)力的、自然的和無(wú)干擾的,前進(jìn)和后退都很容易。當(dāng)然,你的故事需要足夠扣人心弦才能讀到高潮。你的觀點(diǎn)有多連貫和一致,這將決定你故事的線性流程。交叉引用或任何干擾都會(huì)打亂流程。即使你正在為你的訪客們推廣一條線性路徑,但是也不要忘記為其他可選擇的項(xiàng)目提供一個(gè)附屬選項(xiàng)。總有一些人會(huì)選擇很少有人走的路。

決定在于內(nèi)容的廣度,就像沉浸感是內(nèi)容的深度。最大的問(wèn)題是你希望你的主頁(yè)有多寬和多深。
作者:三分設(shè)
鏈接:https://www.zcool.com.cn/article/ZMTQyOTQxNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(363858.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

日歷

鏈接

個(gè)人資料

存檔