首頁(yè)

Web導(dǎo)航設(shè)計(jì)

周周

一、導(dǎo)航的定義

牛津詞典上有對(duì)Navigation一詞在互聯(lián)網(wǎng)領(lǐng)域的解釋:

the way that you move around a website or the Internet when you are looking for information

翻譯為:你在瀏覽網(wǎng)頁(yè)時(shí)四處移動(dòng)尋找信息的方式

也就是說(shuō)用戶看到的,影響其尋找信息的因素都可視為導(dǎo)航。


二、為什么需要導(dǎo)航

交互上:

用戶在使用傳統(tǒng)方式閱讀時(shí),所處的空間是單向的,只能向前或向后翻頁(yè);

而在網(wǎng)頁(yè)領(lǐng)域,所有的內(nèi)容都存放在各自的URL里,信息在多維度多空間里相互交錯(cuò),各有聯(lián)系,可跳躍的閱讀方式讓用戶很容易失去位置感。

試想一下我們?cè)诖笮蜕虉?chǎng)里暈頭轉(zhuǎn)向的場(chǎng)景,會(huì)常常抱怨其導(dǎo)視系統(tǒng)的糟糕,網(wǎng)站有過(guò)之而無(wú)不及。

業(yè)務(wù)上:

從潛在用戶想要了解某個(gè)產(chǎn)品時(shí),導(dǎo)航就開(kāi)始起作用了

影響點(diǎn)擊量網(wǎng)站排名高低,搜索帶來(lái)的點(diǎn)擊量

影響轉(zhuǎn)化網(wǎng)站的易用性,訪問(wèn)者轉(zhuǎn)化為潛在客戶和客戶的概率

設(shè)計(jì)者創(chuàng)造易用的表單,展示有用的信息,建立流暢的交互,這些都要靠導(dǎo)航來(lái)引導(dǎo)用戶達(dá)到。


三、從信息構(gòu)建模式給導(dǎo)航分類

1.內(nèi)容

內(nèi)容涉及到的東西很多,內(nèi)容之間的相互關(guān)系也不確定,因此不同內(nèi)容導(dǎo)航需要不同的導(dǎo)航模式

1)種類

不同行業(yè),不同業(yè)務(wù)重點(diǎn)對(duì)內(nèi)容的分類方式不同

種類可以是符合大眾認(rèn)知,具有并列關(guān)系的信息,

也可以是按照設(shè)計(jì)者的意圖創(chuàng)造出的種類,并區(qū)分其優(yōu)先級(jí)

種類導(dǎo)航的出現(xiàn)無(wú)形中建立了用戶心中對(duì)某類產(chǎn)品的預(yù)期信息架構(gòu),使其在瀏覽信息時(shí)更有方向性,例如在瀏覽一家服裝店鋪時(shí),用戶在進(jìn)入導(dǎo)航列表前就對(duì)種類有了預(yù)期,諸如男士上裝,男士下裝,女士上裝、女士下裝、配飾,包袋等。


2)字母

以字母順序排列信息。適用于信息量超大,且不存在主次、重要級(jí)關(guān)系的內(nèi)容。常見(jiàn)于聯(lián)系人列表,地區(qū)導(dǎo)航,介紹人名,合作伙伴等場(chǎng)景。


3)自然屬性

以時(shí)間,地理位置等屬性組織信息架構(gòu)。

時(shí)間:展示在一段時(shí)間內(nèi)發(fā)生的事情,以時(shí)間為導(dǎo)航可以直觀地感受到信息的變遷,立體感更強(qiáng)。例如一個(gè)企業(yè)的發(fā)展歷史

地理位置:展示在不同地理位置的事件信息,空間感更強(qiáng)


2.層級(jí)

也叫做結(jié)構(gòu)導(dǎo)航,根據(jù)信息的上下級(jí)關(guān)系、主體信息架構(gòu)等因素將信息有序排列。分為全局導(dǎo)航和局部導(dǎo)航。

全局導(dǎo)航往往指頁(yè)眉和頁(yè)腳,存在于網(wǎng)站的大部分頁(yè)面,便于用戶隨時(shí)跳轉(zhuǎn)。 

頁(yè)眉:用戶進(jìn)入網(wǎng)站關(guān)注到的點(diǎn),將網(wǎng)站進(jìn)行功能分類后,將導(dǎo)航文字放置在頁(yè)眉上

頁(yè)腳:此空間是為隱私和法律鏈接保留的,還會(huì)加上聯(lián)系方式,也有許多內(nèi)容繁重的網(wǎng)站會(huì)把站點(diǎn)地圖放置在頁(yè)腳。

雅各布·尼爾森把全局導(dǎo)航在網(wǎng)站中的作用形象地比喻為機(jī)艙座位下的救生衣 ,你只要知道它哪 ,而不必時(shí)時(shí)關(guān)注它,需要時(shí)立即找到穿上即可。


局部導(dǎo)航是是更深層級(jí)的導(dǎo)航,不作用于全局,存在于特定的功能區(qū),可分布在頁(yè)面各部分。


3.功能

業(yè)務(wù)上必要的一些功能入口,通常貫穿全局,例如很多網(wǎng)站的個(gè)人信息,用戶需要在大部分時(shí)刻都可直接接觸到該功能。根據(jù)用戶的心理模型,這類功能會(huì)存在于頁(yè)面的右上角。


4.搜索

用戶使用較多,也是最重要的導(dǎo)航方式之一。當(dāng)帶有明確的目的性或無(wú)法通過(guò)內(nèi)容,層級(jí)導(dǎo)航找到想要的信息時(shí),用戶會(huì)在搜索框內(nèi)嘗試輸入一些信息。

而讓用戶主動(dòng)搜索會(huì)出現(xiàn)下面的情況:用戶無(wú)法清晰表達(dá)或錯(cuò)誤地表達(dá)其想要搜索的內(nèi)容,導(dǎo)致系統(tǒng)無(wú)法匹配上對(duì)應(yīng)的信息,

為了讓搜索導(dǎo)航更有效地發(fā)揮其作用,出現(xiàn)了自動(dòng)填充,模糊搜索,推薦搜索,搜索歷史,搜索糾正等一系列導(dǎo)航功能,這些功能都是為了想辦法將用戶引導(dǎo)到他可能需要的頁(yè)面上。


5.網(wǎng)站地圖

以類似地圖的樣式來(lái)展示網(wǎng)站頁(yè)面之間的層級(jí)關(guān)系,并提供相應(yīng)的鏈接??梢曅詮?qiáng),便于用戶找到想要的信息。


四、導(dǎo)航的常見(jiàn)樣式

1.文字與圖標(biāo)

考慮到排版布局,樣式美觀,除了用文字本身的含義用作導(dǎo)航外,圖標(biāo)也經(jīng)常被用作導(dǎo)航,分為純圖標(biāo)導(dǎo)航和文字+圖標(biāo)導(dǎo)航,這里圖標(biāo)的風(fēng)格會(huì)很大程度上影響這個(gè)頁(yè)面的視覺(jué)效果


2.橫向?qū)Ш?

將導(dǎo)航文字橫向有序地排列,獨(dú)立性強(qiáng),占用空間較少,可放置的導(dǎo)航條目有限,但這個(gè)局限性也可以成為優(yōu)點(diǎn),它要求設(shè)計(jì)師創(chuàng)造出簡(jiǎn)短,易于理解,且滿足業(yè)務(wù)需求的標(biāo)題。

當(dāng)內(nèi)容過(guò)多時(shí)會(huì)選擇在單個(gè)導(dǎo)航下放置下拉顯示二級(jí)導(dǎo)航,下拉顯示的二級(jí)導(dǎo)航可以很長(zhǎng)或采用滾動(dòng)顯示的方式,這種臨時(shí)的模態(tài)導(dǎo)航可以最大限度地利用到屏幕空間。

很多網(wǎng)頁(yè)的橫向頁(yè)眉導(dǎo)航會(huì)保持滑動(dòng)時(shí)固定的樣式,便于用戶時(shí)時(shí)找到主頁(yè)面的入口。


3.豎向?qū)Ш?

占用空間較多,通常放置在頁(yè)面左邊位置,用不同的底色或分割線將其與主內(nèi)容分開(kāi),內(nèi)容文字一般采用左對(duì)齊,便于閱讀,導(dǎo)航層級(jí)過(guò)多時(shí)會(huì)采用點(diǎn)擊展開(kāi)的樣式,上下滾動(dòng)的常用交互也讓豎向?qū)Ш饺菁{的內(nèi)容更多。

部分豎向?qū)Ш绞强呻[藏或收縮的


4.混合導(dǎo)航

在擁有復(fù)雜信息的網(wǎng)頁(yè)中,會(huì)將橫向?qū)Ш?,豎向?qū)Ш降绕渌麡邮交旌鲜褂茫?


5.面包屑

面包屑導(dǎo)航是位于頁(yè)面頂部或底部的一行內(nèi)部鏈接,在不同層級(jí)的鏈接之間用“>”分隔,可讓訪問(wèn)者快速返回上一版塊或根網(wǎng)頁(yè)。許多面包屑導(dǎo)航都將內(nèi)容最寬泛的頁(yè)面(通常為根網(wǎng)頁(yè))設(shè)置為最左邊的首個(gè)鏈接,并在右側(cè)列出更具體的部分。

占用很少的空間并提供主導(dǎo)航實(shí)現(xiàn)不了的深層次定位功能。

面包屑的使用讓網(wǎng)站的結(jié)構(gòu)更加清晰,強(qiáng)化用戶的心理層級(jí)模型,并實(shí)現(xiàn)跨層級(jí)跳躍

6.分頁(yè)與無(wú)限滾動(dòng)

分頁(yè)顯示的內(nèi)容數(shù)量固定,有時(shí)用戶可自定義內(nèi)容數(shù)量,此外頁(yè)面上通常有當(dāng)前頁(yè),任意頁(yè),上一頁(yè),下一頁(yè),首頁(yè),末頁(yè)的鏈接。具有定位性,當(dāng)用戶需要回到之前瀏覽過(guò)的某個(gè)位置時(shí),可采用分頁(yè)的形式


無(wú)限滾動(dòng)希望用戶只注意當(dāng)前頁(yè)的內(nèi)容且不能快速到達(dá)頁(yè)面的底部,適用于無(wú)法預(yù)測(cè)用戶何時(shí)能夠找到需要的信息的情況。在一些圖片展示,內(nèi)容推送的網(wǎng)站上設(shè)計(jì)者不知道用戶想要的內(nèi)容,同時(shí)也要展現(xiàn)網(wǎng)站內(nèi)容豐富,資源庫(kù)深不見(jiàn)底的特質(zhì)會(huì)采用交互上更簡(jiǎn)單的無(wú)限滾動(dòng)模式。

7.突出的版式

一些設(shè)計(jì)者想要用戶優(yōu)先注意到的內(nèi)容,會(huì)采用突出的版面設(shè)計(jì),通過(guò)改變文字圖形的大小,顏色等與其他一般性內(nèi)容形成對(duì)比或使用海報(bào),彈窗等形式試圖引導(dǎo)用戶行為。


五、導(dǎo)航設(shè)計(jì)的建議

根據(jù)上面第三和第四點(diǎn),分別從信息層和表現(xiàn)層給出導(dǎo)航設(shè)計(jì)的建議

信息層

1.信息結(jié)構(gòu)盡可能扁平

多花一些時(shí)間去考慮信息體系結(jié)構(gòu),可根據(jù)首頁(yè)規(guī)劃全局的導(dǎo)航,首頁(yè)是用戶在網(wǎng)站中導(dǎo)航的起點(diǎn),考慮如何讓用戶盡可能方便地從網(wǎng)站上的寬泛內(nèi)容(首頁(yè))轉(zhuǎn)到他們所需的更加具體的內(nèi)容。


2.重視導(dǎo)航的順序

當(dāng)同一級(jí)別的導(dǎo)航數(shù)量很多時(shí),順序變的更加重要。根據(jù)用戶的認(rèn)知習(xí)慣,開(kāi)頭和結(jié)尾作為關(guān)注度(看到的)和保留度最高(剛剛發(fā)生的)的地方,其內(nèi)容更加突出。


3.SEO優(yōu)化

良好的網(wǎng)站導(dǎo)航結(jié)構(gòu)可以幫助搜索引擎了解哪些是網(wǎng)站站長(zhǎng)認(rèn)為重要的內(nèi)容,盡量用一些具體的描述詞語(yǔ)而非大而寬泛的詞匯,例如“產(chǎn)品”,“服務(wù)”。雖然搜索引擎的搜索結(jié)果是在頁(yè)面級(jí)別提供的,但它也希望了解頁(yè)面在網(wǎng)站這個(gè)更大層面上的角色。導(dǎo)航中關(guān)鍵詞的使用會(huì)影響其在搜索引擎中被搜到的質(zhì)量。


4.創(chuàng)建網(wǎng)站地圖

用于顯示網(wǎng)站結(jié)構(gòu)的一個(gè)簡(jiǎn)單頁(yè)面,通常包含網(wǎng)站頁(yè)面的分層列表。如果在網(wǎng)站上查找頁(yè)面時(shí)遇到問(wèn)題,用戶可能會(huì)訪問(wèn)此頁(yè)面。此外搜索引擎也會(huì)訪問(wèn)此頁(yè)面,以便使抓取范圍盡量覆蓋網(wǎng)站的全部頁(yè)面。


表現(xiàn)層

1.一致性

同一類型導(dǎo)航的視覺(jué)表現(xiàn)與交互操作在整個(gè)網(wǎng)站頁(yè)面中要保持一致,清晰一致的導(dǎo)航可以讓用戶預(yù)見(jiàn)每一步操作的結(jié)果。


2.清晰性

顏色與大?。何淖诸伾c背景顏色的對(duì)比,標(biāo)題與內(nèi)容的字號(hào)大小,這些最基本的元素直接影響導(dǎo)航的清晰度

留白與裝飾:與平面設(shè)計(jì)中原理一樣,留白讓網(wǎng)站頁(yè)面布局平衡,張弛有度;裝飾與留白相結(jié)合,讓導(dǎo)航表現(xiàn)得更精美,也有助于視覺(jué)分割

強(qiáng)調(diào)與弱化:有些導(dǎo)航起引導(dǎo)作用需要突出,有些起輔助作用需要弱化,強(qiáng)弱對(duì)比結(jié)合豐富了視覺(jué)層次,并讓導(dǎo)航起到它該起的作用


3.凸顯超鏈接

將可點(diǎn)擊的超鏈接文本與常規(guī)文字在樣式和交互上進(jìn)行區(qū)分,常見(jiàn)做法有下劃線,文字顏色,加粗,鼠標(biāo)懸浮變色。


4.在常規(guī)位置放置導(dǎo)航

網(wǎng)頁(yè)發(fā)展的幾十年讓用戶對(duì)網(wǎng)頁(yè)產(chǎn)生了一些常識(shí)性認(rèn)識(shí),例如用戶會(huì)在進(jìn)入一個(gè)網(wǎng)站時(shí)去頁(yè)眉或側(cè)邊欄尋找主導(dǎo)航,盡量遵循這些常規(guī)用法。


5.導(dǎo)航數(shù)量不宜過(guò)多

無(wú)論是全局或局部導(dǎo)航,數(shù)目越多用戶處理和記住信息的難度越大,可以通過(guò)分組分層來(lái)提高信息瀏覽效率


6.側(cè)邊欄

側(cè)邊欄導(dǎo)航會(huì)占據(jù)一部分的屏幕空間,將其與主內(nèi)容部分進(jìn)行分割有助于用戶,例如用反差較大的背景色形成導(dǎo)航區(qū)與內(nèi)容區(qū)

加入導(dǎo)航收縮功能,以便更好地利用屏幕空間,特別是在一些小尺寸屏幕上。


六、導(dǎo)航設(shè)計(jì)審查:

在做完網(wǎng)頁(yè)設(shè)計(jì)后可以根據(jù)瀏覽網(wǎng)頁(yè)的一般習(xí)慣,通過(guò)以下幾個(gè)方面對(duì)導(dǎo)航設(shè)計(jì)進(jìn)行簡(jiǎn)單審查

問(wèn)自己以及團(tuán)隊(duì)其他成員以下幾個(gè)問(wèn)題

1.這是什么網(wǎng)站

2.網(wǎng)站有哪些主要內(nèi)容

3.導(dǎo)航看上去是否像是導(dǎo)航,可點(diǎn)擊的

4.導(dǎo)航的名稱是否會(huì)引起歧義

5.現(xiàn)在處在網(wǎng)站的哪個(gè)層級(jí)

6.如何進(jìn)退

7.具體的功能是否會(huì)在預(yù)想的地方出現(xiàn)

8.怎么進(jìn)行內(nèi)容搜索

借助工具

9.使用Google Analytics對(duì)網(wǎng)站的訪問(wèn)情況進(jìn)行回顧并進(jìn)行一些評(píng)估

例如一些頁(yè)面的瀏覽量極低于預(yù)期或相較于同類頁(yè)面瀏覽差距過(guò)大,就要考慮是否是指向該頁(yè)面的導(dǎo)航出現(xiàn)了問(wèn)題。


總結(jié)

導(dǎo)航的最終目的是簡(jiǎn)化獲取信息的過(guò)程,具體以何種方式表達(dá)還需要取決于業(yè)務(wù)內(nèi)容,但總體上要以用戶易接受的方式呈現(xiàn)。用戶若是能在獲取信息的過(guò)程中按照設(shè)計(jì)者所想的方式前進(jìn)并感受到暢通無(wú)阻的快感,導(dǎo)航便是成功的。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


超贊的創(chuàng)意網(wǎng)頁(yè)排版設(shè)計(jì),打造 “視”不可擋的網(wǎng)頁(yè)設(shè)計(jì)

前端達(dá)人

網(wǎng)頁(yè)中超過(guò)95%以上的信息都是通過(guò)文字的形式呈現(xiàn)。 然而,頁(yè)面文字并非毫無(wú)章法的隨意呈現(xiàn)。事實(shí)上,更具可讀性、視覺(jué)效果以及獨(dú)特排版和布局的網(wǎng)頁(yè)文本設(shè)計(jì),更能吸引用戶,提升用戶愉悅度。這也是為什么越來(lái)越多的設(shè)計(jì)師日益重視網(wǎng)頁(yè)排版設(shè)計(jì)的重要原因。

BS界面是基于瀏覽器的界面,隨著人們對(duì)于用戶體驗(yàn)要求的不斷提高,BS界面的設(shè)計(jì)要求也越來(lái)越高,

接下來(lái)為大家分享一下我收集到的案例:

jhk-1598599171213.jpg

jhk-1598599175297.jpg

jhk-1598599244105.png

jhk-1598599256648.png

WechatIMG73.png

WechatIMG74.png

WechatIMG94.png

WechatIMG106.jpeg

WechatIMG138.png

WechatIMG139.png

WechatIMG140.jpeg

WechatIMG141.pngWechatIMG142.jpeg

WechatIMG143.png

WechatIMG156.jpeg

WechatIMG157.jpeg

WechatIMG158.jpegWechatIMG158.jpeg



(以上圖片均來(lái)源于網(wǎng)絡(luò))


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)


頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

資深UI設(shè)計(jì)者

先來(lái)了解一下項(xiàng)目的背景。Conduira online是一個(gè)線上的教育平臺(tái),為準(zhǔn)備考試的用戶提供有用的工具和資源。這個(gè)平臺(tái)目前有一個(gè)側(cè)邊導(dǎo)航欄,上面有11個(gè)選項(xiàng)。后來(lái)由于平臺(tái)的變化,將主導(dǎo)航的選項(xiàng)縮減到3個(gè)——主頁(yè)、實(shí)習(xí)和課程。

導(dǎo)航的數(shù)量變少了,團(tuán)隊(duì)又迎來(lái)了新的問(wèn)題:是應(yīng)該繼續(xù)保留側(cè)邊導(dǎo)航的設(shè)計(jì)樣式還是切換成頂部導(dǎo)航的樣式呢?

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

為了做出最合理的選擇,我們需要回答三個(gè)基本的問(wèn)題。

主導(dǎo)航中有幾個(gè)選項(xiàng)?

在選擇導(dǎo)航時(shí)回答這個(gè)問(wèn)題很重要。這里介紹一個(gè)有趣的的交互概念叫做視覺(jué)固定(Visual Fixation):注意力一直保持在同一個(gè)地方。

在頂部導(dǎo)航中,一個(gè)視覺(jué)固定點(diǎn)通常只適合一個(gè)選項(xiàng)。然而,側(cè)邊導(dǎo)航上的單一視覺(jué)固定點(diǎn)可以同時(shí)容納兩個(gè)選項(xiàng)。

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

結(jié)果很明確。與頂部導(dǎo)航相比,用戶在一次視覺(jué)觀察中可以在側(cè)邊導(dǎo)航上查看和感知更多菜單選項(xiàng)。當(dāng)然頂部導(dǎo)航也有自己的優(yōu)勢(shì),為每個(gè)菜單項(xiàng)賦予各自的權(quán)重,而不是讓它們的重要性被其他選項(xiàng)分散。

對(duì)于具有過(guò)濾選項(xiàng)或帶有二級(jí)菜單的電商網(wǎng)站,視覺(jué)固定的概念起到了非常重要的作用。因?yàn)樵谶@些情況下,我們希望用戶能夠在單一的視覺(jué)點(diǎn)上盡可能多的選擇。

Tips:這里的選擇僅僅取決于界面上有多少選項(xiàng)。如果主導(dǎo)航的菜單項(xiàng)不多于5個(gè),只需使用頂部導(dǎo)航,這樣能夠更好地控制用戶在整個(gè)平臺(tái)上的體驗(yàn)旅程。

主導(dǎo)航與選項(xiàng)優(yōu)先級(jí)的關(guān)系?

用戶在瀏覽網(wǎng)頁(yè)或App時(shí)會(huì)有各種各樣的瀏覽順序,其中一種就是「F型模式」。

看起來(lái)像這樣:

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

F型布局的特點(diǎn)是將注視力集中在頁(yè)面的頂部和左側(cè):

  • 用戶首先以水平移動(dòng)的方式瀏覽內(nèi)容區(qū)域,這個(gè)動(dòng)線構(gòu)成了F型布局的頂欄;
  • 接下來(lái)用戶掃描頁(yè)面左側(cè)的垂直線,進(jìn)行第二次水平移動(dòng)瀏覽。隨著路徑越來(lái)越長(zhǎng),閱讀覆蓋的區(qū)域一次比一次短,構(gòu)成了F型布局下面的部分;
  • 最后用戶以垂直移動(dòng)的方式瀏覽整個(gè)頁(yè)面的內(nèi)容。

這種模式的含義是同一頁(yè)面上的第一行文本比后幾行文本受到更多的關(guān)注;每行文本左邊的幾個(gè)字比后面的文字接受度更多。

因此,在頂部導(dǎo)航中最左邊的選項(xiàng)比其他選項(xiàng)具有更多的視覺(jué)權(quán)重,因?yàn)樗挥谥饕曈X(jué)區(qū)域,優(yōu)先級(jí)更高。

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

側(cè)邊導(dǎo)航采用了垂直移動(dòng),這是用戶瀏覽網(wǎng)頁(yè)的一個(gè)自然方向,但是選項(xiàng)優(yōu)先級(jí)的排序是個(gè)限制。當(dāng)選項(xiàng)的優(yōu)先級(jí)相同時(shí),可以使用側(cè)邊導(dǎo)航,這樣用戶就可以完整瀏覽列表并確定對(duì)他們重要的內(nèi)容。

是否考慮使用二級(jí)導(dǎo)航?

如果是的話,可以考慮利用以下兩種設(shè)計(jì)樣式:

水平導(dǎo)航——在頁(yè)面頂部設(shè)置一個(gè)主導(dǎo)航,在主導(dǎo)航下面設(shè)置二級(jí)導(dǎo)航進(jìn)一步來(lái)區(qū)分內(nèi)容。

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

側(cè)邊欄——在頂部設(shè)置一個(gè)主導(dǎo)航,然后在側(cè)邊設(shè)置一個(gè)側(cè)邊欄菜單來(lái)處理其他內(nèi)容。

頂部導(dǎo)航和側(cè)邊導(dǎo)航,哪一種用戶體驗(yàn)更好?

總結(jié)

頂部導(dǎo)航和側(cè)邊導(dǎo)航之間的選擇實(shí)際上取決于以上三個(gè)基本的問(wèn)題。

另外由于現(xiàn)在的設(shè)備有了更大的屏幕尺寸,如今許多設(shè)計(jì)趨勢(shì)已轉(zhuǎn)向側(cè)邊導(dǎo)航,因?yàn)樗雌饋?lái)更干凈并優(yōu)化了更多的屏幕空間。

最后將導(dǎo)航的選擇歸結(jié)為兩點(diǎn):

  • 主導(dǎo)航包含的選項(xiàng)數(shù)量;
  • 是希望用戶根據(jù)優(yōu)先級(jí)瀏覽項(xiàng)目,還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項(xiàng)目。

文章來(lái)源:優(yōu)設(shè)    作者:Clip設(shè)計(jì)夾


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


如何從零開(kāi)始設(shè)計(jì)一個(gè)購(gòu)物網(wǎng)站?送你這份高手流程!

周周

在這個(gè)項(xiàng)目中,主要任務(wù)是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設(shè)計(jì)一個(gè)全新的品牌電商網(wǎng)站。

新電商網(wǎng)站最主要的目的是吸引顧客前往線下店鋪選購(gòu)商品,同時(shí)也希望通過(guò)快遞和門(mén)店自提的方式來(lái)完善線上銷售流程,拓展消費(fèi)群體。

該網(wǎng)站需要鞏固品牌核心業(yè)務(wù)價(jià)值觀:傳統(tǒng),有趣和創(chuàng)意。該網(wǎng)站還需要通過(guò)強(qiáng)調(diào)其龐大的庫(kù)存體量和手工精選商品來(lái)將 Jeffrey’s Toys 和其他電子商務(wù)零售商區(qū)分開(kāi)。

該網(wǎng)站的主要業(yè)務(wù)目標(biāo)包括:

  • 能快速定位商品

  • 每一個(gè)商品都有單獨(dú)的詳情頁(yè)

  • 用戶能成功購(gòu)買一個(gè)或多個(gè)商品

  • 為爆款商品引流

用戶分析

1. 用戶畫(huà)像

誰(shuí)才是這個(gè)網(wǎng)站真正的用戶?當(dāng)我接到這個(gè)任務(wù)的時(shí)候,客戶已經(jīng)繪制出了3個(gè)用戶畫(huà)像,每個(gè)用戶畫(huà)像都有特定的需求和痛點(diǎn)。

△ 客戶繪制的三個(gè)用戶畫(huà)像

基于三個(gè)用戶畫(huà)像,我確定了該網(wǎng)站要滿足的用戶需求,同時(shí)也考慮了Jeffrey’s Toys的需求。

確定的主要需求是:

  • 通過(guò)清晰的商品組織分類來(lái)提供流暢的電商購(gòu)物體驗(yàn)

  • 通過(guò)商品搜索使用戶能夠快速找到想要的商品

  • 通過(guò)實(shí)用的商品推薦來(lái)體現(xiàn) Jeffrey’s Toys 的專業(yè)以及龐大的庫(kù)存

  • 通過(guò)與用戶建立品牌關(guān)系來(lái)樹(shù)立信任

  • 通過(guò)產(chǎn)品細(xì)節(jié)信息來(lái)確保用戶選購(gòu)合適的商品

  • 通過(guò)商品評(píng)論來(lái)輔助用戶作出消費(fèi)決策并允許用戶進(jìn)行商品反饋

  • 通過(guò)的下單結(jié)賬流程簡(jiǎn)化購(gòu)買行為并節(jié)省用戶時(shí)間

2. 競(jìng)品分析

為了獲得啟發(fā),我確定了3個(gè)主要競(jìng)品,特別是舊金山的精品玩具店;還有3個(gè)玩具零售市場(chǎng)的間接競(jìng)品。直接競(jìng)品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競(jìng)品分析了 Lululemon 、Ikea 和 CVS 。競(jìng)品分析的目的是比較并找出這些電商網(wǎng)站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機(jī)會(huì)。

競(jìng)品分析最重要的收獲是了解了不同的電商網(wǎng)站的商品選擇模塊以及網(wǎng)站整體的布局。這些信息有助于鞏固我第二階段的研究。

△ 比較直接競(jìng)品和間接競(jìng)品的特征

2. 思維導(dǎo)圖

在完成競(jìng)品分析之后,我把這個(gè)項(xiàng)目中用戶的需求和客戶的需求列成了長(zhǎng)長(zhǎng)的信息清單。之后我又通過(guò)思維導(dǎo)圖來(lái)理清了在這個(gè)項(xiàng)目中用戶的需求和客戶的需求。思維導(dǎo)圖幫助我將信息組織成更清晰的想法,同時(shí)在各個(gè)想法之間建立層次結(jié)構(gòu)關(guān)系。

△ 用來(lái)理清信息和想法的思維導(dǎo)圖

信息架構(gòu)

接下來(lái)我通過(guò)卡片分類法來(lái)構(gòu)造網(wǎng)站的導(dǎo)航系統(tǒng),卡片分類法是一種利用人們現(xiàn)有思維模型的研究技術(shù)。在構(gòu)造導(dǎo)航系統(tǒng)時(shí),我了解到94種商店中最暢銷的商品庫(kù)存信息。擁有如此龐大的商品庫(kù)存,就很有必要通過(guò)清晰易懂的方式組織、分類庫(kù)存信息,以便用戶能夠快速的找到他們想要的商品。

1. 卡片分類

△ 卡片分類的初期階段

開(kāi)放式卡片分類:我要求9位參與調(diào)研的用戶通過(guò)他們自己覺(jué)得合理的分類規(guī)則將94種商品分類,然后給每個(gè)類別加上他們認(rèn)為能夠準(zhǔn)確描述該類別的標(biāo)簽。這樣做的目的是對(duì)于網(wǎng)站潛在的商品分類方式及類別名稱有一個(gè)大致的了解。

封閉式卡片分類:基于開(kāi)放式卡片分類的結(jié)果,我從最常見(jiàn)的類別標(biāo)簽中創(chuàng)建了13個(gè)預(yù)定類別。然后,我進(jìn)行了封閉式的卡片分類,我邀請(qǐng)了20位參與調(diào)研的用戶將商品逐一分類到我之前預(yù)定的13種類別中。封閉式卡片分類有助于讓我在進(jìn)行設(shè)計(jì)之前能夠清楚判斷這些類別是否符合大部分網(wǎng)站用戶的分類邏輯。

△ 通過(guò)卡片分類得到的13種商品類別

2. 站點(diǎn)圖

根據(jù)卡片分類以及競(jìng)品分析的結(jié)果,我繪制了網(wǎng)站的站點(diǎn)圖來(lái)明確整個(gè)網(wǎng)站的框架結(jié)構(gòu)。這是為了確保所有產(chǎn)品都放置在用戶期望的位置,同時(shí)使購(gòu)物體驗(yàn)更加直觀。

△ 站點(diǎn)地圖

3. 系統(tǒng)架構(gòu)圖

為了對(duì)用戶將會(huì)如何瀏覽網(wǎng)站有一個(gè)全面的概述,我繪制一張系統(tǒng)架構(gòu)圖。這樣做的主要目的是為了了解網(wǎng)站應(yīng)該給用戶提供什么功能以及功能拓展的廣度。我還通過(guò)系統(tǒng)架構(gòu)圖來(lái)探索電商網(wǎng)站和實(shí)體店鋪之間的聯(lián)系。

△ 系統(tǒng)架構(gòu)圖演示用戶將會(huì)如何瀏覽網(wǎng)站

4. 用戶流程

在確定了我需要給用戶提供的體驗(yàn)「全局」之后,我為每一個(gè)用戶畫(huà)像創(chuàng)建了不同的用戶流程,通過(guò)不同的用戶流程來(lái)使購(gòu)物體驗(yàn)更加符合他們的需求。構(gòu)建用戶流程的目的是確定每個(gè)用戶為了實(shí)現(xiàn)各自的預(yù)期目標(biāo)經(jīng)過(guò)的頁(yè)面和操作步驟。這不僅能使我專注于每個(gè)用戶的操作,也使我能夠在設(shè)計(jì)網(wǎng)站的時(shí)候?qū)⒐δ懿鸱?,以便給用戶提供更佳的購(gòu)物體驗(yàn)。

我繪制的第一個(gè)用戶流程是關(guān)于用戶畫(huà)像是 Jenny 的。Jenny 最主要的目是為自己的孫子購(gòu)買初級(jí)魔術(shù)玩具。Jenny 的用戶流程(如下圖所示)表明了她是如何搜索初級(jí)魔術(shù)玩具,以及為了成功購(gòu)買她可能采取的幾種不同路徑。

△ Jenny 的用戶流程

Debbie 和 Jenny 都希望能有一個(gè)的下單結(jié)賬流程,所以很有必要在用戶流程中繪制出下單結(jié)賬流程。下圖的用戶流程顯示了Debbie在選定一個(gè)特技自行車之后該如何進(jìn)行結(jié)賬下單。通過(guò)允許她登錄自己的帳號(hào),自動(dòng)輸入她的結(jié)賬信息來(lái)簡(jiǎn)化她的結(jié)賬下單流程。

△ Debbie 的用戶流程

開(kāi)發(fā)階段

1. 草稿

在我整理了前期獲取的所有信息之后,我就開(kāi)始著手設(shè)計(jì)網(wǎng)站?;谥罢沓鰜?lái)的用戶流程圖,我開(kāi)始繪制幾個(gè)主要頁(yè)面的草圖,同時(shí)快速思考出幾個(gè)不同的網(wǎng)站布局方案。之后我邀請(qǐng)3個(gè)用戶參與了用戶調(diào)研,以驗(yàn)證這些方案是否同時(shí)滿足客戶和網(wǎng)站用戶的需求。

△ 網(wǎng)站首頁(yè)和品類頁(yè)面的初稿

2. 線框圖

基于用戶對(duì)草圖的反饋和我個(gè)人的想法,我開(kāi)始使用Figma來(lái)繪制線框圖。整個(gè)過(guò)程中,根據(jù)優(yōu)先級(jí)不同,優(yōu)先考慮最能滿足網(wǎng)站用戶的功能。

△ 網(wǎng)站首頁(yè)和產(chǎn)品詳情頁(yè)的線框圖

原型制作

1. 主頁(yè)

首頁(yè)我盡可能的保持簡(jiǎn)潔,避免用戶進(jìn)入網(wǎng)站時(shí)被過(guò)多的信息干擾而不知所措。

首頁(yè)放置了全局導(dǎo)航、輔助導(dǎo)航和搜索欄,方便用戶快捷的找到自己想要的商品。首頁(yè)還放置了新品推薦,因?yàn)樾缕吠扑]能夠展示品牌豐富的庫(kù)存,同時(shí)能為用戶提供有用的購(gòu)買建議。我想通過(guò)介紹 Jeffrey’s Toys 豐富的歷史來(lái)樹(shù)立用戶品牌聯(lián)系,所以在首頁(yè)我還放置了「關(guān)于我們」部分,用戶點(diǎn)擊還可跳轉(zhuǎn)到具體的介紹頁(yè)面查看更多關(guān)于品牌故事的信息。在頁(yè)腳,我放置了其他的用戶可能需要的信息。除此之外,我還將用戶交流系統(tǒng)放在頁(yè)腳,這樣是為了獲得用戶想法并在店鋪進(jìn)行活動(dòng)時(shí)通過(guò)用戶參與提高店鋪活動(dòng)氛圍。

2. 商品類別頁(yè)面

當(dāng)用戶點(diǎn)擊商店按鈕或者是某個(gè)類別之后,用戶將會(huì)前往一個(gè)列出了該類別下所有商品的商品列表頁(yè)。有個(gè)用戶畫(huà)像想要給他的孫子買一個(gè)合適他孫子年齡的玩具,所以頁(yè)面需要一個(gè)品類篩選器,同時(shí)支持商品按照不同的屬性例如年齡、價(jià)格和品牌分類也很重要。除此之外,我還通過(guò)面包屑導(dǎo)航來(lái)方便用戶定位頁(yè)面位置。

△ 商品類別頁(yè)線框圖

3. 商品詳情頁(yè)

在商品詳情頁(yè),我希望能夠提供盡可能多的商品詳情來(lái)確保這個(gè)商品是用戶想要的。

在頁(yè)面下方,網(wǎng)站會(huì)基于當(dāng)前商品給用戶推薦其他相似商品。在商品詳情頁(yè),產(chǎn)品評(píng)論區(qū)占了很大一部分,因?yàn)橛脩艨梢栽诋a(chǎn)品評(píng)論區(qū)反饋商品信息,便于樹(shù)立用戶信任,同時(shí)用戶能夠通過(guò)其他用戶的評(píng)論來(lái)作出更明智的購(gòu)買決定。為了簡(jiǎn)化下單流程,我設(shè)計(jì)了一個(gè)購(gòu)物車預(yù)覽頁(yè),用戶在購(gòu)物車預(yù)覽頁(yè)可以預(yù)覽商品信息,用戶每次將商品加入購(gòu)物車后都會(huì)出現(xiàn)購(gòu)物車預(yù)覽頁(yè),在購(gòu)物車預(yù)覽頁(yè)面,用戶可以很方便的點(diǎn)擊「選好了」按鈕而進(jìn)入結(jié)賬下單流程。

△ 商品詳情頁(yè)線框圖

4. 購(gòu)物車預(yù)覽頁(yè)

當(dāng)用戶點(diǎn)擊「選好了」按鈕或者是購(gòu)物車按鈕,用戶將會(huì)進(jìn)入到一個(gè)如下圖所示的購(gòu)物車預(yù)覽頁(yè)。這是結(jié)賬下單流程的第一步,用戶在購(gòu)物車可以管理他們所選的商品,作出合適的調(diào)整。用戶在下單時(shí),可以選擇到店自提或者是物流配送,設(shè)置到店自提是為了引導(dǎo)用戶去 Jeffrey’s Toy的線下店鋪,同時(shí)降低運(yùn)輸成本。

△ 購(gòu)物車預(yù)覽頁(yè)線框圖

5. 結(jié)帳頁(yè)面

客戶提供的三個(gè)用戶畫(huà)像的主要痛點(diǎn)之一就是想要有一個(gè)的結(jié)賬流程,所以我得確保結(jié)賬下單體驗(yàn)要盡可能的流暢。作為一個(gè)回頭客,用戶可以選擇登錄自己的帳號(hào),并自動(dòng)保存物流信息和支付信息。我決定在一個(gè)頁(yè)面上承載全部的結(jié)賬流程,這樣方便用戶在結(jié)賬流程中任何時(shí)刻都能編輯信息。頂部的進(jìn)度欄顯示了下單結(jié)賬流程有多少步,用戶當(dāng)前在哪一步以及用戶還剩下多少步驟。

△ 登錄頁(yè)

△ 下單頁(yè)

△ 訂單查看頁(yè)

6. 其他畫(huà)面

我還創(chuàng)建了一些其他頁(yè)面,例如訂單確認(rèn)頁(yè)面。訂單確認(rèn)頁(yè)面明確告知用戶結(jié)賬流程已經(jīng)完成了,用戶還能在訂單確認(rèn)頁(yè)查看有關(guān)訂單的其他信息,以供參考。

我創(chuàng)建了一個(gè)店鋪聯(lián)系頁(yè)面,當(dāng)用戶在網(wǎng)站找不到想要的商品時(shí),可以在店鋪聯(lián)系頁(yè)面查詢線下店鋪商品情況以及店鋪的營(yíng)業(yè)時(shí)間、位置和聯(lián)系電話。

除此之外我還創(chuàng)建了一個(gè)「關(guān)于頁(yè)面」用來(lái)著重強(qiáng)調(diào) Jeffrey’s Toys 與其他電商網(wǎng)站例如亞馬遜的區(qū)別。我還在這個(gè)頁(yè)面介紹了Jeffrey’s Toys 長(zhǎng)達(dá)60年的獨(dú)特歷史,以增強(qiáng)用戶對(duì)于品牌傳統(tǒng)、有趣和創(chuàng)意的商業(yè)價(jià)值的印象。

△ 訂單確認(rèn)頁(yè)

△ 聯(lián)系方式頁(yè)

△ 公司介紹頁(yè)

7. 可用性測(cè)試

在完成線框圖之后,我就開(kāi)始繪制網(wǎng)站原型以便進(jìn)行可用性測(cè)試。這使我能夠評(píng)估用戶將會(huì)如何與網(wǎng)站進(jìn)行交互,也能讓我評(píng)估網(wǎng)站是否滿足了用戶的基本需求。在進(jìn)行UI設(shè)計(jì)之前,通過(guò)中保真原型進(jìn)行可用性測(cè)試來(lái)獲取潛在用戶真實(shí)、關(guān)鍵的反饋是很有必要的,可用性測(cè)試還能鞏固網(wǎng)站的功能需求。

我邀請(qǐng)了4位用戶進(jìn)行可用性測(cè)試,為了讓他們吻合用戶畫(huà)像中的用戶特征,我指定了三種用戶場(chǎng)景來(lái)讓他們完成測(cè)試。這三種用戶場(chǎng)景包括:

  • 您需要為您的女兒購(gòu)買一個(gè)玩具。您會(huì)怎么查找商品并完成購(gòu)買。

  • 您可以通過(guò)什么方法知道 Jeffrey’s Toys 下個(gè)月將要舉辦的店鋪活動(dòng)。

  • 當(dāng)您在網(wǎng)站上沒(méi)有找到您想要的玩具時(shí),您將如何查詢并購(gòu)買。

這些是我通過(guò)可用性測(cè)試得到的用戶反饋:

  • 總體而言,用戶能夠輕松地找到想要的產(chǎn)品和信息

  • 在結(jié)賬流程中,促銷活動(dòng)部分會(huì)分散用戶的注意力

  • 部分用戶不想通過(guò)電話來(lái)查詢商品信息,需要提供其他的查詢方式。

  • 部分用戶覺(jué)得前往線下店鋪的引導(dǎo)部分還可以增強(qiáng),目前的引導(dǎo)不夠。

△ 可用性測(cè)試得到的反饋

8. 后續(xù)步驟

這個(gè)案例研究展現(xiàn)的只是電商網(wǎng)站設(shè)計(jì)的開(kāi)端。后續(xù)我將會(huì)繼續(xù)進(jìn)行可用性測(cè)試,并進(jìn)一步迭代我的設(shè)計(jì)。如果有更多的時(shí)間,我將會(huì)著重探索更多從網(wǎng)站引導(dǎo)用戶前往線下店鋪的方式。我也將會(huì)繼續(xù)豐富網(wǎng)站頁(yè)面并將Jeffrey’s Toys的視覺(jué)風(fēng)格融入到網(wǎng)站中。下圖展示了我最初設(shè)想的UI設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)我希望秉持簡(jiǎn)潔、創(chuàng)意、傳統(tǒng)的設(shè)計(jì)理念。

△ 首頁(yè)

△ 商品分類頁(yè)

△ 商品詳情頁(yè)

編輯總結(jié)

本文以玩具購(gòu)物網(wǎng)站這個(gè)小案例,清晰地記錄了一個(gè)較為完整的產(chǎn)品設(shè)計(jì)流程。不論是設(shè)計(jì)方法,還是記錄方法,都可以借鑒運(yùn)用在工作、匯報(bào)和作品集上。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)頁(yè)響應(yīng)式布局原理

資深UI設(shè)計(jì)者


今天分享一個(gè)很多設(shè)計(jì)師頭疼已久的問(wèn)題,關(guān)于網(wǎng)頁(yè)響應(yīng)式布局原理和設(shè)計(jì)方法。文章主要包含三個(gè)部分:

  • 響應(yīng)式頁(yè)面是什么
  • 響應(yīng)式布局的規(guī)則
  • 響應(yīng)式的設(shè)計(jì)流程

所以廢話不多說(shuō),我們直接進(jìn)入正題吧!

響應(yīng)式頁(yè)面是什么

在過(guò)去,網(wǎng)站通常就是為了電腦大屏幕展示而設(shè)計(jì),如果用手機(jī)訪問(wèn),只能在巴掌大的屏幕里看縮小版的頁(yè)面。雖然還有手機(jī)專供的 WAP 頁(yè)面,但因?yàn)樘?jiǎn)陋也無(wú)濟(jì)于事。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

隨著智能手機(jī)、3G、4G、HTML5 的普及,使用手機(jī)訪問(wèn)網(wǎng)站的人越來(lái)越多,為了讓用戶在手機(jī)上看到更合適的布局,且兼顧開(kāi)發(fā)的效率,響應(yīng)式的概念就被提出了。

通俗解釋,就是通過(guò)一套代碼,可以無(wú)縫匹配符合電腦、平板、手機(jī)預(yù)覽效果的前端技術(shù)。比如下方 Nike 官網(wǎng),就是應(yīng)用了響應(yīng)式設(shè)計(jì)后在不同客戶端、分辨率下的效果。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

雖然響應(yīng)式的應(yīng)用越來(lái)越廣泛,但是從零開(kāi)始去寫(xiě)一個(gè)響應(yīng)式效果的網(wǎng)站對(duì)于程序員來(lái)講是非常復(fù)雜的,因?yàn)楫?dāng)中包含了大量的邏輯、判斷、適配內(nèi)容。

所以,今天市面上看見(jiàn)的響應(yīng)式網(wǎng)站,多數(shù)使用了一些開(kāi)源的代碼或者框架。而應(yīng)用最廣泛的,就數(shù) Bootstrap 了。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

之所以提這個(gè),是因?yàn)榧热婚_(kāi)發(fā)使用了別人寫(xiě)的框架,那么對(duì)于我們的設(shè)計(jì)稿也就上了緊箍咒,我們需要根據(jù)框架的要求來(lái)設(shè)計(jì)界面,這會(huì)稍后具體解釋。

還有個(gè)問(wèn)題,就是為了實(shí)現(xiàn)平板、手機(jī)和電腦不同的預(yù)覽效果,并不是只有響應(yīng)式布局一種技術(shù),還有另一種技術(shù) —— 自適應(yīng)。

通俗點(diǎn)說(shuō),自適應(yīng)就是為不同客戶端分別提供一套獨(dú)立的前端代碼,和響應(yīng)式使用一套代碼適配多種客戶端不同。

響應(yīng)式適合應(yīng)用在一些簡(jiǎn)單的官網(wǎng)、展示類頁(yè)面,展示的內(nèi)容大致相同。而自適應(yīng)適合應(yīng)用在需要在不同客戶端類型有較大差異的網(wǎng)站,這樣只使用一套前端代碼就完全行不通了。

比如愛(ài)奇藝的官網(wǎng),為了符合用戶體驗(yàn),在移動(dòng)端網(wǎng)頁(yè)布局中精簡(jiǎn)替換了大量的內(nèi)容,和電腦版已經(jīng)沒(méi)有太直接的聯(lián)系了。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

兩種做法并沒(méi)有好壞之分,只有適不適合項(xiàng)目之別。了解了它們的不同,我們就可以進(jìn)一步學(xué)習(xí)響應(yīng)式的規(guī)則了。

響應(yīng)式布局的規(guī)則

響應(yīng)式布局的規(guī)則并不是特別復(fù)雜,只要注意兩個(gè)問(wèn)題:

  • 分段響應(yīng)規(guī)則
  • 組件寬度適應(yīng)

1. 分段響應(yīng)規(guī)則

敲黑板,響應(yīng)式的響應(yīng),面向的核心對(duì)象是瀏覽器窗口的寬度,而不是設(shè)備類型。所以打開(kāi)使用響應(yīng)式的網(wǎng)站,我們通過(guò)改變?yōu)g覽器的寬度,就可以看見(jiàn)不同的展示效果,比如下圖的星巴克官網(wǎng)。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

我們可以發(fā)現(xiàn),瀏覽器寬度每達(dá)到一個(gè)數(shù)值(Breakpoint)的時(shí)候,頁(yè)面的排版和樣式就會(huì)發(fā)生明顯的變化,而這就是響應(yīng)式設(shè)計(jì)最重要的功能 —— 分段展示。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

也就是說(shuō),響應(yīng)式規(guī)則就是為頁(yè)面分配不同的寬度區(qū)間,每個(gè)區(qū)間有各自展示的樣式,用來(lái)應(yīng)對(duì)不同的場(chǎng)景和設(shè)備類型,常見(jiàn)的適配區(qū)間大致如下:

包含圖片截圖 320-800 :移動(dòng)端收集屏幕 800-1200:平板或上網(wǎng)本屏幕 1200-無(wú)窮:一般的電腦顯示器

面對(duì)分段式的布局、樣式變更,我們就要關(guān)注到底發(fā)生了哪些變化??偨Y(jié)起來(lái),可以簡(jiǎn)單的歸納成三種組件的調(diào)整:內(nèi)容增減、布局調(diào)整、樣式調(diào)整。

第一種,內(nèi)容增減。即部分模塊在不同的分段內(nèi)會(huì)有顯示和隱藏的狀態(tài),尤其是一些網(wǎng)頁(yè)端的內(nèi)容覺(jué)得在小屏幕上展示會(huì)太多了,就在小屏幕場(chǎng)景中隱藏掉。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

第二種,布局調(diào)整。主要是模塊的排列和順序發(fā)生變化,常見(jiàn)的就是模塊一行的列數(shù)發(fā)生改變。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

第三種,樣式變更。即針對(duì)不同的分段設(shè)計(jì)完全不一樣的樣式,最多應(yīng)用在導(dǎo)航欄的設(shè)計(jì)中,會(huì)為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

所以,歸納起來(lái),就是頁(yè)面針對(duì)不同的分段展示不同的結(jié)果,即頁(yè)面中的組件觸發(fā)了對(duì)應(yīng)的變化類型。每個(gè)組件都可以應(yīng)用不同的變化類型,而無(wú)需進(jìn)行統(tǒng)一。

2. 組件寬度適應(yīng)

分段式響應(yīng),是響應(yīng)式布局的第一層邏輯。而在觸發(fā)關(guān)鍵值(Breakpoint) 之間的區(qū)間,我們拖動(dòng)窗口的寬度,會(huì)發(fā)現(xiàn)組件的寬度也隨之改動(dòng),這就是 —— 組件寬度適應(yīng)。

組件寬度適應(yīng)在手機(jī) UI 的適配中非常重要,即完成不同屏幕寬的手機(jī)適配所應(yīng)用的邏輯,所下面我們簡(jiǎn)單講講它的規(guī)則。

組件的寬度適應(yīng)模式主要有兩種類型,一種是容器寬度適應(yīng),一種是容器比例縮放,比如下面的圖例。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

容器是一個(gè)比較抽象的概念,類似設(shè)計(jì)軟件中的編組,它集合了所有下級(jí)元素,但本身并沒(méi)有實(shí)際的內(nèi)容和樣式。在響應(yīng)式規(guī)則中,下級(jí)元素并不會(huì)和這個(gè)容器等比變動(dòng),出現(xiàn)下面這種錯(cuò)誤的效果。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

正確做法是會(huì)定義下級(jí)元素針對(duì)父容器的響應(yīng)方法,做到容器變更的同時(shí)其自身的顯示也是合理的。比如相對(duì)容器左右間距一致、對(duì)齊方向一致、尺寸固定等設(shè)置。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

而這種規(guī)則的設(shè)置,就是 Sketch/Figma/XD 中的響應(yīng)式設(shè)置功能。只要設(shè)置得當(dāng),就可以獲得一樣的寬度適應(yīng)效果。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

如果對(duì)軟件響應(yīng)式功能了解不全面的同學(xué),就可以自己多搜索一下對(duì)應(yīng)的說(shuō)明,我就不在這里過(guò)多的展開(kāi)了。

再總結(jié)一下,響應(yīng)式的規(guī)則就是頁(yè)面組件先遵循當(dāng)前分段展示的布局效果,并在這個(gè)區(qū)間內(nèi)支持小范圍寬度的變更和適應(yīng)。

響應(yīng)式的設(shè)計(jì)流程

響應(yīng)式設(shè)計(jì)是一種源自技術(shù)的概念,而不是單純的設(shè)計(jì)風(fēng)格、方法,所以設(shè)計(jì)響應(yīng)式設(shè)計(jì)其實(shí)就是 「面向編程設(shè)計(jì)」。

設(shè)計(jì)界面要吻合編程的真實(shí)方法和需求,而不是根據(jù)我們想怎么做就怎么做,所以整個(gè)流程不能只站在設(shè)計(jì)師自身的角度考慮,而要和前端程序員緊密溝通,首先確定響應(yīng)幾個(gè)寬度區(qū)間,以及它們對(duì)應(yīng)的數(shù)值分別是多少。

然后我們就要完成對(duì)應(yīng)數(shù)量頁(yè)面的設(shè)計(jì),因?yàn)榍懊嫖覀冋f(shuō)過(guò),分段響應(yīng)規(guī)則中會(huì)有明顯的樣式變動(dòng),這就要求設(shè)計(jì)師是一定要給出設(shè)計(jì)示例的,而不能依靠口頭描述或程序員自由發(fā)揮。

用一篇文章,幫你看懂網(wǎng)頁(yè)響應(yīng)式布局原理

完成這些設(shè)計(jì)稿以后,我們?cè)龠M(jìn)一步確定同一個(gè)區(qū)間內(nèi),組件的寬度適應(yīng)規(guī)則是什么樣的。多數(shù)情況下,這個(gè)階段使用口述就可以,如果規(guī)則比較多,那么就可以在標(biāo)注階段把你要實(shí)現(xiàn)的效果記錄上去即可。

全部設(shè)計(jì)稿和規(guī)則都溝通完畢以后,才進(jìn)入切圖導(dǎo)出的階段。要提醒一次,在一些特殊的情況下,響應(yīng)式的背景切圖會(huì)和普通頁(yè)面的背景切法不一樣,盡可能讓前端程序員檢查一遍導(dǎo)出的文件。

只要根據(jù)上述的流程,在遇到不確定或者不清楚的情況,就和前端程序員做溝通,那么很快就可以將項(xiàng)目輸出出來(lái)。

結(jié)尾

響應(yīng)式這個(gè)概念雖然高大上,但并不是任何項(xiàng)目都要無(wú)腦往上套的。因?yàn)榭蚣芤?guī)則上的限制,導(dǎo)致我們很難在響應(yīng)式頁(yè)面中使用一些特別復(fù)雜、高級(jí)的視覺(jué)樣式,導(dǎo)致最終呈現(xiàn)的效果往往非常簡(jiǎn)單或者過(guò)度依賴圖片的質(zhì)量。

所以,如果在功能較為復(fù)雜或需要復(fù)雜視覺(jué)支撐的網(wǎng)頁(yè)中,就可以選擇應(yīng)用固定頁(yè)面內(nèi)容寬度的設(shè)計(jì)來(lái)完成。

文章來(lái)源:優(yōu)設(shè)    作者:超人的電話亭

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)

前端達(dá)人

   藍(lán)藍(lán)設(shè)計(jì)的同事們,在積累了一定經(jīng)驗(yàn)的同時(shí),也在不斷的學(xué)習(xí)和豐富關(guān)于網(wǎng)站及數(shù)據(jù)可視化的表達(dá)方式,搜集資料,作為大屏及數(shù)據(jù)可視化界面設(shè)計(jì)資料的參考,分享如下:


希望這篇文章可以幫到您!

微信圖片_20200612102206.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——


微信圖片_20200612102221.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200612102228.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200612102230.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200612102253.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141554.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141607.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141610.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141635.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141713.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141716.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200617141718.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205433.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205436.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205438.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205445.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205448.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205451.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205456.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205511.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205514.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205518.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205521.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205524.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205527.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205530.png

——-- 網(wǎng)站ui設(shè)計(jì) --——微信圖片_20200621205532.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205535.png

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205538.jpg

——-- 網(wǎng)站ui設(shè)計(jì) --——

微信圖片_20200621205541.png

——-- 網(wǎng)站ui設(shè)計(jì) --——


(圖片均來(lái)源于網(wǎng)絡(luò))

  藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)



    更多精彩文章:


高手如何從零設(shè)計(jì)控制面板?

資深UI設(shè)計(jì)者

編者按:這是 UI 設(shè)計(jì)師 Diana Malewicz 的第二篇 UI 設(shè)計(jì)分享。這一次,她要設(shè)計(jì)的是一個(gè)控制面板的界面,如何控制不同UI元素的平衡,如何從零開(kāi)始構(gòu)建,相當(dāng)值得學(xué)習(xí)~

歡迎來(lái)到我的「UI設(shè)計(jì)指南」第二篇!如果你對(duì)于我的第一篇文章印象不錯(cuò)的話,那么這一篇應(yīng)該也會(huì)合你胃口:

當(dāng)然,請(qǐng)注意一點(diǎn),我創(chuàng)建 UI 界面的過(guò)程中,繞過(guò)了通常 UI 和產(chǎn)品設(shè)計(jì)應(yīng)該有的「用戶調(diào)研」——「用戶研究」——「體驗(yàn)分析」這樣的前置步驟,而是直接開(kāi)始創(chuàng)建干凈、一致的 UI 界面。在真實(shí)的設(shè)計(jì)項(xiàng)目當(dāng)中,開(kāi)頭的這些步驟是無(wú)法忽略的!

基本思路和低保真線框圖

這一次我們要設(shè)計(jì)的是儀表盤(pán)界面。那么我們從基本的想法開(kāi)始。

這一次,我們將會(huì)設(shè)計(jì)一個(gè)服務(wù)于醫(yī)療行業(yè)的控制面板(實(shí)際上,這個(gè)設(shè)計(jì)的初衷來(lái)源于我的姨媽,她是一名醫(yī)生,不僅要治療病人還要處理大量的文書(shū)工作),而整個(gè)設(shè)計(jì)我將會(huì)在 Sketch 中完成。

通常,我會(huì)從一個(gè)非常低保真的線框圖開(kāi)始。我會(huì)創(chuàng)建一系列的矩形線框,然后將他們按照需求和大小進(jìn)行排列,直到最終滿足我的想法為止。我選擇了一些隨機(jī)的、但是相近的色彩,確保我能看清位置就可以了。

然后我針對(duì)哪些內(nèi)容在哪里顯示,進(jìn)行了基本的說(shuō)明。

這就是一個(gè)非常原始的界面框架了。

B 端設(shè)計(jì)師如何做競(jìng)品分析?

資深UI設(shè)計(jì)者

將要分析的競(jìng)品排了個(gè)期,從最難最不熟悉的開(kāi)始。為什么從最難的開(kāi)始,可能是個(gè)人習(xí)慣吧,吃掉最難的那個(gè),后面就會(huì)更上手。突然想起之前讀的一本書(shū)「吃掉那只青蛙」,很不錯(cuò)的一本書(shū),有時(shí)間去溫習(xí)下。

一個(gè)產(chǎn)品,其實(shí)會(huì)有很多功能點(diǎn),有核心的主要功能,也有一些輔助功能,也會(huì)有一些讓你忽略,但關(guān)鍵時(shí)刻很需要的應(yīng)急功能,而這些點(diǎn)都需要去整理出來(lái)。

分析前-熟悉產(chǎn)品

這一點(diǎn)很重要,要先熟悉產(chǎn)品。如果對(duì)產(chǎn)品都不熟悉,那還是先不要做競(jìng)品分析。因?yàn)楹茈y判斷競(jìng)品的功能和風(fēng)格是否也適合當(dāng)前產(chǎn)品,因?yàn)閷?duì)產(chǎn)品的不熟悉,會(huì)產(chǎn)生誤判。

當(dāng)然,產(chǎn)品的目標(biāo)人群,產(chǎn)品定位,適用范圍等等,都會(huì)影響產(chǎn)品分析。

所以,花時(shí)間熟悉自己負(fù)責(zé)的產(chǎn)品,是不能跳過(guò)的。

開(kāi)始前的準(zhǔn)備

1. 制定時(shí)間規(guī)劃

最好事先做好時(shí)間規(guī)劃,可以有一整塊的時(shí)間,這樣分析產(chǎn)品時(shí),思緒也會(huì)比較完整和連續(xù),可以更專注。計(jì)算大概分析一個(gè)產(chǎn)品需要花費(fèi)的時(shí)間,最好不要用零碎時(shí)間來(lái)做,這樣只會(huì)增加時(shí)間上的代價(jià),也會(huì)增加挫折感;

2. 確定分析的目的

在「競(jìng)品分析」中,想要得到的結(jié)論和重點(diǎn)是什么。比如重點(diǎn)可能是產(chǎn)品的報(bào)表功能、產(chǎn)品的代碼審核功能等等,目的的確定能讓分析更有針對(duì)性,減少干擾。無(wú)目的隨意分析,得到的結(jié)果也會(huì)是零亂不堪,最后只是在浪費(fèi)時(shí)間。

3. 尋找?guī)椭?/strong>

每個(gè)產(chǎn)品,都有其不一樣的特性和產(chǎn)品邏輯,你不一定能夠完全 cover 到,甚至有些點(diǎn)就是比較難理解的,特別是偏技術(shù)性的名詞,這時(shí)若有技術(shù)同學(xué)的幫助,就會(huì)如虎添翼。所以最好可以事先找一位產(chǎn)品相關(guān)的技術(shù)同學(xué),詢問(wèn)這段時(shí)間是否有空,幫助你解答一些問(wèn)題。

個(gè)人建議:能夠在網(wǎng)上查到的資料,就不要先問(wèn)人,除非時(shí)間成本特別高。一方面也是提升自己解決問(wèn)題的能力,另一方面,也是節(jié)省彼此的時(shí)間。對(duì)方愿意幫你解決問(wèn)題,不代表你要把所有問(wèn)題一股腦倒給他,自己了解后再問(wèn),也是對(duì)對(duì)方的尊重,大家的時(shí)間都同樣寶貴。

4. 其他tips

如果是內(nèi)部公司產(chǎn)品,提前確認(rèn)是否需要權(quán)限,提前申請(qǐng)好,減少正式開(kāi)始后,還要等待審批時(shí)間。外部產(chǎn)品可以提前找好網(wǎng)站,可以咨詢的客服入口,如果是付費(fèi)競(jìng)品,咨詢是否可以向財(cái)務(wù)申請(qǐng)報(bào)銷等等。

好,現(xiàn)在正式開(kāi)始吧!

1. 像個(gè)用戶一樣去使用產(chǎn)品

很多時(shí)候,設(shè)計(jì)師的職業(yè)病,會(huì)讓我們過(guò)多注重視覺(jué)享受,而忽略作為用戶,想要的有時(shí)候只是功能可用。今天不管你把「掃一掃」功能做得多美,美得像個(gè)藝術(shù)品一樣,可是當(dāng)掃碼付款的時(shí)候,怎么也掃不出來(lái),那種站在店家前面忐忑不安,怎么也無(wú)法完成付款,后面一堆人等你,你仿佛聽(tīng)見(jiàn)后面其他顧客竊竊私語(yǔ)地討論著發(fā)生什么事情。那種場(chǎng)景我相信你不想經(jīng)歷,同樣我們也不應(yīng)該讓用戶來(lái)經(jīng)歷。

我的項(xiàng)目主管,一直都有提醒我,要像個(gè)小白來(lái)使用和設(shè)計(jì)我們的產(chǎn)品。這句建議,也一直在提醒著我。如果站在高姿態(tài)來(lái)俯視用戶,我們就很難真正的「懂」用戶,進(jìn)而很難設(shè)計(jì)出真正滿足用戶需要的產(chǎn)品。

這是競(jìng)品分析,但是我們也需要轉(zhuǎn)換自己的角色,變成用戶。這樣能更明白究竟競(jìng)品帶給用戶是便利,還是麻煩。有時(shí)適時(shí)抽離「設(shè)計(jì)師」的角色,會(huì)讓你更能去體會(huì)用戶的感受。

所以,先去用這個(gè)產(chǎn)品吧,然后才會(huì)有然后。

2. 如何去使用競(jìng)品

一個(gè)產(chǎn)品的使用,總是有它的使用場(chǎng)景,手機(jī)端的就更多樣了,簡(jiǎn)直無(wú)所不在。B 端產(chǎn)品可能會(huì)相對(duì)少,一般是在辦公場(chǎng)景或是特定場(chǎng)景。

可以像個(gè)編劇一樣,給自己寫(xiě)點(diǎn)劇本,加點(diǎn)情節(jié),塑造一個(gè)角色,假設(shè)競(jìng)品是電商方向,你可以想像,自己是一個(gè)剛畢業(yè)的社會(huì)新人,你可能沒(méi)多少錢(qián),你可能剛拿到你人生第一桶金,你想買件衣服犒勞自己,或許你會(huì)是數(shù)碼控,你關(guān)注已久的佳能單反在雙 11 中有優(yōu)惠等等,然后再去預(yù)想接下去的情節(jié),在購(gòu)物方面會(huì)考慮的問(wèn)題,或許是好用,或許是有趣等等。

也可以做任務(wù)式去使用產(chǎn)品,比如以電商為例,任務(wù)可以是買件喜歡的衣服,從搜索產(chǎn)品,到找到喜歡的衣服,添加購(gòu)物車,提交訂單,等待發(fā)貨,收貨,確認(rèn)收貨。這一個(gè)完整的流程走下來(lái),就會(huì)體驗(yàn)產(chǎn)品功能是否好用,搜索結(jié)果是否符合預(yù)期等等。

3. 記錄

使用產(chǎn)品的過(guò)程中,會(huì)遇到很多情況,有些是可預(yù)期的,有些是不可預(yù)期的。有些讓人覺(jué)得很好用,有些卻會(huì)讓人受挫。將這些情況都記錄下來(lái),有助于分析產(chǎn)品的可用性程度和滿意度。

  • 愉快的:可能是一個(gè)友好的提示,減輕你的認(rèn)知負(fù)擔(dān),也可以是一個(gè)貼心小 loading 動(dòng)畫(huà)等等
  • 受挫的:點(diǎn)擊沒(méi)有反饋,提交后沒(méi)反饋,不知道執(zhí)行成功與否等等
  • 難以理解:產(chǎn)品中專業(yè)名詞太多,沒(méi)有附帶解釋和幫助文檔,完全不知其所以然
  • 產(chǎn)生誤解:以為是 A,結(jié)果是 B
  • 一臉懵:頁(yè)面太亂,不知從哪里下手

上面這些只是舉例說(shuō)明,在競(jìng)品當(dāng)中可能遇到的一些問(wèn)題,也可以去反思自己的產(chǎn)品是否也會(huì)這樣讓用戶感到困惑。有時(shí)候,太熟悉自己的產(chǎn)品,會(huì)自認(rèn)為產(chǎn)品很完美,會(huì)理所當(dāng)然認(rèn)為「大家都這么認(rèn)為」……

記錄問(wèn)題、原因,感受并截圖為證(有必要可錄屏),后期可追溯。寫(xiě)得越詳細(xì)越好,后面整理的時(shí)候會(huì)更清晰。

4. 各個(gè)擊破-功能了解

在熟悉整個(gè)產(chǎn)品后,就需要對(duì)產(chǎn)品的各個(gè)功能進(jìn)行分析了解、梳理。了解競(jìng)品的核心功能是什么,核心功能在解決用戶什么問(wèn)題,是否真的解決了用戶的痛點(diǎn),其他功能又在整個(gè)產(chǎn)品當(dāng)中充當(dāng)什么樣的角色。

將競(jìng)品的功能與本產(chǎn)品功能對(duì)比,不只是對(duì)比有無(wú),更進(jìn)一步地去想,為什么有這個(gè)功能,為什么沒(méi)有這個(gè)功能,有或沒(méi)有是否會(huì)提高用戶的使用效率,用戶的留存,用戶的體驗(yàn)等等。

功能多不代表好,如果功能不能給用戶帶來(lái)益處,其實(shí)它的存在只是增加開(kāi)發(fā)成本而已。

整體總結(jié)

其實(shí)競(jìng)品分析中,最難的是總結(jié)歸納。做了一堆的分析后,結(jié)論是什么呢,這個(gè)結(jié)論如何寫(xiě)呢?

可以先從設(shè)立分析目的開(kāi)始,找到中心軸線,然后再慢慢延展開(kāi)來(lái)。在要做總結(jié)報(bào)告時(shí),你會(huì)欣喜地發(fā)現(xiàn)最初設(shè)立目標(biāo)是多么的重要。

文章來(lái)源:優(yōu)設(shè)    作者:箴鹽設(shè)計(jì)

如何讓郵件體驗(yàn)設(shè)計(jì)更加吸引人?

資深UI設(shè)計(jì)者

互聯(lián)網(wǎng)時(shí)代的人們?cè)缇褪軌蛄诵畔⒈?,我們每天都?huì)經(jīng)系統(tǒng)推送、應(yīng)用通知、微信、電話、短信等各類渠道收到大量消息。有多久你沒(méi)有查收自己的郵箱?就算打開(kāi)郵件,又有多少推薦內(nèi)容讓你有興趣進(jìn)一步了解?是 EDM 老了沒(méi)用了?真正的原因,可能是我們一開(kāi)始就錯(cuò)誤地忽視了 EDM 設(shè)計(jì)。

對(duì)于 95 后以及更年輕的群體來(lái)說(shuō),EDM 確實(shí)是個(gè)上了年紀(jì)的概念。EDM(Email Direct Marketing)也叫 Email 營(yíng)銷、電子郵件營(yíng)銷。企業(yè)向目標(biāo)客戶發(fā)送 EDM 郵件,建立同目標(biāo)客戶的溝通渠道,向其直接傳達(dá)相關(guān)信息,用來(lái)促進(jìn)銷售轉(zhuǎn)化。

這個(gè)起源于上世紀(jì) 80 年代中期,正式誕生于 90 年代的早期互聯(lián)網(wǎng)產(chǎn)物現(xiàn)在已經(jīng)三十多歲了。時(shí)至今日,EDM 早已成為了全球公認(rèn)的網(wǎng)絡(luò)營(yíng)銷重要方法之一,其卓越效果為互聯(lián)網(wǎng)人數(shù)十年的實(shí)踐所證實(shí)。但 EDM 在我國(guó)的應(yīng)用還處于非常低級(jí)的水平,不僅沒(méi)有系統(tǒng)的理論,在實(shí)踐中也存在許多誤區(qū)。

在這樣一個(gè)重視審美與強(qiáng)調(diào)更新及時(shí)的時(shí)代,EDM 郵件樸實(shí)無(wú)華的外表與「一旦發(fā)出就固定呈現(xiàn)」的內(nèi)容特質(zhì)顯得有些格格不入。作為用戶體驗(yàn)設(shè)計(jì)師,我們可以做什么讓 EDM 不落伍呢?

避免成為垃圾郵件

首先,我們可以在設(shè)計(jì)層面上避免 EDM 郵件被郵箱軟件識(shí)別為垃圾郵件,不帶敏感詞語(yǔ)或內(nèi)容、淡化商業(yè)廣告色彩、減少數(shù)字與附件使用都有助于降低被郵箱系統(tǒng)屏蔽的風(fēng)險(xiǎn)。我們更可以在全量發(fā)送前,對(duì)指定郵箱進(jìn)行小范圍測(cè)試以確保郵件發(fā)送成功率。

其次,從其歷史來(lái)源來(lái)看,早期的 EDM 來(lái)源于垃圾郵件,這使人們對(duì)其本能地缺乏好感,存在排斥心理。因此 EDM 的節(jié)奏和時(shí)機(jī)必須做好控制,對(duì)郵件發(fā)送的各類數(shù)據(jù)做好統(tǒng)計(jì),掌握用戶的閱讀習(xí)慣,能更好地提升郵件的打開(kāi)率。

保持最佳郵件格式

郵件內(nèi)容需要設(shè)計(jì)為一定的格式來(lái)發(fā)送,常用的郵件格式包括純文本格式、HTML 格式和 Rich Media 格式,或者是這些格式的組合。一般來(lái)說(shuō),HTML 格式和 Rich Media 格式的電子郵件比純文本格式具有更好的體驗(yàn)效果。但 Rich Media 格式的電子郵件易造成郵件過(guò)大,并且無(wú)法確保用戶在客戶端均能夠正常顯示,所以在設(shè)計(jì)時(shí)我們優(yōu)先選擇 HTML 格式郵件。

確保跨端體驗(yàn)

與網(wǎng)頁(yè)不同,我們無(wú)法針對(duì)不同設(shè)備做郵件內(nèi)容相應(yīng)的適配設(shè)計(jì),兼顧設(shè)備特性的通用模版也就成為了設(shè)計(jì)時(shí)的必要關(guān)注點(diǎn)。對(duì)用戶來(lái)說(shuō),一封郵件閱讀體驗(yàn)很差,那么無(wú)論郵件的內(nèi)容多么精彩、多么吸引人,最終的結(jié)果也可能只會(huì)被丟棄在一邊。因此,我們通常會(huì)按照移動(dòng)端尺寸對(duì)郵件界面進(jìn)行設(shè)計(jì),注意字體大小、最佳尺寸以及鏈接按鈕的大小等。

除此以外,郵件中鏈接的定義也應(yīng)得到我們充分的重視。由于郵件中的鏈接我們同樣無(wú)法預(yù)先針對(duì)不同打開(kāi)設(shè)備進(jìn)行單獨(dú)編輯,在有條件的情況下我們可以對(duì)鏈接所跳轉(zhuǎn)的頁(yè)面進(jìn)行響應(yīng)式設(shè)計(jì)以確保高質(zhì)量的跨端瀏覽體驗(yàn),或者我們也可以采用默認(rèn)跳轉(zhuǎn)路徑而后重定向的傳統(tǒng)方式。

與「我」緊密相關(guān)

EDM 營(yíng)銷與一般的營(yíng)銷方式最大的區(qū)別是:EDM 是一對(duì)一的溝通,讓用戶感覺(jué)到尊重,讓他感覺(jué)到這是為他所建立并且是他所獨(dú)享的溝通方式。在標(biāo)題、正文的文案上強(qiáng)調(diào)「我」,在內(nèi)容上也應(yīng)如此。用戶在意什么,我們就發(fā)送什么。把握住用戶關(guān)注的信息,幫助用戶收集支持 TA 做決策所需的信息。當(dāng)我們發(fā)送郵件給用戶,給予其操作行為的反饋或提醒時(shí),不要浪費(fèi)這最好的營(yíng)銷機(jī)會(huì)。優(yōu)先提供給用戶與之行為或特征相關(guān)的服務(wù)與幫助,其次通過(guò)個(gè)性化服務(wù)或產(chǎn)品推薦促進(jìn)購(gòu)買或注冊(cè)轉(zhuǎn)化,有助于我們將營(yíng)銷機(jī)會(huì)轉(zhuǎn)化為實(shí)際銷售成果。

兼顧質(zhì)量和效率

做好個(gè)性化對(duì) EDM 內(nèi)容模型要求頗高,但從設(shè)計(jì)角度講,我們完全可以以原子設(shè)計(jì)思維實(shí)現(xiàn)郵件內(nèi)容模塊的低成本創(chuàng)建與復(fù)用。以通用設(shè)計(jì)模塊為「殼」,內(nèi)容與組合規(guī)則為「核」,快速響應(yīng) EDM 的運(yùn)營(yíng)需求。

以上 5 點(diǎn)就是我結(jié)合近期項(xiàng)目經(jīng)驗(yàn)所得。EDM 雖老,但設(shè)計(jì)可以讓 EDM 老而彌新。祝經(jīng)你精心設(shè)計(jì)的 EDM 郵件,一經(jīng)發(fā)出,封封有回應(yīng)

文章來(lái)源:優(yōu)設(shè)    作者:魚(yú)子醬聊設(shè)計(jì)

界面該不該加彈窗?來(lái)看高級(jí)設(shè)計(jì)師的總結(jié)

資深UI設(shè)計(jì)者

這幾天在工作中處理了一個(gè)歷史遺留問(wèn)題:彈窗適配,幾經(jīng)折騰終于落定發(fā)包。于是我也趁著這個(gè)機(jī)會(huì)把彈窗體系梳理研究了一遍。

我們常見(jiàn)的彈窗有對(duì)話框,提示框,有時(shí)候在需求溝通中經(jīng)常會(huì)聽(tīng)到產(chǎn)品同學(xué)說(shuō),給這里加個(gè)彈窗,那里加個(gè)提示框吧。實(shí)際上,這個(gè)彈窗到底該不該加?這個(gè)彈窗承載的是提示說(shuō)明文字內(nèi)容,還是需要引導(dǎo)用戶下一步操作?接下來(lái)我們從彈窗的屬性來(lái)聊聊我們的彈窗到底在什么時(shí)候加比較合適?用什么形態(tài)展示體驗(yàn)會(huì)更好?

彈窗體系:模態(tài)與非模態(tài)

模態(tài)彈窗:是指在用戶任務(wù)中,終止了用戶的上一步行為。也就是說(shuō),這個(gè)模態(tài)彈窗必須要用戶操作才可以進(jìn)行下一步動(dòng)作。所以在產(chǎn)品設(shè)計(jì)中,我們通常會(huì)用模態(tài)彈窗引導(dǎo)用戶去做我們要他做的操作。

常見(jiàn)的模態(tài)彈窗有這幾種:對(duì)話框、動(dòng)作欄、浮層。

對(duì)話框:對(duì)話框主要是給用戶提供選項(xiàng)、相關(guān)的操作。另外,在一些對(duì)話框中,也可以展現(xiàn)圖片、頭像、步驟圖、其它輸入項(xiàng)等。

動(dòng)作欄:常見(jiàn)的動(dòng)作欄一般會(huì)出現(xiàn)屏幕下方,比如選擇某個(gè)內(nèi)容時(shí)候,出現(xiàn)的選擇。

浮層:彈出窗口,浮動(dòng)于頂層窗口,氣泡。

非模態(tài)彈窗:是指不強(qiáng)制用戶操作,他的作用相當(dāng)于內(nèi)容信息提示,他的出現(xiàn)不打擾用戶的當(dāng)前操作,并且有時(shí)間限制,在一定時(shí)間里能自動(dòng)消失。比如「xxx 功能已更新哦」,這種提示是不需要用戶點(diǎn)擊操作,讓用戶看到就可以了。

常見(jiàn)的非模態(tài)彈窗有這幾種:toast/hud、snackbar、notice(通知)

toast/hud:iOS 用戶更習(xí)慣于在中間感知反饋信息,通常在信息提示完 3 秒左右后會(huì)消失,安卓通常會(huì)出現(xiàn)在屏幕頂部或者下部,不會(huì)遮擋主體內(nèi)容。需要注意的是 toast 只有文字,hud 是可以帶有圖標(biāo)的。

snackbar;可以理解為加強(qiáng)版的 Toast

notice:系統(tǒng)消息、通知推送,也是不干擾用戶行為,有消失時(shí)間,是非模態(tài)的彈窗。

什么場(chǎng)景下使用什么彈框

了解完彈窗體系后,我們就可以針對(duì)具體場(chǎng)景來(lái)看產(chǎn)品同學(xué)說(shuō)加個(gè)彈窗到底合適不合適?我們可以從下面的幾個(gè)使用場(chǎng)景來(lái)看用什么樣的彈窗合適。

1. 重要打斷用戶操作

在一些重要操作,避免用戶操作失誤。不過(guò)目前很多人都覺(jué)得這類彈框有利有弊,有的地方出現(xiàn)得不合時(shí)宜,打斷了用戶的使用狀態(tài)。所以在設(shè)計(jì)這類彈框時(shí)要非常謹(jǐn)慎,得通過(guò)多研究確認(rèn)是否有必要出現(xiàn)。

對(duì)話框相對(duì)來(lái)說(shuō)比動(dòng)作欄更重要,因?yàn)樵谝曈X(jué)中心,更能強(qiáng)烈引起用戶的重視,對(duì)于十分重要的內(nèi)容需要打斷用戶上一步任務(wù)的,采用對(duì)話框的彈窗,對(duì)于不是特別重要信息露出又需要終止用戶上一步動(dòng)作的情況下,一般采用動(dòng)作欄彈框。

2. 定制化廣告彈窗

如功能更新、升級(jí)、優(yōu)惠券彈窗。這一類一般是強(qiáng)制用戶看到的,要展示出與眾不同的特色,在視覺(jué)上比較突出,會(huì)使用模態(tài)的彈窗浮層形式。

3. 給予一定提示

比如提示用戶狀態(tài)、信息、反饋,確保用戶知曉自己所處的狀態(tài),并可以做出相應(yīng)的措施。一般使用非模態(tài)的彈窗。

4. 用戶操作反饋

出現(xiàn)在用戶操作完之后的反饋,比如提醒用戶頁(yè)面正在加載中、保存成功、已刪除、已刷新等等。

可以不用彈窗的反饋例子:完成頁(yè)

比如已支付成功、下載完畢、簽到成功,這一類是告訴你上個(gè)動(dòng)作結(jié)束了,下一步不需要進(jìn)行引導(dǎo)了,這種反饋大多數(shù)都不采用彈窗形式展現(xiàn)了。

需要注意事項(xiàng)

1. 層級(jí)關(guān)系

彈框是內(nèi)容和導(dǎo)航的補(bǔ)充,用于通知、操作菜單、成功或加載狀態(tài)的 toast,他是寫(xiě)在蒙層上面的一層內(nèi)容。

2. 適配方式

下面我們需要了解的是這幾種彈窗在開(kāi)發(fā)那的實(shí)現(xiàn)形式。我們可以理解為 2 種形式:

一種是開(kāi)發(fā)直接用系統(tǒng)的接口,缺點(diǎn)是具有不可定制,形式美觀度不夠好。

另一種是開(kāi)發(fā)用代碼會(huì)單獨(dú)寫(xiě)出一個(gè)模態(tài)彈框系統(tǒng),這套系統(tǒng)與整體設(shè)計(jì)語(yǔ)言具有一致性,可以復(fù)用在各個(gè)任務(wù)中,可以定制化設(shè)計(jì)。

需要注意的是,代碼寫(xiě)出來(lái)的模態(tài)樣式要考慮在不同機(jī)型的適配情況,考慮不同機(jī)型的邊界。這個(gè)適配也有兩種實(shí)現(xiàn)形式,一種是固定寬高尺寸,展示在不同機(jī)型尺寸中,另一種是常用的等比例縮放。這個(gè)就需要開(kāi)發(fā)與設(shè)計(jì)進(jìn)行密切的溝通,能盡量合理地在不同機(jī)型展現(xiàn)更加合適,避免出現(xiàn)極限的情況。

我們是這樣操作的,為了避免尺寸比例混亂的情況,會(huì)設(shè)計(jì)一個(gè)彈窗的寬高尺寸范圍,開(kāi)發(fā)同學(xué)代碼寫(xiě)出的這套彈窗的適配在各個(gè)機(jī)型中,是在一定縮放比例下,適用各個(gè)不同情況下的視覺(jué)展示。這套彈窗可以調(diào)用在首頁(yè)引導(dǎo)、升級(jí)等各個(gè)頁(yè)面的彈窗設(shè)計(jì)中。

文章來(lái)源:優(yōu)設(shè)    作者:詠舍

日歷

鏈接

個(gè)人資料

存檔