如何讓一個網站看起來高大上？或者更有設計感？

12-12

姑且僅理解為視覺層面上如何更好，當然一個網站不僅僅只有視覺，最終的結果是多方因素的完美結合。

讓人感受「高大上」，首先設計需要具備一定的衝擊力，那此題也可以理解為如何生產這樣的衝擊力。

1：遵循「簡單、平凡」

很多人會誤以為網站要用到很多的特效，切忌大量使用動畫、動畫不宜過分誇張（例如PPT里的百葉窗這種動畫），遵循物體簡單的運動和實際操作帶來的反饋去做動畫，該有的時候出現，不該有的時候別瞎蹦。

同理，遵循簡單有效的布局，利用細節去改變你的網站，通過段落的排版，字體的選擇，圖文的穿插等細節的方式提升美感。

ps.記得有句話說「不怕沒品味的人，就怕沒品味的人用心」

2：捨得留白
設計需要充分但不過分的留白，留白給人以奢侈的感受。頁面寸土寸金，沒有十分必要，不要把它塞得過滿。此外，留白可以更好的凸顯主體；在特定情況下，適當的留白還能產生別樣的意味。

3：變化，即對比
萬物皆因變化富有美感，書法的章法能很好的詮釋這個問題，大小、粗細、輕重、濕燥的對比之美讓簡單的文字變得富有魅力。

對於網站也相同，僅僅字體的對比就能產生很多美感，利用字體的變化排版，也是一種直接有效的方式。

4：高質量圖片

圖片是渲染氣氛最有效的方式，圖片疊加文字的方式是一種非常取巧的辦法。一張高質量的圖片本身具備的美感已經足以提升逼格。

如果你不信，那還有更屌一點的，傳說中的「黑白噪點壓大字，高端大氣上檔次」，簡直抓全了精髓。

布局簡單平凡、富裕的留白、響亮的對比關係、就連圖片在黑白+噪點的處理後也變得大氣起來。啊～～有什麼是設計不能拯救的呢？

高大上，設計感，往往是最後結果給人的感覺。這種評價其實反映出設計的精準感：內容上不多不少，剛剛好；風格上不偏不倚，很舒服。

要達到這種精準，首先需要明確這個網站是用來幹什麼的，滿足了用戶那些需求，滿足了商業上的那些要求。在設計之前一定要把這個搞清楚，可以去問問用戶以及合作夥伴，了解了解行業和市場，研究研究同類產品和競爭對手等。這樣才能刪去不需要的內容，是整個網站更加簡潔。

之後就是在設計過程中，特別是早期的時候，多驗證，可以找點目標用戶來看看，聽聽意見，及時分析，及時修改。

把我的讀書筆記放在這裡，源於Robin Williams的《寫給大家看的設計書》。這裡都是些設計的基本小竅門，能巧妙地運用好可以幫助你在平實的設計上更具設計感，當然高大上的內容就需要在這基礎上繼續努力啦！
備註：親們我的微博不是這個，很早就改名了。

勉勉強強寫一點點

1扁平化設計

網站：http://interactions.webflow.com/
請各位打開感受...截圖截不到風采，簡潔輕快，但是要考慮到網站受眾

http://gracecoote.co.uk/

2簡潔的風格

http://majaandthejacks.com/
這是簡潔類的

3強烈的對比

http://www.hochburg.net/de/
黑白對比強烈，很濃郁的設計感

http://shakerbrand.com/

4.整幅的攝影背景

http://adventure.com/

http://www.loisjeans.com/web2013/en

http://nightcrawlerfilm.com/

5非靜態頁面

http://cloudatlas.warnerbros.com/

http://www.ycoyacht.com/

6 產品優先

http://silenthill3d.com/

http://eng.bmw-special.com/

7其他
滾動
http://brightmedia.pl/?lang=ensite=contact
交互設計
http://www.irregularnoise.com/#!/weave

當然還有非常高端的響應式導航，但是因為我是個蠢學生，實在是搞不懂這其中的奧妙，截圖也截不出來美感...就算了

餓死我了...兩點了...俺出去吃飯了...

所謂的「高大上」和「設計感」都是視覺層面給用戶帶來的感受。
現在對網頁「高大上」的定義趨向於極簡風，換句話說就是用最少的圖片和文字能夠表達突出網頁的所有關鍵信息。所以讓一個網頁看起來高大上有設計感，核心就是圖片的選擇編輯，字體的選擇和排版。
嗯好說完重點我們先來看看圖休（lang) 息 (fei) 一 (liu) 下 (liang)

所以在這種極簡高大上的大（zhuang) 流 (bi) 趨勢下，想光用圖和字在視覺上吸引用戶的矚目，對圖片和字體的設計就有很高的要求了。

前面已經有不少知友討論過圖片，那貴妃這裡就來說說字體的選擇和排版。

首先就是要限制出現在網頁上字體的種類。

多種字體可以讓排版的層次更清晰，一個設計品上出現兩種字體是標配。但是親們！超過兩種字體會讓觀眾分心！這樣傳遞的效果就不強了。一般來說，一個酷炫的字體會搭配一個比較普通的字體，一個做標題，一個做正文。

然後就是字體的排版。

前面提到花哨和樸素的字體搭配出現就是用了「襯線字體」和「非襯線字體」穿插排版的原則。因為相對複雜、甚至花哨的襯線字體如Time New Roman、Georgia、宋體）和清晰、簡單的非襯線字體（如Verdana、Arial、雅黑）互補作用很強。

接著是字的大小。

在字體大小上，現在是大而粗?(? ???ω??? ?)?的字體當道（喂
但是不管潮流怎樣，別忘了我們玩弄字體核心目的是把要點突出。因為字體種類很多，大小範圍很廣，要相當注意放大和縮小某種字體的效果。把一些天生就是要拿來做正文的字體比如open scans方成大標題就很奇怪。

嗯下一項是字的顏色。

要注意顏色附在字上在情感層面上傳達出來的意思。還有一個要注意的就是字體用色和背景的搭配。

關於web字體就先說到這裡。接下來放大招！真正的乾貨在這裡！貴妃來手把手傳授怎麼用13步打造更漂亮的web字體！
請猛戳貴妃專欄里的 ----&> 13步打造更漂亮的Web字體 - 讀點兒設計 - 知乎專欄
接下來還會嚴肅的分享各類設計教程，設計師訪談和設計師養成類文章，各位看官要看得滿意就順手關注一下唄 (￣ε(#￣)

哈哈，在整體布局結構和顏色不出大問題的情況下，你試試吧所有中文換成英文。。。恩，貌似有人發圖就是說明這個問題。

我只是大自然的搬運工而已，原文鏈接：http://www.uisdc.com/5-skill-make-design-better
（優設網是之前為presentation做ppt時，學怎麼做高大上的ppt搜到的一個網站，牆裂推薦，就算不做什麼網頁設計，也能提高自己審美水平）
——————————————————————————
1. 字體的運用

盡量使用英文
盡量使用簡單的字體

關於使用英文會讓網頁看起來更高大上的原因，詳見這篇文章：http://www.uisdc.com/english-chinese-font-design
我知道大家比較懶了，原因就是這樣啦：我們看到中文，第一反應不是將他圖形化，而是在看文字表述的字面意思，而看到英文的第一反應是將其圖形化和符號化。對於英語母語者，歪果設計師也會刻意避免英文的直接使用，避免單詞的含義被直接解讀而產生廉價感；
此外，中文每一個字都是一個比較複雜的圖形，而英文就是26個字母的各種組合。

在UI設計中，文字的主要作用是輔助圖形進行說明、註解，而非像平面設計中那樣需要設計一款非常好看的字體LOGO。

2. 顏色
大眾對顏色的使用和理解都有一些比較普遍的習慣，盡量不要試圖改變用戶的用色習慣。
不要用太高飽和度的顏色，如果你是用色高手，那就盡情發揮吧。

3. 圖片
上圖，大家感受一下

4. 信息
考慮清楚，是要用戶關注在文字上，還是圖片上。如果文字占頁面比重大，那麼用戶視覺中心就在文字上，圖多，視覺中心在圖片上。

其次，對於一些信息量豐富的界面，能簡則簡，能隱藏的隱藏，能弱化的弱化。信息文字顏色也非常重要，你的黑色不需要全黑，多去嘗試一下灰色的信息文字

5. 版式

文字和邊界保持距離。保持一定距離是必須的，這樣才能讓你整個頁面有呼吸感，並且你的呼吸要均勻，就是說你的周圍邊距儘可能的一樣，這既可以保持整齊，又遵守了規範。
不要超過三種字體。其實最好就控制在兩種字體最好，甚至只有一種。這一點的意思和我們最開始說的是相輔相成的，你的設計儘可能的去簡化信息文字，當用戶剛剛習慣一種、兩種字體以後，你又要再製造新的識別度，會讓人感到潛在疲勞。而且，越是閱讀類的界面設計，越要注意這個問題。
居中不一定是最好選項。

另外來自同一網站，還有一篇網頁設計2015年設計趨勢的文章（http://www.uisdc.com/web-design-trends-rule-2015），裡面選取的圖都好好看～

別接廣告

高端大氣上檔次的網站的特點：

英文文字更有優勢
大圖，很大的圖
攝影
留白
排版

舉幾個一直收藏的例子：

圖片來源於網路

何時中國的網站能達到這個水平？

留白多一點

字體小一點

大圖片

稍微加一些不太晃眼的動態效果

這問題依站位不同，其實可以分解成兩個問題。對設計師來說，怎樣設計一個高大上的網站，這個話題可以展開一本書的深度，一句話歸納就是，多看多想；對一個委託設計了一個網站的老闆來說，怎樣保持一個高大上的網站是另一個問題。作為一個前設計師，我當年總是能較好完成各種老闆們要求做一個高大上網站的任務(一般是公司網站），但實際上線一段時間後，老闆們都會皺著眉頭問為什麼網站變得矮窮挫起來了？我當然知道答案，我放上去的圖片都是圖庫里精美的圖片，色調、用光、表現內容都是按網站總體設計選出來的，您雅現在放上去的公司產品、環境的圖片都是小秘拿個DC拍出來的，能一樣嗎？一般這種情況下，我會介紹給他們一些產品攝影師的網站，這樣，2/3的老闆就會神通意會了，1/3的老闆會表示拍點照片都xx這麼貴，你給隨便弄弄吧，一般這種情況下，我會介紹給他們一些攝影器材網站，婉轉地表達您雅給的設計費，連個濾鏡都買不起。

好吧，好像變成吐槽土鱉老闆了，其實想表達的是，一個網站看起來高大上，是設計出來的，也是維護出來的。

設計稿減少中文字體的使用，因為很多時候你交給前端之後只能:
font-family:Microsoft Yahei
(我不是在黑windows)

點開大圖體驗更佳。

去看看博物館、攝影展。然後把它們的建築風格、裝修風格、展示風格應用在 HTML 上

first of all, 無定法。解釋：
如何有設計感如何高大上是兩個問題。
1.高大上
不喜歡單就這個詭異的詞/風格進行討論，故以下只討論設計感。
2.設計感
有否設計感，牽扯到作品表現力的問題。而有表現力的好設計通常是由經驗和不斷的審美學習之上的直覺產出的。當然在入行初期，多套用成文的設計理念去做設計訓練，大有裨益。
簡潔的畫面構成、使用高質量的大圖等設計方式的確是使網站「高大上」/「有設計感」的快捷方式。但看多了，也會覺得十分乏味。變換風格（如從低飽和色變為使用高飽和色，拋棄黑白灰，拋棄黑白噪點壓大字等）依舊有設計感，才是有追求。
故想要達到「怎麼做都能有設計感」，就要去琢磨如何提高畫面表現力：
first, 通過看大設計師的作品、書等，建立起自己的「設計觀」，即你可以分析隨便一件設計作品，可以很平和地向別人說明它好/不好的原因；
then,養成看別人作品的習慣，各大網站/展覽/微博/微信公眾號/雜誌/書店等都是信息源, 邊看邊想，收集啟發到自己的作品。注意不要拘泥於大設計師的作品，它們標誌性的強烈風格化會限制你超更寬廣處走;
after that,下手做東西。
看理論、刷作品、做東西，這三步依次循環往複。就是個人設計素養形成、提高的過程。
當設計素養達到了一定的高度，「設計感」這個詞也會從你的腦海中消失，此時怎麼做、做什麼都能有設計感。進而你會從設計作品中看到更多，追求更加形而上的東西，比如，「正直」。

網站核心是什麼？
是內容！
你去把apple的網站剔除內容，還能好看嗎？
網站視覺和交互高大上的基礎是對核心內容的總結和格式化，將乾貨按照一定的層次show在用戶面前。
即使沒有css，單純的瀏覽器默認樣式也是高大上的感覺。

放棄對IE非主流版本的支持

擬物化，模糊，高光
http://huasheng.io

大道至簡

高大上的設計，就是：看不到設計。