2017-4-17 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在網(wǎng)頁設(shè)計當(dāng)中有各種形式和法則可以運用，前面也介紹了網(wǎng)頁設(shè)計中常用的一些運用法則，界面上的美觀有了，那交互上的呢？今天我們就界面上來分享變化在網(wǎng)頁設(shè)計當(dāng)中的運用。
說到變化，我們很容易想到前面分析的對比原則，在同一個界面當(dāng)中，有主要和次要之分，所以就存在對比。但今天我們說的變化不是指對比，而是在一個界面當(dāng)中，根據(jù)用戶操作習(xí)慣界面的區(qū)域元素應(yīng)做適當(dāng)?shù)淖兓幚恚梢院喎Q為交互上的變化。
例如鼠標(biāo)移過a標(biāo)簽的時候應(yīng)該有適當(dāng)?shù)淖兓崾荆嵝延脩暨@是一個鏈接，又或者對于列表和集合中應(yīng)該突出當(dāng)前選中或者正在操作的條目。這些都是網(wǎng)頁設(shè)計在交互上的一些變化。
交互上的變化體現(xiàn)在網(wǎng)站中的方方面面，一般都要遵循設(shè)計心理學(xué)。簡單列舉下在界面當(dāng)中要注意到的一些簡單交互上需要做變化處理的：
1、特定控件設(shè)計，如標(biāo)簽欄、列表界面和彈窗口等，遵循網(wǎng)頁當(dāng)中設(shè)計規(guī)律后再做適當(dāng)?shù)淖兓?/span>
這個列表界面設(shè)計，在標(biāo)準(zhǔn)版的一列做了設(shè)計上的變化，也是引導(dǎo)用戶主要去購買這一個版本。
2、特定界面設(shè)計，界面中如何呈現(xiàn)特定的信息，如應(yīng)用程序首頁、個人資料或者數(shù)據(jù)流界面，依舊要遵循用戶體驗來設(shè)計。
例如一個門把手的設(shè)計，正常向下是打開，如果這個門把手向上才是打開，那這樣可以算是比較失敗的交互，因為違反了人的心里習(xí)慣。
人和物也是一樣，我按下電視的開關(guān)鍵，我預(yù)期電視會打開，并且電視如期望發(fā)生運轉(zhuǎn)。若我按下電視的開關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。
京東的登錄界面，有掃碼登錄和賬戶登錄，賬戶登錄的字體變紅色，提示用戶當(dāng)前停留的是賬戶登錄，這樣的變化細小但不能缺少。
除去上面說的這些，在網(wǎng)頁設(shè)計當(dāng)中，響應(yīng)式的變化也是不得不提起的。
設(shè)計響應(yīng)式網(wǎng)站的時候，設(shè)計師必須為大量不同尺寸屏幕的設(shè)備充分考慮，這是一個網(wǎng)站不同界面下的視覺變化，因此頁面內(nèi)的布局是流動的。需要設(shè)計師考慮隨著屏幕尺寸大小的轉(zhuǎn)變，布局設(shè)計的每一個調(diào)整和改變。比如，當(dāng)屏幕尺寸變小的時候，文本內(nèi)容需要收縮，并且和混排的圖片會與文章縮到一欄中去。做響應(yīng)式小編比較推薦用柵格系統(tǒng)去做，這樣會省事很多。
1、縮放布局。這種方式簡單粗暴，它們隨著窗口大小變化動態(tài)縮放內(nèi)容。這種方式可以保留pc端界面的設(shè)計效果，但是不同分辨率下縮放布局犧牲了易讀性。很多網(wǎng)站為了方便會這么設(shè)計。
2、流式布局。剛好不一樣，它們可以隨著窗口尺寸縮放容器的元素。優(yōu)點是克服了縮小文字的問題，但這樣的設(shè)計犧牲了統(tǒng)一。
3、響應(yīng)式布局。有些客戶覺得響應(yīng)式出來的布局就應(yīng)該跟pc端的一樣，這樣的觀念是錯誤的。響應(yīng)式設(shè)計不會縮放任何東西。它可以根據(jù)窗口尺寸決定顯示哪些內(nèi)容。并非所有內(nèi)容在手機端上都會顯示，文字和圖片都會做適當(dāng)?shù)母淖?，視覺上布局的改變比較明顯。這種設(shè)計極大程度保留了文字的可讀性和整體的統(tǒng)一性，所以一般推薦這種方式。
響應(yīng)式網(wǎng)頁當(dāng)中，除了考慮到布局上在不同屏幕下的設(shè)計，還要考慮字體、行距、按鈕大小等元素隨著屏幕大小的變化而變化，設(shè)計上也比較考驗設(shè)計師的能力。
在一個網(wǎng)站當(dāng)中，除了視覺上的效果，還要按照用戶心理行為習(xí)慣去做一些適當(dāng)?shù)母淖?，才能做出一個可用性高的網(wǎng)站。用戶體驗是一個加強用戶忠誠度和滿意度的過程，這個過程需要對于用戶和產(chǎn)品間的交互進行可用性、易用性和愉悅程度的提升。所以這個步驟是不能忽略的，也是比較重要的。
藍藍設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.jghy.net