隨著時代和技術(shù)的發(fā)展,網(wǎng)頁設(shè)計的過程正在悄然發(fā)生著巨大的變化。準(zhǔn)確、具體的設(shè)計交付列表不再是網(wǎng)頁設(shè)計的唯一標(biāo)準(zhǔn),靜態(tài)頁面設(shè)計在整個設(shè)計過程中的比例正在逐漸降低。正如Stephen Hay所說,我們設(shè)計的不再是一個簡單的頁面,而是一個包含很多組件的整個系統(tǒng)。
不僅僅是內(nèi)容和信息在快速變化。用戶使用的設(shè)備和呈現(xiàn)內(nèi)容的方式也在迅速變化。這些都與網(wǎng)頁設(shè)計密切相關(guān),而且這種轉(zhuǎn)變沒有放緩的跡象。而我們的設(shè)計作為載體和外觀的載體,應(yīng)該領(lǐng)先于他們。
以前的網(wǎng)頁設(shè)計流程似乎無法應(yīng)付今天的這一切,改版迫在眉睫。敏捷開發(fā)、團(tuán)隊合作和適應(yīng)性調(diào)整都處于設(shè)計過程的最前沿,設(shè)計和開發(fā)之間的界限越來越模糊。
移動端優(yōu)先
Mobile first,這句口號已經(jīng)喊了好幾年了,真正有遠(yuǎn)見的網(wǎng)頁設(shè)計師應(yīng)該很清楚這句話遠(yuǎn)不止一句簡單的口號。移動優(yōu)先肯定會涉及到設(shè)計過程。我們應(yīng)該從小屏幕開始,先設(shè)計一個簡單的布局,然后再增加復(fù)雜度,以此為基礎(chǔ)進(jìn)行大屏幕的設(shè)計。
隨著移動設(shè)備的使用率超過PC,移動設(shè)備上的網(wǎng)頁瀏覽無疑成為了用戶獲取信息的重要渠道,移動優(yōu)先設(shè)計理應(yīng)成為常態(tài)。
除非你的網(wǎng)站情況非常特殊,或者你有非常有說服力的特殊數(shù)據(jù)來支持你的想法,否則移動優(yōu)先設(shè)計是合乎邏輯的。
相比于為了小屏降低整個設(shè)計的復(fù)雜度,先適配移動端再增加復(fù)雜度更容易。回想一下按照之前的流程設(shè)計網(wǎng)頁,我們總是厭倦了響應(yīng)客戶的請求,后期還要調(diào)整設(shè)計和代碼。未完成的頁面和不好用的移動頁面是無盡的坑。
桌面端的頁面總是先完成,這里基本改正的移動端頁面總是顯得有些粗制濫造。
那么讓我們停止使用“移動優(yōu)先”作為簡短的口號吧!從現(xiàn)在開始真正意義上的移動端小屏設(shè)計!
搭建而非拆卸
設(shè)計是一個積累的過程,每一次改進(jìn)都是在前一步的完成和成功的基礎(chǔ)上逐步建立起來的。
基于小屏幕的設(shè)計方案是合乎邏輯的。我更喜歡一磚一瓦地建造它,而不是一點一點地拆除它。
我能想到的最好的比喻是“原子設(shè)計”,即通過逐漸增加事物的復(fù)雜性來構(gòu)建事物的設(shè)計方法。總之,有了這個思路,就是這樣設(shè)計的:
確?;九虐妗⒋笮『皖伾褂没谶@些基本設(shè)置。確保表單字段和標(biāo)簽等小元素的設(shè)計基于上述設(shè)計。完善大型元素的設(shè)計,例如完整的聯(lián)系表。將構(gòu)建好的網(wǎng)頁元素構(gòu)建成一個頁面,重復(fù)上述過程
正是這些不起眼的元素構(gòu)建了你的頁面,正是這樣一種簡單的方法也可以完成之前看起來復(fù)雜的頁面設(shè)計。只要你用好這個設(shè)計過程,它帶來的可能性是無窮無盡的。
相較于一開始就設(shè)計頁面,完成這些“一磚一瓦”的設(shè)計更加輕松便捷,從移動端到桌面端的整個設(shè)計過程更加完美順暢。想一想你和你的客戶在這個過程中需要關(guān)注什么,無非就是不斷地添加細(xì)節(jié)。
在討論響應(yīng)式網(wǎng)頁設(shè)計的設(shè)計過程時,我們在打破媒體查詢和針對現(xiàn)有硬件設(shè)備進(jìn)行設(shè)計的平衡上花費了大量時間。這種情況的一個重要關(guān)鍵是網(wǎng)站的內(nèi)容。
如果可能的話,盡量在設(shè)計后期與內(nèi)容和營銷團(tuán)隊緊密合作,多注意內(nèi)容的結(jié)構(gòu)和劃分,防止在這個問題上出現(xiàn)最終影響網(wǎng)頁設(shè)計的意外。
即便如此,從設(shè)計開始到設(shè)計后期甚至整個頁面上線時,網(wǎng)頁的內(nèi)容可能都在不斷變化。標(biāo)題越來越長,圖片變了,塊變了,等等。
“如果可能的話,盡量將真實的內(nèi)容應(yīng)用到你的設(shè)計中?!?
一個真正設(shè)計良好的系統(tǒng)應(yīng)該是靈活的。因此,如果將營銷和內(nèi)容團(tuán)隊提供的Word 文檔轉(zhuǎn)換為實體頁面是真的,這樣的事情應(yīng)該不會讓您頭疼。
雖然
然有些細(xì)節(jié)的處置上確切須要多加注意,但是我的經(jīng)驗告知我,其實并不要想龐雜了,也不要想多了。絕大多數(shù)時候,一個緊湊而聰慧的設(shè)計作風(fēng)指南(Style Guide)能讓所有的事情水到渠成。?我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!