移動端的網頁設計流程有哪些

精品公開課UI設計課程學習師資團隊關於咱們

weiboQQ當即註冊登陸

>>最新平面課：《PS速成：一節課搞定女裝專題》>>最新平面課：《PS：廣告公司經常使用摳圖法》>>《網頁設計師項目實戰》公開課正式開課啦！>>《平面設計師實戰》公開課正式開課啦！

 

>>最新平面課：《PS速成：一節課搞定女裝專題》>>最新平面課：《PS：廣告公司經常使用摳圖法》>>《網頁設計師項目實戰》公開課正式開課啦！>>《平面設計師實戰》公開課正式開課啦！

帖子    搜索    

趣達學院»論壇首頁›學習交流區›UI交互設計›移動端的網頁設計流程有哪些

返回列表

 

  

[UI設計] 移動端的網頁設計流程有哪些 

[複製連接]    

 

 

 

電梯直達

樓主

 奮鬥 發表於 5 天前 | 只看該做者 |只看大圖 

 

       隨着時代和技術的發展，網頁設計的流程正悄無聲息地發生着巨大的變化。精準具體的設計交付列表再也不是網頁設計的惟一標準，靜態頁面設計在整個設計流程中所佔的比重也逐步下降，正如同Stephen Hay所說，咱們所設計的再也不是單純的頁面，而是包含諸多組件的一整個系統。

 

       瞬息萬變的不只僅是內容和信息，用戶所用的設備和內容呈現的模式也在快速改變着，這些都與網頁設計息息相關，也沒有任何跡象代表這種改變會變緩。而咱們的設計做爲載體和呈現的載體，理應走在它們的前面。

 

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

移動端優先

 

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

 

       隨着移動端設備的用量超越PC，移動端的網頁瀏覽無疑已經成爲用戶獲取信息的主要渠道，移動端優先的設計天然應該成爲常態。

 

       除非你的網站狀況很是特殊，或者你擁有極具說服力和特殊的數據支撐你的想法，移動端優先的設計符合邏輯也有道理。

 

       相比於爲小屏幕去下降整個設計的複雜性，爲移動端先作好適配再提高其複雜度，是更容易的。回想一下按照以前的流程來設計網頁吧，咱們老是疲於應對客戶的要求，在後期還要來回調整設計和代碼。未完成的頁面和不夠易用的移動端頁面，填不完的坑。

 

       桌面端的頁面老是先作完，而在此基礎上修改出來的移動端頁面，彷佛總有點粗製濫造的感受。

 

       那麼咱們就不要將」移動端優先」看成一句簡單的口號好了！從如今開始真正意義上爲移動端的小屏幕開始作設計！

搭建而非拆卸

 

       設計是一個積累的過程，每個進步都是在前一步的完成和勝利的基礎上，逐步創建起來的。

 

       基於小屏幕的設計規劃是符合邏輯的。我更傾向於一磚一瓦地搭建，而非作好了再一點一滴地拆卸下來。

 

       我能想到最好的類比是「原子設計」，這種設計方法是經過逐步提高複雜度來構建事物。簡而言之，藉助這種思路是這樣作設計的：

 

       1.肯定基本的排版組合、尺寸大小和色彩使用

       2.基於這些基本的設定，肯定諸如表單字段和標籤等小元素的設計

       3.基於以上的設計，完善諸如完整的聯繫人表單的大的元素的設計

       4.將這些已經構建好的網頁元素搭建成爲頁面（諸如聯繫咱們頁面）

       5.重複以上過程

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

 

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

不要侷限於斷點

 

       在探討響應式網頁設計的設計過程之時，咱們花費了大量的時間在斷點的媒體查詢和爲現有硬件設備作設計的平衡之上。形成這個局面的主要癥結，就是網站的內容。

 

       若是可能的話，儘可能在設計後期的時候，同內容和營銷團隊密切合做，在內容的結構和劃分上多花心思，防止最終在這個問題上影響網頁的設計，出現意外。

 

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

 

       「若是可能的話，儘可能使用真實的內容來進行設計。」

 

       一個真正精心設計的系統應該是能夠收放自如的。因此，若是真的將營銷和內容團隊提供的Word文檔轉化成爲一個可靠的頁面，這樣的事情不該該令你頭疼。

 

       雖然有些細節的處理上確實須要多加註意，可是個人經驗告訴我，其實並不要想複雜了，也不要想多了。絕大多數時候，一個緊湊而聰明的設計風格指南（Style Guide）能讓全部的事情水到渠成。

測試和實現

 

       進行原型設計確實很不錯，可是原型設計的問題也在於，它仍是一種「閉門造車」的設計，並無在真正的用戶那裏獲得驗證。

 

       在真實的設備上同用戶分享設計，藉此能夠得到最好的設計反饋。即便你僅僅只是畫了線框圖，也能在真實的設備上同用戶進行測試溝通。

 

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

全新的世界

 

       從一個全新的角度來看待複雜的問題，咱們所要面臨的一切彷佛都是新的。提高團隊成員的合做緊密度，模糊團隊界限可讓整個設計過程都快起來。咱們的設計應該不斷適應新的需求和新的情況，由於咱們的內容、業務和這個世界的變化更快。

來自優設網