不作切圖仔，初窺設計之門

引言

在咱們的印象中，前端是寫業務的，美工是作UI的。前端對美工的設計稿進行實現，因此在不少公司，前端就是會兩行AJAX的切圖仔。

新系統初始化，目前對市面上的絕大多數的Angular UI框架都不滿意(也有寫得好的，幾千$)，只得拿起最原始的武器：Bootstrap。

設計

比不上騰訊，請不起設計師。只能前端本身設計UI。

以一個外行人的角度看，騰訊CDC設計團隊的博客寫得是最好的，設計規範淺顯易懂。推薦你們去看看，裏面有QQ項目設計優化的實例。

主題色

主題色決定了系統帶給用戶的總體感覺。

科技感，騰訊藍：

安全感，微信綠：

奔放感，京東紅：

騰訊這句話說得很是好！「設計作很差，由於看得少。」

多看，多借鑑優秀的設計。

保持科技感，試題錄入平臺採用騰訊藍。保持安全感，計劃之後的出題平臺採用微信綠。

登陸頁

登陸頁決定了用戶心中對系統的初次定位，必定不能太普通。

像這種的，頁面對比度不高，看起來就是一個很普通的頁面，很難讓用戶感受到這個系統和以往使用的不同凡響。

這個對比度就很高，由於是非商業系統，因此更主要的是宣傳企業，而非吸引用戶。這麼大的logo很容易讓你們記住。

多家比較之下，京東這種風格符合本系統的需求，既有高對比度，同時背景不喧賓奪主，重點仍在登陸中。同時底部的各類廣告，各類連接也齊全，足夠引流。

找到符合的了，開始「借鑑」！

頁面比例

最開始怎麼都以爲本身的導航條寫得很差看，後來研究了下慕課網的導航條，原來是比例掌握得很差。

PC端Web應用，導航條合適高度72px。

編寫菜單時也面臨着一樣的問題，1/12顯得窄，2/12又顯得寬。

又去「借鑑」騰訊雲的菜單比例。

菜單合適寬度爲278px，大概1.737/12的樣子。

顏色衝突問題

菜單與導航欄是相同的主題色，當首個菜單激活時，會出現以下問題：

菜單和導航欄看起來就像連在一塊兒同樣，很差看。

這個實際上是絕大多數網站都有借鑑的例子，加陰影。加了陰影，給人的感受就像有層次同樣。

最終實現的頁面效果以下所示。集衆家之所長，不驚世卻脫俗。

總結

借鑑，是一門學問。