首頁

情緒版設(shè)計(jì)-助你打開設(shè)計(jì)創(chuàng)意

ui設(shè)計(jì)分享達(dá)人

1.情緒版的概念

首先我們要明確什么是情緒版?我的理解是:情緒版既不是初稿也不是最終的風(fēng)格方向,而是設(shè)計(jì)師在了解了相關(guān)的產(chǎn)品背景后,基于自己對(duì)于產(chǎn)品的理解給出的一個(gè)較為初始的設(shè)計(jì)建議,并且希望可以通過這個(gè)初始的建議與產(chǎn)品側(cè)達(dá)成一些相關(guān)的設(shè)計(jì)共識(shí)。

 

2.情緒版的大概流程

情緒版的設(shè)計(jì)流程大概分為前中后三個(gè)階段,前期:分析-收集,中期:篩選-組合,后期:打磨-呈現(xiàn)。

 

前期:分析-收集

主要是分析產(chǎn)品相關(guān)背景或需求本身的方向,結(jié)合產(chǎn)品背景及需求本身再進(jìn)一步分析大概的設(shè)計(jì)方向并收集相關(guān)素材內(nèi)容。

 

中期:篩選-組合

當(dāng)我們收集完成后需要對(duì)現(xiàn)有素材進(jìn)行二次篩選并組合,基于現(xiàn)有素材組合大概的設(shè)計(jì)方案結(jié)構(gòu)。

 

后期:打磨-呈現(xiàn)

基礎(chǔ)方案組合完成后需要進(jìn)行二次打磨,細(xì)化方案的內(nèi)容表現(xiàn),檢查整體的一致性及完整度,最后呈現(xiàn)給產(chǎn)品方。

 

3.為什么要做情緒版

可能很多設(shè)計(jì)師會(huì)疑惑為什么要做情緒版,直接設(shè)計(jì)初稿不就好了嗎?如果有這個(gè)疑問,可能還沒實(shí)際了解到情緒版到作用。但我們可以試著從我們?cè)谠O(shè)計(jì)過程中遇到的痛點(diǎn)來了解情緒版的作用或者意義。

在設(shè)計(jì)的過程中你是否會(huì)存在下面幾個(gè)問題:

前期思考不夠——設(shè)計(jì)產(chǎn)出方案少;

設(shè)計(jì)不懼探索性——設(shè)計(jì)來源沒有考究;

初稿多次修改沒能達(dá)成共識(shí)——設(shè)計(jì)表達(dá)不出對(duì)方想要的;

設(shè)計(jì)中期出現(xiàn)不一致——設(shè)計(jì)沒有貫徹始終。

 

4.情緒版的作用

從這幾個(gè)問題中,我們可以得到一個(gè)比較統(tǒng)一的結(jié)論就是:前期設(shè)計(jì)呈現(xiàn)內(nèi)容不夠,導(dǎo)致溝通不足而產(chǎn)生方向不統(tǒng)一。因此基于這個(gè)關(guān)鍵點(diǎn),我們?cè)賮砜辞榫w版的作用

 

(1)輔助構(gòu)建世界觀

在前期,世界觀、背景方面的內(nèi)容大多是以文字的方式呈現(xiàn),因此設(shè)計(jì)師可以通過情緒版的方式,來輸出對(duì)應(yīng)的世界觀設(shè)計(jì)表現(xiàn),這樣可以更加直觀的表現(xiàn)出對(duì)應(yīng)的視覺語言。

 

(2)具象設(shè)計(jì)想法

在初期與產(chǎn)品側(cè)溝通時(shí),單純靠語言表達(dá)的方式很難讓對(duì)方達(dá)到一種腦補(bǔ)的狀態(tài)。因此借助情緒版的方式更加直觀的呈現(xiàn)設(shè)計(jì)想法,通過具象的圖形或者圖形,大大降低雙方的溝通成本。

 

(3)明確設(shè)計(jì)方向

基于第二點(diǎn)的溝通,我們可以明確的了解到產(chǎn)品側(cè)的一些喜好。為后續(xù)設(shè)計(jì)初稿時(shí)起到一個(gè)清晰的方向作用。

 

(4)提高前期設(shè)計(jì)的效率

從零到一設(shè)計(jì)一套完整的方案往往需要耗費(fèi)較長的時(shí)間,借助情緒版設(shè)計(jì)的方式來快速響應(yīng)一些想法及創(chuàng)意,這樣可以大大提高前期的輸出效率。

 

5.情緒版的基本原則

從多次的嘗試中,我總結(jié)梳理了幾個(gè)基本原則,了解這些原則可以讓我們?cè)谧龅臅r(shí)候更加嚴(yán)謹(jǐn),輸出更加準(zhǔn)確的設(shè)計(jì)方案。

 

(1)多方向性

情緒版的設(shè)計(jì)與我們?nèi)粘TO(shè)計(jì)一樣,需要給出不同的方向建議,單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外,還可以增加方案碰撞的情況,往往可能是方案A的某部分內(nèi)容疊加方案B的某部分內(nèi)容才能產(chǎn)生最初的方向。

 

(2)嘗試性

此階段的所有輸出皆屬于嘗試與探索,因此不必過于考究設(shè)計(jì)細(xì)節(jié),重點(diǎn)在于表達(dá)出需要相關(guān)的設(shè)計(jì)概念及思考想法,把更多的時(shí)間留作設(shè)計(jì)思考及方案嘗試。

 

(3)效率性

情緒版的輸出重點(diǎn)在于前期溝通而達(dá)到一個(gè)比較好的共識(shí),因此在保證質(zhì)量的情況下,避免花費(fèi)過多的時(shí)間而影響輸出的效率性。盡量做到快與準(zhǔn)。在過往中項(xiàng)目組,基本上是以半天(4個(gè)小時(shí)左右)為一個(gè)單位來完成一套方案。

 

(4)試探性

情緒版是一種非常有效試探產(chǎn)品側(cè)想要往那種方向去推動(dòng)的方式,因?yàn)槲覀冊(cè)趯?shí)際的設(shè)計(jì)過程中,產(chǎn)品側(cè)可能也對(duì)整體的設(shè)計(jì)大調(diào)并不少特別有明確的腦補(bǔ),因此設(shè)計(jì)師可以借助情緒版的設(shè)計(jì)來挖掘產(chǎn)品側(cè)想要往哪個(gè)方向進(jìn)行發(fā)力。

 

6.情緒版設(shè)計(jì)的方法

這里總結(jié)情緒版的設(shè)計(jì)方法大概有這幾種:1.借助圖像/插圖、2.結(jié)合實(shí)際場景引申、3.借鑒摘取同類型設(shè)計(jì)、4.繪制草稿。

 

(1)借鑒圖像/插圖

在我們?cè)O(shè)計(jì)一些專題活動(dòng)或者繪制插圖相關(guān)的一些設(shè)計(jì)時(shí),可以考慮使用這種方法來輸出你的情緒版設(shè)計(jì),可以通過借鑒一些設(shè)計(jì)網(wǎng)站或插圖網(wǎng)站上的現(xiàn)有素材來拼接,并表達(dá)自己在這方法的一些設(shè)計(jì)意圖及想法。

 

(2)結(jié)合實(shí)際場景引申

從更概念化的角度出發(fā),通過引用一些實(shí)際場景、物品、圖像,來拓展相關(guān)的圖形、質(zhì)感、色彩方面的設(shè)計(jì),并且輸出相關(guān)的設(shè)計(jì)雛形。例如我們?cè)谠O(shè)計(jì)LOGO或者圖形類的一些設(shè)計(jì),使用這種方法就可以幫助我們突破一些現(xiàn)有的認(rèn)知壁壘。

 

(3)借鑒摘取同類型設(shè)計(jì)

在設(shè)計(jì)之初,我們通常會(huì)有一個(gè)大概的思考雛形,但如果直接開始設(shè)計(jì)往往效率上并不高。因此可以借助一些設(shè)計(jì)網(wǎng)站上的設(shè)計(jì),通過摘取組合的方式呈現(xiàn)自己的初步想法。我通常會(huì)在UI新版或者改版的時(shí)候使用這種方式,但只能表達(dá)大概的想法且不能代表最終的初稿設(shè)計(jì)。

 

(4)繪制草稿

當(dāng)我們想要表達(dá)一些溝通或者框架的設(shè)計(jì)時(shí),我們可以使用草稿繪制的方式來表現(xiàn),這個(gè)方式簡單快捷,可以很有效率的對(duì)齊大部分的設(shè)計(jì)共識(shí)。

 

7.情緒版設(shè)計(jì)的注意事項(xiàng)

基于原則及方法,我們可以來簡單了解下情緒版設(shè)計(jì)中需要注意的一些事項(xiàng),通過這些內(nèi)容讓你在實(shí)際操作過程中少踩一些坑。

 

(1)控制方案的數(shù)量

設(shè)計(jì)方案控制在2-3個(gè)左右即可,前期大多是屬于試探性方案呈現(xiàn)及找方向,太多則容易導(dǎo)致選擇困難。

 

(2)避免篇幅過長

篇幅過長往往容易降低別人閱讀的耐心,對(duì)于情緒版的輸出也是如此。結(jié)合過往的經(jīng)驗(yàn),建議以16:9的畫面為一頁來呈現(xiàn)一個(gè)方案。

 

(3)區(qū)分重點(diǎn)次要

在一頁內(nèi)呈現(xiàn)的方案避免過于平均,可以適當(dāng)突出某些想要重點(diǎn)表達(dá)的內(nèi)容,例如在這個(gè)方案中想要重點(diǎn)突出圖標(biāo)、顏色等,那么這里需要突出這部分在畫面中的比例,適當(dāng)縮小其他模塊的尺寸。

 

(4)結(jié)合世界觀

在輸出情緒版設(shè)計(jì)方案時(shí)還可以適當(dāng)考慮結(jié)合產(chǎn)品的世界觀,通過一些具象化的圖形或者插圖來表現(xiàn)相關(guān)的內(nèi)容。例如我們之前在游戲中心改版的嘗試中,就發(fā)散了幾個(gè)相關(guān)的世界觀,因此我們?cè)谳敵龇桨笗r(shí),則只需要把對(duì)應(yīng)的世界觀作為方案,通過情緒版的方式表現(xiàn)出來即可。

 

(5)保持整體風(fēng)格一致性

一致性是表現(xiàn)一個(gè)設(shè)計(jì)師是否具有系統(tǒng)化、全局觀的思考思維,因此我們?cè)诒憩F(xiàn)情緒版時(shí)也需要關(guān)注這方面的內(nèi)容,避免整體的調(diào)性不匹配。

 

(6)完整性表達(dá)

在呈現(xiàn)方案時(shí),盡量多維度的進(jìn)行對(duì)比,呈現(xiàn)一個(gè)完整性、系統(tǒng)性的設(shè)計(jì)。例如我們?cè)谠O(shè)計(jì)UI相關(guān)的內(nèi)容,從圖標(biāo)、顏色、字體等等一系列的內(nèi)容需要細(xì)致的闡述清楚,讓人更加能夠了解你的意圖。

 

8.UI情緒版模版分享

由于我日常以設(shè)計(jì)UI為主,因此可以給大家重點(diǎn)分享我在UI情緒版設(shè)計(jì)的經(jīng)驗(yàn)。希望可以幫助到大家快速上手。

當(dāng)你在做UI設(shè)計(jì)情緒版時(shí),需要明確了解UI設(shè)計(jì)中的結(jié)構(gòu),更系統(tǒng)性的去思考整體的內(nèi)容。我們?cè)赨I設(shè)計(jì)中往往需要包含以下這些內(nèi)容:圖形系統(tǒng)(圖標(biāo)+輔助圖形)、顏色系統(tǒng)、字體字形系統(tǒng)、質(zhì)感形態(tài)、界面形態(tài)、插圖風(fēng)格、動(dòng)效系統(tǒng)、影像系統(tǒng),等等這些部分的內(nèi)容。

 

UI情緒版模版

 

過往實(shí)際案例分享

案例一:整體風(fēng)格比較偏個(gè)性一些,頁面嘗試用深色的背景設(shè)計(jì)

優(yōu)點(diǎn):整體風(fēng)格比較酷,配色比較未來感符合年輕的人的審美,深色的背景讓內(nèi)容更加聚焦。

缺點(diǎn):深色的設(shè)計(jì)接受度是否可以,是否適合平臺(tái)類APP設(shè)計(jì)

 

案例二:整體風(fēng)格3D化的設(shè)計(jì),包括頁面的一些體驗(yàn)上都可以增加視察的效果來設(shè)計(jì)

優(yōu)點(diǎn):整體設(shè)計(jì)風(fēng)格比較新穎,符合現(xiàn)在的設(shè)計(jì)趨勢,整體感覺也比較年輕多彩

缺點(diǎn):3D的制作成本相對(duì)較大。

 

案例三:整體風(fēng)格比較清爽,白色融入漸變的設(shè)計(jì)也會(huì)顯得比較年輕

優(yōu)點(diǎn):整體頁面清爽,可以滿足任何內(nèi)容的透出,漸變色的圖標(biāo)和按鈕的設(shè)計(jì)補(bǔ)充了細(xì)節(jié)

缺點(diǎn):整體氛圍感、娛樂感較弱。

 

9.最后總結(jié)

很多時(shí)候我們會(huì)覺得情緒版設(shè)計(jì)可有可無,或者因?yàn)闀r(shí)間的關(guān)系不允許我們經(jīng)過這一步。但,如我一開始提到的點(diǎn),情緒版可以在前期幫助我們?nèi)ゴ蛲ê芏嗨伎嫉谋趬?,輔助設(shè)計(jì)師在前期直觀的與產(chǎn)品側(cè)進(jìn)行方向上的探討,從而找到大方向上的共識(shí)。


文章來源:學(xué)UI網(wǎng)   作者:妙妙

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


B2B用戶畫像的創(chuàng)建與使用

ui設(shè)計(jì)分享達(dá)人

01 什么是用戶畫像(what)

02 B2B用戶畫像的特色(what)

03 為什么要構(gòu)建B2B用戶畫像(why)

04 如何構(gòu)建B2B用戶畫像(how)

05 B2B用戶畫像的傳播與使用(how)

本文嘗試通過what-why-how的結(jié)構(gòu),結(jié)合自己的工作做一些實(shí)踐,和大家分享下B2B用戶畫像的整體概念框架以及構(gòu)建方法。出于對(duì)我司數(shù)據(jù)的保密,無法直接分享給大家細(xì)粒度且對(duì)應(yīng)的數(shù)據(jù),所以分享過程中我會(huì)結(jié)合業(yè)界和其他前輩在網(wǎng)上分享的內(nèi)容和數(shù)據(jù)作為案例,如有不足和錯(cuò)誤之處,還望大家批評(píng)指正。

 

那在講B2B用戶畫像之前,我想先來說說用戶畫像的概念,在看一些文章時(shí)發(fā)現(xiàn)有些作者混淆了用戶畫像的兩種概念??赡芎芏嗳藳]有注意到,用戶畫像這個(gè)詞包含了2種不同的含義,一種是User Persona,一種Use Profile。

 

1.1 User Persona

User Persona是對(duì)一個(gè)用戶群體的整體抽象。這一概念最早源于交互設(shè)計(jì)領(lǐng)域,是Alan Cooper在《About Face:交互設(shè)計(jì)精髓》一書中提到的研究用戶的系統(tǒng)化方法?!摆A在用戶”這本書將其翻譯為“人物角色”,目前業(yè)內(nèi)使用“用戶畫像”這個(gè)術(shù)語。表達(dá)的意思一樣,是真實(shí)用戶的虛擬代表,是在深刻理解真實(shí)數(shù)據(jù)的基礎(chǔ)上得出的一個(gè)的虛擬用戶。

  • 研究方法:定量+定性研究,更注重的是定性的研究;
  • 畫像用途產(chǎn)品&交互&設(shè)計(jì)使用,是他們了解用戶目標(biāo)和需求、與開發(fā)團(tuán)隊(duì)及相關(guān)人交流、避免設(shè)計(jì)陷阱的重要工具;
  • 研究方向:更深和細(xì),會(huì)更為深入的去挖掘底層用戶的動(dòng)機(jī)、原因、動(dòng)機(jī)、欲望、痛點(diǎn)等屬性,Persona幫助我們了解why產(chǎn)品的用戶為什么會(huì)有這個(gè)行為。

 

1.2 User Profile

User Profile是對(duì)每一個(gè)個(gè)體的畫像,是在產(chǎn)品用戶量有一定規(guī)模以后進(jìn)行的。利用用戶的行為數(shù)據(jù)或者填報(bào)的資料進(jìn)行的用戶屬性標(biāo)簽提取,更多被運(yùn)營和數(shù)據(jù)分析師使用,它是各類描述用戶數(shù)據(jù)的變量集合。在大數(shù)據(jù)時(shí)代,企業(yè)通過對(duì)海量數(shù)據(jù)信息進(jìn)行清洗、聚類、分析,將數(shù)據(jù)抽象成標(biāo)簽,再利用這些標(biāo)簽將用戶形象具體化的過程。

  • 研究方法:偏向于定量研究與數(shù)據(jù)分析;
  • 畫像用途:主要運(yùn)營&市場使用,個(gè)性化推薦、廣告系統(tǒng)、活動(dòng)營銷、內(nèi)容推薦、興趣偏好都是基于用戶畫像的應(yīng)用,比如說我們通??吹胶芏嗑W(wǎng)站,千人千面,其實(shí)也是User Profile 精細(xì)化運(yùn)營的結(jié)果;
  • 研究方向:更廣和全,更多的是研究人的基礎(chǔ)屬性、社會(huì)屬性和行為習(xí)慣,更關(guān)注的相關(guān)性的數(shù)據(jù)分析和挖掘。幫助我們了解what產(chǎn)品為誰而設(shè)計(jì)。

兩類畫像的對(duì)比如下圖:

明確了兩種畫像的區(qū)別,那本文我們就重點(diǎn)談?wù)?strong>User Persona類型的B2B用戶畫像(后續(xù)文中簡稱“用戶畫像”)。至于User Profile,比較適合用戶體量大的產(chǎn)品,而B端產(chǎn)品除了頭部企業(yè),很難達(dá)到這個(gè)量級(jí),無疑用User Persona更合適,本文就不再贅述。

 

不管是B2B還是B2C產(chǎn)品也好,不論是商業(yè)層面上(比如在資源有限情況下聚焦關(guān)鍵用戶類型)、或是在產(chǎn)品層面上(更好理解用戶想要什么,確定功能的范圍和優(yōu)先級(jí)),建立用戶畫像的本質(zhì)都是為了輔助一些決策。

不同之處在于C端面向的是大量且分散的個(gè)人用戶,用戶畫像的主要目的是把用戶聚類,更好的了解不同類型用戶的特點(diǎn)和偏好。而B端產(chǎn)品,面向的是企業(yè)級(jí)用戶,滿足的是企業(yè)的管理或經(jīng)營需求,關(guān)注的是成本和效率。畫像的目的是針對(duì)業(yè)務(wù)不同環(huán)節(jié)中、具有類似任務(wù)的用戶進(jìn)行更立體、豐富的需求整理和挖掘,往往和角色相關(guān)。

其決定了B2B用戶畫像的幾個(gè)特點(diǎn):

 

2.1 受企業(yè)生命周期的影響

伊查克·愛迪思(IchakAdizes)提出了企業(yè)生命周期理論,企業(yè)的發(fā)展大致有初創(chuàng)期、成長期、成熟期和衰退期四個(gè)階段。不同階段的企業(yè),其組織形態(tài)、關(guān)注點(diǎn)、管理方式等都會(huì)有所不同,產(chǎn)品需求側(cè)重點(diǎn)不同,用戶畫像的方向和調(diào)研方式也會(huì)有不同。

初創(chuàng)期:產(chǎn)品立項(xiàng)階段

這個(gè)階段往往指的是公司剛成立,此時(shí)產(chǎn)品、企業(yè)文化尚未成形,處于客戶積累階段,較為關(guān)注引流。需要通過用戶畫像定位細(xì)分市場、產(chǎn)品模式及功能,這個(gè)階段需做定性調(diào)研了解目標(biāo)用戶,初步形成用戶畫像為需求做底層支撐,這個(gè)階段的用戶畫像顆粒度可以粗些,旨在幫助團(tuán)隊(duì)快速就“我們的用戶是誰”達(dá)成共識(shí)。

 

成長期:產(chǎn)品運(yùn)營中(已有數(shù)據(jù)積累)

這個(gè)時(shí)候產(chǎn)品已有demo或已上線迭代,產(chǎn)品處于完善、升級(jí)的階段??墒褂谩?strong>數(shù)據(jù)挖掘+定量篩選+定性豐富”的方式,結(jié)合項(xiàng)目的已有數(shù)據(jù),使用定量篩選用戶,做大量微觀且具體的用戶調(diào)研,基于后臺(tái)、第三方平臺(tái)監(jiān)控發(fā)現(xiàn)問題,定位問題關(guān)鍵及原因分析,優(yōu)化產(chǎn)品功能及運(yùn)營模式,再通過調(diào)研訪談了解具體的行為細(xì)節(jié)和態(tài)度。該階段的用戶畫像可用來驗(yàn)證問題、完善或發(fā)現(xiàn)新的機(jī)會(huì)點(diǎn)。

 

成熟期:產(chǎn)品相對(duì)穩(wěn)定

客戶資源相對(duì)穩(wěn)定,可能已有一定的規(guī)模,內(nèi)部管理需求增長,市場地位趨于穩(wěn)定,日常工作也大多以維護(hù)為主。且現(xiàn)有增長點(diǎn)已遇上了瓶頸,用戶活躍將不可阻逆地緩慢下降,即使你做再多產(chǎn)品優(yōu)化、燒錢運(yùn)營都無法改變產(chǎn)品終將走向衰退的命運(yùn),時(shí)間問題。企業(yè)急于尋找突破口和新的增長點(diǎn),用戶畫像又將被賦予新的使命:基于用戶畫像進(jìn)行“新增長點(diǎn)”的分析,定性挖掘藍(lán)海,再定量進(jìn)行驗(yàn)證。

 

衰退期:產(chǎn)品活躍度快速下降

進(jìn)入到這個(gè)階段,說明產(chǎn)品沒有成功轉(zhuǎn)型。這時(shí)候再做用戶畫像的意義其實(shí)不大,如果一定要做,除了提高回流率、挖掘增長點(diǎn)外,可以定性了解原因,調(diào)整產(chǎn)品。

 

2.2 產(chǎn)品使用角色多樣性

不同于C端產(chǎn)品的的用戶單一性,B端產(chǎn)品的用戶畫像對(duì)應(yīng)的不是一個(gè)個(gè)體,而是一個(gè)組織或機(jī)構(gòu),同時(shí)涵蓋組織機(jī)構(gòu)中不同的人員。產(chǎn)品面向的使用對(duì)象可能從普通員工到企業(yè)高層,覆蓋銷售、技術(shù)、行政人事部分等,基于工作場景不一樣,對(duì)產(chǎn)品的需求可能也大相徑庭。

以一個(gè)CRM系統(tǒng)為例,一個(gè)復(fù)雜的B端產(chǎn)品可能會(huì)涉及以下四種角色的用戶:決策者、主要使用者、次要使用者、間接使用者。如下圖所示:

決策者:下決策購買產(chǎn)品或服務(wù)的人,可能是業(yè)務(wù)線負(fù)責(zé)人,也可能是公司董事長、CEO,他們常常不是產(chǎn)品的使用者,使用頻次低甚至完全不用,他們通常都是從公司的整體利益出發(fā),更關(guān)注產(chǎn)品能否給公司業(yè)務(wù)帶來幫助,降本還是提效了。其評(píng)價(jià)某個(gè)功能的好壞,往往與使用者的感受是相悖的,如釘釘?shù)摹癉ING一下”,他們并不太關(guān)注使用過程、體驗(yàn),更關(guān)注產(chǎn)品的核心價(jià)值,將利益最大化。

滿足決策者的需要是做好B端產(chǎn)品的前提,也是制作用戶畫像所要明確的方向;很多體驗(yàn)做的不好、難看的產(chǎn)品之所以也能在B端市場有一席之地,就是因?yàn)闈M足了企業(yè)的需要。比較理想的情況下,團(tuán)隊(duì)對(duì)目標(biāo)客群有一定深入的研究,形成趨于標(biāo)準(zhǔn)化的產(chǎn)品,就能打動(dòng)目標(biāo)客戶群的大部分決策者。

主要使用者:真正頻繁使用產(chǎn)品的人,也是產(chǎn)品/設(shè)計(jì)師想要提升產(chǎn)品體驗(yàn)要瞄準(zhǔn)的人群

他們可能更關(guān)注產(chǎn)品的具體使用,是不是易用,有沒有幫助他們更便捷地完成工作,有沒有提高他們的工作效率。主要使用者是最容易識(shí)別的,以CRM系統(tǒng)為例,如果沒有銷售日常在系統(tǒng)中錄入客戶數(shù)據(jù),管理層就無法查看成單量、進(jìn)度等他們所關(guān)注的信息。

次要使用者:使用產(chǎn)品頻率相對(duì)主要使用者更低,用到的功能也比較少,只在某個(gè)中間流程涉及少量操作。如CRM系統(tǒng)中人事、財(cái)務(wù)會(huì)涉及到其中錢或出差的審批對(duì)他們而言,主要需求是能快速找到自己的任務(wù)并完成就可以了。

間接使用者:不直接使用產(chǎn)品但會(huì)被產(chǎn)品影響的人群,產(chǎn)品和設(shè)計(jì)師在設(shè)計(jì)過程如果有資源和精力能兼顧他們的需求和體驗(yàn),那就太貼心了。如審計(jì)、政府人員,屬于不緊急,非必要需求。

 

2.3 崗位職責(zé)決定了用戶目標(biāo)和使用場景

B端用戶使用場景多和業(yè)務(wù)形態(tài)密切相關(guān),產(chǎn)品通常要解決的是某類角色工作時(shí)發(fā)生的問題,所以不同于C端用戶畫像,從用戶視角出發(fā),關(guān)注用戶個(gè)人的場景、訴求、痛點(diǎn)和情緒,核心是滿足用戶的需求,關(guān)注用戶的年齡、性別、收入、個(gè)性、習(xí)慣、消費(fèi)模式等標(biāo)簽。

但是在B端產(chǎn)品中,我們拋開了用戶作為個(gè)人存在的標(biāo)簽,我們更關(guān)注用戶所代表的角色,他的崗位職責(zé)是什么,它在工作場景中需要完成哪些任務(wù),這些任務(wù)要做什么的,其崗位職責(zé)決定了它完成任務(wù)的目標(biāo)、場景、使用什么工具去,需要跟其他角色配合嗎等信息。

所以B2B畫像更關(guān)注角色的分類、工作/使用場景、用戶目標(biāo)、操作鏈路、角色協(xié)同等信息,很難看到類似這個(gè)人是不是已婚,小孩多大這些不知道如何應(yīng)用于產(chǎn)品設(shè)計(jì)的內(nèi)容。而在一個(gè)C端產(chǎn)品用戶畫像上很少看到有哪些讓他壓力山大的KPI等信息。

仍然以CRM系統(tǒng)為例,其主要使用者-銷售的目標(biāo)就是用該系統(tǒng)錄入商機(jī)、線索等,然后根據(jù)數(shù)據(jù)情況制定客戶溝通回訪計(jì)劃等,聚焦的是該系統(tǒng)能否讓他很好的履行了其崗位責(zé)任。和他這個(gè)人在哪個(gè)城市、已婚未婚等個(gè)人特性是無關(guān)的。

 

2.4 由客戶畫像和角色畫像構(gòu)成

B2B產(chǎn)品面向的是企業(yè)用戶,滿足的是產(chǎn)業(yè)鏈中各企業(yè)的經(jīng)營需求,這時(shí)B2B畫像應(yīng)該具備行業(yè)、客戶屬性這一維度;但是最終購買者、使用者都是企業(yè)中的某一角色,這決定了B2B畫像還有角色這一維度。所以,小編認(rèn)為,B2B用戶畫像是企業(yè)和多個(gè)核心角色共同構(gòu)成的畫像,建立B2B畫像,需要客戶(企業(yè))畫像和角色畫像兩部分的信息。

 

1)客戶畫像

客戶畫像指的是使用B端產(chǎn)品或服務(wù)的企業(yè)用戶,具有行業(yè)特征、企業(yè)特征及角色特征。其的目標(biāo)是促成銷售,主要用來幫助銷售/運(yùn)營人員他們快速定位目標(biāo)企業(yè),幫助他們更好的認(rèn)識(shí)我們客戶是什么樣的人,讓他們的工作更有方向。

一個(gè)典型的客戶色畫像會(huì)包括:

基本信息:外在的標(biāo)簽,如所處行業(yè)、地域、人員規(guī)模、收入規(guī)模(年?duì)I業(yè)額)

業(yè)務(wù)模式:線下的實(shí)際業(yè)務(wù)流程-視行業(yè)而定,如商業(yè)模式(靠什么賺錢)、業(yè)務(wù)模式(業(yè)務(wù)怎么運(yùn)作)

組織機(jī)構(gòu):自上而下都有哪些機(jī)構(gòu),彼此之間的關(guān)系。

關(guān)鍵角色:各個(gè)機(jī)構(gòu)里有哪些崗位/工種,決策鏈上有哪些角色、誰才是有價(jià)值的關(guān)鍵角色,角色話語權(quán)。企業(yè)的關(guān)鍵決策人隨企業(yè)大小而不同,一般中小型企業(yè)都是老板、合伙人等。而大型企業(yè)采購B端軟件都是需要經(jīng)過內(nèi)部流程的,最終審核人是老板,但其中影響決策最大的往往是商務(wù)經(jīng)理負(fù)責(zé)人。

 

2)角色畫像

B端產(chǎn)品雖然面向企業(yè),但是最終使用執(zhí)行的還是人,這些執(zhí)行層(終端使用者)也是產(chǎn)品的檢驗(yàn)者。在企業(yè)決定購買產(chǎn)品之前,執(zhí)行層沒有話語權(quán),但是在續(xù)費(fèi)的時(shí)候,他們的話語權(quán)比重會(huì)開始顯著提升。

因此在我們的產(chǎn)品設(shè)計(jì)階段,會(huì)更關(guān)注執(zhí)行層的角色畫像。當(dāng)我們討論產(chǎn)品、需求、場景、用戶體驗(yàn)的時(shí)候,往往需要將焦點(diǎn)聚集在這類人群上。

一個(gè)典型的角色畫像會(huì)包括:

基本信息:如角色名稱、照片、角色/工種、平臺(tái)偏好、文化水平、辦公場地、使用頻次,角色名稱以及照片是為了更有代入感的個(gè)人情況說明,但值得注意的是,這里的情況更多圍繞職業(yè)情況展開,比如工作年限,工作職責(zé),能力維度等,那些在C端中常見的家庭情況,幾個(gè)孩子什么的統(tǒng)統(tǒng)不重要。

用戶行為驅(qū)動(dòng):用戶的工作目標(biāo)、工作任務(wù)和考核指標(biāo),B端角色通常是企業(yè)員工,為了薪酬,有一般都會(huì)有結(jié)合任務(wù)而完成的考核指標(biāo),了解考核指標(biāo)可以在設(shè)計(jì)過程中更明確知道哪些內(nèi)容是用戶最關(guān)注的東西;

使用場景:工作的時(shí)間、地點(diǎn)及工作內(nèi)容是什么,使用場景是重要但容易被忽略的一個(gè)內(nèi)容,尤其要搞清楚使用產(chǎn)品的場景有哪些、用戶平時(shí)的工作流程是如何的、主要使用什么功能??捎靡粋€(gè)真實(shí)、普遍、易懂的故事勾勒一下

使用期望:日常工作面臨的挑戰(zhàn)和痛點(diǎn),期望獲得的幫助。

角色畫像和客戶畫像之間沒有直接關(guān)系。因?yàn)槟繕?biāo)不同,所以會(huì)有不同的用戶細(xì)分:客戶畫像的目標(biāo)是成銷售,獲取利益;角色畫像是為了解決問題和為用戶創(chuàng)造價(jià)值,進(jìn)一步為公司創(chuàng)造價(jià)值。但是在刻畫B2B用戶畫像時(shí),如果只考慮執(zhí)行者的話,沒有客戶畫像作為指引、摸清決策者的特征與行為,你的產(chǎn)品功能或者體驗(yàn)設(shè)計(jì)上可能就會(huì)出現(xiàn)嚴(yán)重偏差,甚至方向錯(cuò)誤。

3.1 客戶畫像的價(jià)值

產(chǎn)品和服務(wù)只是企業(yè)將價(jià)值傳遞給客戶的一種工具和媒介,無論產(chǎn)品形態(tài)如何,其本質(zhì)都是在解決客戶的問題。如果沒法滿足客戶的業(yè)務(wù)需求,基本上該產(chǎn)品對(duì)客戶是沒有價(jià)值的??蛻舢嬒褡饔秘灤┊a(chǎn)品生命全周期,產(chǎn)品/市場/銷售較為關(guān)注,它的價(jià)值主要體現(xiàn)有三點(diǎn):

對(duì)產(chǎn)品:明確為誰服務(wù),快速的了解客戶的需求和狀況,確定產(chǎn)品功能設(shè)計(jì),學(xué)會(huì)識(shí)別用戶的解決方案和用戶在場景下的訴求,不斷迭代調(diào)整產(chǎn)品;

對(duì)市場/運(yùn)營人員:建立對(duì)客戶盡量全面的了解并基于客戶畫像確定營銷內(nèi)容、營銷策略和渠道選擇,使產(chǎn)品的服務(wù)對(duì)象更聚焦;

對(duì)銷售人員:幫助銷售進(jìn)行客戶篩選,找到有效客戶,提高轉(zhuǎn)化率,確定業(yè)務(wù)方向和銷售打法。合理配置團(tuán)隊(duì),完成KPI。

客戶畫像越早建立越好,但是務(wù)必注意控制深度和成本,因?yàn)椴煌A段的企業(yè)其側(cè)重點(diǎn)有所不同。在初創(chuàng)期,產(chǎn)品團(tuán)隊(duì)可以通過關(guān)注典型客戶來積累定性數(shù)據(jù),從而低成本搭建客戶畫像;而到了成長期和成熟期,在擁有大量客戶數(shù)據(jù)的前提下,企業(yè)可以逐漸過渡到使用定性&定量相結(jié)合的方式來形成更為清晰的客戶畫像。

 

3.2 角色畫像的價(jià)值

以前業(yè)界有種說法,做B端,能用是第一位,用戶體驗(yàn)不重要。所以除了一些成規(guī)模的SaaS公司,設(shè)計(jì)師在B端幾乎無用武之地,成了組件化的搬運(yùn)工、工具人。所以大部分的企業(yè)在跑馬圈地時(shí)期是不注重用戶體驗(yàn)的,企業(yè)有客戶畫像,卻未必有角色畫像。

還說用戶體驗(yàn)不重要的人,可以看看有贊CEO白鴉的公開說明。

圖片來源于網(wǎng)絡(luò)

2020年,疫情為企業(yè)級(jí)SaaS帶來流量,在今年2月宣布延期復(fù)工后,釘釘搜索量激增數(shù)倍,無論中大型企業(yè)還是小微企業(yè)都紛紛加入了遠(yuǎn)程辦公的行列,協(xié)同辦公SaaS獲得了大量的“試用客戶”,加快了市場激活的進(jìn)程,但接下來,流量轉(zhuǎn)化和用戶留存成為后疫情時(shí)代的核心關(guān)注點(diǎn)。

后疫情時(shí)代,對(duì)企業(yè)來說,改善產(chǎn)品用戶體驗(yàn),了解使用產(chǎn)品的終端用戶,構(gòu)建角色畫像愈加重要。而角色畫像作為產(chǎn)品和設(shè)計(jì)師比較關(guān)注的畫像,有以下三點(diǎn)價(jià)值

設(shè)計(jì)前:幫助確立設(shè)計(jì)目標(biāo)、設(shè)計(jì)策略與準(zhǔn)則

設(shè)計(jì)中:解決架構(gòu)混亂問題,明確需求功能的合理性和優(yōu)先級(jí);解決需求爭議問題和溝通問題,與團(tuán)隊(duì)成員就服務(wù)目標(biāo)達(dá)成共識(shí),

設(shè)計(jì)后:解決可用性測試問題,幫助我們鎖定合適的測試用戶;

總結(jié)一下就是角色畫像是產(chǎn)品的根基,客戶畫像是產(chǎn)品的外延生命力的象征,兩者相輔相成。

 

對(duì)于這個(gè)章節(jié)。我將以我所負(fù)責(zé)的一款企業(yè)產(chǎn)品為例,來講述用戶畫像的創(chuàng)建過程。在這個(gè)項(xiàng)目中我們通過定性研究創(chuàng)建了用戶畫像,當(dāng)然如果必要,大家也可以在后期再通過定量研究對(duì)得到的用戶畫像進(jìn)行驗(yàn)證。

用戶畫像的創(chuàng)建可分為以下幾個(gè)步驟:

 

Step 1:研究準(zhǔn)備與數(shù)據(jù)收集

B端用研和C端有一點(diǎn)不同,企業(yè)用戶的使用場景基于業(yè)務(wù),背景復(fù)雜、角色多樣、使用工具特殊(如企業(yè)自有后臺(tái)系統(tǒng))等,導(dǎo)致無法在可用性實(shí)驗(yàn)室中切實(shí)地模擬出來,所以我們得接近用戶、基于業(yè)務(wù)場景去了解用戶。

小編大致總結(jié)了一下,B端用研有以下3大痛點(diǎn):

信息獲取難:B端產(chǎn)品主要針對(duì)用戶工作和業(yè)務(wù)開展,一般都是強(qiáng)制使用產(chǎn)品不存在“挑剔”的選擇空間,導(dǎo)致用戶的反饋就非常少,信息的獲取壁壘較高?!吧疃仍L談”是最核心也是獲取信息性價(jià)比最高的一種方法,但是出于對(duì)信息用途的不了解,對(duì)商業(yè)隱私、生意經(jīng)驗(yàn)泄露的擔(dān)憂,B端用戶可能不愿意配合調(diào)研或不信任你。

業(yè)務(wù)復(fù)雜:缺乏行業(yè)經(jīng)驗(yàn),難以理解業(yè)務(wù),這會(huì)讓用研對(duì)象覺得你不專業(yè),仿佛雞同鴨講、對(duì)牛談琴。而且在不理解業(yè)務(wù)的情況下,設(shè)計(jì)師在訪談過程中會(huì)過于關(guān)注基礎(chǔ)業(yè)務(wù),無法進(jìn)行更深層次的訪談,采集的信息并非用戶的真正需求。

視角不同:設(shè)計(jì)師視角容易缺乏框架性思考,搞不清每個(gè)業(yè)務(wù)模塊/功能的邊界以及它們之間的關(guān)系,不能站在用戶(決策者、使用者)的角度思考問題,以至于被用戶牽著鼻子走,用戶說什么就是什么,能和用戶產(chǎn)生共鳴的部分極少。

俗話說“磨刀不誤砍柴工”,針對(duì)以上三大痛點(diǎn),項(xiàng)目伊始有必要進(jìn)行一輪全面的桌面研究,幫助我們快速建立對(duì)行業(yè)的全局認(rèn)知并了解業(yè)務(wù),另一方面,也有助于我們更好地和用戶進(jìn)行溝通。

 

研究內(nèi)容:

  • 1.產(chǎn)品的定位、盈利點(diǎn)及目標(biāo)客戶
  • 2.當(dāng)前的業(yè)務(wù)目標(biāo)是什么,主要解決什么問題
  • 3.整體業(yè)務(wù)框架,核心業(yè)務(wù)流程和使用場景
  • 4.不同角色之間如何協(xié)同以及每種角色的價(jià)值和目標(biāo)
  • 5.專業(yè)術(shù)語的理解
  • 6.達(dá)成業(yè)務(wù)目標(biāo)的關(guān)鍵資源和能力

 

研究途徑:

  • 1.公司官網(wǎng)、競品網(wǎng)站、查閱行業(yè)內(nèi)相關(guān)報(bào)告、參加行業(yè)會(huì)議等,形成對(duì)行業(yè)的整體認(rèn)知,如艾瑞網(wǎng)、易觀、CBDNData等專業(yè)網(wǎng)站。(部分報(bào)告需開通會(huì)員才能查閱)
  • 2.通過搜索引擎查詢關(guān)鍵詞查詢相關(guān)文章。
  • 3.最快捷的方式是向產(chǎn)品經(jīng)理/業(yè)務(wù)方要相關(guān)文檔或直接向他們請(qǐng)教。
  • 4.銷售??/客服/實(shí)施顧問等,一般上線的產(chǎn)品都會(huì)有客戶反饋群或來收集整理客戶實(shí)時(shí)反饋的需求信息,可以通過他們大概了解到目前產(chǎn)品有哪些問題
  • 5.如果有這方面的專家用戶,可以虛心向這些專家用戶請(qǐng)教,他們對(duì)業(yè)務(wù)的理解更加深入。

 

Step 2:確定目標(biāo)與畫像維度

此處有2個(gè)注意點(diǎn):

  • 1.如何篩選出目標(biāo)用戶?
  • 2.畫像維度有哪些?

針對(duì)以上2三點(diǎn),下文將依次展開說明。

 

1、如何篩選出目標(biāo)用戶?

Cooper指出,不能為超過3個(gè)以上的用戶畫像設(shè)計(jì)產(chǎn)品,這樣容易產(chǎn)生需求沖。當(dāng)有多個(gè)用戶畫像的時(shí)候,需要考慮用戶畫像的優(yōu)先級(jí)。前面講B2B畫像特點(diǎn)的提到過,由于是企業(yè)產(chǎn)品,僅僅產(chǎn)品中一條業(yè)務(wù)線,角色也是多樣的,所以在篩選目標(biāo)用戶時(shí)有一點(diǎn)尤其要注意:應(yīng)識(shí)別出關(guān)鍵的用戶畫像

以我公司的招聘業(yè)務(wù)為例,為了便于大家在宏觀上確定什么樣的企業(yè)是我們主要的目標(biāo)用戶,我們的做法是按企業(yè)類型定義了三個(gè)KA客戶畫像。由產(chǎn)品、市場、以及各組leader一起來完成用戶畫像的優(yōu)先級(jí)排序工作。確定用戶畫像優(yōu)先級(jí)時(shí),我們可以主要從以下幾個(gè)方面來考慮:

  • 使用頻率
  • 市場大小
  • 收益的潛力
  • 競爭優(yōu)勢/策略等

然后再找關(guān)鍵的角色畫像,即角色畫像中的決策者和主要使用者,次要使用者和間接使用者因時(shí)間、金錢的關(guān)系,現(xiàn)階段不做考慮。我司產(chǎn)品的客戶主要是勞動(dòng)密集型企業(yè),作用是幫助客戶解決藍(lán)領(lǐng)用工問題和發(fā)薪合規(guī)問題。以招聘業(yè)務(wù)線為例,想把這個(gè)產(chǎn)品賣給某企業(yè),首先要打動(dòng)該企業(yè)的HR總監(jiān),再說服CEO/董事長,再讓招聘部員工-HR試用

那么這條決策鏈上的關(guān)鍵人就包括了HR總監(jiān)、CEO/董事長、HR。那在這個(gè)案例中,HR總監(jiān)是決策鏈的關(guān)鍵人物,因?yàn)橹挥兴J(rèn)可之后,才會(huì)申請(qǐng)購買或在CEO面前夸這個(gè)產(chǎn)品。而HR是最終產(chǎn)品的使用者,雖然他們?cè)谄髽I(yè)購買產(chǎn)品前沒有話語權(quán),但是在續(xù)費(fèi)階段,他們的話語權(quán)最大。對(duì)于處于成長期的產(chǎn)品來說,我們現(xiàn)階段的調(diào)研目標(biāo)也是為了獲取HR總監(jiān)和HR兩類角色的用戶畫像,每個(gè)角色訪談4~6人;

 

2、畫像維度有哪些?

篩選出了目標(biāo)用戶,那畫像維度有哪些呢?。以本案例為例,在本次用戶畫像的設(shè)計(jì)中,因我司產(chǎn)品處于優(yōu)化迭代階段,做用戶畫像的目的是了解用戶的使用情況,比如各功能的使用頻率、使用中遇到的問題,定位問題關(guān)鍵及原因分析,優(yōu)化產(chǎn)品功能及運(yùn)營模式,同時(shí)也希望通過了解用戶的具體行為細(xì)節(jié)和態(tài)度,發(fā)現(xiàn)新的機(jī)會(huì)點(diǎn)。

對(duì)于企業(yè),主要了解其企業(yè)規(guī)模、行業(yè)屬性、業(yè)務(wù)流程、組織架構(gòu)、機(jī)構(gòu)里有哪些崗位/工種。這個(gè)信息主要由產(chǎn)品或銷售采集,應(yīng)該前置于角色畫像。而我們第一步的業(yè)務(wù)研究中,很大一部分內(nèi)容也來自于此。

對(duì)于決策者,主要向其了解企業(yè)管理、業(yè)務(wù)等方面的需求信息,對(duì)于本產(chǎn)品決策者關(guān)注的是營收增長、效率提高還是減少成本等方面的問題。

對(duì)于主要使用者,側(cè)重了解用戶特征、產(chǎn)品認(rèn)知、使用場景與痛點(diǎn),各功能的使用頻率、使用中遇到的問題等

根據(jù)前面前文提到的的用戶畫像構(gòu)成要素和自身業(yè)務(wù)情況,有選擇性的摘取,最終梳理出本案的用戶畫像維度如下:

 

Step 3:確定調(diào)研方法

明確了調(diào)研對(duì)象后,就可以展開調(diào)研了。一般有三種方式:

  • 定性研究,基于小樣本的研究,如用戶訪談、實(shí)地調(diào)研、輪崗-理解現(xiàn)象原因;
  • 定量研究,收集更大規(guī)模樣本的調(diào)查數(shù)據(jù),如問卷調(diào)研、數(shù)據(jù)分析-發(fā)現(xiàn)現(xiàn)象;
  • 定量+定性研究,兩者的結(jié)合。

定量和定性調(diào)研究雖各有優(yōu)劣,但定量較為昂貴、費(fèi)時(shí),也需要有精通統(tǒng)計(jì)分析的認(rèn)為協(xié)助,在B端調(diào)研方式中并不太實(shí)用。對(duì)大多數(shù)團(tuán)隊(duì)而言,定性是性價(jià)比最高、最合適的。它不僅提供了“用戶是誰、他們想要什么”,還是基于數(shù)據(jù)、經(jīng)濟(jì)高效較為快捷的一種方式。

采用何種研究方法,主要根據(jù)企業(yè)生命周期、研究目的、項(xiàng)目時(shí)間和經(jīng)費(fèi)等進(jìn)行綜合考量,本案中我們選擇深度訪談收集一手資料。

 

Step 4:采集角色資料

在明確目標(biāo)與方法后,需要對(duì)整個(gè)研究進(jìn)行細(xì)化,制定具體詳實(shí)的執(zhí)行計(jì)劃并開始招募用戶采集資料了。可通過前中后三個(gè)階段性策略的來進(jìn)行訪談。

 

1. 訪談前:搭建信任基礎(chǔ)

在構(gòu)建用戶畫像的step 1中,我們已經(jīng)對(duì)業(yè)務(wù)和要訪談的用戶角色有了一定的了解。只需在訪談時(shí)間的4-7天前,根據(jù)確定的畫像維度來設(shè)計(jì)訪談大綱。設(shè)計(jì)大綱的目的是避免訪談過程中對(duì)話內(nèi)容發(fā)散、混亂而無法收集到足夠多的有效信息。

需要注意的是:大綱需要針對(duì)訪談的每一條需求,做到詳細(xì)、縝密,同時(shí)要考慮用戶對(duì)訪談?lì)}目的理解,可根據(jù)產(chǎn)品使用順序,由易到難、客觀到主觀、概括到具體的順序展開,比如產(chǎn)品功能的使用頻率就可以作為一個(gè)客觀問題放在問題的開始。且要考慮訪談的時(shí)間,因?yàn)樵L談的時(shí)間不易過長,所以訪談提綱也不能過于冗長,典型的訪談大綱模板如下圖所示:

并提前將訪談目的告知受訪者,能讓他們看到訪談的直接或間接價(jià)值(提高工作效率、降低成本等),也就能更好地建立雙方的信任。因此,我們需要提前確認(rèn)整個(gè)訪談的規(guī)劃,并主動(dòng)將相關(guān)信息告知受訪者,包括訪談的時(shí)間、地點(diǎn)、方式、目的、流程,還有過程中可能涉及的問題、后續(xù)發(fā)放的獎(jiǎng)品等。

 

2. 訪談中:表現(xiàn)專業(yè)特質(zhì)

開場介紹

跟C端訪談一樣,正式訪談開始之前的開場白非常重要!除了再次介紹自己(不管是什么崗位,此刻我就是用戶研究員),說明這次訪談的目的,一定還要強(qiáng)調(diào)訪談的隱私性和數(shù)據(jù)安全性,畢竟他們面對(duì)的是真金白銀的生意。

 

暖場

在正式訪談前,可以先和用戶閑聊2~3分鐘,通過一定的溝通活躍氣氛,讓用戶更加放松,同時(shí)增強(qiáng)用戶對(duì)我們信任。暖場和開場介紹可穿插進(jìn)行,沒有絕對(duì)的先后之分,在訪談?wù)咦晕医榻B完成之后,也可以讓被訪者進(jìn)行自我介紹。

 

一般問題

一般問題是指一些比較基礎(chǔ)性問題,用戶不需要進(jìn)行太多思考即可回答,比如“你最常用的功能是哪些”、“使用時(shí)間多長”。

 

深入問題

深入問題是用戶行為和想法更加深入的探索,會(huì)更關(guān)注用戶行為細(xì)節(jié)和行為背后的動(dòng)機(jī)。一般在問這些問題時(shí),訪談?wù)咝枰粩嗟卦儐栍脩魹槭裁矗钡接脩魺o法繼續(xù)回答。深入問題是整個(gè)訪談的核心,也最容易挖掘到用戶需求和痛點(diǎn)。

 

回顧與總結(jié)

每部分的訪談結(jié)束后可進(jìn)行簡單的小結(jié)。訪談?wù)咄ㄟ^回顧訪談過程對(duì)用戶的行為和態(tài)度進(jìn)行客觀闡述,一方便有助于訪談?wù)呤崂硭悸?,另一方面讓用戶?duì)訪談結(jié)果再次確認(rèn)。

 

3. 訪談后:實(shí)現(xiàn)長線共贏

最好和訪談對(duì)象建立長期聯(lián)系,尤其是一線業(yè)務(wù)人員。人和人面對(duì)面聊過后,會(huì)產(chǎn)生基本的信任感和好感,要借助訪談的機(jī)會(huì),拉近和業(yè)務(wù)人員的距離。如果后續(xù)項(xiàng)目中遇到問題,想獲取最真實(shí)的一線反饋,可以聯(lián)系之前的訪談對(duì)象,尋求幫助。

 

Step 5:分析建模

1)根據(jù)角色對(duì)訪談對(duì)象分組

將用戶訪談后得出的重點(diǎn)信息寫在便利貼上(或Excel表中打印后切片),設(shè)計(jì)師需要根據(jù)產(chǎn)品用戶角色不同,將受訪的用戶歸類分組,如HR和HR總監(jiān)。

 

2)找出行為變量

分組后,需要識(shí)別關(guān)鍵的行為變量,將調(diào)研到的用戶與行為變量進(jìn)行一一對(duì)應(yīng),并識(shí)別差異化行為模式。如下圖所示

 

3)映射訪談對(duì)象與行為變量的關(guān)系

再將不同的角色間同類行為模式歸納(合并同類項(xiàng)),進(jìn)行行為描述。此處需注意以行為變量為依據(jù)進(jìn)行用戶對(duì)應(yīng)時(shí),不必追求絕對(duì)的精準(zhǔn),只要相對(duì)能映射清楚即可。梳理完后,觀察可發(fā)現(xiàn)某些用戶群體聚集在幾個(gè)行為變量上,它們構(gòu)成了一個(gè)顯著的行為模式,由此聚類出某個(gè)角色類型。依此類推,可以發(fā)現(xiàn)幾個(gè)不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

 

4)找出共性行為模式

完成映射后,尋找在變量軸上的對(duì)象群。梳理完后,如果一組對(duì)象聚集在多個(gè)不同的變量上,則可以代表一類角色存在顯著的共性行為表現(xiàn)(通常每類角色會(huì)有2~3個(gè)共性行為)。共性行為能幫我們識(shí)別標(biāo)準(zhǔn)化產(chǎn)品需要滿足的用戶需求,而差異化行為可以根據(jù)企業(yè)需求做定制化服務(wù),一個(gè)B端產(chǎn)品是不太可能滿足所有用戶的需求的。

 

Step 6:畫像呈現(xiàn)

一旦我們找到共性行為,就可以創(chuàng)造用戶畫像了。梳理出每類角色的行為、目標(biāo)、痛點(diǎn)等維度特征,形成畫像的基本框架。最后再完善用戶畫像,此時(shí)我們需要做的事情主要是:

  • 1)結(jié)合真實(shí)的數(shù)據(jù),選擇典型特征加入到用戶畫像中
  • 2)結(jié)合使用場景進(jìn)行故事描述,在描述中體現(xiàn)行為變量等因素,讓畫像更加豐滿、真實(shí)。
  • 3)讓用戶畫像容易記憶,比如用照片、名字、年齡、幾條簡單的關(guān)鍵特征描述,都可以減輕讀者的記憶負(fù)擔(dān)

最終客戶畫像呈現(xiàn)如下圖

數(shù)據(jù)已脫敏,非真實(shí)數(shù)據(jù)

 

最終角色畫像呈現(xiàn)如下圖 

數(shù)據(jù)已脫敏,非真實(shí)數(shù)據(jù)

 

用戶畫像作為一個(gè)強(qiáng)大的設(shè)計(jì)和交流工具,能夠讓利益相關(guān)人目標(biāo)始終保持一致,它的價(jià)值在于傳播與使用。舉個(gè)例子,90年代,庫珀將用戶畫像的描述做成一頁紙貼在墻上,一個(gè)產(chǎn)品的一個(gè)用戶畫像做一頁紙,這樣設(shè)計(jì)團(tuán)隊(duì)成員每天走進(jìn)辦公室就能看到。

用戶畫像制作出來后,與整個(gè)項(xiàng)目團(tuán)隊(duì)共享定義的用戶畫像是很重要的,千萬不要讓他在共享文檔里積灰或掛在墻上當(dāng)擺設(shè)。你要做的是讓用戶畫像從紙上躍起,走進(jìn)你同事的心里,讓他在每次討論、每個(gè)決策時(shí),自然、自發(fā)地被提起。所以用戶畫像的使用也是極其重要的,不然前面的工作都是無用之功。

所以,你可能需要:

向團(tuán)隊(duì)介紹用戶畫像?;c(diǎn)時(shí)間介紹研究的過程,展示照片給他們看,聊一聊畫像的需求,期望,痛點(diǎn),性格等。最好以故事性的方式進(jìn)行引導(dǎo),并長期地在會(huì)議里提到并討論它

 

在你的用戶故事中使用用戶畫像?!叭绻沂?*業(yè)務(wù)招聘員,我想要快速識(shí)別出今天某門店招聘的人數(shù)和到崗的人數(shù)”。設(shè)計(jì)時(shí),花點(diǎn)時(shí)間想象一下軟件會(huì)被用戶在工作中如何應(yīng)用。

 

造訪不同團(tuán)隊(duì),介紹用戶畫像,包括它從何來,如何用。教他們?cè)趺凑心加写硇缘挠脩暨M(jìn)行測驗(yàn),如何寫用戶情景來啟發(fā)設(shè)計(jì)或作為可用性測試任務(wù)

 

總的來說,在你能力范圍之類的地方,宣傳用戶畫像的商業(yè)價(jià)值,提升大家的信任。畢竟用戶畫像可以幫助產(chǎn)研團(tuán)隊(duì)跳出自己的需求,了解真正使用產(chǎn)品的人的需求。當(dāng)越來越多的團(tuán)隊(duì)使用用戶畫像,那么用戶畫像就會(huì)越來越像一個(gè)真實(shí)的用戶,幫助團(tuán)隊(duì)從用戶的角度出發(fā)去設(shè)計(jì)產(chǎn)品。

 

值得注意的一點(diǎn)是,用戶畫像并非一成不變的,很大程度上受環(huán)境和周期的影響,所以我們要定期回顧自己的用戶畫像,對(duì)他們進(jìn)行一些更新,確保和現(xiàn)實(shí)一致性。市場變化和策略的變化可能會(huì)重新定義你的業(yè)務(wù)受眾,也可能出現(xiàn)其他的細(xì)分,這也是重新調(diào)整用戶畫像的好機(jī)會(huì),否則它們最終將失去生命力。希望你的用戶畫像也能始終對(duì)業(yè)務(wù)起到幫助,為體驗(yàn)助力。

文章來源:學(xué)UI網(wǎng)   作者:小紐扣

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



前端性能優(yōu)化指北-關(guān)于有些細(xì)節(jié)和思路

前端達(dá)人

目錄

1. 比你最強(qiáng)的競爭對(duì)手快20%

2. 反應(yīng)時(shí)間為100毫秒,幀數(shù)是每秒60幀

3. 首次有效渲染時(shí)間要低于1.25秒,速度指數(shù)要低于1000

定義你所需要的環(huán)境

4. 選擇和安裝你的開發(fā)環(huán)境

5. 漸進(jìn)增強(qiáng)(progressive enhancement)

6. AMP還是Instant Articles?

7. 選擇適合你的CDN

開始優(yōu)化

8. 直接確定優(yōu)化順序

9. 使用符合標(biāo)準(zhǔn)的技術(shù)

10. 考慮微優(yōu)化和漸進(jìn)啟動(dòng)

12. HTTP的緩存頭使用的合理嗎?

13. 減少使用第三方庫,加載JavaScript異步操作

14. 圖片是否被正確優(yōu)化?

15. 圖片的進(jìn)一步優(yōu)化

15.1 如何使用webpack將靜態(tài)素材快速托管到ImageX,并開啟http/2

16. 網(wǎng)頁字體優(yōu)化了嗎?

17. 快速執(zhí)行關(guān)鍵部分的CSS

18. 通過tree-shaking和code-splitting減少凈負(fù)載

19. 提升渲染性能

20. 預(yù)熱網(wǎng)絡(luò)連接,加快傳輸速度

HTTP/2

21. 準(zhǔn)備好使用HTTP/2

22. 適當(dāng)部署HTTP/2

23. 確保服務(wù)器安全可靠

快速入門

 

微優(yōu)化是保持性能最好的辦法,但是又不能有太過明確的優(yōu)化目標(biāo),因?yàn)檫^于明確的目標(biāo)會(huì)影響在項(xiàng)目中做的每一個(gè)決定。以下是一些不同的模型,請(qǐng)按照自己舒服的順序閱讀

1. 比你最強(qiáng)的競爭對(duì)手快20%

根據(jù)一個(gè)心理學(xué)研究,你的網(wǎng)站最少在速度上比別人快20%,才能讓用戶感覺到你的網(wǎng)站比別人的更快。這個(gè)速度說的不是整個(gè)頁面的加載時(shí)間,而是開始加載渲染的時(shí)間,首次有效渲染時(shí)間(例如頁面需要加載主要內(nèi)容的時(shí)間),或者交互時(shí)間(指的是頁面或者應(yīng)用中主要的頁面加載完成,并主備好與用戶進(jìn)行交互的時(shí)間)。

在Moto G(一個(gè)中端三星設(shè)備)和Nexus 4(比較主流的設(shè)備)上衡量開始渲染時(shí)間(用WebPagetest)以及首頁有效渲染時(shí)間(用Lighthouse),最好是在一個(gè)開放的實(shí)驗(yàn)室中,使用規(guī)范的3G,4G和Wi-Fi鏈接。

 

你可以通過你的分析報(bào)告看看你的用戶處在哪個(gè)階段,選取其中前90%的用戶體驗(yàn)來做測試。接著收集數(shù)據(jù),建一個(gè)表格,篩去20%的數(shù)據(jù)并預(yù)設(shè)一個(gè)目標(biāo)(如:性能預(yù)算)?,F(xiàn)在你可以將上述兩個(gè)值進(jìn)行對(duì)比檢測。如果你始終維持著你的目標(biāo)并且通過一點(diǎn)一點(diǎn)改變腳本去加快交互時(shí)間,那么上述方法就是合理可行的。

 

如果前端工程師們都在積極的參與項(xiàng)目概念,UX以及視覺設(shè)計(jì)的決定,這將會(huì)給整個(gè)項(xiàng)目帶來巨大收益。地圖設(shè)計(jì)的決定違背了性能理念,所以他在這份清單內(nèi)的順序有待考慮。

2. 反應(yīng)時(shí)間為100毫秒,幀數(shù)是每秒60幀

RAIL性能模型會(huì)為你提供一個(gè)優(yōu)秀的目標(biāo),既盡最大的努力在用戶初始操作后的100毫秒內(nèi)提供反饋。為了達(dá)到這個(gè)目標(biāo),頁面需要放棄權(quán)限,并將權(quán)限在50毫秒內(nèi)交回給主線程。對(duì)于像動(dòng)畫一樣的高壓點(diǎn),最好的方法就是什么都不做,因?yàn)槟阌肋h(yuǎn)無法達(dá)到最小絕對(duì)值。
同理,動(dòng)畫的每一幀都需要在16毫秒內(nèi)完成,這樣才能保證每秒60幀(一秒/60=16.6毫秒),如果可以的話最好能在10毫秒內(nèi)完成。因?yàn)闉g覽器需要一定的時(shí)間去在屏幕上渲染新的幀,而且你的代碼需要在16.6毫秒內(nèi)完成執(zhí)行。要注意,上述目標(biāo)應(yīng)用于衡量項(xiàng)目的運(yùn)行性能,而非加載性能。

3. 首次有效渲染時(shí)間要低于1.25秒,速度指數(shù)要低于1000

縱使這個(gè)目標(biāo)實(shí)現(xiàn)起來非常困難,你的最終目標(biāo)也應(yīng)該是讓開始渲染時(shí)間低于1秒且速度指數(shù)低于1000(在網(wǎng)速快的地方)。對(duì)于首次有效渲染時(shí)間,上限最好是1250毫秒。對(duì)于移動(dòng)端,3G下移動(dòng)設(shè)備首次渲染時(shí)間低于3秒都是可以接受的。稍微高一點(diǎn)也沒關(guān)系,但千萬別高太多。

定義你所需要的環(huán)境

4. 選擇和安裝你的開發(fā)環(huán)境

不要過多的關(guān)注當(dāng)下最流行的工具,堅(jiān)持選擇適合自己開發(fā)環(huán)境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者組合起來的工具。只要這個(gè)工具運(yùn)行的速度夠快,而且沒有給你的維護(hù)帶來太大問題,這就夠了。

5. 漸進(jìn)增強(qiáng)(progressive enhancement)

在構(gòu)建前端結(jié)構(gòu)的時(shí)候,應(yīng)始終將漸進(jìn)增強(qiáng)作為你的指導(dǎo)原則。首先設(shè)計(jì)并且構(gòu)建核心體驗(yàn),隨后再完善那些為高性能瀏覽器設(shè)計(jì)的高級(jí)特性的相關(guān)體驗(yàn),創(chuàng)建彈性體驗(yàn)。如果你的網(wǎng)頁可以在使用低速網(wǎng)絡(luò)、老舊顯示器的很慢的電腦上運(yùn)行飛快,那么在光纖高配電腦上它只會(huì)運(yùn)行的更快。

6. AMP還是Instant Articles?

根據(jù)你整體組織結(jié)構(gòu)的優(yōu)先順序和策略,你可以考慮使用Google的AMP或Facebook的Instant Articles。要知道沒有這些你也可以達(dá)到不錯(cuò)的性能,但是AMP可以提供一個(gè)性能不錯(cuò)的免費(fèi)的內(nèi)容分發(fā)網(wǎng)絡(luò)框架(CDN),Instant Articles可以在Facebook上促進(jìn)你的性能。你也可以建立progressive web AMP。

7. 選擇適合你的CDN

根據(jù)你的動(dòng)態(tài)數(shù)據(jù)量,可以將一部分內(nèi)容外包給靜態(tài)網(wǎng)站生成工具,將它置于CDN上,從中生成一個(gè)靜態(tài)版本,從而避免那些數(shù)據(jù)庫的請(qǐng)求。也可以選擇基于CDN的靜態(tài)主機(jī)平臺(tái),通過交互組件豐富你的頁面(JAMStack)。注意CDN是否可以很好的處理(或分流)動(dòng)態(tài)內(nèi)容。沒必要單純的將你的CDN限制為靜態(tài)。反復(fù)檢查CDN是否執(zhí)行了內(nèi)容的壓縮和轉(zhuǎn)化,檢查智能HTTP/2傳輸和緩存服務(wù)器(ESI),注意哪些靜態(tài)或動(dòng)態(tài)的部分處在CDN的邊緣(最接近用戶的服務(wù)器)。

開始優(yōu)化

8. 直接確定優(yōu)化順序

首先應(yīng)該弄清楚你想解決的問題是什么。檢查一遍你所有的文件(JavaScript,圖片,字體,第三方script文件以及頁面中重要的模塊,例如輪播,復(fù)雜信息圖標(biāo)和多媒體內(nèi)容),并將他們分類。
列一個(gè)表格。明確瀏覽器上應(yīng)該有的基礎(chǔ)核心內(nèi)容,哪些部分屬于為高性能瀏覽器設(shè)計(jì)的升級(jí)體驗(yàn),哪些是附加內(nèi)容(那些不必要或者可以被延時(shí)加載的部分,例如字體,不必要的樣式,輪播組件,播放器,社交網(wǎng)站入口,很大的圖片)。

9. 使用符合標(biāo)準(zhǔn)的技術(shù)

使用符合標(biāo)準(zhǔn)的技術(shù)向過時(shí)的瀏覽器提供核心體驗(yàn),向老式瀏覽器提供增強(qiáng)體驗(yàn), 同時(shí)對(duì)所加載的內(nèi)容要有嚴(yán)格的把控。即首要加載核心體驗(yàn)部分,將增強(qiáng)部分放在DomContentLoaded,把額外內(nèi)容發(fā)在load事件中。以前我們可以通過瀏覽器的版本推斷出設(shè)備的性能,但現(xiàn)在我們已經(jīng)無法推測了。因?yàn)楝F(xiàn)在市場上很多廉價(jià)的安卓手機(jī)都不考慮內(nèi)存限制和CPU性能,直接使用高版本的Chrome瀏覽器。一定要注意,在我們沒有其他選擇的時(shí)候,我們選擇的技術(shù)同時(shí)可能成為我們的限制。

10. 考慮微優(yōu)化和漸進(jìn)啟動(dòng)

在一些應(yīng)用中,可以在渲染頁面前先初始化應(yīng)用。最好先顯示框架,而不是一個(gè)進(jìn)度條或指示器。使用可以加速初始渲染時(shí)間的模塊或技術(shù)(例如tree-shakingcode-splitting),因?yàn)榇蟛糠中阅軉栴}來自于應(yīng)用引導(dǎo)程序的初始分析時(shí)間。還可以在服務(wù)器上提前編譯,從而減輕部分客戶端的渲染過程,從而快速輸出結(jié)果。最后,考慮使用Optimize.js來加快初始加載速度,它的原理是包裝優(yōu)先級(jí)高的調(diào)用函數(shù)(雖然現(xiàn)在已經(jīng)沒什么必要了)。

 

到底采用客戶端渲染還是服務(wù)器端渲染?不論哪種做法,我們的目標(biāo)都是建立漸進(jìn)啟動(dòng):使用服務(wù)器端渲染可以得到很短的首次有效渲染時(shí)間,這個(gè)渲染過程也包括小部分的JavaScript文件,目的是使交互時(shí)間盡可能的接近首次有效渲染時(shí)間。接下來,盡可能的增加一些應(yīng)用的非必要功能。不幸的是,正如Paul Lewis所說,框架基本上對(duì)開發(fā)者是沒有優(yōu)先級(jí)的概念的,因此漸進(jìn)啟動(dòng)在很多庫和框架上是很難實(shí)施的。如果你有時(shí)間的話,還是考慮使用策略去優(yōu)化你的性能吧。

12. HTTP的緩存頭使用的合理嗎?

仔細(xì)檢查一下例如expires,cache-control,max-age以及其他HTTP緩存頭是否被正確的使用。一般來說,資源不論在短時(shí)間(如果它會(huì)被頻繁改動(dòng))還是不確定的時(shí)間內(nèi)(如果它是靜態(tài)的)都是可緩存的——你大可在需要的時(shí)候在URL中成改版本。如果可能,使用為指紋靜態(tài)資源設(shè)計(jì)的Cache-control:immutable,從而避免二次驗(yàn)證(2016年12月,只有FireFox在https://處理中支持)。你可以使用,Heroku的primer on HTTP caching headers,Jake Archibald的 ”Caching Best Practices”,還有IIya Grigorik的HTTP caching primer作為指導(dǎo)。

13. 減少使用第三方庫,加載JavaScript異步操作

當(dāng)用戶請(qǐng)求頁面時(shí),瀏覽器會(huì)抓取HTML同時(shí)生成DOM,然后抓取CSS并建立CSS對(duì)象模型,最后通過匹配DOM和CSS對(duì)象生成渲染樹。在需要處理的JavaScript文件被解決之前,瀏覽器不會(huì)開始對(duì)頁面進(jìn)行渲染。作為開發(fā)者,我們要明確的告訴瀏覽器不要等待,直接開始渲染。具體方法是使用HTML中的deferasync兩個(gè)屬性。事實(shí)上,defer更好一些(因?yàn)閷?duì)于IE9及以下用戶對(duì)于IE9及以下用戶,很有可能會(huì)中斷腳本)。同時(shí),減少第三方庫和腳本的使用,尤其是社交網(wǎng)站的分享按鍵和<iframe>嵌入(比如地圖)。你可以使用靜態(tài)的社交網(wǎng)站分享按鍵(例如SSBG的)和指向交互地圖的靜態(tài)鏈接去代替他們。

14. 圖片是否被正確優(yōu)化?

盡可能的使用帶有srcset,sizes還有<picture>元素的響應(yīng)式圖片。你也可以利用<picture>元素的AVIF、WEBP格式,用JPEG格式作為替補(bǔ)(參見Andreas Bovens的code snippet)或是使用內(nèi)容協(xié)商(使用接受頭)。本身可以使用自己的PS或者skecth嘗試導(dǎo)出,若不能導(dǎo)出,可以嘗試 火山引擎的ImageX圖像處理服務(wù)(不知道怎么使用可以自行百度搜索 "火山引擎 ImageX")可以支持多種格式輸出,比如AVIF、webp格式;

我曾經(jīng)寫過這篇文檔可以對(duì)照一下:高效率圖像壓縮處理服務(wù), 參考截圖:

 

你也可以使用客戶端提示,現(xiàn)在瀏覽器也可以做到。在用來生成響應(yīng)圖片的源文件過少時(shí),使用響應(yīng)圖片斷點(diǎn)生成器。

15. 圖片的進(jìn)一步優(yōu)化

當(dāng)你在編寫登錄界面的時(shí)候,發(fā)現(xiàn)頁面上的圖片加載的特別快,這時(shí)你需要確認(rèn)一下圖片進(jìn)一步優(yōu)化的思路只要有三點(diǎn):

  • 降低圖片的分辨率,如果瀏覽器中展示區(qū)域100*100,此時(shí)展示 400*400 就屬于資源浪費(fèi),這也是顯著提高圖片響應(yīng)速度最直接的方法;
  • 降低圖片壓縮的質(zhì)量,圖片壓縮質(zhì)量,使用有損壓縮,比如圖片壓縮質(zhì)量90 和75對(duì)人眼可見的范圍內(nèi)都可以接受,常見支持有損壓縮的圖片格式比如,jpeg、wepb、heic、avif等圖片格式支持圖片有損壓縮;
  • 改變圖像壓縮的壓縮方式,改變圖片的壓縮算法也能更高效的提高圖片優(yōu)化圖片提高速度,比如 常見圖像壓縮率(圖像畫質(zhì)等同前提下): HEIF (heic) > AVIF (avif、avis) >webP(awebp) > jpeg > png 等;

正常情況下PNG是原圖格式,體積特別大,巧的是業(yè)界對(duì)PNG 有pngquant 使用Median Cut量化算法的修改版本和其他技術(shù)來緩解Median Cut的不足,可以最大效率保留信息的前提下降低png 的體積大?。蝗绻覀儼讶缟系囊恍﹥?yōu)化處理起來,我使用的過程中發(fā)現(xiàn),火山引擎的imagex 已經(jīng)完美的支持了上面三者的使用方法:下面我舉個(gè)例子做一下說明:

http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/public/attachments/2021/03/11/GyVrojIWFkQOKSAzYnUmlQxvaESnPaZYxgpu9v1Z.png~tplv-n9b2vwdhz3-12:300:200.webp 這個(gè)是 png的原圖處理好的結(jié)果,在這個(gè)url中imagex 給出了一種url語義,"~tplv--模板名稱:[模板參數(shù)].圖像格式"  通過改變300:300 能改改變壓縮率,通過參數(shù)能夠調(diào)整壓縮質(zhì)量,通過改變webp-->avif 可以轉(zhuǎn)換成不同的壓縮方法;

更巧妙的是在這,就算指定輸出png后仍然還可以設(shè)置質(zhì)量參數(shù)

 

如果你還覺得不夠,那你可以通過多重背景圖片技術(shù)來提高圖片的感知性能。

15.1 如何使用webpack將靜態(tài)素材快速托管到ImageX,并開啟http/2

這里發(fā)現(xiàn)一個(gè)第三方寫的但被官方推薦的開源插件https://github.com/Cmaxd/veimagex-webpack-loader ,通過配置webpack-loader 插件的方式可以將圖片上傳到ImageX,然后將圖片使用不同的圖片模板訪問就可以滿足需求,同一個(gè)圖片可以使用多個(gè)地址,例如avif、webp、jpeg 使用 <picture> 標(biāo)簽進(jìn)行降級(jí) 或者判斷瀏覽器支持降級(jí);

 

16. 網(wǎng)頁字體優(yōu)化了嗎?

你用來修飾網(wǎng)頁字體的服務(wù)很有可能毫無用處,包括字形和額外的特性。如果你在使用開源的字體,嘗試用字體庫中某一個(gè)小的子集或是自己歸類一個(gè)小的子集從而壓縮文件大?。ɡ缤ㄟ^一些特殊的注音符號(hào)引用Latin)。WOFF2 support是個(gè)非常不錯(cuò)的選擇,如果瀏覽器不支持,那你可以將WOFF和OTF作為備用。你也可以從Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”一文中選擇一個(gè)合適的策略,然后使用服務(wù)器來緩存字體。如果想要快速入門,Pixel Ambacht的教程與案例會(huì)讓你的字體變得盡然有序。如果你用的是第三方服務(wù)器主機(jī),沒辦法自己在服務(wù)器上對(duì)字體進(jìn)行操作,一定看看Web Font Loader。

17. 快速執(zhí)行關(guān)鍵部分的CSS

為了確保瀏覽器盡可能快的渲染你的頁面,先收集頁面首次可見部分的CSS文件(也叫決定性CSS或上半版CSS)進(jìn)行渲染,然后將它加入頁面的<head>部分,從而避免重復(fù)操作。因?yàn)槁龁?dòng)階段對(duì)交換包大小的限制,你關(guān)鍵CSS文件的大小也被限制在14KB左右。如果高于這個(gè)值,瀏覽器需要重復(fù)一些步驟來獲取更多的樣式。關(guān)鍵CSS是允許你這樣做的??赡軐?duì)每個(gè)模板都需要這個(gè)操作。如果可能,考慮一下用Fiament Group用的條件內(nèi)斂方法

通過HTTP/2,關(guān)鍵CSS可以單獨(dú)存為CSS文件,通過服務(wù)器傳輸,而且可以避免HTML膨脹。服務(wù)器傳輸缺乏連續(xù)支持,并且存在一些超高速緩存的問題(Hooman Beheshti演示的前144頁)。事實(shí)上,這樣會(huì)導(dǎo)致網(wǎng)絡(luò)緩沖區(qū)膨脹。因?yàn)門CP的慢啟動(dòng),服務(wù)器傳輸在穩(wěn)定的連接下會(huì)更有效率。所以你可能需要建立帶有緩存的HTTP/2服務(wù)器傳輸機(jī)制。但請(qǐng)記住,新的cache-digest規(guī)則會(huì)否定手動(dòng)建立的需要緩存的服務(wù)器的請(qǐng)求。

18. 通過tree-shaking和code-splitting減少凈負(fù)載

Tree-shaking是通過保留那些在項(xiàng)目過程中真正需要的代碼從而清理你的構(gòu)建過程的一種方式。你可以用Webpack 2來提出那些沒用的住配置文件,用UnCSSHelium從CSS中取出不需要的樣式。同理,也可以考慮學(xué)習(xí)一下如何編寫高效的CSS選擇器,以及如何避免膨脹和高費(fèi)的樣式

Code-splitting是另一個(gè)Webpack特性,它可以根據(jù)按需加載的塊將你的代碼分開。只要你在代碼中定義了分離點(diǎn),Webpack便會(huì)處理好相關(guān)的輸出文件。它基本上能保證你初始下載的內(nèi)容很小,而且在需求被添加時(shí)按需請(qǐng)求代碼。

Rollup所展示的結(jié)果要比Browserify配置文件所顯示的好得多。所以當(dāng)我們想使用類似工具的時(shí)候,或許應(yīng)該看看Rollupify,它將ECMAScript2015模塊變成了一個(gè)更大的CommonJS模塊——因?yàn)樾∧K沒準(zhǔn)有出乎意料的高性能成本,這源自于你對(duì)打包工具模塊系統(tǒng)的選擇。

19. 提升渲染性能

使用類似CSS containment的方法對(duì)高消耗組建進(jìn)行隔離,從而限制瀏覽器樣式的范圍,可以作用在為無canvas的瀏覽工作的布局和裝飾工作中,或是用在第三方工具上。要確保頁面滾動(dòng)和出現(xiàn)動(dòng)畫效果時(shí)沒有延遲,別忘了之前提到過的每秒60幀的原則。如果沒辦法做到,那就盡可能保證每秒幀數(shù)的大致范圍在15到60幀。使用CSS中的will-change通知瀏覽器哪些元素和屬性發(fā)生了變化。也記得要衡量渲染執(zhí)行中的性能(可以用DevTools)??梢詤⒄誙dacity上Paul Lewis的免費(fèi)課程——瀏覽器渲染優(yōu)化,作為入門。還有一篇Sergey Chikuyonok的文章講了如何正確的用GPU動(dòng)畫。

20. 預(yù)熱網(wǎng)絡(luò)連接,加快傳輸速度

使用頁面框架,對(duì)高消耗組建延遲加載(字體,JS文件,循環(huán)播放,視頻和內(nèi)嵌框架)。使用資源提示來節(jié)省在dns-prefetch(指的是在后臺(tái)執(zhí)行DNS檢索),preconnect(指要求瀏覽器在后臺(tái)進(jìn)行握手鏈接(DNS,TCP,TLS)),prerender(指要求瀏覽器在后臺(tái)對(duì)特定頁面進(jìn)行渲染),preload(指的是提前取出暫不執(zhí)行的源文件)。根據(jù)你瀏覽器的支持情況,盡量使用preconnect來代替dns-prefetch,而且在使用prefetchprerender要特別小心——后者(prerender)只有在你非常確信用戶下一步操作的情況下再去使用(比如購買流程中)。

HTTP/2

21. 準(zhǔn)備好使用HTTP/2

Google開始向著更安全網(wǎng)頁的方向努力,并且將所有Chrome上的HTTP網(wǎng)頁定義為“不安全”時(shí),你或許應(yīng)該考慮是繼續(xù)使用HTTP/1.1,還是將目光轉(zhuǎn)向HTTP/2環(huán)境。雖然初期投入比較大,但是使用HTTP/是大趨勢,而且在熟練掌握之后,你可以使用service worker和服務(wù)器推送技術(shù)讓行性能再提升一大截。
現(xiàn)在,Google計(jì)劃把所有HTTP頁面標(biāo)記為不安全,并且將HTTP安全指示器設(shè)置為與Chrome用來攔截HTTPS的紅色三角相同的圖標(biāo)。

使用HTTP/2的環(huán)境的缺點(diǎn)在于你要轉(zhuǎn)移到HTTPS上,并且根據(jù)你HTTP/1.1用戶的數(shù)量(主要指使用過時(shí)操作系統(tǒng)和過時(shí)瀏覽器的用戶),你需要適應(yīng)不同的建構(gòu)過程,才能發(fā)送不同的建構(gòu)。注意:不論是遷移還是新的構(gòu)建過程都可能非常棘手而且耗時(shí)很多。

 

22. 適當(dāng)部署HTTP/2

重申,使用HTTP/2協(xié)議之前,你需要徹底排查目前為止你所使用協(xié)議的情況。你需要在打包組建和同時(shí)加載很多小組間之間找到平衡。

一方面,你可能想要避免將很多資源鏈?zhǔn)芥溄?,與其將你全部的界面分割成許多小模塊,不如將他們壓縮使之成為建構(gòu)過程的一部分,之后給它們賦予可檢索的信息并加載它們。這樣的話,對(duì)一文件將不再需要重新下載整個(gè)樣式清單或JavaScript文件。

另一方面,封裝是很有必要的,因?yàn)橐淮蜗驗(yàn)g覽器發(fā)送太多JavaScript文件會(huì)出問題。首先,壓縮會(huì)造成損壞。得益于dictionary reuse,壓縮大文件不會(huì)對(duì)文件造成損害,壓縮小文件則不然。確實(shí)有方法可以解決這個(gè)問題,但這不是本文討論的范疇。其次,瀏覽器還沒有優(yōu)化到可以對(duì)類似工作流進(jìn)行優(yōu)化。例如,Chrome會(huì)引發(fā)進(jìn)程間通信(IPCs),這些通信的數(shù)量與資源的數(shù)量成正比,而這成百上千個(gè)資源將會(huì)消耗大量的瀏覽器的執(zhí)行時(shí)間。
Chrome的Jake Archibald建議,為了用HTTP/2達(dá)到最好的效果,考慮一下逐步加載CSS文件

當(dāng)然你可以考慮逐步加載CSS文件。很顯然,你這樣做對(duì)HTTP/1.1的用戶非常不利,所以你可能需要根據(jù)不同的瀏覽器建立多個(gè)版本來應(yīng)對(duì)你的調(diào)度過程,這樣就會(huì)使過程略微復(fù)雜。你也可以避免HTTP/2連接的合并,同時(shí)受益于HTTP/2來使用域名碎片,但是實(shí)現(xiàn)起來有些困難。

我們到底應(yīng)該做什么呢?如果你粗略的用過HTTP/2,似乎成功的發(fā)送過10個(gè)左右的包(在老是瀏覽器上運(yùn)行的也不錯(cuò))。那你就能著手開始試驗(yàn)并且為你的網(wǎng)站找到平衡點(diǎn)。

23. 確保服務(wù)器安全可靠

所有的瀏覽器都支持HTTP/2并且使用TLS,這是有你可能想要避免安全警告,并刪除頁面上沒用的元素。好好檢查你的安全頭部是否設(shè)置正確,排除已知的缺陷檢查證書。

如果還沒有遷移到HTTP, 你那可以先看看HTTPS準(zhǔn)則(The HTTPS-Only Standard)。確保所有外部插件和監(jiān)視腳本都能被HTTPS正確加載,確保沒有跨站腳本出現(xiàn),HTTP腳本傳輸?shù)陌踩^內(nèi)容安全頭也都設(shè)置正確。

快速入門

這份清單綜合性很強(qiáng),幾乎介紹了所有的可用的優(yōu)化方式。那么,如果你只有一個(gè)小時(shí)進(jìn)行優(yōu)化,你應(yīng)該干什么呢?讓我們從中總結(jié)10個(gè)最有用的來。別忘了在你開始優(yōu)化前和結(jié)束優(yōu)化后,記錄你的結(jié)果,包括開始渲染時(shí)間以及在3G,有限連接下的速度。

但沒關(guān)系,本文只是一個(gè)普通大綱(希望能做到綜合性強(qiáng)),你應(yīng)該根據(jù)自己的工作環(huán)境列一份適合自己的清單。最重要的,在開始優(yōu)化之前,先對(duì)項(xiàng)目中存在的問題有一個(gè)明確的了解。


轉(zhuǎn)自:csdn論壇 ,

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Web前端:CSS最強(qiáng)總結(jié) 附詳細(xì)代碼

前端達(dá)人

Web前端總結(jié):
Web前端:HTML最強(qiáng)總結(jié) 附詳細(xì)代碼
Web前端:CSS最強(qiáng)總結(jié) 附詳細(xì)代碼
Web前端:JavaScript最強(qiáng)總結(jié) 附詳細(xì)代碼

基本知識(shí)

基本概念

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。
層疊:多個(gè)樣式可以作用在同一個(gè)html的元素上,同時(shí)生效

  • 樣式定義如何顯示HTML 元素
  • 樣式通常存儲(chǔ)在樣式表中
  • 把樣式添加到 HTML 4.0 中,是為了解決內(nèi)容與表現(xiàn)分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲(chǔ)在 CSS 文件中

多個(gè)樣式定義可層疊為一個(gè)CSS很像化妝,通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。 所以,前端程序員相互表白的時(shí)候可以說:you are the CSS to my HTML. 這是不是CSS是對(duì)HTML進(jìn)行美化和布局作用的最好總結(jié)?

優(yōu)點(diǎn)

  1. 功能強(qiáng)大
  2. 將內(nèi)容展示和樣式控制分離
    降低耦合度。解耦
    讓分工協(xié)作更容易
    提高開發(fā)效率

CSS的使用

CSS與html結(jié)合使用
根據(jù)定義CSS的位置不同,分為行內(nèi)樣式、內(nèi)部樣式和外部樣式

行內(nèi)樣式

也稱為內(nèi)聯(lián)樣式
直接在標(biāo)簽中編寫樣式,通過使用標(biāo)簽內(nèi)部的style屬性;

代碼樣式:

弊端:只能對(duì)當(dāng)前的標(biāo)簽生效,沒有做到內(nèi)容和樣式相分離,耦合度太高。

內(nèi)部樣式

定義在head標(biāo)簽內(nèi),通過style標(biāo)簽,該標(biāo)簽內(nèi)容就是CSS代碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內(nèi)部樣式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>

區(qū)別

  • 作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
  • 優(yōu)先級(jí):外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;
  • 同樣的樣式作用在同一個(gè)標(biāo)簽身上:就近原則。
  • 不同樣式作用在同一個(gè)標(biāo)簽身上,疊加生效。

CSS語法

基本格式由兩個(gè)主要的部分構(gòu)成:

  • 選擇器
  • 一條或多條聲明

基本選擇器

篩選具有相似特征的元素

id選擇器

選擇具有相同id屬性值的元素,建議html頁面中的id值唯一

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 “#” 來定義。

PS: ID屬性不要以數(shù)字開頭,數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個(gè)元素可以使用同一個(gè)id選擇器控制樣式,但是不推薦。如果需要同樣的樣式對(duì)多個(gè)標(biāo)簽生效, 使用class選擇器。

class選擇器

選擇具有相同的class屬性值的元素。

  • class 選擇器用于描述一組元素的樣式,class 選擇器有別于id選擇器。
  • class可以在多個(gè)元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個(gè)點(diǎn)"."號(hào)顯示

PS:類名的第一個(gè)字符不能使用數(shù)字!它無法在 Mozilla 或 Firefox 中起作用

元素選擇器/標(biāo)簽選擇器

選擇具有相同標(biāo)簽名稱的元素。

定義選擇器語法:標(biāo)簽名稱{};PS:標(biāo)簽名稱必須是html提供好的標(biāo)簽。

使用標(biāo)簽選擇器:自動(dòng)使用在所有的同名的標(biāo)簽上


優(yōu)先級(jí)

選擇器的優(yōu)先級(jí)

ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
當(dāng)多個(gè)選擇器作用在同一個(gè)標(biāo)簽上的時(shí)候,如果屬性沖突,看優(yōu)先級(jí);如果不沖突,樣式疊加生效

樣式表的優(yōu)先級(jí)

行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式

同樣,三個(gè)樣式表中都有內(nèi)容作用在同一個(gè)html標(biāo)簽的時(shí)候,如果屬性沖突,看優(yōu)先級(jí);如果不沖突, 樣式疊加生效

CSS常用樣式

color:字體顏色

跟顏色相關(guān)的取值分3種:

  1. 顏色的單詞 red blue…
  2. rgb(紅,綠,藍(lán))三色的取值范圍是0-255 rgb(255,0,0)
    rgba(紅,綠,藍(lán),透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
  3. #值1值2值3 :值的范式是00-FF 十六進(jìn)制數(shù)字組成的 例如:#FF0000

width height:寬高

PS:只有塊狀元素可以設(shè)置寬高,行級(jí)元素設(shè)置不生效

取值方式有2種:

  • 數(shù)值 絕對(duì)數(shù)字 單位是像素PX
  • 百分比:占據(jù)父元素的比例

背景樣式

在這里插入圖片描述
在這里插入圖片描述

文本樣式

在這里插入圖片描述

列表樣式

在這里插入圖片描述

邊框樣式

在這里插入圖片描述

HTML&CSS調(diào)試?yán)?

以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁面的所有標(biāo)簽,在styles中可以看到html元素對(duì)應(yīng)的樣式。

交集選擇器

條件:交集選擇器由兩個(gè)選擇器構(gòu)成,找到的標(biāo)簽必須滿足:既有標(biāo)簽一的特點(diǎn),也有標(biāo)簽二的特點(diǎn)。

語法:h3.class{ color:red; } 其中第一個(gè)為標(biāo)簽選擇器,第二個(gè)為class選擇器,兩個(gè)選擇器之間不能有空格,例如div.list。

交集選擇器是并且的意思。 即…又…的意思

例如: table.bg 選擇的是: 類名為 .bg 的 表格標(biāo)簽,但用的相對(duì)來說比較少。

后代選擇器

概念
后代選擇器又稱為包含選擇器。

作用
用來選擇元素或元素組的子孫后代

其寫法就是把外層標(biāo)簽寫在前面,內(nèi)層標(biāo)簽寫在后面,中間用空格分隔,先寫父親爺爺,再寫兒子孫子。

格式:父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}
語法:.class h3{color:red;font-size:16px;}

當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。 子孫后代都可以這么選擇。 或者說,它能選擇任何包含在內(nèi) 的標(biāo)簽。

子元素選擇器

作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。 其寫法就是把父級(jí)標(biāo)簽寫在前面,子級(jí)標(biāo)簽寫在后面,中間跟一個(gè) > 進(jìn)行連接。
語法:.class>h3{color:red;font-size:14px;}
比如:
.demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3


轉(zhuǎn)自:csdn論壇 ,

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

周周


在 UI 的設(shè)計(jì)體系中,圖標(biāo)是最重要的組成部分之一,是任何 UI 界面中都不可或缺的視覺元素。了解圖標(biāo)相關(guān)的概念,以及正確繪制的方法,是入門 UI設(shè)計(jì)的必備條件。

網(wǎng)上現(xiàn)存不少關(guān)于圖標(biāo)繪制的文章和教學(xué),但不是太籠統(tǒng),就是太片面。即使看了很多這種碎片化的知識(shí),也很難在我們的認(rèn)知中對(duì)它有比較全面、系統(tǒng)的認(rèn)識(shí),所以大多數(shù)初級(jí)的 UI設(shè)計(jì)師,始終畫不好圖標(biāo)。

針對(duì)這個(gè)問題,我希望用一篇長文來講清楚圖標(biāo)設(shè)計(jì)的所有要點(diǎn)和具體的設(shè)計(jì)方法,讓所有設(shè)計(jì)新人更快地上手圖標(biāo)設(shè)計(jì)。

本文共分為5個(gè)部分:

  • 圖標(biāo)簡介:先對(duì)圖標(biāo)有個(gè)整體的認(rèn)識(shí),了解圖標(biāo)總共有哪些類型和應(yīng)用場景。
  • 工具圖標(biāo):最常見的工具型圖標(biāo)的相關(guān)規(guī)范,以及對(duì)應(yīng)的設(shè)計(jì)案例演示。
  • 裝飾圖標(biāo):近年來使用越來越廣泛的視覺型圖標(biāo)設(shè)計(jì)認(rèn)識(shí),以及對(duì)應(yīng)的講解。
  • 啟動(dòng)圖標(biāo):講解啟動(dòng)圖標(biāo)的相關(guān)規(guī)范,如何高效的進(jìn)行設(shè)計(jì)。
  • 應(yīng)用案例:介紹在一個(gè) UI項(xiàng)目中,要應(yīng)用多少種圖標(biāo)規(guī)格,如何設(shè)計(jì)出正確的圖標(biāo)。

圖標(biāo)的基本認(rèn)識(shí)

圖標(biāo),是一種圖形化的標(biāo)識(shí),它有廣義和狹義兩種概念,廣義指的是所有現(xiàn)實(shí)中有明確指向含義的圖形符號(hào),狹義主要指在計(jì)算機(jī)設(shè)備界面中的圖形符號(hào),有非常大的覆蓋范圍。

對(duì)于 UI設(shè)計(jì)師而言,我們主要針對(duì)的就是狹義的概念,它是 UI 界面視覺組成的關(guān)鍵元素之一。

在當(dāng)下最常見的扁平化設(shè)計(jì)風(fēng)格中,界面的實(shí)際視覺組成只有4種元素,圖片、文字、幾何圖形、圖標(biāo)。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 由圖片、文字、幾何、圖標(biāo)組成的界面

可以說,圖片、文字、幾何圖形的運(yùn)用,都只用到排版的技巧,而圖標(biāo),是 UI設(shè)計(jì)中除了插畫元素以外唯一需要我們「繪制」、「創(chuàng)作」的元素,一涉及到這兩件事,難度就直線上升了。

本來往界面里丟一些方方圓圓、貼幾張圖、填一些字,就可以把界面做出來了,比如 Clear APP,不僅工作量少,而且還符合極簡原則,為什么還要吃力不討好的設(shè)計(jì)圖標(biāo)?

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ Clear APP 的截圖

這就涉及圖標(biāo)作用的探討了,為了節(jié)約篇幅,更快進(jìn)入大家最想看的重點(diǎn)干貨,我就不長篇大論從上古時(shí)期人類與圖形符號(hào)的糾葛開始寫了,就談對(duì)于圖形界面本身,為什么圖標(biāo)有這么重要的地位,沒它不行?

有兩個(gè)原因,第一文字雖然也是一種圖形符號(hào),但相對(duì)于圖標(biāo)而言,文字實(shí)在太復(fù)雜了,在識(shí)別效率上有先天的劣勢。再者,不同的語言,文字的長度也不同,如果換成阿拉伯語或者俄羅斯語,或許一行還裝不下所有文字。圖標(biāo)可以以一種更高效的方式,將我們想要傳遞的信息進(jìn)行濃縮,不僅易于識(shí)別,也能讓界面更簡潔,利于排版,比如下方案例。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 應(yīng)用文字替換了圖標(biāo)的對(duì)比

第二點(diǎn),就是關(guān)于視覺的觀賞性。有些頁面中,如果把圖標(biāo)去掉了,也絲毫不會(huì)影響我們的操作效率,以及對(duì)內(nèi)容的理解。但沒有圖標(biāo),缺少這些點(diǎn)綴,我們就會(huì)覺得這個(gè)頁面看起來太枯燥了,不得勁,最好的例子就是應(yīng)用的設(shè)置頁了,見下方案例。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 設(shè)置頁有圖標(biāo)和沒有圖標(biāo)的對(duì)比

既然知道了圖標(biāo)的作用和重要性,那么接下來,就要進(jìn)一步了解在工作中我們要設(shè)計(jì)哪些圖標(biāo)。

可以先劃分成三種大類:

  • 工具圖標(biāo)
  • 裝飾圖標(biāo)
  • 啟動(dòng)圖標(biāo)

下面,我們將對(duì)它們分別進(jìn)行介紹,以及展示相關(guān)的設(shè)計(jì)類型,方便讀者在開始學(xué)習(xí)具體設(shè)計(jì)前,對(duì) UI設(shè)計(jì)會(huì)創(chuàng)作的圖標(biāo)有更全面的認(rèn)識(shí)。

工具圖標(biāo)

首先,我們要說的是工具圖標(biāo)。這是我們?cè)谌粘S懻撝刑峒白铑l繁的圖標(biāo)類型,即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識(shí)。作為最常見的圖標(biāo)類型,我們就不需要做太多的說明了。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 常見的工具圖標(biāo)

雖然理解起來容易,但是它所包含的設(shè)計(jì)樣式卻并不少,可以把它們歸納成線性、面性兩個(gè)大類,再分別進(jìn)行細(xì)分。

1. 風(fēng)格1:線性風(fēng)格

線性圖標(biāo),即圖形是通過線條的描邊輪廓勾勒出來的。多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓,比如上圖案例,線性圖標(biāo)的創(chuàng)作空間看似不多,但實(shí)際上有非常多的調(diào)整空間。

下面我們把它們羅列出來。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 線性風(fēng)格的工具圖標(biāo)

2. 風(fēng)格2:面性風(fēng)格

面性圖標(biāo),即使用對(duì)內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣,在這類圖標(biāo)中,也不是只能應(yīng)用純色的方式進(jìn)行填充,還有非常多的視覺表現(xiàn)類型。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 面性風(fēng)格的工具圖標(biāo)

3. 風(fēng)格3:混合風(fēng)格

當(dāng)然,在設(shè)計(jì)圖標(biāo)類型的時(shí)候,也不一定非線性和面性不可,有一些熱衷創(chuàng)造和嘗試的設(shè)計(jì)師,還創(chuàng)作出了混合型的圖標(biāo),既有線性描邊的輪廓,又有色彩填充的區(qū)域。常見的樣式類型如下:

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 混合風(fēng)格的工具圖標(biāo)

裝飾圖標(biāo)

和工具圖標(biāo)比起來,裝飾圖標(biāo)的視覺性作用更多。對(duì)于一些比較復(fù)雜的應(yīng)用來說,過分的簡約并不能彌補(bǔ)信息過多的信噪問題,我們要通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性,減少一屏內(nèi)顯示內(nèi)容的數(shù)量。

比如在分類列表里,是可以只使用線框和文字把大量內(nèi)容濃縮到一屏以內(nèi),但實(shí)際瀏覽效率并不會(huì)增加,而且并不美觀。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 裝飾圖標(biāo)在識(shí)別性上的作用

還有就是國內(nèi)的界面設(shè)計(jì)環(huán)境,會(huì)根據(jù)運(yùn)營需求設(shè)計(jì)進(jìn)行特殊化處理,尤其在電商領(lǐng)域,首屏的圖標(biāo)都會(huì)改成首頁風(fēng)格的樣式,增加活動(dòng)氛圍。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 節(jié)日活動(dòng)中的裝飾圖標(biāo)

裝飾性的圖標(biāo)設(shè)計(jì),雖然沒有明確的規(guī)范該怎么做,效果怎么好怎么來,但最常見的類型有四種,下面分別進(jìn)行介紹。

1. 扁平風(fēng)格

扁平風(fēng)格的裝飾圖標(biāo),通??梢岳斫獬墒怯帽馄讲瀹嫷姆绞疆嫵鰜淼膱D標(biāo),除了繼承扁平的純色填充特性以外,也比普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 扁平風(fēng)格的裝飾圖標(biāo)

2. 擬物風(fēng)格

擬物風(fēng)格的圖標(biāo)現(xiàn)在出現(xiàn)的頻率越來越高,集中在大型的運(yùn)營活動(dòng)中,通常這些活動(dòng)會(huì)通過擬物的方式將頭部設(shè)計(jì)成有故事性的場景,所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計(jì)形式會(huì)更貼合。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 擬物風(fēng)格的裝飾圖標(biāo)

3. 2.5D風(fēng)格

2.5D是一種偏卡通、像素畫風(fēng)格的扁平設(shè)計(jì)類型,在一些非必要的設(shè)計(jì)環(huán)境中,使用2.5D會(huì)比較容易搭配主流的界面設(shè)計(jì)風(fēng)格,有更強(qiáng)的趣味性和層次感。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 2.5D風(fēng)格的裝飾圖標(biāo)

4. 炫彩漸變

這是一個(gè)拗口的原創(chuàng)名詞,找不到更合適的形容,還是覺得浮夸點(diǎn)符合它的氣質(zhì)。這種圖標(biāo),就是通過一系列非常激進(jìn)的漸變和撞色實(shí)現(xiàn),通常還會(huì)使用彩色的陰影。

使用這樣圖標(biāo)的區(qū)域,通常都會(huì)呈現(xiàn)出一副五彩斑斕的景象,只有在內(nèi)容非常豐富且用戶偏向年輕化的產(chǎn)品中可以使用,是一種非常難駕馭的設(shè)計(jì)風(fēng)格。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 炫彩漸變風(fēng)格的裝飾圖標(biāo)

5. 實(shí)物貼圖

最后一種,就是采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來的,但想想還是放進(jìn)來合適。因?yàn)檫@種圖標(biāo)的出現(xiàn)頻率非常高,有必要在后面掌握它的做法。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 應(yīng)用攝影實(shí)物的裝飾圖標(biāo)

啟動(dòng)圖標(biāo)

最后,就要說說啟動(dòng)圖標(biāo)了。啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類型的圖標(biāo)說起來更難,因?yàn)樗鼘?shí)際上就是把「LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版」的圖標(biāo)。

除了掌握必要的規(guī)范以外,啟動(dòng)圖標(biāo)的主體物設(shè)計(jì)就是 LOGO 的設(shè)計(jì),已經(jīng)超出了圖標(biāo)繪制本身的知識(shí)點(diǎn)。所以,在后面我會(huì)針對(duì)這個(gè)問題講解一些比較套路易懂的設(shè)計(jì)方案供新手學(xué)習(xí),這里我們先來了解一下它有哪幾種設(shè)計(jì)形式。

1. 文字形式

使用了文字作為圖標(biāo)主體物的類型,通常是這類應(yīng)用本身的品牌 LOGO 就使用了文字,所以這里就把字體照搬過來。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 文字類的啟動(dòng)圖標(biāo)

2. 圖標(biāo)形式

對(duì)于一些偏工具,適合用簡單圖形傳達(dá)應(yīng)用功能的啟動(dòng)圖標(biāo),就會(huì)采取使用工具圖標(biāo)的方式設(shè)計(jì)。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 圖標(biāo)類的啟動(dòng)圖標(biāo)

3. 圖形圖標(biāo)

圖形形式看起來和圖標(biāo)形式很接近,但實(shí)際上完全不屬于同一類型,之所以它不是圖標(biāo),是因?yàn)檫@類圖標(biāo)的主體圖形是一種經(jīng)過高度抽象化的標(biāo)識(shí),傳達(dá)的是品牌性,而不是圖形的含義。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 圖形類的啟動(dòng)圖標(biāo)

4. 插畫形式

對(duì)于一些比較純粹的應(yīng)用,如讀本、漫畫、幼兒類應(yīng)用,就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計(jì)。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 插畫類的啟動(dòng)圖標(biāo)

5. 擬物形式

雖然現(xiàn)在扁平化的設(shè)計(jì)占據(jù)主導(dǎo)地位,但依舊有很多應(yīng)用的啟動(dòng)圖標(biāo)是通過擬物的方式設(shè)計(jì)的。因?yàn)閷?duì)于這些應(yīng)用來說,擬物設(shè)計(jì)所傳遞的信息往往更直觀和準(zhǔn)確。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

△ 擬物類的啟動(dòng)圖標(biāo)

當(dāng)然,還有其它的數(shù)之不盡的啟動(dòng)圖標(biāo)設(shè)計(jì)方式,比如明星大頭照、攝影圖、游戲原畫等,但理解上面這些類型就夠了。

前面介紹的三種圖標(biāo),就是今后在進(jìn)入 UI 行業(yè)設(shè)計(jì)的內(nèi)容。雖然圖標(biāo)看起來簡單,但可以玩出的花樣不少。除了正確設(shè)計(jì)出圖標(biāo)以外,高低階的 UI設(shè)計(jì)師之間的區(qū)別也包含圖標(biāo)設(shè)計(jì)類型掌握的多寡。

所以,在開始學(xué)習(xí)前,不要將設(shè)計(jì)圖標(biāo)的目標(biāo)局限在最簡單的圖形繪制上,還有很多有趣的設(shè)計(jì)形式等待你們?nèi)L試。

學(xué)習(xí)圖標(biāo)所需的軟件

了解了圖標(biāo)的類型,就要開始了解做出這些圖標(biāo)應(yīng)該使用哪些軟件了。通常,UI 主要使用的設(shè)計(jì)軟件包含 PS、AI、Sketch、XD四款,理論上,它們都包含了圖標(biāo)繪制的功能,如果我直接告訴大家去精通這4款軟件那么畫圖標(biāo)就一點(diǎn)難度都沒有了,這是非常不負(fù)責(zé)任的,所以為了對(duì)新人更友好一點(diǎn)(如果已經(jīng)全部精通了,就直接略過),我會(huì)分析一遍這四款軟件對(duì)于圖標(biāo)設(shè)計(jì)的優(yōu)劣,以及需要掌握的部分。

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

1. Sketch / XD

這兩款軟件是我們?cè)O(shè)計(jì) UI 界面的主力。但大家一定要記得,它們主要的功能是用來完成 UI 界面元素的排版,而不是創(chuàng)作和繪圖。

雖然它們都包含路徑、鋼筆、布爾運(yùn)算等功能(Sketch 相對(duì) XD 更完善一點(diǎn)),想要繪制一些非?;A(chǔ)的線性或面性圖標(biāo)時(shí)沒有問題,但只要涉及到比較復(fù)雜的圖形,往往就束手無策。

所以,我建議所有學(xué)習(xí) UI 的新人,都不要從這兩個(gè)軟件中入手,而是先掌握 PS 和 AI,后面想要快速實(shí)現(xiàn)一些簡單的圖標(biāo)時(shí),自然懂得如何使用 Sketch 和 XD。

可以說,PS 和 AI 的應(yīng)用決定了我們圖標(biāo)設(shè)計(jì)的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

2. Photoshop

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

PS 是一款無論什么東西都設(shè)計(jì)得出來的設(shè)計(jì)軟件,但是,它本質(zhì)上是一款「位圖軟件」。后續(xù)的文章中會(huì)提及,在界面中采用矢量格式的圖標(biāo)是最理想的,而 PS 針對(duì)矢量的操作并不便捷,比如將矢量圖層復(fù)制到其它軟件中。

實(shí)際項(xiàng)目中,我們會(huì)用 PS 設(shè)計(jì)一些視覺表現(xiàn)相對(duì)復(fù)雜的圖標(biāo),例如啟動(dòng)圖標(biāo)、擬物圖標(biāo)、實(shí)物圖標(biāo)等等。

繪制圖標(biāo)需要用到的 PS 功能并不太多,需要在前期學(xué)習(xí)這個(gè)軟件的過程中加以篩選,重點(diǎn)是以下知識(shí)點(diǎn):

  • 路徑創(chuàng)建和調(diào)整
  • 鋼筆工具和錨點(diǎn)
  • 路徑圖層
  • 布爾運(yùn)算
  • 圖層屬性

雖然 PS 在實(shí)際項(xiàng)目中是用來畫復(fù)雜的圖標(biāo),但并不妨礙我們使用 PS 從最基礎(chǔ)的圖標(biāo)開始畫起,因?yàn)橄胍炀氄莆丈戏降闹R(shí)點(diǎn),簡易的工具圖標(biāo)是最好的磨刀石,之后再學(xué)習(xí) AI 的操作,就可以更快的上手。

3. Illastrator

從零開始畫圖標(biāo)系列:超全面的基礎(chǔ)知識(shí)

AI 也是 UI 設(shè)計(jì)必學(xué)的一款軟件,它的功能異常豐富,主要用來設(shè)計(jì)矢量圖形。對(duì)比 PS,它有更好的矢量操作支持,對(duì)于路徑細(xì)節(jié)的調(diào)整上,是最全面最細(xì)膩的軟件,并且 AI 中的圖形還可以直接復(fù)制粘貼到其它應(yīng)用的畫布中。

如果掌握了上方提及的 PS 基礎(chǔ),那么學(xué)習(xí) AI 也就輕松了不少,其中,AI 設(shè)計(jì)圖標(biāo)中有三個(gè)特殊的功能是需要重點(diǎn)掌握和學(xué)習(xí)的:

  • 形狀生成器
  • 輪廓化描邊
  • 路徑查找器

花幾個(gè)晚上,掌握了 PS 和 AI 的相關(guān)知識(shí)點(diǎn)以后,就為我們后續(xù)的學(xué)習(xí)提供了技術(shù)支持,可以進(jìn)入下一階段了。

結(jié)尾

這是圖標(biāo)系列文章的第一篇,信息量不算少。所以我們?cè)诮Y(jié)尾再總結(jié)一次,方便大家記憶。

  • 知識(shí)點(diǎn)一:在 UI 的界面中,圖標(biāo)的主要作用是用來高效地傳遞信息,以及起到美化界面的作用。
  • 知識(shí)點(diǎn)二:UI 會(huì)涉及的圖標(biāo)類型主要有三種,工具圖標(biāo)、裝飾圖標(biāo)、應(yīng)用圖標(biāo)。
  • 知識(shí)點(diǎn)三:工具圖標(biāo),是界面中用來傳遞信息的圖形符號(hào),主要包含線性、面性、混合三種設(shè)計(jì)風(fēng)格。
  • 知識(shí)點(diǎn)四:裝飾圖標(biāo),是界面中用來提升視覺體驗(yàn)的圖形,主要包含扁平、擬物、2.5D、漸變炫彩等設(shè)計(jì)風(fēng)格。
  • 知識(shí)點(diǎn)五:應(yīng)用圖標(biāo),是用來啟動(dòng)應(yīng)用的圖標(biāo),主要包含文字、圖標(biāo)、圖形、插畫、擬物等設(shè)計(jì)形式。
  • 知識(shí)點(diǎn)六:學(xué)習(xí)繪制圖標(biāo),優(yōu)先學(xué)習(xí) PS、AI 的路徑相關(guān)功能,而不是 Sketch 和 XD。




文章來源:優(yōu)設(shè)網(wǎng)     作者:超人的電話亭



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



什么是SEO?SEO為什么對(duì)企業(yè)營銷如此重要?

seo達(dá)人

 

    搜索引擎優(yōu)化(通常稱為SEO)是提高網(wǎng)站流量的數(shù)量和質(zhì)量的一種做法。網(wǎng)站SEO使用自然搜索結(jié)果來增加品牌知名度和網(wǎng)站流量。這是關(guān)于了解人們及其在網(wǎng)上尋找的內(nèi)容。了解了受眾之后,就可以提供他們想要的內(nèi)容,從而提高參與度。讓我們討論為什么SEO如此重要,并學(xué)習(xí)一些最重要的技巧,您可以將其應(yīng)用到您的企業(yè)中,以在所有重要的搜索引擎排名中列出更高的排名。

    SEO為什么重要?

    SEO非常重要,因?yàn)樗阉饕媸窃诰€流量的核心。盡管付費(fèi)廣告和社交媒體仍然有效,但大多數(shù)在線流量來自搜索引擎。

    搜索引擎涵蓋了更多的數(shù)字房地產(chǎn),并在更多的人面前發(fā)現(xiàn)了自己。SEO結(jié)果也比付費(fèi)廣告獲得更多的點(diǎn)擊。大約3%(2.8%)的人點(diǎn)擊了付費(fèi)廣告。SEO提供的流量是付費(fèi)廣告的20倍。使用此類統(tǒng)計(jì)數(shù)據(jù),您根本無法忽略其重要性。如果SEO似乎太復(fù)雜而難以掌握,請(qǐng)考慮雇用一家專門從事SEO的公司。

    如果不認(rèn)識(shí)SEO的潛力,就不可能談?wù)揝EO。公司提供的優(yōu)質(zhì)SEO是常綠的。內(nèi)容將始終存在于您的網(wǎng)站上,并持續(xù)數(shù)周,數(shù)月和數(shù)年產(chǎn)生流量。付費(fèi)廣告只能持續(xù)到賺錢為止。SEO永遠(yuǎn)不會(huì)消失。

    SEO公司將使用幾種不同類型的網(wǎng)站SEO。最常見的是內(nèi)容SEO,圖像SEO和異地SEO。內(nèi)容SEO是經(jīng)過優(yōu)化的網(wǎng)站內(nèi)容,例如文章和博客文章。圖片SEO涵蓋了網(wǎng)站上圖片的元描述和名稱。站外SEO是指網(wǎng)站之外可能影響搜索引擎排名的內(nèi)容,例如高質(zhì)量的反向鏈接。所有這些共同創(chuàng)造了更高的排名。

    網(wǎng)站SEO分析

    SEO分析是SEO公司為網(wǎng)站提供SEO提示的多種方式之一。該分析將檢查您的站點(diǎn)當(dāng)前的運(yùn)行狀況,以便公司可以了解從那里到哪里去。搜索引擎使用許多不同的因素來對(duì)網(wǎng)站進(jìn)行分析和排名。SEO公司將使用審核來檢查您的網(wǎng)站在這些因素上的表現(xiàn)。它有助于確定需要修復(fù)的問題區(qū)域,以使您的網(wǎng)站更上一層樓。他們將為您提供在審核后您可以做的所有改進(jìn)網(wǎng)站SEO的工作清單。

    該分析涵蓋諸如現(xiàn)場SEO和超鏈接,SEO內(nèi)容的當(dāng)前狀態(tài)以及從其他網(wǎng)站獲得的反向鏈接之類的內(nèi)容。反向鏈接是SEO策略的重要組成部分,但并非所有鏈接都是一樣的。如果您通過可疑來源鏈接到網(wǎng)站,則該網(wǎng)站的效果不佳。審核非常有用,因?yàn)榫W(wǎng)站SEO的第一步是了解您的當(dāng)前狀況。

    創(chuàng)建高質(zhì)量的有益內(nèi)容

    人們?cè)跒榫W(wǎng)站SEO編寫內(nèi)容時(shí)犯的最常見的錯(cuò)誤是對(duì)人類的關(guān)注不足。高質(zhì)量的內(nèi)容首先是寫給人類的,其次是搜索引擎爬蟲。如果您過多地關(guān)注關(guān)鍵字,則會(huì)導(dǎo)致亂碼。而是圍繞用戶喜歡閱讀的有用和高質(zhì)量內(nèi)容來制定內(nèi)容策略。

    確保您將博客文章和文章分為標(biāo)題和小標(biāo)題。這些標(biāo)題會(huì)在內(nèi)容中產(chǎn)生停頓,使人類和機(jī)器人都更容易處理。該標(biāo)題應(yīng)提供有關(guān)以下段落將討論的內(nèi)容的一些信息。這些天人們很少閱讀整個(gè)博客文章。他們傾向于專注于他們認(rèn)為與他們最相關(guān)的事物。標(biāo)題從其余內(nèi)容中脫穎而出,引人注目。人們可以瀏覽該職位的特定標(biāo)題并閱讀該部分。

    有效地使用反向鏈接

    反向鏈接是最重要的網(wǎng)站SEO工具之一。反向鏈接已用于市場營銷和SEO多年。您與網(wǎng)站的鏈接越多,訪問量和聲譽(yù)就越高,更不用說您在搜索引擎結(jié)果頁上的排名了。

    雖然高質(zhì)量的反向鏈接與以往一樣有效,但是隨著時(shí)間的推移,開發(fā)這些反向鏈接的方式已經(jīng)發(fā)生了變化。曾經(jīng)有一段時(shí)間,您只能在任何網(wǎng)站上獲得反向鏈接,并且已經(jīng)足夠。但是,這些天有些麻煩。

    鏈接不僅應(yīng)在具有較高權(quán)限的網(wǎng)站上生成,而且應(yīng)與原始網(wǎng)站相關(guān)。例如,一家餐館應(yīng)該致力于從目錄和評(píng)論站點(diǎn)中獲取鏈接。即使滑板銷售網(wǎng)站是其利基市場中最具權(quán)威性的公司,也不適用于將滑板連接到嬰兒產(chǎn)品網(wǎng)站的公司。成功的SEO公司會(huì)將反向鏈接策略納入整體內(nèi)容營銷策略。

    不再有效的另一種常見策略是在博客文章和論壇中發(fā)布指向您網(wǎng)站的鏈接。從技術(shù)上來講,這將創(chuàng)建至您網(wǎng)站的鏈接,但這是一個(gè)質(zhì)量較弱的鏈接,搜索引擎會(huì)因此而受到懲罰。從高質(zhì)量來源獲取高質(zhì)量鏈接。

    使用關(guān)鍵詞

    關(guān)鍵字是SEO的命脈。這是每個(gè)人都知道的。問題在于并非每個(gè)人都知道如何正確使用它們。對(duì)于網(wǎng)站所有者而言,最重要的SEO技巧之一就是充分利用正確的關(guān)鍵字。

    讀者和搜索引擎都看不起關(guān)鍵字垃圾郵件-盡可能多地使用關(guān)鍵字的行為。人們會(huì)告訴您何時(shí)嘗試發(fā)送盡可能多的垃圾郵件,而他們卻不喜歡。這對(duì)于搜索引擎也不利,因?yàn)樗麄兿M吹疥P(guān)鍵字的正確使用。關(guān)鍵字在文本中應(yīng)使用幾次,關(guān)鍵字密度最多為2-4%。

    嘗試著眼于唯一且長尾的關(guān)鍵字,以減少競爭。不要使用與其他人相同的關(guān)鍵字。嘗試找到人們正在尋找的東西以找到您。有很多方法可以找到并創(chuàng)建好的長尾關(guān)鍵字。

    優(yōu)化頁面內(nèi)容

    他們稱其為“搜索引擎優(yōu)化”是有原因的-您需要對(duì)所有內(nèi)容進(jìn)行優(yōu)化。優(yōu)化您的頁面意味著找到快速有效地加載網(wǎng)站的方法。分散內(nèi)容以使其更具可讀性,因此人們不容易感到不知所措并單擊該站點(diǎn)。

    用戶參與度是網(wǎng)站SEO的關(guān)鍵方面,如果未優(yōu)化體驗(yàn),他們將迅速離開您的網(wǎng)站。較高的跳出率可能會(huì)降低網(wǎng)站在搜索引擎中的排名。

    您可以做很多事情來優(yōu)化內(nèi)容。壓縮圖像,以便更快地加載它們,考慮項(xiàng)目在頁面上的放置方式,并在可能的情況下包括現(xiàn)場鏈接和導(dǎo)航。網(wǎng)頁的優(yōu)化效果越好,它們?cè)诓东@潛在客戶并將其轉(zhuǎn)化為客戶方面越有效。查看圖形以查看有關(guān)如何有效優(yōu)化頁面的更多信息。完美優(yōu)化的頁面是所有這些元素都一起實(shí)現(xiàn)的頁面。即使是一個(gè)優(yōu)化不佳的方面也會(huì)破壞其他方面的有效性。

    什么是SEO?事實(shí)證明,答案比您預(yù)期的要復(fù)雜。SEO使您的網(wǎng)站快速有效地加載。它正在獲得指向您網(wǎng)站的鏈接,以便人們?cè)L問。它正確使用了關(guān)鍵字。歸根結(jié)底,SEO就是要以一種有效的方式為您的網(wǎng)站生成自然流量.

 

文章來源:云優(yōu)網(wǎng)

 

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

網(wǎng)站做好品牌SEO優(yōu)化——打造高質(zhì)量內(nèi)容引流量

seo達(dá)人

 

 

網(wǎng)站做好品牌SEO優(yōu)化——打造高質(zhì)量內(nèi)容引流量

網(wǎng)站建設(shè),需經(jīng)歷頁面布局規(guī)劃-頁面設(shè)計(jì)-程序-內(nèi)容填充-測試等多個(gè)過程,而在這其中,網(wǎng)站內(nèi)容的好壞,將直接影響用戶對(duì)企業(yè)、品牌或整個(gè)網(wǎng)站的整體評(píng)價(jià),同時(shí),也對(duì)嚴(yán)重影響著網(wǎng)站品牌SEO優(yōu)化排名。那么,一個(gè)新搭建的網(wǎng)站,要如何打造高質(zhì)量的內(nèi)容呢?

1、審視自己網(wǎng)站的文章是否有趣、有用?

包含足量有用信息是贏得訪客關(guān)注的基礎(chǔ);若能施以輕松、明快、流暢的筆調(diào),則會(huì)錦上添花。

2、撰寫網(wǎng)站文章,需要抓住用戶某個(gè)痛點(diǎn)

如果文章能夠?yàn)榭蛻舻乃阉啬康奶峁┮环N解答,則這篇文章成功的機(jī)會(huì)更高。

3、強(qiáng)有吸引力的標(biāo)題,讓你的文章錦上添花

這并不是鼓勵(lì)以標(biāo)題騙取點(diǎn)擊,而是在概述相關(guān)內(nèi)容的基礎(chǔ)上,標(biāo)題最好能夠具備亮點(diǎn)。

4、網(wǎng)站文章是否具有可讀性

內(nèi)容上:撰寫內(nèi)容時(shí),需要考慮目標(biāo)讀者的閱讀感受,把握行文風(fēng)格、用詞、節(jié)奏等等;形式上:文章的結(jié)構(gòu)要清晰簡明,重點(diǎn)突出,層次分明,合理使用小標(biāo)題、插圖等方法遠(yuǎn)比“一逗到底”的大段純文字好得多。

5、網(wǎng)站文章是否克服了高“跳出率”?

跳離率通俗來說,就是用戶進(jìn)入網(wǎng)站瀏覽該頁內(nèi)容,在很短時(shí)間內(nèi)立即離開的比率。如果用戶點(diǎn)擊進(jìn)入瀏覽一篇文章,在該頁面停留一段時(shí)間獲取所需信息,那么這會(huì)給搜索引擎發(fā)送一種積極信號(hào),表示該頁面的內(nèi)容滿足了客戶的需求,從而有利于頁面顯示在相關(guān)搜索結(jié)果頁面的有利位置。

網(wǎng)絡(luò)推廣

6、網(wǎng)站文章是否考慮了SEO優(yōu)化排名?

撰寫文章考慮用戶的同時(shí),也需要考慮SEO優(yōu)化排名,具體來說應(yīng)該做到兩點(diǎn):在文中使用關(guān)鍵詞;并且通過內(nèi)鏈等方式通過網(wǎng)站的其他頁面對(duì)該頁面提供支持。

做網(wǎng)站建設(shè)的人都知道,網(wǎng)站獲取流量的最大入口就是搜索引擎SEO優(yōu)化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在這些平臺(tái)中獲取流量時(shí)要么就是競爭性過大難以獲取排名,要么就是需要花費(fèi)大量的金錢和人力進(jìn)行維護(hù),甚至某些時(shí)候入不敷出。網(wǎng)站建設(shè)的難度也就是在于此,建設(shè)網(wǎng)站十分容易,獲取流量就是一件涉及到品牌SEO優(yōu)化的任務(wù)。

現(xiàn)代化互聯(lián)網(wǎng)營銷除了seo優(yōu)化排名,還有微博營銷、QQ營銷、微信營銷、論壇營銷、短視頻營銷等方式,這都是借助平臺(tái)的用戶來引流到網(wǎng)站,這種方式不但有效而且效果明顯。

1、百度平臺(tái)。

在中國的互聯(lián)網(wǎng),百度我相信中國的網(wǎng)民應(yīng)該沒有不知道,沒有沒登陸過百度的吧。既然百度有這么多的用戶,這么多的流量,那你就要重視起來。百度渠道必須要做的幾個(gè)平臺(tái):百度百科、百度知道、百度帖吧、百度知道、百度百家號(hào)。這幾個(gè)網(wǎng)站在我們上網(wǎng)搜索的時(shí)候,權(quán)重都是前幾位的。高質(zhì)量的軟文加上合適的外鏈。你的流量肯定會(huì)大爆炸的。

2、騰訊平臺(tái)。

騰訊最珍貴的是什么?不就是他巨大的客戶群體嗎?,F(xiàn)在應(yīng)該有十億了吧,中國的網(wǎng)民應(yīng)該都會(huì)有自己的QQ號(hào),我小學(xué)2年紀(jì)的農(nóng)村小孩都有了。這么大的用戶群體,該如何告訴他們你的存在呢?答案很簡單,你的空間和你的QQ群、微信群是主要的陣地,多申請(qǐng)一些賬號(hào),每個(gè)賬號(hào)加很多很多的QQ群,那么多的人,你還愁沒有人看到你嗎?把你的空間布滿你的廣告信息,只要是進(jìn)入你空間的人,認(rèn)識(shí)不認(rèn)識(shí)的都會(huì)點(diǎn)開看一下的,這個(gè)是有統(tǒng)計(jì)的。

3、微博、微信平臺(tái)。

雖說微博影響力已大不如前,但相信,搭建一個(gè)認(rèn)證標(biāo)志的微博,可以給新用戶帶來更多信賴感。而微信公眾號(hào),相信更不用多說?,F(xiàn)如今但凡推廣,絕對(duì)離不開微信,如何運(yùn)用好公眾號(hào)廣告、朋友圈廣告等渠道,也是十分必要。

4、短視頻與直播。

現(xiàn)如今的網(wǎng)絡(luò),短視頻的影響力不斷擴(kuò)大。此時(shí),運(yùn)用好秒拍、抖音、快手等短視頻、直播平臺(tái)營銷自己則更為重要。但隨之而來的難題是,你必須如何將產(chǎn)品、網(wǎng)站等轉(zhuǎn)化為富有噱頭的短視頻,這就考驗(yàn)了運(yùn)營人員的點(diǎn)子是否多,是否能瞬間抓住各年齡段用戶群體。

網(wǎng)站做好品牌SEO優(yōu)化——打造高質(zhì)量內(nèi)容引流量

網(wǎng)站建設(shè),需經(jīng)歷頁面布局規(guī)劃-頁面設(shè)計(jì)-程序-內(nèi)容填充-測試等多個(gè)過程,而在這其中,網(wǎng)站內(nèi)容的好壞,將直接影響用戶對(duì)企業(yè)、品牌或整個(gè)網(wǎng)站的整體評(píng)價(jià),同時(shí),也對(duì)嚴(yán)重影響著網(wǎng)站品牌SEO優(yōu)化排名。那么,一個(gè)新搭建的網(wǎng)站,要如何打造高質(zhì)量的內(nèi)容呢?

1、審視自己網(wǎng)站的文章是否有趣、有用?

包含足量有用信息是贏得訪客關(guān)注的基礎(chǔ);若能施以輕松、明快、流暢的筆調(diào),則會(huì)錦上添花。

2、撰寫網(wǎng)站文章,需要抓住用戶某個(gè)痛點(diǎn)

如果文章能夠?yàn)榭蛻舻乃阉啬康奶峁┮环N解答,則這篇文章成功的機(jī)會(huì)更高。

3、強(qiáng)有吸引力的標(biāo)題,讓你的文章錦上添花

這并不是鼓勵(lì)以標(biāo)題騙取點(diǎn)擊,而是在概述相關(guān)內(nèi)容的基礎(chǔ)上,標(biāo)題最好能夠具備亮點(diǎn)。

4、網(wǎng)站文章是否具有可讀性

內(nèi)容上:撰寫內(nèi)容時(shí),需要考慮目標(biāo)讀者的閱讀感受,把握行文風(fēng)格、用詞、節(jié)奏等等;形式上:文章的結(jié)構(gòu)要清晰簡明,重點(diǎn)突出,層次分明,合理使用小標(biāo)題、插圖等方法遠(yuǎn)比“一逗到底”的大段純文字好得多。

5、網(wǎng)站文章是否克服了高“跳出率”?

跳離率通俗來說,就是用戶進(jìn)入網(wǎng)站瀏覽該頁內(nèi)容,在很短時(shí)間內(nèi)立即離開的比率。如果用戶點(diǎn)擊進(jìn)入瀏覽一篇文章,在該頁面停留一段時(shí)間獲取所需信息,那么這會(huì)給搜索引擎發(fā)送一種積極信號(hào),表示該頁面的內(nèi)容滿足了客戶的需求,從而有利于頁面顯示在相關(guān)搜索結(jié)果頁面的有利位置。

網(wǎng)絡(luò)推廣

6、網(wǎng)站文章是否考慮了SEO優(yōu)化排名?

撰寫文章考慮用戶的同時(shí),也需要考慮SEO優(yōu)化排名,具體來說應(yīng)該做到兩點(diǎn):在文中使用關(guān)鍵詞;并且通過內(nèi)鏈等方式通過網(wǎng)站的其他頁面對(duì)該頁面提供支持。

做網(wǎng)站建設(shè)的人都知道,網(wǎng)站獲取流量的最大入口就是搜索引擎SEO優(yōu)化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在這些平臺(tái)中獲取流量時(shí)要么就是競爭性過大難以獲取排名,要么就是需要花費(fèi)大量的金錢和人力進(jìn)行維護(hù),甚至某些時(shí)候入不敷出。網(wǎng)站建設(shè)的難度也就是在于此,建設(shè)網(wǎng)站十分容易,獲取流量就是一件涉及到品牌SEO優(yōu)化的任務(wù)。

現(xiàn)代化互聯(lián)網(wǎng)營銷除了seo優(yōu)化排名,還有微博營銷、QQ營銷、微信營銷、論壇營銷、短視頻營銷等方式,這都是借助平臺(tái)的用戶來引流到網(wǎng)站,這種方式不但有效而且效果明顯。

1、百度平臺(tái)。

在中國的互聯(lián)網(wǎng),百度我相信中國的網(wǎng)民應(yīng)該沒有不知道,沒有沒登陸過百度的吧。既然百度有這么多的用戶,這么多的流量,那你就要重視起來。百度渠道必須要做的幾個(gè)平臺(tái):百度百科、百度知道、百度帖吧、百度知道、百度百家號(hào)。這幾個(gè)網(wǎng)站在我們上網(wǎng)搜索的時(shí)候,權(quán)重都是前幾位的。高質(zhì)量的軟文加上合適的外鏈。你的流量肯定會(huì)大爆炸的。

2、騰訊平臺(tái)。

騰訊最珍貴的是什么?不就是他巨大的客戶群體嗎。現(xiàn)在應(yīng)該有十億了吧,中國的網(wǎng)民應(yīng)該都會(huì)有自己的QQ號(hào),我小學(xué)2年紀(jì)的農(nóng)村小孩都有了。這么大的用戶群體,該如何告訴他們你的存在呢?答案很簡單,你的空間和你的QQ群、微信群是主要的陣地,多申請(qǐng)一些賬號(hào),每個(gè)賬號(hào)加很多很多的QQ群,那么多的人,你還愁沒有人看到你嗎?把你的空間布滿你的廣告信息,只要是進(jìn)入你空間的人,認(rèn)識(shí)不認(rèn)識(shí)的都會(huì)點(diǎn)開看一下的,這個(gè)是有統(tǒng)計(jì)的。

3、微博、微信平臺(tái)。

雖說微博影響力已大不如前,但相信,搭建一個(gè)認(rèn)證標(biāo)志的微博,可以給新用戶帶來更多信賴感。而微信公眾號(hào),相信更不用多說?,F(xiàn)如今但凡推廣,絕對(duì)離不開微信,如何運(yùn)用好公眾號(hào)廣告、朋友圈廣告等渠道,也是十分必要。

4、短視頻與直播。

現(xiàn)如今的網(wǎng)絡(luò),短視頻的影響力不斷擴(kuò)大。此時(shí),運(yùn)用好秒拍、抖音、快手等短視頻、直播平臺(tái)營銷自己則更為重要。但隨之而來的難題是,你必須如何將產(chǎn)品、網(wǎng)站等轉(zhuǎn)化為富有噱頭的短視頻,這就考驗(yàn)了運(yùn)營人員的點(diǎn)子是否多,是否能瞬間抓住各年齡段用戶群體。

轉(zhuǎn)載請(qǐng)注明:seo-網(wǎng)站優(yōu)化-網(wǎng)站建設(shè)-外鏈代發(fā)

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

我們對(duì)2021年的用戶體驗(yàn)有何期待?

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn)設(shè)計(jì)是一個(gè)動(dòng)態(tài)領(lǐng)域,每年都會(huì)為我們帶來新的趨勢,最近十二個(gè)月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實(shí)世界之間的互動(dòng)方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費(fèi)更多的時(shí)間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗(yàn)的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對(duì)手并在人群中脫穎而出吧。


語音介面

我們?cè)?a style="outline:0px;margin:0px;padding:0px;text-decoration:none;color:inherit;">2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計(jì)中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機(jī)器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗(yàn)方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實(shí)施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機(jī)器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗(yàn)。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計(jì)中最明顯的趨勢之一。用戶正在體驗(yàn)越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計(jì)應(yīng)運(yùn)而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計(jì)元素和明亮的組合,但UX設(shè)計(jì)人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計(jì)的簡約方法的另一個(gè)重要方面。信息過載對(duì)于大多數(shù)現(xiàn)代用戶來說是一個(gè)痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗(yàn)設(shè)計(jì)的一種大趨勢,它已經(jīng)脫離了對(duì)簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對(duì)象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨(dú)立的設(shè)計(jì)元素,在視覺美學(xué)和用戶體驗(yàn)優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計(jì)中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對(duì)關(guān)鍵對(duì)象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計(jì)人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時(shí)也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時(shí),您還可以在深色模式或任何其他顏色下使用此用戶體驗(yàn)趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗(yàn)將與我們習(xí)慣的在線體驗(yàn)不同。UX設(shè)計(jì)以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計(jì)師有意在版面設(shè)計(jì)中實(shí)現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對(duì)象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計(jì)可以很好地證明品牌的身份并突出其獨(dú)特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個(gè)關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計(jì)中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計(jì))的組合,它們通常被認(rèn)為彼此相對(duì)。擬態(tài)化是關(guān)于模仿現(xiàn)實(shí)世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實(shí)元素來創(chuàng)建直觀且用戶友好的UI時(shí),它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計(jì)是一個(gè)更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點(diǎn)。它使用圖形強(qiáng)度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對(duì)象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會(huì)將現(xiàn)實(shí)主義推到極致。取而代之的是,它努力實(shí)現(xiàn)淺色和微妙對(duì)比度的“柔和”外觀。



在過去大約一年的時(shí)間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計(jì)人員對(duì)該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺(tái)已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機(jī)和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計(jì)中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計(jì)解決方案中實(shí)現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗(yàn)趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時(shí)尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個(gè)界面中結(jié)合視差效果和3D圖形。使用視差滾動(dòng)時(shí),網(wǎng)頁背景和前景元素以不同的速度移動(dòng)。僅憑它就能產(chǎn)生深度感。通過為此添加3D對(duì)象,您可以創(chuàng)建一種真正的身臨其境的體驗(yàn),并將在用戶的記憶中保留很長時(shí)間。


 



  

不對(duì)稱

隨著我們?cè)O(shè)備屏幕的變寬,UI / UX設(shè)計(jì)中出現(xiàn)了不對(duì)稱趨勢。通常,不對(duì)稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計(jì)中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計(jì)元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時(shí)使它保持微妙和優(yōu)雅。


不對(duì)稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計(jì)技術(shù)一起實(shí)現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對(duì)稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請(qǐng)務(wù)必記住,非對(duì)稱設(shè)計(jì)并不意味著“隨機(jī)放置的UI元素”。在布局上定位對(duì)象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強(qiáng)調(diào)重要信息。

動(dòng)畫制作

今天,當(dāng)我們?cè)诨ヂ?lián)網(wǎng)上進(jìn)入隨機(jī)網(wǎng)站時(shí),很可能會(huì)看到GIF,微型動(dòng)畫,動(dòng)畫插圖或其他一些運(yùn)動(dòng)設(shè)計(jì)元素。動(dòng)畫在用戶體驗(yàn)設(shè)計(jì)中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動(dòng)物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個(gè)性。



如果要在用戶界面設(shè)計(jì)中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對(duì)象可能會(huì)使訪問者感到困惑,從而促使他們甚至比計(jì)劃的要早離開網(wǎng)頁。動(dòng)畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價(jià)值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(jì)(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個(gè)實(shí)用的信息體系結(jié)構(gòu),UX設(shè)計(jì)人員需要對(duì)產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費(fèi)太多精力就能獲得所需的結(jié)果。因此,在設(shè)計(jì)過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點(diǎn)監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對(duì)可以改善幾乎每個(gè)軟件解決方案或網(wǎng)站的用戶體驗(yàn)。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對(duì)目標(biāo)受眾更具吸引力。


文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


我們對(duì)2021年的用戶體驗(yàn)有何期待?

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn)設(shè)計(jì)是一個(gè)動(dòng)態(tài)領(lǐng)域,每年都會(huì)為我們帶來新的趨勢,最近十二個(gè)月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實(shí)世界之間的互動(dòng)方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費(fèi)更多的時(shí)間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗(yàn)的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對(duì)手并在人群中脫穎而出吧。


語音介面

我們?cè)?a style="outline:0px;margin:0px;padding:0px;text-decoration:none;color:inherit;">2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計(jì)中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機(jī)器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗(yàn)方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實(shí)施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機(jī)器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗(yàn)。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計(jì)中最明顯的趨勢之一。用戶正在體驗(yàn)越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計(jì)應(yīng)運(yùn)而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計(jì)元素和明亮的組合,但UX設(shè)計(jì)人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計(jì)的簡約方法的另一個(gè)重要方面。信息過載對(duì)于大多數(shù)現(xiàn)代用戶來說是一個(gè)痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗(yàn)設(shè)計(jì)的一種大趨勢,它已經(jīng)脫離了對(duì)簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對(duì)象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨(dú)立的設(shè)計(jì)元素,在視覺美學(xué)和用戶體驗(yàn)優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計(jì)中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對(duì)關(guān)鍵對(duì)象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計(jì)人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時(shí)也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時(shí),您還可以在深色模式或任何其他顏色下使用此用戶體驗(yàn)趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗(yàn)將與我們習(xí)慣的在線體驗(yàn)不同。UX設(shè)計(jì)以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計(jì)師有意在版面設(shè)計(jì)中實(shí)現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對(duì)象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計(jì)可以很好地證明品牌的身份并突出其獨(dú)特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個(gè)關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計(jì)中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計(jì))的組合,它們通常被認(rèn)為彼此相對(duì)。擬態(tài)化是關(guān)于模仿現(xiàn)實(shí)世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實(shí)元素來創(chuàng)建直觀且用戶友好的UI時(shí),它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計(jì)是一個(gè)更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點(diǎn)。它使用圖形強(qiáng)度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對(duì)象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會(huì)將現(xiàn)實(shí)主義推到極致。取而代之的是,它努力實(shí)現(xiàn)淺色和微妙對(duì)比度的“柔和”外觀。



在過去大約一年的時(shí)間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計(jì)人員對(duì)該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺(tái)已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機(jī)和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計(jì)中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計(jì)解決方案中實(shí)現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗(yàn)趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時(shí)尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個(gè)界面中結(jié)合視差效果和3D圖形。使用視差滾動(dòng)時(shí),網(wǎng)頁背景和前景元素以不同的速度移動(dòng)。僅憑它就能產(chǎn)生深度感。通過為此添加3D對(duì)象,您可以創(chuàng)建一種真正的身臨其境的體驗(yàn),并將在用戶的記憶中保留很長時(shí)間。


 



  

不對(duì)稱

隨著我們?cè)O(shè)備屏幕的變寬,UI / UX設(shè)計(jì)中出現(xiàn)了不對(duì)稱趨勢。通常,不對(duì)稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計(jì)中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計(jì)元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時(shí)使它保持微妙和優(yōu)雅。


不對(duì)稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計(jì)技術(shù)一起實(shí)現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對(duì)稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請(qǐng)務(wù)必記住,非對(duì)稱設(shè)計(jì)并不意味著“隨機(jī)放置的UI元素”。在布局上定位對(duì)象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強(qiáng)調(diào)重要信息。

動(dòng)畫制作

今天,當(dāng)我們?cè)诨ヂ?lián)網(wǎng)上進(jìn)入隨機(jī)網(wǎng)站時(shí),很可能會(huì)看到GIF,微型動(dòng)畫,動(dòng)畫插圖或其他一些運(yùn)動(dòng)設(shè)計(jì)元素。動(dòng)畫在用戶體驗(yàn)設(shè)計(jì)中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動(dòng)物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個(gè)性。



如果要在用戶界面設(shè)計(jì)中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對(duì)象可能會(huì)使訪問者感到困惑,從而促使他們甚至比計(jì)劃的要早離開網(wǎng)頁。動(dòng)畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價(jià)值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(jì)(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個(gè)實(shí)用的信息體系結(jié)構(gòu),UX設(shè)計(jì)人員需要對(duì)產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費(fèi)太多精力就能獲得所需的結(jié)果。因此,在設(shè)計(jì)過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點(diǎn)監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對(duì)可以改善幾乎每個(gè)軟件解決方案或網(wǎng)站的用戶體驗(yàn)。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對(duì)目標(biāo)受眾更具吸引力。

文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

你的屏幕「太黑了」!深色模式到底怎么用?

ui設(shè)計(jì)分享達(dá)人

深色模式并不萬能 


從移動(dòng)屏幕到大型電視,深色的UI界面隨處可見。深色模式可以表達(dá)力量、奢華、精致和優(yōu)雅,但這種設(shè)計(jì)模式也會(huì)帶來很多挑戰(zhàn),應(yīng)用不當(dāng)難免會(huì)被用戶吐槽。所以開始設(shè)計(jì)前,大家最好深色熟慮下,是否真的需要做深色。


物理學(xué)家說,黑色并不是一種真正的顏色,它沒有光。艾薩克·牛頓爵士在通過棱鏡照耀陽光的實(shí)驗(yàn)中,甚至沒有將黑色包含在顏色光譜中。


在色彩心理學(xué)中,大多數(shù)色彩代表不同的人、不同的事物。西方文化里,黑色常與死亡、神秘和邪惡聯(lián)系在一起;綠色與生長、自然相關(guān);藍(lán)色可以使人平靜,因?yàn)樗屓寺?lián)想到天空和水,所以,顏色是飽含情感的。其他影響還來自文化,例如紫色仍與奢侈品聯(lián)系在一起,在許多古代文化中,紫色是昂貴稀有的,只有貴族才能負(fù)擔(dān)得起。


深色界面的數(shù)字產(chǎn)品,是未來發(fā)展的一大趨勢。人們常說,這種模式可以減輕眼睛疲勞,但并沒有相關(guān)證據(jù)表明是真的。在某些情況下,它還代表著節(jié)省電池壽命,也是一種美學(xué)意義上的選擇。



深色模式應(yīng)用限制

并非所有界面都適合深色主題。設(shè)計(jì)師應(yīng)考慮品牌契合度、文化適應(yīng)性和顏色心理學(xué),在選擇搭配時(shí)考慮情感影響,雖然這些因素不容易平衡。針對(duì)千禧一代的金融類應(yīng)用程序,可能會(huì)用深色模式營造炫酷的效果,但對(duì)于以大眾作為目標(biāo)人群的銀行網(wǎng)站就不太合適了。當(dāng)用戶想要查看自己的余額與支付賬單時(shí),太黑暗、太時(shí)髦都會(huì)顯得華麗不實(shí)用。


B2B SaaS應(yīng)用程序的深色模式很難設(shè)計(jì),標(biāo)準(zhǔn)的Web UI組件(例如數(shù)據(jù)表、窗口小部件、表單和下拉菜單)在深色界面中看起來可能很奇怪。由于許多配色方案不適用于深色界面,對(duì)于某些品牌和產(chǎn)品來說,深色模式并不是最優(yōu)選擇。


從未接觸過深色模式的設(shè)計(jì)師,如果想要搭建一個(gè)深色界面,不妨參照以下條件,先來判斷下是否需要,什么情況下建議使用深色模式?

-當(dāng)設(shè)計(jì)版面相對(duì)稀疏,極簡型的內(nèi)容比較少時(shí);

-適用于連貫呈現(xiàn)的內(nèi)容,例如夜間娛樂應(yīng)用程序;

-想要?jiǎng)?chuàng)造醒目的戲劇性外觀時(shí)。


以下這些情況下不建議使用深色模式:

-出現(xiàn)大量文本時(shí)(在深色背景上閱讀相對(duì)困難);

-當(dāng)設(shè)計(jì)需要多種顏色時(shí)。


深色模式下的桌面應(yīng)用信息中心 by Ramotion 


在深色模式中形成對(duì)比

深色模式并不非要設(shè)計(jì)成黑色的,你可以將它理解為是一種「低光」模式。設(shè)計(jì)的核心點(diǎn)之一,就是表達(dá)出足夠的對(duì)比度,這樣視覺元素就會(huì)被分離開,且文本也會(huì)變得清晰易讀。大多數(shù)設(shè)計(jì)師認(rèn)為多用黑色,是獲得強(qiáng)烈對(duì)比度的最佳選擇。我的建議是,最好不要將純黑色(#000000)用于背景或者盡量少用,把它留給其他UI元素,比如較小的圖形或邊框性質(zhì)類的圖形。


Google的Material Design深色模式,推薦使用深灰色(#121212)作為界面主色,目的是為了表達(dá)出更有深度的空間感。在定義配色方案時(shí),往深灰中添加一些微妙的深藍(lán)色,可以讓數(shù)字產(chǎn)品的界面擁有更好的深色調(diào)性。


Brittany Chiang網(wǎng)站將深灰色與藍(lán)色融合,形成了令人愉悅的深色模式


使用灰色的優(yōu)點(diǎn)在于,它給了設(shè)計(jì)師更多發(fā)揮的空間,去表達(dá)更廣泛的顏色?;疑{(diào)同深藍(lán)色有同樣功能,幫助畫面更有深度,也更輕松地看到元素陰影。


需要特別注意深色模式中的文本對(duì)比,網(wǎng)頁內(nèi)容可訪問性指南(WCAG)要求——「文本的視覺呈現(xiàn)對(duì)比度,至少應(yīng)為4.5:1」,大型文本的對(duì)比度至少在3:1。設(shè)計(jì)師需要確保文字內(nèi)容在黑暗模式下能夠清晰可辨認(rèn)。


另外,測試其他UI元素(例如卡片、按鈕、字段和各種顯示器上的圖標(biāo))之間的對(duì)比也是一個(gè)好辦法。如果UI元素之間沒有突出的對(duì)比,那么設(shè)計(jì)就需要調(diào)整下了,枯燥無味的設(shè)計(jì)對(duì)于用戶來說也是一種折磨。


左側(cè)的深色模式中,文本和背景之間的對(duì)比明顯不足


重點(diǎn)注意一:配色

顏色在深色模式中非常突出,最好使用淺色、飽和度低的配色方案,避免過于刺激視覺。顏色與文本一起使用時(shí),需要參照WCAG的AA標(biāo)準(zhǔn),至少4.5:1。Google建議顏色數(shù)量不必太多,使界面都處于深色中。


Jabra Sound +應(yīng)用程序只給深色模式配色選擇了2-3種顏色


適宜的配色方案能營造出非常好的對(duì)比效果。Colorable在線工具,只要輸入色號(hào)就能看到文本和背景色組合在一起是否合適;Google的Material Design網(wǎng)站上也有一個(gè)調(diào)色板生成器,設(shè)計(jì)師可以使用它創(chuàng)建調(diào)色板,應(yīng)用到UI上。


文字和基本元素(例如按鈕和圖標(biāo))在深色背景上顯示時(shí)應(yīng)符合易讀性標(biāo)準(zhǔn)。如上面的Jabra Sound +應(yīng)用程序所示,文本和圖標(biāo)可以使用白色以外的顏色進(jìn)行搭配。


“使用強(qiáng)烈對(duì)比色來提高可讀性。人們對(duì)于顏色的感知會(huì)受到許多因素影響,包括字號(hào)、字重、顏色亮度、屏幕分辨率和照明條件?!?——Apple人機(jī)界面指南


深色模式并不需要大量顏色來堆砌


重點(diǎn)注意二:利用負(fù)空間,少即是多

成功的深色模式設(shè)計(jì),需要巧妙利用負(fù)空間。如果設(shè)計(jì)不當(dāng),會(huì)使數(shù)字產(chǎn)品顯得笨拙與沉重。為了平衡這一點(diǎn),設(shè)計(jì)師可以利用極簡主義中的負(fù)空間,讓深色界面更輕巧,也能讓用戶更容易識(shí)別信息內(nèi)容。


UI元素周圍的大量負(fù)空間使界面被重新定義,而且元素也不會(huì)出現(xiàn)密集與混亂感。如果沒有呼吸空間,用戶在閱讀界面時(shí),可能很快的略過,因?yàn)榇竽X沒有快速的識(shí)別出重要內(nèi)容。


充斥著太多元素和文本的界面,是導(dǎo)致深色模式體驗(yàn)差的禍根。設(shè)計(jì)師需要仔細(xì)考慮深色模式中的視覺層次結(jié)構(gòu),從而提升用戶體驗(yàn)。


極簡主義的深色模式界面 by Denys Tyrynskyi


重點(diǎn)注意三:版式

深色模式中的每一段文字都需要仔細(xì)檢查,更需要關(guān)注2個(gè)方面——可讀性和對(duì)比性。首先,界面中的文本必須足夠大,以確保清晰易讀(深色背景上的小文字,閱讀起來體驗(yàn)很差);其次,文本和背景之間必須有明顯的對(duì)比。設(shè)計(jì)師可以通過增加對(duì)比度,為較小的文本調(diào)整字體大小、字符間距和行高,去優(yōu)化可讀性問題。


W3C AAA建議常規(guī)尺寸的文本(如果不是粗體,則小于18pt)的對(duì)比度至少應(yīng)為7:1。這也適用于其他UI元素——圖標(biāo)、文本圖像和文本標(biāo)簽(按鈕標(biāo)簽),設(shè)計(jì)師有責(zé)任確保所有人都能正確應(yīng)用界面。


深色模式中應(yīng)用優(yōu)秀字體很有必要,像Google字體和字體庫,以及Adobe Typekit都能提供便捷的設(shè)計(jì)支持。


AirPods Pro頁面使用超大字體和強(qiáng)烈的對(duì)比,以達(dá)到最好的效果


重點(diǎn)注意四:空間深度感

深色模式不應(yīng)該是平淡的,在正常明亮模式下,元素的高光或是陰影都會(huì)讓界面產(chǎn)生深度感。而深色界面更具挑戰(zhàn)性,建議設(shè)計(jì)師可以使用類似3-4多個(gè)層面,以及相應(yīng)的配色方案來傳達(dá)深度感。


為什么要有深度?深度感是與物理世界的一種呼應(yīng)。我們的視覺有深度感知的能力,因?yàn)槿藗兪巧钤?D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隱式光源,表面就越亮。一個(gè)非常亮的表面,更容易區(qū)分組件之間的高度,還有助于查看陰影,使每個(gè)表面的邊緣線更明顯。


表面越亮,越接近隱藏光源 by Material Design


設(shè)置每個(gè)級(jí)別的表面顏色需要小心,建議不要超過4或5個(gè)級(jí)別,最好在設(shè)計(jì)系統(tǒng)中將元素的文本顏色指定為純黑色(#000000),以在淺灰色背景上實(shí)現(xiàn)良好的對(duì)比度。


深色模式設(shè)計(jì)啟發(fā)

基于上述原則,以下是一些優(yōu)秀的深色模式示例:


The Atom Finance website


Atom Finance利用深色模式打造了精致外觀,并將其強(qiáng)調(diào)色限制為3種。復(fù)雜的金融網(wǎng)站采用了極簡設(shè)計(jì),而且很好地使用了陰影來表現(xiàn)不同組件的深度感。


電子商務(wù)網(wǎng)站 by Daniel Klopper


電子商務(wù)網(wǎng)站 by Darion Mitchell


IBM儀表板 by Ruben Fernandez


盡管處理SaaS的深色模式遇到了挑戰(zhàn),但I(xiàn)BM的數(shù)據(jù)可視化儀表板仍是典范。強(qiáng)調(diào)色的數(shù)量最少,并且該網(wǎng)站使用細(xì)微的陰影顯示不同元素的深度。


Wego,Spotify和Apple的深色模式APP(Android和iOS)


使用深色模式固然好,但需要依據(jù)實(shí)際產(chǎn)品屬性來判斷,不應(yīng)出于時(shí)髦、流行甚至是與眾不同或模仿他人等因素確定。設(shè)計(jì)者應(yīng)有充分的選擇依據(jù),并考慮其內(nèi)容、使用環(huán)境以及顯示設(shè)備是否適合來最終敲定。


深色模式適用于一些數(shù)字產(chǎn)品,而非所有產(chǎn)品,界面簡潔非常關(guān)鍵。對(duì)于復(fù)雜且數(shù)據(jù)繁重的B2B平臺(tái),以及文本繁多的頁面,深色模式都是不適合的。對(duì)于從情感和美學(xué)角度去探索深色模式的設(shè)計(jì)師來說,他們開辟了一個(gè)新的領(lǐng)域。

文章來源:站酷   作者:UX辭典

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔