寫了人生的第一篇原創設計經驗，感覺還有點小激動呢:-D。（因為版權，圖做了適當的模糊，不過應該不影響閱讀效果。
新接手一個專案，是為公司的通用視覺化地圖平臺的配置端做設計。這次的設計過程中學到了很多關於網頁表單設計的知識，現在分享給大家。
1.總覽全域性，大家來找茬。
這次的專案需求很清楚，公司沒有專門負責這個專案互動設計師，主管自己畫了原型給我，某種程度上可以當作互動稿來用。
在拿到原型稿之後先不要著急畫UI，嘗試著從使用者出發去體驗一下流程。體驗的過程中，把你認為有問題，不合邏輯的地方標註出來，並提出解決方案，然後回頭和主管／互動設計師溝通，並達成一致。
不要因為你是UI設計師，就只負責UI，適當考慮互動不僅可以讓你對後續工作了然於胸，也可以避免到開發或者使用者可用性測試階段發現有問題，互動設計師拖著你反覆改稿。
注意：在把自己當作使用者的時候不要忘記考慮使用者的技術背景，我這次的專案終端使用者是程式工程師，所以有很多比較生僻的詞彙雖然我不理解，但是都保留了下來。
2.設計適合產品的頁面風格
一般來說，只要畫好登入頁，整體的風格也就確定了。
因為我還是實習生，以前做的專案大多數都是在虛擬專案，從產品到設計都是我自己想怎麼做就怎麼做，所以很多方面都有些欠考慮。舉例來說，個人比較喜歡歐美的簡潔風，所以這次在做配置端的登入頁時，幾乎是毫不猶豫地就做成了這樣：
結果被我的設計前輩一下子點出：你的頁面風格要和你的產品主題搭配，不要把偏技術的產品做成了社交產品。
我仔細想了下也對：當使用者最先看了登入頁之後，就會對裡面的內容有所期待，一旦你讓他失望，就會讓產品的友好性打折扣。
所以我在結合了公司的VI風格之後，重新做了登入頁：
雖然沒有之前的酷炫，但是很符合現在產品的精神和靈魂。而且在美觀度上也是不錯的。右邊的背景是純色的，所以加了圖案讓它變得豐富；而左邊的圖因為背景是漸變的，所以沒有加圖案，讓它自身的特點突出。
不知道你們有沒有發現，上一版和這一版有一個變化：使用者頭像沒有了。去掉頭像的原因是：配置端的使用者最主要的目的是配置資訊，個性化的設定頭像對他們來說沒什麼實際意義，只會給他們增加負擔。
3.讓使用者擁有控制感
頁面全覽
進度條1
不要讓使用者迷失在配置過程中，讓他們知道自己在哪裡，從哪來，將要到哪去。
進度條2
因為是有流程的配置表單頁面，所以要讓使用者對配置過程做到心裡有數。使用者都喜歡控制感而不是被控制感，進度條可以降低使用者的離開率。如果你的產品對進度的要求不是很嚴格，也可以在進度條上做可以跳轉頁面的連結，這樣會更直觀。
4.必須要輸入的資訊要標註出來。
5. 給使用者輸入提示
輸入要求要提前告知使用者，不要信奉亡羊補牢。
6.錯誤提示
如果使用者做錯了，馬上給他們清晰的提示。
7.門到最後再開啟
在使用者還沒有完成所有的錄入，以及錄入有錯誤的情況下不要給他們通往下一步的可能。不給使用者可能，使用者就不會有期待，也不會因為達不到期待而懊惱。同時，這也是對他們任務還未完成的一種暗示。
8.一級動作要明顯
根據頁面的目的，頁面上的動作分成各種不同的層級。在這張頁面中，新增專案、刪除、下一步都是一級動作，所以將它們設計成按鈕。畢竟我們希望使用者能夠順利地完成工作流，所以上一步和取消相對來說就是二級動作了，二級動作做成帶下劃線的藍色連結就足夠了。
9.矩形列表的專案要清晰
滑鼠懸停在第20行
讓矩形列表清晰的第一步：間距要大。這裡所說的間距包括：列表的行高和內部文字的間距，一組欄目和一組欄目之間的間距，欄目內部元素的間距。當間距大了之後，就不會讓人感覺很擁擠，可以給人放鬆的感覺。
讓矩形列表清晰的第二步：斑馬線。人眼在橫向瀏覽時很容易跑偏，斑馬線可以很明確的區分行與行，方便我們閱讀資料。
讓矩形列表清晰的第三步：對齊。一般來說，為了符合人的閱讀習慣，文字左對齊，數字右對齊，帶小數點的數字以小數點對齊。
讓矩形列表清晰的第四步：視覺化圖示。設計一些帶動作的矩形列表時，不妨把動作視覺化。據統計，人眼辨識圖形的速度是文字的數倍。
讓矩形列表清晰的第五步：啟用狀態要明顯。無論是滑鼠懸浮還是正在操作，當前選中的行都要明顯。
10.換頁符要視情況完整或簡略
簡略版
完整版
換頁符最簡可以只有上一頁和下一頁，最複雜則可以無限擴充套件。我設計的是配置端，頁面會增加很多資訊，所以總數的顯示就很重要了。
把使用者需要的放上去，同時儘量簡潔。
11.行內編輯和彈出頁面編輯的選擇
行內編輯
最開始做的時候，直接讓使用者在行內更改資訊了，但是後來和工程師在討論的時候，被他們科普了一個知識：行內編輯的元素一般情況下是不聯動的。
除此之外，如果編輯的行為很複雜，行內編輯無法承載其重。
彈出頁面編輯
關於彈出頁面的設計，比較常見的兩種方式：在彈出框下加遮罩層，或者給彈出框加投影。
如果下方頁面元素豐富，且和彈出框色差不大，加遮罩層的效果會更好。反之給彈出框加投影的效果會更好。
12.儘量讓使用者做選擇而不是問答
問答題會比選擇題花費更多的時間，而且更容易出錯。但是相對的是：問答題會讓使用者更自由。在這個專案背景下，因為元素很多，而且需要和後臺資料庫進行連線，所以要求輸入準確，故而大部分應用了下拉選擇框。
13.表單標籤和表單域的對齊方式選擇
表單標籤和表單域的對齊方式一共分為四種：左對齊、右對齊、頂對齊和內聯對齊。這次的設計中我一共使用了兩種對齊方式：右對齊和頂對齊。
眼睛在瀏覽頂對齊（左圖）表單時，眼動路徑是垂直向下，視覺的掃描速度比較快，但是頂對齊會拉大表單的垂直距離，所以不適合資訊多以及小螢幕的展示。
右對齊的優點是雖然表單標籤的瀏覽模式是Z字型，但是表單域——我們主要要操作的部分是符合視覺規範的左對齊。右對齊在提高瀏覽速度的同時兼顧了操作的便利。
14.可進行的操作要明顯
最開始在做預覽頁面的時候，設想的是使用者在瀏覽每一步的配置資訊時，如果有需要更改的，直接點選標題旁的編輯按鈕即可。但是後來在和專案組的夥伴們討論的時候發現：除了設計師以外的人群，對只有一個圖示的表達如墜夢中。
所以我重新換了一種表達方式：
他們都說這樣清晰多了。
15.按照親密性組織元素
配置端在完成的前一步會有一個預覽頁面，這個頁面承載了使用者之前所有的配置資訊，所以勢必資訊量會很大。為了方便使用者瀏覽，我們要對資訊進行組織規劃。用框把同一親密度的元素包裹起來，並給它們一定的間距，是最有效的方式。
就算你看不清頁面的字，但是你一定能看出其中的組織關係。
16.清晰的視覺流程
清晰的視覺瀏覽流程能讓頁面清爽，讓使用者頭腦清晰，增加產品友好度。
以上就是我這次獨立完成專案的設計總結。這次的設計閱讀了很多有關的設計規範和經驗，感謝那些無私分享經驗的設計前輩們，也感謝公司裡給我指導的設計前輩，還要感謝所有為我的設計提供建議的專案組小夥伴！
生命不息設計不止，我會繼續努力！