如何設計網頁排版和樣式 - 前端頁面設計

經過前端頁面的優化, 請教别人和别人的建議總結出來的兩句話, 希望可以有所幫助

對于沒有設計天賦的朋友, 不妨可以思考一下下面三句話.

1. 設計這東西一定要找素材. 自己憑空想出來的, 90%做出來不好看
2. 背景不要用深色,整個頁面最多的不應該是顔色, 黑白灰為主, 顔色點綴
3. 參考别人是怎麼設計的, 不一定要按鈕的形式, 有傳資料的功能就行, ​

   ​可以參考一下XX的那些前端​

   ​

這三句話, 其中第一句話告訴你别自己瞎想怎麼改了, 包括排版和樣式, 自己對目前的東西沒有一個整個頁面的設計,隻是對現有的東西去改變位置大小顔色 其實 變化都不大, 可能會規矩一些, 但不會變美…對自己不是專門搞設計的要有一個清晰的認識 😦

然後就是第三句話, 最後的XX說的是去參考你現在正在設計的相關網站的前端頁面是怎麼設計的, 不要大海撈針似的無意義浏覽大量網站模闆. 和你現在做的都不相關, 當然不知道該如何去借鑒啦. 比如你再設計輸入框, 輸入後點選查詢後顯示查詢結果, 這個肯定要去有輸入框的網站看看别人的輸入框是如何設計的, 比如翻譯網站, 這些不都有輸入框和查詢的東西嘛, 就可以參考一下.

然後就是第二句, 大概觀察一下國内比較出名的網站 掘金, 知乎或者CSDN, 都可以看出背景不會用深色或其他顔色, 大多都是黑白灰這些, 然後其他顔色點綴, 确實是這樣的, 看上去也比較進階, 這可能就啟發一個配色的問題吧. 關于配色也是很講究的, 什麼底色配什麼色的按鈕.

關于配色提供幾個網站可以參考一下

1. ​​uiGridients - Beautiful Colored​​ (推薦)
2. ​​CodePen​​ - 參考一下網站裡的設計
3. ​​網頁設計中怎麼配色？​​
4. ​​配色表​​