自學web開發，做出來的頁面那麼丑，該怎麼辦呢？

01-06

已經不是第一次嘗試獨立做一個網站出來了，但是每次都被自己做出來的頁面丑得做不下去……想去抄一抄別人的網站，但是卻看不到一個滿足自己網站功能的站點，有些頁面覺得不錯，但也只有一個頁面而已，找不到相同風格的其他頁面。
最近迫不得已接觸了前端框架bootstrap，元素總算能看了。但我也不得不佩服我自己，這麼些好看的元素讓我組裝得丑得嚇人……
UI是程序的臉面，每每想到這，看著自己那麼丑的UI，慢慢地開始灰心，然後就做不下去了……

然而程序員並不需要懂設計啊。

題主不禁讓我想起來我搭建博客的故事。

大學時候想搭個博客，先是自己從前端到後台，從設計到實現全部自己寫，還精心按照自己查的一些設計規範來寫，結果寫出來還是把自己丑哭了，掛上去了一個月，一篇博文也沒寫，每次想寫的時候真的要被丑哭~~

後來用ghost做了一個，結果竟然不支持latex公式雙$符號，得換markdown編輯器，當然也沒找到特別喜歡的主題，當時有別的事兒又被中斷走了~

終於有一天看到了hexo的一個主題evendotnet/Even，其簡潔的風格瞬間吸引了我，終於搭建了一個令自己內心舒坦想要提筆寫字的博客，內心真是舒坦~

這個故事告訴我們作為一名程序員有時候真的會因為設計浪費很多時間，這真的跟自己代碼沒有半毛錢關係。審美這東西也不是一朝一夕，堅持不寫沒有設計稿的頁面。當然現在Material design風格的組件越來越多了，在沒有設計師的情況下，這真是我等不懂審美的程序員們的福音，建議題主去看下Material design 的設計理念，利用別人設計好的組件，自己再注意下配色啥的，會方便很多。

望能幫到題主。

我做了好多年前端了，如果讓我在沒有設計的情況下做一個頁面，一定會丑到我自己都看不下去。

親，讓頁面變得好看那是設計師的事情，你只需要知道如何把設計師畫的頁面做出來就行。

不請自來。先說說我自己的經歷。

在學習前端的時候，我一直跟身邊的人說，這輩子是不可能走前端的了。為什麼？給你看看我之前的面試作品的界面。這個界面可是花了一天的時間去布局...不過當時並不覺得丑。現在再看看..我自己都看不下去！！

然後因為外包入了前端的坑。不斷地切頁面，切頁面...所幸的是在這過程中接觸的一下交互規範，比如按鈕hover的時候一定要有交互，盡量雙擊圖片的時候不要有藍色的前景層，map+area熱區域不要有outline。期間也接觸了很優秀的設計稿，會研究它的字體大小，大致布局等等。

然後寒假自己也寫了一個Hexo主題，地址：GeekaholicLin/hexo-theme-ylion，畫風就變成了這樣（強行硬廣233）。

在寫主題的時候多參考別人的主題是如何設計的，比如布局如何，用色如何，用的什麼字體(字體的排序也是有講究的)，功能小組件應該怎麼放。我會告訴你，寫這個主題的時候，從布局到配色到字體到特效，很大一部分都是一點點從別人主題"扣"下來的？如果你讓我說，為什麼要用藍色和黑色做主色調，我只能說，我覺得這樣看起來舒服而且也有成功的案例，而這都是以我現有的審美為基準，說不定再過兩年回頭看看，也是不忍直視呢QAQ

雖然說前端不會涉及到設計方面，但是還是要懂得一點的。知道自己的短板所在，就只能補上來了。可以在平時多看看一些設計相關的書或者逛逛網站（前提是不要本末倒置了，要永遠記得你是前端而不是設計），提高審美，這不是一天就可以完成的，所以大可不必著急。（相關書籍只看過《寫給大家看的設計書》，四大設計原則至今受用。當然也可以搜索一下其他的）

再說說個人對 Bootstrap 的看法。我有嘗試著去學過（至今沒有用過），大概就是記憶類名。它可以讓不熟悉前端的人快速寫出一個頁面，而且樣式美觀。背後的設計思想確實值得學習，但是如果有得選擇，我會自己選擇手寫，畢竟以後還要靠CSS吃飯，而Bootstrap只不過是一個工具。

----

嗯，全文的核心就是在不影響學習和工作的時候，通過看書或者知名的設計網站一點一點地提高自己審美。

謝邀。

不過

這年頭，你能寫好程序就不錯了。

給我們設計師留口飯吃吧

一個網站構成需要

產品+交互設計+視覺設計+前端開發+後端開發，你得先搞清楚你幹得啥。其中，交互設計+視覺設計決定了網站長啥樣。

Bootstrap嚴格意義上講，只能是一個UI框架，提供了一些現成UI元素，講白了就是讓前端少寫一堆CSS代碼而已。別以為用了這個就能讓網站漂亮。那還要視覺設計幹嘛。好看的網站，什麼UI框架都幫不了你。都是按著視覺稿手工一行行代碼拼出來的。

樓主不要灰心，我以前也和你一樣，怎麼做都做不好，特別丑，但是我沒有放棄，只要堅持丑下去，時間久了，你就習慣了~

無他，多寫就是了。

我覺得，頁面的邏輯功能可以完善就很不錯了，還有兼容適配啥的，至於頁面的美感這個真的需要懂色彩搭配的設計師。。

看我做得咋樣，http://www.webzhaorui.com，大二的時候自己搞的

頁面好不好看，那就是設計層面了，多看好的作品，多練習總是有用的，如果是布局有問題那就是html+css不夠熟練了

我覺得應該是你的基礎還有待提高，建議多鞏固HTML，CSS相關知識，另外多去搜羅一些你認為設計不錯的網站，然後可以F12，看看人家的代碼，是怎麼寫的，能否從中學習到，如果理解能力不行，你就抄，試試能不能做出那個網站的樣子，如果不行，只能說還是基礎不行，對相關知識理解還並不透徹，如果你能照著那個網站的CSS樣式做出跟它幾乎一致的網站，並且能解釋美一行代碼，那麼你已經進步很大了，接下來就自己試著在腦里設計一個網站，排版，但是這並不容易，需要積累，多學習設計相關的知識，知道怎麼排版好看，然後還是多去搜羅設計優秀的網站

/*** 簡陋的分割線 ***/

另外補充一下，我看你有提到說你用了 bootstrap 框架，可是做起來還是丑，你說這句話就更加表明了你的經驗還是不足，基礎不夠紮實。首先不論是bootstrap也好還是其它框架也好，真的不適合新手去使用，那些框架是給已經具備前端開發能力的人使用的，以便他們能快速的搭建一個項目主頁或則其它，當然新手可以去學習那些框架的CSS寫法，但可能也看得狠吃力，建議在基礎鞏固之前不用去用那些框架，哪怕你用那些框架可以搭建出很多好看的頁面，那你的能力也只是在原地踏步而已，因為你並不知道他們是怎麼實現的，為什麼能實現，你甚至看不懂CSS代碼。所以說，關上房門重新去鞏固基礎這是最重要的，莫著急，加油

前端的職責是還原設計稿，所以長什麼樣子是設計來決定，前端只是負責實現這個樣子，前端要關注的是用什麼方式來實現，而不是它長什麼樣

專業的事就應該交給專業的人來做，美觀的事視覺做就好了，fe關注寫好高質量的代碼才是根本。

先用ps畫界面，再切圖做html，框架後面再說吧

web開發和網頁設計是不一樣的，重點。

同理，UI和UI設計也是不一樣的。

web開發就如同造房子，而房子的設計方案卻是網頁設計師做的。

所以，覺得丑不要緊啊，你的問題不在web開發，而在於沒有設計師的知識和技能。

但是呢，界面的美觀與否，本就不是編程要考慮的範圍。

所以題主想要做好看的頁面，還是建議學一點設計類的知識。

親愛的，既然你自學的是前端而不是UI，你要重點掌握的是功能性的東西和後台的內容啊！前端開發在整個工作中最多就再涉及個切圖，肯定涉及不到做頁面的。

如果你嫌棄自己做的丑，可以從網上找一些公開課，一般都會提供課程中完成的案例全部代碼和素材。我前兩天聽了騰訊課堂的頁面布局和響應式布局，要到了素材和筆記，如果你需要的話可以分享給你

真的想為了視覺效果可以學學平面設計，這跟代碼本身沒關係，審美才是硬道理……