摘要
作爲一個後臺類管理系統的開發，經常沒有前端開發的人力資源，很多項目不得不自己兼做前端設計和開發。我之前的做法都是直接開始用Axure畫原型圖，想到什麼就畫什麼，因此經常返工，設計效率很低。最近看了一個國外設計師的帖子，模仿了他頁面設計的“套路”，感覺挺實用，現在把這個三步走的套路總結一下。
第一步：手繪
設計應用最困難的部分就是描繪出整個過程。腦子好的人，可以腦中完成頁面交互的模擬，但如果你和我一樣腦子存儲量沒那麼大，拿出紙和筆來畫吧。用本子和筆真的挺方便的，最近項目的頁面設計我都是在開大會的時候完成的。
有3個小技巧：
- 在一頁紙的最右側，上面寫功能列表，下面各種設計過程中問題記錄。把問題記下來很重要，如果規劃過程中產生的問題，你每次都要停下來研究，那你可能發現一下午過去了，你還在設計第一個界面。先記下來，可以讓你放心的先繼續往前走
- 這頁剩下的空白，從左上角開始畫小小的線框圖。這一步的要點，只關注用戶流（user
flow）和主要元素，千萬不要陷入細節中，畫出的原型圖分辨率一定要低 - 一定要把所有的頁面都畫出來，哪怕是很簡單的。在腦中的模擬，我們經常會認爲已經覆蓋到所有交互了，但其實總會漏掉一些細節。想想用你的筆指向手繪的頁面上按鈕，想想點擊後你會跳到哪裏或者得到什麼提示消息？
下是兩個手繪的例子
第二步：提高分辨率
經過第一步後我們已經嘗試了幾種不同的交互方案，最終理順出一個合理易用的。現在是時候提高分辨率，獲取較真實的模擬頁面了。使用的工具不限，直接編碼、用Photoshop或者畫原型圖都行，本人不是專業的前端設計，頁面也不用考慮太多UED，習慣用Axure畫原型圖。這一步的要點是，列出所有元素。這個過程可以幫助我們估算開發時間及思考如何合理佈局。
第三步：隱藏複雜性
這一步的重點調整佈局並優化複雜頁面。上一步的例子中Setting頁面看起來非常擁擠複雜，會讓用戶不只所錯。可以將設置項分類到多個選項卡中，一次只展示某類的設置項，看看下圖是不是會讓用戶輕鬆很多。
