移動端的時代要如何重塑網頁設計流程介紹
發(fā)布時間:2021-01-15
随著(zhe)時期和技巧的發(fā)展,網頁設計的流程正悄無聲息地産生著(zhe)偉大的變更。精準具體的設計交付列表不再是網頁設計的唯一尺度,靜态頁面(miàn)設計在全部設計流程中所占的比重也逐步下降,正如同Stephen Hay所說,我們所設計的不再是單純的頁面(miàn),而是包括諸多組件的一全部體系。
瞬息萬變的不僅僅是内容和信息,用戶所用的裝備和内容出現的模式也在迅速轉變著(zhe),這(zhè)些都(dōu)與網頁設計息息相幹,也沒(méi)有任何迹象表明這(zhè)種(zhǒng)轉變會(huì)變緩。而我們的設計作爲載體和出現的載體,理應走在它們的前面(miàn)。
之前的網頁設計流程在今天看來已經(jīng)無法敷衍這(zhè)一切了,修整刻不容緩。敏捷開(kāi)發(fā)、團隊協作和适應性調劑都(dōu)已經(jīng)是設計進(jìn)程的最前沿,設計和開(kāi)發(fā)之間的界線越來越隐約了。
移動端優先
移動端優先,這(zhè)句口号已經(jīng)喊了好(hǎo)幾年了,真正有遠見卓識的網頁設計師應當很清晰這(zhè)句話遠不止于口号那麼(me)簡略。移動端優先必定會(huì)牽涉到設計流程,我們應該從小屏幕著(zhe)手,先設計簡略的布局,然後(hòu)爲其增長(cháng)龐雜度,以其爲基本,爲更大的屏幕來進(jìn)行設計。
随著(zhe)移動端裝備的用量超出PC,移動端的網頁閱讀無疑已經(jīng)成(chéng)爲用戶獲取信息的重要渠道(dào),移動端優先的設計自然應當成(chéng)爲常态。
除非你的網站情形非常特别,或者你擁有極具說服力和特别的數據支持你的想法,移動端優先的設計符合邏輯也有道(dào)理。
相比于爲小屏幕去下降全部設計的龐雜性,爲移動端先做好(hǎo)适配再晉升其龐雜度,是更容易的。回憶一下依照之前的流程來設計網頁吧,我們總是疲于應對(duì)客戶的請求,在後(hòu)期還(hái)要來回調劑設計和代碼。未完成(chéng)的頁面(miàn)和不夠易用的移動端頁面(miàn),填不完的坑。
桌面(miàn)端的頁面(miàn)總是先做完,而在此基本上修正出來的移動端頁面(miàn),似乎總有點粗制濫造的感到。
那麼(me)我們就(jiù)不要將(jiāng)”移動端優先”當作一句簡略的口号好(hǎo)了!從現在開(kāi)端真正意義上爲移動端的小屏幕開(kāi)端做設計!
搭建而非拆卸
設計是一個積聚的進(jìn)程,每一個提高都(dōu)是在前一步的完成(chéng)和成(chéng)功的基本上,逐步樹立起(qǐ)來的。
基于小屏幕的設計計劃是符合邏輯的。我更偏向(xiàng)于一磚一瓦地搭建,而非做好(hǎo)了再一點一滴地拆卸下來。
我能(néng)想到最好(hǎo)的類比是“原子設計”,這(zhè)種(zhǒng)設計辦法是通過(guò)逐步晉升龐雜度來構建事(shì)物。簡而言之,借助這(zhè)種(zhǒng)思路是這(zhè)樣(yàng)做設計的:
肯定根本的排版組合、尺碼大小和顔色應用 基于這(zhè)些根本的設定,肯定諸如表單字段和标簽等小元素的設計 基于以上的設計,完美諸如完全的接洽人表單的大的元素的設計 將(jiāng)這(zhè)些已經(jīng)構建好(hǎo)的網頁元素搭建成(chéng)爲頁面(miàn)反複以上進(jìn)程
就(jiù)是這(zhè)些不起(qǐ)眼的元素構建起(qǐ)了你的頁面(miàn),也正是這(zhè)樣(yàng)簡略的方法,同樣(yàng)可以完成(chéng)之前看起(qǐ)來龐雜無比的頁面(miàn)設計。隻要你用好(hǎo)這(zhè)個設計流程,它所帶來的可能(néng)性是無窮的。
比起(qǐ)一開(kāi)端就(jiù)操刀設計頁面(miàn),完成(chéng) 這(zhè)些“磚瓦”的設計更容易上手也更便捷,全部設計流程從移動端過(guò)度到桌面(miàn)端也更加完善流利。想想在這(zhè)個進(jìn)程中,你和你的客戶所須要專注的事(shì)情吧,無非是連續不斷地添加細節就(jiù)好(hǎo)了。
在探讨響應式網頁設計的設計進(jìn)程之時,我們消費了大批的時光在斷點的媒體查詢和爲現有硬件裝備做設計的平衡之上。造成(chéng)這(zhè)個局勢的重要關鍵,就(jiù)是網站的内容。
如果可能(néng)的話,盡量在設計後(hòu)期的時候,同内容和營銷團隊親密合作,在内容的構造和劃分上多花心思,防止最終在這(zhè)個問題上影響網頁的設計,湧現意外。
即便是如此,從設計之初到設計後(hòu)期乃至全部頁面(miàn)上線,網頁内容都(dōu)可能(néng)是一直處于變動當中。題目越來越長(cháng),圖片改換,區塊被(bèi)調換,等等等等。
“如果可能(néng)的話,盡量應用真實的内容來進(jìn)行設計。”
一個真正精心設計的體系應當是可以收放自如的。所以,如果真的將(jiāng)營銷和内容團隊供給的Word文檔轉化成(chéng)爲一個可靠的頁面(miàn),這(zhè)樣(yàng)的事(shì)情不應當令你頭疼。
雖然有些細節的處置上确切須要多加注意,但是我的經(jīng)驗告知我,其實并不要想龐雜了,也不要想多了。絕大多數時候,一個緊湊而聰慧的設計作風指南(Style Guide)能(néng)讓所有的事(shì)情水到渠成(chéng)。
測試和實現
進(jìn)行原型設計确切很不錯,但是原型設計的問題也在于,它還(hái)是一種(zhǒng)“閉門造車”的設計,并沒(méi)有在真正的用戶那裡(lǐ)得到驗證。
在真實的裝備上同用戶分享設計,借此可以獲得最好(hǎo)的設計反饋。即使你僅僅隻是畫了線框圖,也能(néng)在真實的裝備上同用戶進(jìn)行測試溝通。
測試響應式網站建設的設計,應當是一個寬泛而多樣(yàng)的進(jìn)程。找台智能(néng)手機,把你的設計稿放進(jìn)去,問問不做設計的同事(shì)和朋友,讓他們看看這(zhè)樣(yàng)的設計是否可行。接下來再換上iPad和桌面(miàn)端裝備,一步一步來。
全新的世界
從一個全新的角度來對(duì)待龐雜的問題,我們所要面(miàn)臨的一切似乎都(dōu)是新的。晉升團隊成(chéng)員的合作緊密度,隐約團隊界線可以讓全部設計進(jìn)程都(dōu)快起(qǐ)來。我們的設計應當不斷适應新的需求和新的狀态,因爲我們的内容、業務和這(zhè)個世界的變更更快。