變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用

2017-4-17    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


在網(wǎng)頁設(shè)計(jì)當(dāng)中有各種形式和法則可以運(yùn)用,前面也介紹了網(wǎng)頁設(shè)計(jì)中常用的一些運(yùn)用法則,界面上的美觀有了,那交互上的呢?今天我們就界面上來分享變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用。


說到變化,我們很容易想到前面分析的對(duì)比原則,在同一個(gè)界面當(dāng)中,有主要和次要之分,所以就存在對(duì)比。但今天我們說的變化不是指對(duì)比,而是在一個(gè)界面當(dāng)中,根據(jù)用戶操作習(xí)慣界面的區(qū)域元素應(yīng)做適當(dāng)?shù)淖兓幚恚梢院?jiǎn)稱為交互上的變化。

例如鼠標(biāo)移過a標(biāo)簽的時(shí)候應(yīng)該有適當(dāng)?shù)淖兓崾?,提醒用戶這是一個(gè)鏈接,又或者對(duì)于列表和集合中應(yīng)該突出當(dāng)前選中或者正在操作的條目。這些都是網(wǎng)頁設(shè)計(jì)在交互上的一些變化。


交互上的變化體現(xiàn)在網(wǎng)站中的方方面面,一般都要遵循設(shè)計(jì)心理學(xué)。簡(jiǎn)單列舉下在界面當(dāng)中要注意到的一些簡(jiǎn)單交互上需要做變化處理的:


1、特定控件設(shè)計(jì),如標(biāo)簽欄、列表界面和彈窗口等,遵循網(wǎng)頁當(dāng)中設(shè)計(jì)規(guī)律后再做適當(dāng)?shù)淖兓?/span>

變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用


這個(gè)列表界面設(shè)計(jì),在標(biāo)準(zhǔn)版的一列做了設(shè)計(jì)上的變化,也是引導(dǎo)用戶主要去購買這一個(gè)版本。


2、特定界面設(shè)計(jì),界面中如何呈現(xiàn)特定的信息,如應(yīng)用程序首頁、個(gè)人資料或者數(shù)據(jù)流界面,依舊要遵循用戶體驗(yàn)來設(shè)計(jì)。

例如一個(gè)門把手的設(shè)計(jì),正常向下是打開,如果這個(gè)門把手向上才是打開,那這樣可以算是比較失敗的交互,因?yàn)檫`反了人的心里習(xí)慣。

人和物也是一樣,我按下電視的開關(guān)鍵,我預(yù)期電視會(huì)打開,并且電視如期望發(fā)生運(yùn)轉(zhuǎn)。若我按下電視的開關(guān)鍵,突然電視成了靜音,這就是非期望的交互行為。

變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用

京東的登錄界面,有掃碼登錄和賬戶登錄,賬戶登錄的字體變紅色,提示用戶當(dāng)前停留的是賬戶登錄,這樣的變化細(xì)小但不能缺少。


除去上面說的這些,在網(wǎng)頁設(shè)計(jì)當(dāng)中,響應(yīng)式的變化也是不得不提起的。

設(shè)計(jì)響應(yīng)式網(wǎng)站的時(shí)候,設(shè)計(jì)師必須為大量不同尺寸屏幕的設(shè)備充分考慮,這是一個(gè)網(wǎng)站不同界面下的視覺變化,因此頁面內(nèi)的布局是流動(dòng)的。需要設(shè)計(jì)師考慮隨著屏幕尺寸大小的轉(zhuǎn)變,布局設(shè)計(jì)的每一個(gè)調(diào)整和改變。比如,當(dāng)屏幕尺寸變小的時(shí)候,文本內(nèi)容需要收縮,并且和混排的圖片會(huì)與文章縮到一欄中去。做響應(yīng)式小編比較推薦用柵格系統(tǒng)去做,這樣會(huì)省事很多。


簡(jiǎn)單介紹常出現(xiàn)的三種小屏幕處理形式:縮放、流式布局與響應(yīng)式

1、縮放布局。這種方式簡(jiǎn)單粗暴,它們隨著窗口大小變化動(dòng)態(tài)縮放內(nèi)容。這種方式可以保留pc端界面的設(shè)計(jì)效果,但是不同分辨率下縮放布局犧牲了易讀性。很多網(wǎng)站為了方便會(huì)這么設(shè)計(jì)。

變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用

2、流式布局。剛好不一樣,它們可以隨著窗口尺寸縮放容器的元素。優(yōu)點(diǎn)是克服了縮小文字的問題,但這樣的設(shè)計(jì)犧牲了統(tǒng)一。

變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用

3、響應(yīng)式布局。有些客戶覺得響應(yīng)式出來的布局就應(yīng)該跟pc端的一樣,這樣的觀念是錯(cuò)誤的。響應(yīng)式設(shè)計(jì)不會(huì)縮放任何東西。它可以根據(jù)窗口尺寸決定顯示哪些內(nèi)容。并非所有內(nèi)容在手機(jī)端上都會(huì)顯示,文字和圖片都會(huì)做適當(dāng)?shù)母淖儯曈X上布局的改變比較明顯。這種設(shè)計(jì)極大程度保留了文字的可讀性和整體的統(tǒng)一性,所以一般推薦這種方式。

變化在網(wǎng)頁設(shè)計(jì)當(dāng)中的運(yùn)用

響應(yīng)式網(wǎng)頁當(dāng)中,除了考慮到布局上在不同屏幕下的設(shè)計(jì),還要考慮字體、行距、按鈕大小等元素隨著屏幕大小的變化而變化,設(shè)計(jì)上也比較考驗(yàn)設(shè)計(jì)師的能力。


在一個(gè)網(wǎng)站當(dāng)中,除了視覺上的效果,還要按照用戶心理行為習(xí)慣去做一些適當(dāng)?shù)母淖?,才能做出一個(gè)可用性高的網(wǎng)站。用戶體驗(yàn)是一個(gè)加強(qiáng)用戶忠誠(chéng)度和滿意度的過程,這個(gè)過程需要對(duì)于用戶和產(chǎn)品間的交互進(jìn)行可用性、易用性和愉悅程度的提升。所以這個(gè)步驟是不能忽略的,也是比較重要的。


藍(lán)藍(lán)設(shè)計(jì)m.820esy.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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔