給程序猿看的web頁面設計和排版

不擅長界面設計，但是又想與設計妹妹和諧友愛的開展工作，你想過木有來來了解學習一下網頁設計的排版布局小知識呢？至少這樣設計菇涼不會淚眼婆娑的看著你把她辛苦打造的設計稿，最后改的面目全非。拿出一點敲代碼或者看片的時間來欣賞下本文的案例吧。

因為講大道理也沒用，就先來看看這些網頁案例的截圖吧：）你肯定會有收貨的，至少不會覺得世界還是被table包圍的！

1、圓形，完美而不受拘束的形狀。

希望引起看客注意的文字、鏈接等部分，你可以為它們染上靚麗的色彩，注意一小點就可以了——如果到處都是亮色，就沒有亮色了...

2、一個個人主頁，大大的純黑hello，不由得讓人聯想到主人的隨性、灑脫、熱情，或許還有那么一點兒無厘頭的可愛...

3、居右排版，左邊只給出一個清晰的攝氏度標志，投在頁面上的影子呈現出立體的效果，take the temperature——consider，類比很特別，想法讀來很窩心~~

4、親愛的coder們，如果你對黑白色感到膩味了，#43BBEF是個很不錯的選擇：清爽、敞亮、優雅。
據說，每一個coder都必須和英文打交道，據說，英文排版的話居中總是沒錯的...

5、圓形鏈接背景，圖文混排，文字顏色有深淺區別，不多說

6、這就是傳說中的網格背景了，避免單調的最好辦法就是打格子，設計師肯定懂的，面對一張新建的空白稿紙，第一步，顯示網格。
不過，英文排版與中文還是有些區別的，至少字體種類比中文豐富很多很多，但是——我們有驚艷飽滿的繁體字！
從小我就覺得，會寫繁體字顯得很有文化...

7、與6中不同，這種風格適合喜歡攝影又文藝的coder們，好處自不必多言:)。

8、這種比較復雜，怕麻煩的coder請繞開走，不過，應該可以找到現成模板的，修改背景圖片為自己喜歡的，ok。

>

9、你喜歡這個圖么？我很喜歡，簡潔大方的灰色系，年幼時看的動畫片里物品的風格，優雅中透著溫馨...

10、標題居中，綴飾花紋，畫一般的字體，很樸素，很優美。

11、淡淡的驕傲感從這個圓形頭像和簡單的文字說明里流了出來...話說圓形頭像真的很別致，建議用彩色照片...

12、我的163博客...一直想搬出去自己搭建，又比較怕麻煩...這個頁面，也很簡潔，菜鳥程序媛一枚。

轉載請聲明：圖片來源：shijue.me，文字編輯@親愛的蔥。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量27萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：