首頁

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

ui設計分享達人

1.情緒版的概念

首先我們要明確什么是情緒版?我的理解是:情緒版既不是初稿也不是最終的風格方向,而是設計師在了解了相關的產品背景后,基于自己對于產品的理解給出的一個較為初始的設計建議,并且希望可以通過這個初始的建議與產品側達成一些相關的設計共識。

 

2.情緒版的大概流程

情緒版的設計流程大概分為前中后三個階段,前期:分析-收集,中期:篩選-組合,后期:打磨-呈現。

 

前期:分析-收集

主要是分析產品相關背景或需求本身的方向,結合產品背景及需求本身再進一步分析大概的設計方向并收集相關素材內容。

 

中期:篩選-組合

當我們收集完成后需要對現有素材進行二次篩選并組合,基于現有素材組合大概的設計方案結構。

 

后期:打磨-呈現

基礎方案組合完成后需要進行二次打磨,細化方案的內容表現,檢查整體的一致性及完整度,最后呈現給產品方。

 

3.為什么要做情緒版

可能很多設計師會疑惑為什么要做情緒版,直接設計初稿不就好了嗎?如果有這個疑問,可能還沒實際了解到情緒版到作用。但我們可以試著從我們在設計過程中遇到的痛點來了解情緒版的作用或者意義。

在設計的過程中你是否會存在下面幾個問題:

前期思考不夠——設計產出方案少;

設計不懼探索性——設計來源沒有考究;

初稿多次修改沒能達成共識——設計表達不出對方想要的;

設計中期出現不一致——設計沒有貫徹始終。

 

4.情緒版的作用

從這幾個問題中,我們可以得到一個比較統(tǒng)一的結論就是:前期設計呈現內容不夠,導致溝通不足而產生方向不統(tǒng)一。因此基于這個關鍵點,我們再來看情緒版的作用

 

(1)輔助構建世界觀

在前期,世界觀、背景方面的內容大多是以文字的方式呈現,因此設計師可以通過情緒版的方式,來輸出對應的世界觀設計表現,這樣可以更加直觀的表現出對應的視覺語言。

 

(2)具象設計想法

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

 

(3)明確設計方向

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

 

(4)提高前期設計的效率

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

 

5.情緒版的基本原則

從多次的嘗試中,我總結梳理了幾個基本原則,了解這些原則可以讓我們在做的時候更加嚴謹,輸出更加準確的設計方案。

 

(1)多方向性

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

 

(2)嘗試性

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

 

(3)效率性

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

 

(4)試探性

情緒版是一種非常有效試探產品側想要往那種方向去推動的方式,因為我們在實際的設計過程中,產品側可能也對整體的設計大調并不少特別有明確的腦補,因此設計師可以借助情緒版的設計來挖掘產品側想要往哪個方向進行發(fā)力。

 

6.情緒版設計的方法

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

 

(1)借鑒圖像/插圖

在我們設計一些專題活動或者繪制插圖相關的一些設計時,可以考慮使用這種方法來輸出你的情緒版設計,可以通過借鑒一些設計網站或插圖網站上的現有素材來拼接,并表達自己在這方法的一些設計意圖及想法。

 

(2)結合實際場景引申

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

 

(3)借鑒摘取同類型設計

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

 

(4)繪制草稿

當我們想要表達一些溝通或者框架的設計時,我們可以使用草稿繪制的方式來表現,這個方式簡單快捷,可以很有效率的對齊大部分的設計共識。

 

7.情緒版設計的注意事項

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

 

(1)控制方案的數量

設計方案控制在2-3個左右即可,前期大多是屬于試探性方案呈現及找方向,太多則容易導致選擇困難。

 

(2)避免篇幅過長

篇幅過長往往容易降低別人閱讀的耐心,對于情緒版的輸出也是如此。結合過往的經驗,建議以16:9的畫面為一頁來呈現一個方案。

 

(3)區(qū)分重點次要

在一頁內呈現的方案避免過于平均,可以適當突出某些想要重點表達的內容,例如在這個方案中想要重點突出圖標、顏色等,那么這里需要突出這部分在畫面中的比例,適當縮小其他模塊的尺寸。

 

(4)結合世界觀

在輸出情緒版設計方案時還可以適當考慮結合產品的世界觀,通過一些具象化的圖形或者插圖來表現相關的內容。例如我們之前在游戲中心改版的嘗試中,就發(fā)散了幾個相關的世界觀,因此我們在輸出方案時,則只需要把對應的世界觀作為方案,通過情緒版的方式表現出來即可。

 

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

一致性是表現一個設計師是否具有系統(tǒng)化、全局觀的思考思維,因此我們在表現情緒版時也需要關注這方面的內容,避免整體的調性不匹配。

 

(6)完整性表達

在呈現方案時,盡量多維度的進行對比,呈現一個完整性、系統(tǒng)性的設計。例如我們在設計UI相關的內容,從圖標、顏色、字體等等一系列的內容需要細致的闡述清楚,讓人更加能夠了解你的意圖。

 

8.UI情緒版模版分享

由于我日常以設計UI為主,因此可以給大家重點分享我在UI情緒版設計的經驗。希望可以幫助到大家快速上手。

當你在做UI設計情緒版時,需要明確了解UI設計中的結構,更系統(tǒng)性的去思考整體的內容。我們在UI設計中往往需要包含以下這些內容:圖形系統(tǒng)(圖標+輔助圖形)、顏色系統(tǒng)、字體字形系統(tǒng)、質感形態(tài)、界面形態(tài)、插圖風格、動效系統(tǒng)、影像系統(tǒng),等等這些部分的內容。

 

UI情緒版模版

 

過往實際案例分享

案例一:整體風格比較偏個性一些,頁面嘗試用深色的背景設計

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

缺點:深色的設計接受度是否可以,是否適合平臺類APP設計

 

案例二:整體風格3D化的設計,包括頁面的一些體驗上都可以增加視察的效果來設計

優(yōu)點:整體設計風格比較新穎,符合現在的設計趨勢,整體感覺也比較年輕多彩

缺點:3D的制作成本相對較大。

 

案例三:整體風格比較清爽,白色融入漸變的設計也會顯得比較年輕

優(yōu)點:整體頁面清爽,可以滿足任何內容的透出,漸變色的圖標和按鈕的設計補充了細節(jié)

缺點:整體氛圍感、娛樂感較弱。

 

9.最后總結

很多時候我們會覺得情緒版設計可有可無,或者因為時間的關系不允許我們經過這一步。但,如我一開始提到的點,情緒版可以在前期幫助我們去打通很多思考的壁壘,輔助設計師在前期直觀的與產品側進行方向上的探討,從而找到大方向上的共識。


文章來源:學UI網   作者:妙妙

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


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

ui設計分享達人

01 什么是用戶畫像(what)

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

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

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

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

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

 

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

 

1.1 User Persona

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

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

 

1.2 User Profile

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

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

兩類畫像的對比如下圖:

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

 

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

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

其決定了B2B用戶畫像的幾個特點:

 

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

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

初創(chuàng)期:產品立項階段

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

 

成長期:產品運營中(已有數據積累)

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

 

成熟期:產品相對穩(wěn)定

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

 

衰退期:產品活躍度快速下降

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

 

2.2 產品使用角色多樣性

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

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

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

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

主要使用者:真正頻繁使用產品的人,也是產品/設計師想要提升產品體驗要瞄準的人群

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

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

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

 

2.3 崗位職責決定了用戶目標和使用場景

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

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

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

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

 

2.4 由客戶畫像和角色畫像構成

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

 

1)客戶畫像

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

一個典型的客戶色畫像會包括:

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

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

組織機構:自上而下都有哪些機構,彼此之間的關系。

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

 

2)角色畫像

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

因此在我們的產品設計階段,會更關注執(zhí)行層的角色畫像。當我們討論產品、需求、場景、用戶體驗的時候,往往需要將焦點聚集在這類人群上。

一個典型的角色畫像會包括:

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

用戶行為驅動:用戶的工作目標、工作任務和考核指標,B端角色通常是企業(yè)員工,為了薪酬,有一般都會有結合任務而完成的考核指標,了解考核指標可以在設計過程中更明確知道哪些內容是用戶最關注的東西;

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

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

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

3.1 客戶畫像的價值

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

對產品:明確為誰服務,快速的了解客戶的需求和狀況,確定產品功能設計,學會識別用戶的解決方案和用戶在場景下的訴求,不斷迭代調整產品;

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

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

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

 

3.2 角色畫像的價值

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

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

圖片來源于網絡

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

后疫情時代,對企業(yè)來說,改善產品用戶體驗,了解使用產品的終端用戶,構建角色畫像愈加重要。而角色畫像作為產品和設計師比較關注的畫像,有以下三點價值

設計前:幫助確立設計目標、設計策略與準則

設計中:解決架構混亂問題,明確需求功能的合理性和優(yōu)先級;解決需求爭議問題和溝通問題,與團隊成員就服務目標達成共識,

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

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

 

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

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

 

Step 1:研究準備與數據收集

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

小編大致總結了一下,B端用研有以下3大痛點:

信息獲取難:B端產品主要針對用戶工作和業(yè)務開展,一般都是強制使用產品不存在“挑剔”的選擇空間,導致用戶的反饋就非常少,信息的獲取壁壘較高。“深度訪談”是最核心也是獲取信息性價比最高的一種方法,但是出于對信息用途的不了解,對商業(yè)隱私、生意經驗泄露的擔憂,B端用戶可能不愿意配合調研或不信任你。

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

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

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

 

研究內容:

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

 

研究途徑:

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

 

Step 2:確定目標與畫像維度

此處有2個注意點:

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

針對以上2三點,下文將依次展開說明。

 

1、如何篩選出目標用戶?

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

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

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

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

那么這條決策鏈上的關鍵人就包括了HR總監(jiān)、CEO/董事長、HR。那在這個案例中,HR總監(jiān)是決策鏈的關鍵人物,因為只有他認可之后,才會申請購買或在CEO面前夸這個產品。而HR是最終產品的使用者,雖然他們在企業(yè)購買產品前沒有話語權,但是在續(xù)費階段,他們的話語權最大。對于處于成長期的產品來說,我們現階段的調研目標也是為了獲取HR總監(jiān)和HR兩類角色的用戶畫像,每個角色訪談4~6人;

 

2、畫像維度有哪些?

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

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

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

對于主要使用者,側重了解用戶特征、產品認知、使用場景與痛點,各功能的使用頻率、使用中遇到的問題等

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

 

Step 3:確定調研方法

明確了調研對象后,就可以展開調研了。一般有三種方式:

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

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

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

 

Step 4:采集角色資料

在明確目標與方法后,需要對整個研究進行細化,制定具體詳實的執(zhí)行計劃并開始招募用戶采集資料了??赏ㄟ^前中后三個階段性策略的來進行訪談。

 

1. 訪談前:搭建信任基礎

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

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

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

 

2. 訪談中:表現專業(yè)特質

開場介紹

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

 

暖場

在正式訪談前,可以先和用戶閑聊2~3分鐘,通過一定的溝通活躍氣氛,讓用戶更加放松,同時增強用戶對我們信任。暖場和開場介紹可穿插進行,沒有絕對的先后之分,在訪談者自我介紹完成之后,也可以讓被訪者進行自我介紹。

 

一般問題

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

 

深入問題

深入問題是用戶行為和想法更加深入的探索,會更關注用戶行為細節(jié)和行為背后的動機。一般在問這些問題時,訪談者需要不斷地詢問用戶為什么,直到用戶無法繼續(xù)回答。深入問題是整個訪談的核心,也最容易挖掘到用戶需求和痛點。

 

回顧與總結

每部分的訪談結束后可進行簡單的小結。訪談者通過回顧訪談過程對用戶的行為和態(tài)度進行客觀闡述,一方便有助于訪談者梳理思路,另一方面讓用戶對訪談結果再次確認。

 

3. 訪談后:實現長線共贏

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

 

Step 5:分析建模

1)根據角色對訪談對象分組

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

 

2)找出行為變量

分組后,需要識別關鍵的行為變量,將調研到的用戶與行為變量進行一一對應,并識別差異化行為模式。如下圖所示

 

3)映射訪談對象與行為變量的關系

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

 

4)找出共性行為模式

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

 

Step 6:畫像呈現

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

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

最終客戶畫像呈現如下圖

數據已脫敏,非真實數據

 

最終角色畫像呈現如下圖 

數據已脫敏,非真實數據

 

用戶畫像作為一個強大的設計和交流工具,能夠讓利益相關人目標始終保持一致,它的價值在于傳播與使用。舉個例子,90年代,庫珀將用戶畫像的描述做成一頁紙貼在墻上,一個產品的一個用戶畫像做一頁紙,這樣設計團隊成員每天走進辦公室就能看到。

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

所以,你可能需要:

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

 

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

 

造訪不同團隊,介紹用戶畫像,包括它從何來,如何用。教他們怎么招募有代表性的用戶進行測驗,如何寫用戶情景來啟發(fā)設計或作為可用性測試任務

 

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

 

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

文章來源:學UI網   作者:小紐扣

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



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

前端達人

目錄

1. 比你最強的競爭對手快20%

2. 反應時間為100毫秒,幀數是每秒60幀

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

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

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

5. 漸進增強(progressive enhancement)

6. AMP還是Instant Articles?

7. 選擇適合你的CDN

開始優(yōu)化

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

9. 使用符合標準的技術

10. 考慮微優(yōu)化和漸進啟動

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

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

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

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

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

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

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

18. 通過tree-shaking和code-splitting減少凈負載

19. 提升渲染性能

20. 預熱網絡連接,加快傳輸速度

HTTP/2

21. 準備好使用HTTP/2

22. 適當部署HTTP/2

23. 確保服務器安全可靠

快速入門

 

微優(yōu)化是保持性能最好的辦法,但是又不能有太過明確的優(yōu)化目標,因為過于明確的目標會影響在項目中做的每一個決定。以下是一些不同的模型,請按照自己舒服的順序閱讀

1. 比你最強的競爭對手快20%

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

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

 

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

 

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

2. 反應時間為100毫秒,幀數是每秒60幀

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

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

縱使這個目標實現起來非常困難,你的最終目標也應該是讓開始渲染時間低于1秒且速度指數低于1000(在網速快的地方)。對于首次有效渲染時間,上限最好是1250毫秒。對于移動端,3G下移動設備首次渲染時間低于3秒都是可以接受的。稍微高一點也沒關系,但千萬別高太多。

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

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

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

5. 漸進增強(progressive enhancement)

在構建前端結構的時候,應始終將漸進增強作為你的指導原則。首先設計并且構建核心體驗,隨后再完善那些為高性能瀏覽器設計的高級特性的相關體驗,創(chuàng)建彈性體驗。如果你的網頁可以在使用低速網絡、老舊顯示器的很慢的電腦上運行飛快,那么在光纖高配電腦上它只會運行的更快。

6. AMP還是Instant Articles?

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

7. 選擇適合你的CDN

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

開始優(yōu)化

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

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

9. 使用符合標準的技術

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

10. 考慮微優(yōu)化和漸進啟動

在一些應用中,可以在渲染頁面前先初始化應用。最好先顯示框架,而不是一個進度條或指示器。使用可以加速初始渲染時間的模塊或技術(例如tree-shakingcode-splitting),因為大部分性能問題來自于應用引導程序的初始分析時間。還可以在服務器上提前編譯,從而減輕部分客戶端的渲染過程,從而快速輸出結果。最后,考慮使用Optimize.js來加快初始加載速度,它的原理是包裝優(yōu)先級高的調用函數(雖然現在已經沒什么必要了)。

 

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

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

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

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

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

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

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

我曾經寫過這篇文檔可以對照一下:高效率圖像壓縮處理服務, 參考截圖:

 

你也可以使用客戶端提示,現在瀏覽器也可以做到。在用來生成響應圖片的源文件過少時,使用響應圖片斷點生成器。

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

當你在編寫登錄界面的時候,發(fā)現頁面上的圖片加載的特別快,這時你需要確認一下圖片進一步優(yōu)化的思路只要有三點:

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

正常情況下PNG是原圖格式,體積特別大,巧的是業(yè)界對PNG 有pngquant 使用Median Cut量化算法的修改版本和其他技術來緩解Median Cut的不足,可以最大效率保留信息的前提下降低png 的體積大小;如果我們把如上的一些優(yōu)化處理起來,我使用的過程中發(fā)現,火山引擎的imagex 已經完美的支持了上面三者的使用方法:下面我舉個例子做一下說明:

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

更巧妙的是在這,就算指定輸出png后仍然還可以設置質量參數

 

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

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

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

 

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

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

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

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

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

18. 通過tree-shaking和code-splitting減少凈負載

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

Code-splitting是另一個Webpack特性,它可以根據按需加載的塊將你的代碼分開。只要你在代碼中定義了分離點,Webpack便會處理好相關的輸出文件。它基本上能保證你初始下載的內容很小,而且在需求被添加時按需請求代碼。

Rollup所展示的結果要比Browserify配置文件所顯示的好得多。所以當我們想使用類似工具的時候,或許應該看看Rollupify,它將ECMAScript2015模塊變成了一個更大的CommonJS模塊——因為小模塊沒準有出乎意料的高性能成本,這源自于你對打包工具模塊系統(tǒng)的選擇。

19. 提升渲染性能

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

20. 預熱網絡連接,加快傳輸速度

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

HTTP/2

21. 準備好使用HTTP/2

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

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

 

22. 適當部署HTTP/2

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

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

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

當然你可以考慮逐步加載CSS文件。很顯然,你這樣做對HTTP/1.1的用戶非常不利,所以你可能需要根據不同的瀏覽器建立多個版本來應對你的調度過程,這樣就會使過程略微復雜。你也可以避免HTTP/2連接的合并,同時受益于HTTP/2來使用域名碎片,但是實現起來有些困難。

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

23. 確保服務器安全可靠

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

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

快速入門

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

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


轉自:csdn論壇 ,

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Web前端:CSS最強總結 附詳細代碼

前端達人

Web前端總結:
Web前端:HTML最強總結 附詳細代碼
Web前端:CSS最強總結 附詳細代碼
Web前端:JavaScript最強總結 附詳細代碼

基本知識

基本概念

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
層疊:多個樣式可以作用在同一個html的元素上,同時生效

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

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

優(yōu)點

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

CSS的使用

CSS與html結合使用
根據定義CSS的位置不同,分為行內樣式、內部樣式和外部樣式

行內樣式

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

代碼樣式:

弊端:只能對當前的標簽生效,沒有做到內容和樣式相分離,耦合度太高。

內部樣式

定義在head標簽內,通過style標簽,該標簽內容就是CSS代碼

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

區(qū)別

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

CSS語法

基本格式由兩個主要的部分構成:

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

基本選擇器

篩選具有相似特征的元素

id選擇器

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

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

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

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

class選擇器

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

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

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

元素選擇器/標簽選擇器

選擇具有相同標簽名稱的元素。

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

使用標簽選擇器:自動使用在所有的同名的標簽上


優(yōu)先級

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

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

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

行內樣式 > 內部樣式 >外部樣式

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

CSS常用樣式

color:字體顏色

跟顏色相關的取值分3種:

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

width height:寬高

PS:只有塊狀元素可以設置寬高,行級元素設置不生效

取值方式有2種:

  • 數值 絕對數字 單位是像素PX
  • 百分比:占據父元素的比例

背景樣式

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

文本樣式

在這里插入圖片描述

列表樣式

在這里插入圖片描述

邊框樣式

在這里插入圖片描述

HTML&CSS調試利器

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

交集選擇器

條件:交集選擇器由兩個選擇器構成,找到的標簽必須滿足:既有標簽一的特點,也有標簽二的特點。

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

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

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

后代選擇器

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

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

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

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

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

子元素選擇器

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


轉自:csdn論壇 ,

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

從零開始畫圖標系列:超全面的基礎知識

周周


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

網上現存不少關于圖標繪制的文章和教學,但不是太籠統(tǒng),就是太片面。即使看了很多這種碎片化的知識,也很難在我們的認知中對它有比較全面、系統(tǒng)的認識,所以大多數初級的 UI設計師,始終畫不好圖標。

針對這個問題,我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法,讓所有設計新人更快地上手圖標設計。

本文共分為5個部分:

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

圖標的基本認識

圖標,是一種圖形化的標識,它有廣義和狹義兩種概念,廣義指的是所有現實中有明確指向含義的圖形符號,狹義主要指在計算機設備界面中的圖形符號,有非常大的覆蓋范圍。

對于 UI設計師而言,我們主要針對的就是狹義的概念,它是 UI 界面視覺組成的關鍵元素之一。

在當下最常見的扁平化設計風格中,界面的實際視覺組成只有4種元素,圖片、文字、幾何圖形、圖標。

從零開始畫圖標系列:超全面的基礎知識

△ 由圖片、文字、幾何、圖標組成的界面

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

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

從零開始畫圖標系列:超全面的基礎知識

△ Clear APP 的截圖

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

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

從零開始畫圖標系列:超全面的基礎知識

△ 應用文字替換了圖標的對比

第二點,就是關于視覺的觀賞性。有些頁面中,如果把圖標去掉了,也絲毫不會影響我們的操作效率,以及對內容的理解。但沒有圖標,缺少這些點綴,我們就會覺得這個頁面看起來太枯燥了,不得勁,最好的例子就是應用的設置頁了,見下方案例。

從零開始畫圖標系列:超全面的基礎知識

△ 設置頁有圖標和沒有圖標的對比

既然知道了圖標的作用和重要性,那么接下來,就要進一步了解在工作中我們要設計哪些圖標。

可以先劃分成三種大類:

  • 工具圖標
  • 裝飾圖標
  • 啟動圖標

下面,我們將對它們分別進行介紹,以及展示相關的設計類型,方便讀者在開始學習具體設計前,對 UI設計會創(chuàng)作的圖標有更全面的認識。

工具圖標

首先,我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型,即應用內有明確功能、提示含義的標識。作為最常見的圖標類型,我們就不需要做太多的說明了。

從零開始畫圖標系列:超全面的基礎知識

△ 常見的工具圖標

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

1. 風格1:線性風格

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

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

從零開始畫圖標系列:超全面的基礎知識

△ 線性風格的工具圖標

2. 風格2:面性風格

面性圖標,即使用對內容區(qū)域進行色彩填充的圖標樣式。同樣,在這類圖標中,也不是只能應用純色的方式進行填充,還有非常多的視覺表現類型。

從零開始畫圖標系列:超全面的基礎知識

△ 面性風格的工具圖標

3. 風格3:混合風格

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

從零開始畫圖標系列:超全面的基礎知識

△ 混合風格的工具圖標

裝飾圖標

和工具圖標比起來,裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說,過分的簡約并不能彌補信息過多的信噪問題,我們要通過豐富視覺體驗的方法來增加內容的觀賞性,減少一屏內顯示內容的數量。

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

從零開始畫圖標系列:超全面的基礎知識

△ 裝飾圖標在識別性上的作用

還有就是國內的界面設計環(huán)境,會根據運營需求設計進行特殊化處理,尤其在電商領域,首屏的圖標都會改成首頁風格的樣式,增加活動氛圍。

從零開始畫圖標系列:超全面的基礎知識

△ 節(jié)日活動中的裝飾圖標

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

1. 扁平風格

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

從零開始畫圖標系列:超全面的基礎知識

△ 扁平風格的裝飾圖標

2. 擬物風格

擬物風格的圖標現在出現的頻率越來越高,集中在大型的運營活動中,通常這些活動會通過擬物的方式將頭部設計成有故事性的場景,所以自然頂部的相關圖標使用擬物的設計形式會更貼合。

從零開始畫圖標系列:超全面的基礎知識

△ 擬物風格的裝飾圖標

3. 2.5D風格

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

從零開始畫圖標系列:超全面的基礎知識

△ 2.5D風格的裝飾圖標

4. 炫彩漸變

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

使用這樣圖標的區(qū)域,通常都會呈現出一副五彩斑斕的景象,只有在內容非常豐富且用戶偏向年輕化的產品中可以使用,是一種非常難駕馭的設計風格。

從零開始畫圖標系列:超全面的基礎知識

△ 炫彩漸變風格的裝飾圖標

5. 實物貼圖

最后一種,就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來的,但想想還是放進來合適。因為這種圖標的出現頻率非常高,有必要在后面掌握它的做法。

從零開始畫圖標系列:超全面的基礎知識

△ 應用攝影實物的裝飾圖標

啟動圖標

最后,就要說說啟動圖標了。啟動圖標的設計比前面兩種類型的圖標說起來更難,因為它實際上就是把「LOGO嵌套進系統(tǒng)圖標模版」的圖標。

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

1. 文字形式

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

從零開始畫圖標系列:超全面的基礎知識

△ 文字類的啟動圖標

2. 圖標形式

對于一些偏工具,適合用簡單圖形傳達應用功能的啟動圖標,就會采取使用工具圖標的方式設計。

從零開始畫圖標系列:超全面的基礎知識

△ 圖標類的啟動圖標

3. 圖形圖標

圖形形式看起來和圖標形式很接近,但實際上完全不屬于同一類型,之所以它不是圖標,是因為這類圖標的主體圖形是一種經過高度抽象化的標識,傳達的是品牌性,而不是圖形的含義。

從零開始畫圖標系列:超全面的基礎知識

△ 圖形類的啟動圖標

4. 插畫形式

對于一些比較純粹的應用,如讀本、漫畫、幼兒類應用,就熱衷于采用卡通形象作為圖標的主體進行設計。

從零開始畫圖標系列:超全面的基礎知識

△ 插畫類的啟動圖標

5. 擬物形式

雖然現在扁平化的設計占據主導地位,但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說,擬物設計所傳遞的信息往往更直觀和準確。

從零開始畫圖標系列:超全面的基礎知識

△ 擬物類的啟動圖標

當然,還有其它的數之不盡的啟動圖標設計方式,比如明星大頭照、攝影圖、游戲原畫等,但理解上面這些類型就夠了。

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

所以,在開始學習前,不要將設計圖標的目標局限在最簡單的圖形繪制上,還有很多有趣的設計形式等待你們去嘗試。

學習圖標所需的軟件

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

從零開始畫圖標系列:超全面的基礎知識

1. Sketch / XD

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

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

所以,我建議所有學習 UI 的新人,都不要從這兩個軟件中入手,而是先掌握 PS 和 AI,后面想要快速實現一些簡單的圖標時,自然懂得如何使用 Sketch 和 XD。

可以說,PS 和 AI 的應用決定了我們圖標設計的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

2. Photoshop

從零開始畫圖標系列:超全面的基礎知識

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

實際項目中,我們會用 PS 設計一些視覺表現相對復雜的圖標,例如啟動圖標、擬物圖標、實物圖標等等。

繪制圖標需要用到的 PS 功能并不太多,需要在前期學習這個軟件的過程中加以篩選,重點是以下知識點:

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

雖然 PS 在實際項目中是用來畫復雜的圖標,但并不妨礙我們使用 PS 從最基礎的圖標開始畫起,因為想要熟練掌握上方的知識點,簡易的工具圖標是最好的磨刀石,之后再學習 AI 的操作,就可以更快的上手。

3. Illastrator

從零開始畫圖標系列:超全面的基礎知識

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

如果掌握了上方提及的 PS 基礎,那么學習 AI 也就輕松了不少,其中,AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的:

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

花幾個晚上,掌握了 PS 和 AI 的相關知識點以后,就為我們后續(xù)的學習提供了技術支持,可以進入下一階段了。

結尾

這是圖標系列文章的第一篇,信息量不算少。所以我們在結尾再總結一次,方便大家記憶。

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




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



藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



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

seo達人

 

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

    SEO為什么重要?

    SEO非常重要,因為搜索引擎是在線流量的核心。盡管付費廣告和社交媒體仍然有效,但大多數在線流量來自搜索引擎。

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

    如果不認識SEO的潛力,就不可能談論SEO。公司提供的優(yōu)質SEO是常綠的。內容將始終存在于您的網站上,并持續(xù)數周,數月和數年產生流量。付費廣告只能持續(xù)到賺錢為止。SEO永遠不會消失。

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

    網站SEO分析

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

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

    創(chuàng)建高質量的有益內容

    人們在為網站SEO編寫內容時犯的最常見的錯誤是對人類的關注不足。高質量的內容首先是寫給人類的,其次是搜索引擎爬蟲。如果您過多地關注關鍵字,則會導致亂碼。而是圍繞用戶喜歡閱讀的有用和高質量內容來制定內容策略。

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

    有效地使用反向鏈接

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

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

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

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

    使用關鍵詞

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

    讀者和搜索引擎都看不起關鍵字垃圾郵件-盡可能多地使用關鍵字的行為。人們會告訴您何時嘗試發(fā)送盡可能多的垃圾郵件,而他們卻不喜歡。這對于搜索引擎也不利,因為他們希望看到關鍵字的正確使用。關鍵字在文本中應使用幾次,關鍵字密度最多為2-4%。

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

    優(yōu)化頁面內容

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

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

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

    什么是SEO?事實證明,答案比您預期的要復雜。SEO使您的網站快速有效地加載。它正在獲得指向您網站的鏈接,以便人們訪問。它正確使用了關鍵字。歸根結底,SEO就是要以一種有效的方式為您的網站生成自然流量.

 

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

 

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

 

網站做好品牌SEO優(yōu)化——打造高質量內容引流量

seo達人

 

 

網站做好品牌SEO優(yōu)化——打造高質量內容引流量

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

1、審視自己網站的文章是否有趣、有用?

包含足量有用信息是贏得訪客關注的基礎;若能施以輕松、明快、流暢的筆調,則會錦上添花。

2、撰寫網站文章,需要抓住用戶某個痛點

如果文章能夠為客戶的搜素目的提供一種解答,則這篇文章成功的機會更高。

3、強有吸引力的標題,讓你的文章錦上添花

這并不是鼓勵以標題騙取點擊,而是在概述相關內容的基礎上,標題最好能夠具備亮點。

4、網站文章是否具有可讀性

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

5、網站文章是否克服了高“跳出率”?

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

網絡推廣

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

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

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

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

1、百度平臺。

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

2、騰訊平臺。

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

3、微博、微信平臺。

雖說微博影響力已大不如前,但相信,搭建一個認證標志的微博,可以給新用戶帶來更多信賴感。而微信公眾號,相信更不用多說。現如今但凡推廣,絕對離不開微信,如何運用好公眾號廣告、朋友圈廣告等渠道,也是十分必要。

4、短視頻與直播。

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

網站做好品牌SEO優(yōu)化——打造高質量內容引流量

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

1、審視自己網站的文章是否有趣、有用?

包含足量有用信息是贏得訪客關注的基礎;若能施以輕松、明快、流暢的筆調,則會錦上添花。

2、撰寫網站文章,需要抓住用戶某個痛點

如果文章能夠為客戶的搜素目的提供一種解答,則這篇文章成功的機會更高。

3、強有吸引力的標題,讓你的文章錦上添花

這并不是鼓勵以標題騙取點擊,而是在概述相關內容的基礎上,標題最好能夠具備亮點。

4、網站文章是否具有可讀性

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

5、網站文章是否克服了高“跳出率”?

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

網絡推廣

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

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

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

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

1、百度平臺。

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

2、騰訊平臺。

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

3、微博、微信平臺。

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

4、短視頻與直播。

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

轉載請注明:seo-網站優(yōu)化-網站建設-外鏈代發(fā)

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

 

我們對2021年的用戶體驗有何期待?

ui設計分享達人

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

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


語音介面

我們在2020年UX狀態(tài)預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應忽略它。

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

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



簡約的UI

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

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




內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


負空間

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






留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




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

不完美的元素

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







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



同態(tài)

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

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

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



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



3D元素和視差

視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

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




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


 



  

不對稱

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


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




但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

動畫制作

今天,當我們在互聯(lián)網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



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

信息架構

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



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

最后的想法

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


文章來源:站酷   作者:ZZiUP

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


我們對2021年的用戶體驗有何期待?

ui設計分享達人

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

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


語音介面

我們在2020年UX狀態(tài)預測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應忽略它。

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

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



簡約的UI

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

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




內容,消息和導航的清晰度是UX設計的簡約方法的另一個重要方面。信息過載對于大多數現代用戶來說是一個痛苦,這意味著網站所有者應努力使自己的UX文字簡潔明了。


負空間

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






留出一定的空間,在設計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負空間的主要功能是整理網頁,以吸引用戶對關鍵對象和消息的注意。建立清晰的內容層次結構有助于UX設計人員將用戶的注意力吸引到最重要的內容上。




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

不完美的元素

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







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



同態(tài)

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

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

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



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



3D元素和視差

視差效果和3D元素并不是UX設計中的全新內容。我們已經看到了如何在許多Web設計解決方案中實現它們。但是,我們仍然觀察到這些用戶體驗趨勢正在逐步普及。

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




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


 



  

不對稱

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


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




但是,請務必記住,非對稱設計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應該引導用戶的眼睛朝正確的方向前進,并幫助品牌強調重要信息。

動畫制作

今天,當我們在互聯(lián)網上進入隨機網站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設計元素。動畫在用戶體驗設計中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導航。他們還可以為數字產品或服務注入生命,使它們更具個性。



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

信息架構

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



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

最后的想法

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

文章來源:站酷   作者:ZZiUP

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

ui設計分享達人

深色模式并不萬能 


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


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


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


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



深色模式應用限制

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


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


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

-當設計版面相對稀疏,極簡型的內容比較少時;

-適用于連貫呈現的內容,例如夜間娛樂應用程序;

-想要創(chuàng)造醒目的戲劇性外觀時。


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

-出現大量文本時(在深色背景上閱讀相對困難);

-當設計需要多種顏色時。


深色模式下的桌面應用信息中心 by Ramotion 


在深色模式中形成對比

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


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


Brittany Chiang網站將深灰色與藍色融合,形成了令人愉悅的深色模式


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


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


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


左側的深色模式中,文本和背景之間的對比明顯不足


重點注意一:配色

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


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


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


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


“使用強烈對比色來提高可讀性。人們對于顏色的感知會受到許多因素影響,包括字號、字重、顏色亮度、屏幕分辨率和照明條件。” ——Apple人機界面指南


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


重點注意二:利用負空間,少即是多

成功的深色模式設計,需要巧妙利用負空間。如果設計不當,會使數字產品顯得笨拙與沉重。為了平衡這一點,設計師可以利用極簡主義中的負空間,讓深色界面更輕巧,也能讓用戶更容易識別信息內容。


UI元素周圍的大量負空間使界面被重新定義,而且元素也不會出現密集與混亂感。如果沒有呼吸空間,用戶在閱讀界面時,可能很快的略過,因為大腦沒有快速的識別出重要內容。


充斥著太多元素和文本的界面,是導致深色模式體驗差的禍根。設計師需要仔細考慮深色模式中的視覺層次結構,從而提升用戶體驗。


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


重點注意三:版式

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


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


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


AirPods Pro頁面使用超大字體和強烈的對比,以達到最好的效果


重點注意四:空間深度感

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


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


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


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


深色模式設計啟發(fā)

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


The Atom Finance website


Atom Finance利用深色模式打造了精致外觀,并將其強調色限制為3種。復雜的金融網站采用了極簡設計,而且很好地使用了陰影來表現不同組件的深度感。


電子商務網站 by Daniel Klopper


電子商務網站 by Darion Mitchell


IBM儀表板 by Ruben Fernandez


盡管處理SaaS的深色模式遇到了挑戰(zhàn),但IBM的數據可視化儀表板仍是典范。強調色的數量最少,并且該網站使用細微的陰影顯示不同元素的深度。


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


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


深色模式適用于一些數字產品,而非所有產品,界面簡潔非常關鍵。對于復雜且數據繁重的B2B平臺,以及文本繁多的頁面,深色模式都是不適合的。對于從情感和美學角度去探索深色模式的設計師來說,他們開辟了一個新的領域。

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

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔