火星時代移動時代如何重塑網頁設計流程

隨著移動時代的到來，網頁設計流程正在經歷著巨大變化。今天火星時代就與大家分享在當今移動時代如何重塑網頁設計流程。交付列表不再是唯一，我們所要設計的不單單是頁面，更是包含各種元件的系統。

瞬息萬變的不僅僅是內容和資訊，使用者所用的裝置和內容呈現的模式也在快速改變著，這些都與網頁設計息息相關，也沒有任何跡象表明這種改變會變緩。而我們的設計作為載體和呈現的載體，理應走在它們的前面。

之前的網頁設計流程在今天看來已經無法應付這一切了，修整刻不容緩。敏捷開發、團隊協作和適應性調整都已經是設計過程中的最前沿，設計和開發之間的界限越來越模糊了。

移動端優先

移動端優先，這句口號已經喊了好幾年了，真正有遠見卓識的網頁設計師應該很清楚這句話遠不止於口號那麼簡單。移動端優先必然會牽涉到設計流程，我們應當從小螢幕著手，先設計簡單的布局，然後為其增加複雜度，以其為基礎為更大的螢幕來進行設計。

移動端裝置的用量已超越pc，移動端的網頁瀏覽無疑已經成為使用者獲取資訊的主要渠道，移動端優先的設計自然應該成為常態。除非你的**情況非常特殊，或者你擁有極具說服力和特殊的資料支撐你的想法，移動端優先的設計符合邏輯也是有道理的。

相比於為小螢幕去降低整個設計的複雜性，為移動端先做好適配再提公升其複雜度是更容易的。回想一下按照之前的流程來設計網頁，我們總是疲於應對客戶的要求，在後期還要來**整設計和**。未完成的頁面和不夠易用的移動端頁面，有著填不完的坑。

桌面端的頁面總是先做完，而在此基礎上修改出來的移動端頁面，似乎總有點粗製濫造的感覺。那麼我們就不要將「移動端優先」當作一句簡單的口號好了！從現在開始真正意義上的為移動端小螢幕開始做設計！

搭建而非拆卸

設計是乙個積累的過程，每乙個進步都是在前一步的完成和勝利的基礎上逐步建立起來的。基於小螢幕的設計規劃是符合邏輯的，我更傾向於一磚一瓦地搭建，而非做好了再一點一滴地拆卸下來。

我能想到最好的模擬就是「原子設計」，這種設計方法是通過逐步提公升複雜度來構建事物的。簡而言之，借助這種思路是這樣做設計的：1、確定基本的排版組合、尺寸大小和色彩使用。

2、基於這些基本的設定，確定諸如表單字段和標籤等小元素的設計。3、基於以上的設計，完善諸如完整的聯絡人表單的大元素的設計。4、將這些已經構建好的網頁元素搭建為頁面。

5、重複以上過程。

就是這些不起眼的元素構建起了你的頁面，也正是這樣簡單的方式，同樣可以完成之前看起來複雜無比的頁面設計。只要你用好這個設計流程，它所帶來的可能性是無限的。

比起一開始就操刀設計頁面，完成這些「磚瓦」的設計更容易上手也更便捷，整個設計流程從移動端過度到桌面端也更加完美流暢。在這個過程中，你和你的客戶需要專注的事情無非是持續不斷地新增細節。

不要侷限於斷點

在**響應式網頁設計的設計過程時，我們花費了大量的時間在**查詢和現有的硬體裝置上做平衡的設計，造成這個局面的主要癥結，就是**的內容。

如果可能的話，盡量在設計後期的時候，同內容和營銷團隊密切合作，在內容的結構和劃分上多花心思，防止最終在這個問題上影響網頁的設計。

即便是如此，從設計之初到設計後期乃至整個頁面上線，網頁內容都可能是一直處於變動當中。標題越來越長，**更換，區塊被替換等等。

「如果可能的話，盡量使用真實的內容來進行設計。」乙個真正精心設計的系統應該是可以收放自如的。所以，如果真的將營銷和內容團隊提供的word文件轉化成為乙個可靠的頁面，這樣的事情不應該令你頭疼。

雖然有些細節的處理上確實需要多加注意，但是我的經驗告訴我，其實並不要想複雜了，也不要想多了。絕大多數時候，乙個緊湊而聰明的設計風格指南（style guide）能讓所有的事情水到渠成的。

測試和實現

進行原型設計確實很不錯，但是原型設計的問題也在於它還是一種「閉門造車」的設計，並沒有在真正的使用者那裡得到驗證。在真實的裝置上同使用者分享設計，藉此可以獲得最好的設計反饋。即使你只是畫了線框圖，也是能在真實的裝置上同使用者進行測試溝通的。

測試響應式的設計應該是乙個寬泛而多樣的過程。找台智慧型手機，把你的設計稿放進去，問問不做設計的同事和朋友，讓他們看看這樣的設計是否可行，接下來再換上ipad和桌面端裝置，一步一步來。

全新的世界

從乙個全新的角度來看待複雜的問題，我們所要面臨的一切似乎都是新的。提公升團隊成員的合作緊密度，模糊團隊界限可以讓整個設計過程都快起來。我們的設計應該不斷的適應新的需求和新的狀況，因為我們的內容、業務和這個世界是變化很快的。

火星時代 移動時代如何重塑網頁設計流程