高品質的網頁設計

01. 留白

出色的留白處理的實例 Good.Is

Digital Mash

Creatica Daily 的大量空白

Postbox 上也有很多空白

留白時的錯誤

留白不夠的例子

高效控制留白的技巧

1. 使用網格輔助設計
   利用網格當然能幫助你理解元素之間的空白。
2. 不斷嘗試
   不斷嘗試—失敗—嘗試，直到找到最佳方案。
3. 留白并不是浪費空間
   空白并不總是等著你去填充的。
4. 沒錯，少就是多
   與其用盡心思填滿某個區域，不如就把它留空，只保留至關重要的信息就好。

   02.? 像素級的完美

   還擁有一個策略會分辨用戶在完工這項360網站定制方案時能不能的確盡心了。偶爾候開創壯游奇跡mu的也都是些許小關鍵，些許用戶近乎尚未發現人的關鍵。我所講的“圖片圖片像素級的完 美”也都指的是在色塊、非核心和圖片邊框描上方細致入微推敲。和她就用眼前這條什么單的線，比不上多多些許關鍵。關鍵會是小小的顏色漸變，也充分會僅僅是眼前這條什么1圖片圖片像素寬的細線（作為特征陰暗或修容）。失去了這關鍵， 你的定制方案會大相差太大的。有部分定制方案師在這地方特厲害：?,?同時?.

   像素級完美細節的實例 Envato的細節鑒賞

   下圖的Example 1 (例子1)中，綠色內容框的邊緣有一條更亮的綠色線。而Example 2處，區塊內邊緣有柔和的漸變陰影，而邊緣之上還有一像素的白色描邊。這做法非常聰明，用陰影來強調高光。后面的綠色區域有非常柔和細微的光影效果，有助于將注意力吸引到下面的白色區塊中那清新脆爽的細節上去。 盡管這種做法并不是總能讓設計看起來更加精致，不過它們的確能幫助你賦予設計以🅷三維的真實感。于是設計元素就成了鑲嵌在頁面上的寶石，而不是平鋪在上面的一張毫無動感的紙。

   Tutorial9.Net上的細節

   David Leggett 對于如何制造??有很深的理解。他最近重新設計的 tutorial9 集合了很多非常棒的像素化技巧。?Example 1?處你能看到，他是如何僅僅通過添加一條1像素的高光，而將導航標簽變得更有質感。Example 2?處使用的技巧則更多了。相機圖標的投影，下方白色區域的陰影與高光，以及導航條上的1像素高光。

   RedBrick Health上 按鈕和分割線上的完美像素級細節

   該漂亮英語的導航模塊選項卡，由?? 營造，是采用非凡像數級要素處發展設置品控的絕妙事列。紅顏色開關有1像數的加亮，鏈接轉換兩者的分隔線有同樣的的品控與要素處。所謂你所見到的，他不能考慮于只加一道白色線分隔，Ryan在下方調用了道1像數寬的高燈光，逃避了設置看上去較為溝壑。

   完美像素級細節也適用于Grunge風格: AvalonStar

   譯注：Grunge風格有“做舊”、“迷幻搖滾”、“做臟”等幾層意思在里面，算是平面藝術中的一個流派。

   下面的例子是漂亮的AvalonStar：Distortion（扭曲）主題博客，有著極贊的grunge風格。不過，即便是骯臟做舊的grunge風，利用1像素高光也能創造大不同。下圖的Example 1?處，上面的棕色區域有一個漸變陰影，下面的綠色區塊的頂部則有著一條1像素高亮線。陰影與1像素線的結合，🔴讓這些區塊顯得更為精致。

   完美細節小貼士

   要在一種技術上提高完滿，連續的實踐內容最為主要。如您所觀，一只1分辨率線如此單純的東西就能給開發含有如此酷的淬硬層感。你以至于不有一些需要到有一些倒角或漸變背景，費盡心力做有一些實真實在的放置在某群體時的效果好。
   1. 一定得是細節
      小細節完善內容感官是關鍵。
   2. 思考像素級問題
      描邊、漸變、線條、陰影等等，不用太寬大也能有效增強設計
   3. 前后對比
      應用效果后注意與沒有這種效果之前進行對比。如此你就能知道這些細節到底帶來了哪些改觀。

      文字排列與字體選用的訣竅

      然而的結構設計者大部分會親自創作的網站的事實辦法，不這些 對待辦法的整體性高質量己經至關為重要。的結構設計者的使用可以說是要提高辦法的表現辦法足夠了易讀。有越來越多方案能提高你的字形易讀易用，不我會給很多人列其他該做一些以及無法做一些的要求和條例，我教給很多人的是其他足智多謀運作字形的實驗總結和分析一下。 細致綜合考慮了字跡的具體方法 The Netsetter鉆個而獨具魅力的字跡 頁面 方案中，大標題格式格式越重要，針對搜狐博客方案來說一愈加盡管。近些年流行時尚在大標題格式格式上在使用大而粗的系統圖片。如此做有許多弊端，不禁能挺高指定玩法區快的也可以性，同時能助進行方案中的余地和結構的。??在這的方面做得比較好，如您所觀，大標題格式格式系統圖片一定，相鄰多大量留白，是易讀。

      行間空白和字符間距

      ?的網站是字體究竟對網頁設計有多重要的完美實例。下面的截圖來自他們的作品集展示頁，再一次展示了大字體是如何幫助創建開放空間的。即使是這種清爽的細線體，他們也使用了寬闊的空白。另一個值得稱道的地方是他們對于行高 (line height) [行間空白]的⭕的絕妙選擇。行間距被設定得比默認值大很多，大🉐大增強了文字可讀性。也許下次你可以在自己的設計中也試一試這個技巧。

      Web Design Ledger, 配合情緒的字體

      要找尋到好看的形式必須 快速的試試看和無法，或是你能應該依據形式所代表英語的“心態”來適用形式。下文的列子，， 在讓人覺得簡約風的和作舊感的同樣，也暗含開啟的心態與新科技感。他取得成功的核心就在適用了能喚起用戶相對應心態的形式。Henry Jones (該站的設計的概念師) 為副標題格式適用好幾回種出名的傳統的襯線形式：Georgia，為童年回憶簡約風的風的變現提供了了巨大裨益。新科技感則來與副標題格式根本不一樣的的形式——主資源適用的Helvetica形式，種無襯線的、滑溜的、開啟的形式。

      網頁設計中字體選用的快速決斷

      就看后邊咋樣多么例證，過去你配用起數字字體來需要會越來越爐火純青。不通過，為是什么許多人給人的感受到咋樣好？下單次在你你的設計方案中，你又該咋樣用到？
      • 是否可讀？
        不要怕嘗試粗大的字體
      • 你可否考慮過間距？
        間距對于可讀性有很大決定作用
      • 你的字體帶給人什么情緒？
        確保字體選擇適合你的設計風格
      這哪些角度都有過多什么值得青睞的的地方，僅僅我不想是這哪些角度的醫學專家，若果我是剛才先學會了怎樣才能賞析哪幾種多用特好的字體樣式而言。若果要想在這哪些角度熟悉太多，濃烈意見與建議你看一些來自于Smashing Magazine的。

      04. 元素的組織

      裝修平面設計師此種職業化對大多人均有能吸重力，畢竟一些手工制造創意可言的期間中 ，真的是很好玩的數學。我掌握組織化開展機構辦法的期間中 就不能那好玩的數學了，但己經你生活習慣了組織化開展機構辦法的好生活習慣，你則會出現 顯然它也不能遐想中那死板。組織化開展機構辦法的辦法經常應該看問題而定，就比如，這班次是哪種性質？某一其他辦法在網站頁面上的首要性怎么樣去 ？ 該如何放入項目，還有放入什么地方，概率的的分布搭檔著實太高了。當然還得有很大些的技巧可尋的。最依據的就算，先決心你的方案想要以達到的療效。列如 ，你是在做的網站建設嗎？是要做項目風采展示嗎？一些是在做一名使用者報名頁？推薦頁？等方面……

      靠設計做買賣: 37Signals

      一下這一大受認可的 37 signals 的官方網站下載。她們的的東西能賣沒法好，能也不是靠的偏財運。她們的官方網站下載使你盡機會特別容易地認知了她們的商品， 幫你得出最中定。你所看的的東西都被精妙地設定而呈現出。

      如圖中所示，他們提供了四大理由讓你購買他們的產品。吸引注意力(Attention)是第一步，他們做了一個黑色區塊，放上關于產品的簡單介紹，并且使用了粗大的標題。 接著，他們通過一些漂亮的插畫把你的興趣(Interest)吸引到對產品優點的介紹上。再然后，他們想要讓你產生購買需求(Desire)，這能通過放置客戶評論引言和產品獲獎證書來實現。在這一實例中，他們是通過幾個“What our Customers have to say”（我們的客戶如是說）的視頻來實現的。最后要實現的即促成購買行動(Action)；??的網站上有大量行動點(action point🅷s，即引導用戶進行下一步操作的鏈接)貫穿于整個頁面，由于頁面很長，頁面底部還放置了更多的行動點。

      為內容(Blog)而設計: Well Medicated

      設置網站頁面設置時的原因則大不似的了。你不一樣花爆發力勸告你的普通訪客信認你的廠品，你的“廠品”就已提供在他倆家里—— 也說才是你的網站短文。我可以做的說是保證 普通訪客能輕松自在閱讀理解你的短文，生命的進化短文，與你愿和你的網站行成聯系起來。

      內容(Content)?應該是博客中出現在讀者眼前的首要部分（之一）。在下面的例子中，一個粉紅色粗體字的標題，很好地吸引了你的注意力，引導你直接關注文章內容。左側放了張大小合適的預覽圖，右邊則是兩三段文章摘要，和一個“繼續閱讀”的鏈接。當然，也有標準的日期和作者信息。這簡直就是我心目“內容設計”的完美實例。注意力(Attention)?可以被引導到任何有趣的事物上。在這個例子中，漂亮的RSS訂閱按鈕成為了焦點。且不說這個焦點讓讀者產生了與內容的聯系感，它還能幫助網站獲得更多的訂閱量。鼓勵你的讀者探索你的內容相當簡單，只需在邊欄上加一些最新文章或最受歡迎文章的鏈接列表，或者制作一個下拉菜單，或者組織一個其他你想要推送的內容的高效列表。做起來很簡單，效果卻足夠有效，尤其是對博客來說。博客是一個私人領地，通過不同的途徑告訴讀者你的聯系方式(Connect)?，能幫助他們了解你，也說不定會帶來意外的好處。

      組織內容小貼士

      你而且可能會會問題想要揭開基本，應用非同常規手段的之前，不贏你或者是能夠 應遵循這個簡略銷售技巧，以確認內容型式和查閱循序的優質。

      1. 你為何而設計?
         如前所述，確定設計的目標。
      2. 利用網格
         網格幫助你發揮頁面的最大潛能。
      3. 測試元素位置
         以訪問者的角度考察內容的易用性。
      4. 移除所有不必要元素
         不必要的東西都應該被消滅，或者至少不要放到顯眼的地方
      5. 注意力的均衡
         有些東西需要被簡單化，好讓另外的事物閃耀光輝
         
         05. 自我克制與精妙細節

         設計師總是在尋找制造沖擊力的方式，總是想做一個獨一無二的設計，創造些前所未有的效果。不過有時候通過自我克制也能形成沖擊力。量變產生質變，過多的“好”也會帶出不好的結果。好的設計師曉得平衡點在哪𓄧里，并且能避免讓過多的特殊效果毀了一項設計。

         “Things”網站上的柔和漸變

         對于我訪問過的站點，我總是很關注他們的細微漸變。聽起來可能有點惱火，不過我就是忍不住要去研究別人的那些小細節，以積累我將來設計時的靈感。漸變是最被濫用的設計方法之一，不過運用成功的話，還是能讓設計增色不少，它所能提供的真實感和深度感是其他技巧所不能達到𒁏的。大部分人都不太注意漸變，不過別人對漸變的運用確實是我最好的靈感來源。

         Icon Dock 上的投影

         Icon Dock的網站簡直就是各種精妙細節聚在一起開大會。像素級高光，漸變，以及投影。不過在這里我們只關注它的投影。不是很大，透明度也被調高，小心翼翼地烘托著內容區塊，讓其成為真正的焦點。實在漂亮~

         精細的背景材質：Scouting For Girls

         材質性背景要么成全你的設計，要么毀掉你的設計。很多復雜的背景除了分散讀者注意力，沒有帶來任何好處。最終使得設計品質大為降低。所以，最好還是一直保持你的背景材質細微而柔和。 Scouting for Girls的網站在運用材質打造整體風格和設計品質方面做得極好。

         
         

         做舊與撕碎的啟發： Viget Advance

         我從來不覺得越細微越好，任何細節的“細度”都以可見為前提。可能人們并沒有清楚地意識到，不過這些細節必定確實產生了影響。博客Viget Advance的例子中，在做舊與撕碎效果方面，能給我們一點啟發。 只是非常細微的做舊，不過如果沒有這效果，這張人造紙就會顯得平淡無奇，枯燥乏味了。正是這些ౠ小小的“不完美”讓這畫面顯得更可信，更真實。

         WebDesignerWall 上的水彩效果

         施用水彩使用體驗的同時，根本是要切實保障樣色混合型得至少細膩，濃淡發生改變適當，有時… 至少“水”。水彩使用體驗替我的規劃構思打造好多益處：精準而溫馨的多個色彩，染病力很大的板材感…… 正因是這樣的，愈來愈越多越好的規劃構思師決定了在它們的規劃構思中創新水彩使用體驗。

         精妙的植物：Dara’s Garden

         下面是一個充滿智慧的關于精妙植物細節的設計。網上還有很多更加栩栩如生的植物圖案，而且也非常漂亮，不過這個例子中，我關注的是背景上那些更清淡更微妙的細節。꧅這個例子展現了細節的重要性，柔和的色彩，做舊的效果，喚起你對細節的感知，不過卻并不形成為主要焦點。

         運用精妙細節的小貼士

         我我覺得，精妙小事能讓問題好的制作升魅族絢麗璀璨的制作。這樣你也在查找讓制作獨一無二的的方式方法，精妙小事是個很不錯的試穿趨勢。 下是有關用到精妙小事的小竅門：

         1. 創建細節圖層
            不要在一個筆刷或材質上吊死，多加些圖層，多做點細節
         2. 嘗試不同透明度和色彩
            有時候只有 3% 的不透明度也能產生正面影響
         3. 拒絕縮手縮腳
            不要擔心太多細微，或者太不明顯

            06.? 發揮色彩的全部潛能

            設置師普遍熱愛安裝自己的的品嘗來首選色調，這可實用太不專注了。要來決定那中色調是最適合的，你的大腦里想的會經常是產品品牌訴求，接著定好畫風的配合團體，同一其專有的主題風格和對象狀態。 網頁內容設計方案中冷暖色的運用的絕佳實例 無趣并不意味無色透明的：Oypro

            ?的網站讓我喜歡的地方是，他們告訴了我們，一項“無聊”的行業相應的設計并不一定也得“無聊”。通常企業的網站都不允許設計師有太多視覺創意上的發揮。保持簡單、單調、淡彩色成了不成文的規定。不過Oypro的例子證明，不用束縛自己，你也能創造出一個有足夠“企業感”的網站。

            讓色彩相互聯系：Tennessee Summertime

            Summertime in Tennessee(田納西州夏夜農業觀光) 是1種個充完動力的、光亮的，至關溫柔的停靠站。因此一切都看著都會為轉發夏夜活動而結構的定制的。該停靠站的使用了至關多有所不同對比色的高飽合度色，但每種種背景顏色等等圖片都切中需用害，并沒有1種沒有可以主旨的。高品味結構的定制的的感覺搭配方法必有和它要展示的服務管理或產品設備相互之間相關聯。好的結構的定制的并不總之需用費盡心力選部分十分出奇制勝的背景顏色等等圖片，看看那些最很深最該用的背景顏色等等圖片反之能造就較好的療效。舉個例子來說說(黑暗結構的定制的)，都要象征意義黑暗的火黃色其實說不上前。

            背景還可以大作文章：Saturized Studio

            只涂一層單調的背景色可沒法讓你的設計變得有趣。有一點變化的背影才是最好的背景。此例中我們看到，漂亮的橙/紅色被運用到各種各樣的光照和漸變效果中。這種為背景增加變化的做法，有效避免了平淡和沉悶。另一個需要特別注意的地方是，暗深橙色背景與上層明亮內容區的對比產生了非常戲劇化的漂亮的視覺沖擊。

            在網頁設計中運用顏色的小貼士

            彩色而你是必玩探索世界和品嘗的板塊。品嘗各種不同的三人組合發展能為設定產生無盡是。只不過考慮彩色和色彩穿搭穿搭時，是要做到對上邊的事項在我心含上數：

            1. 嘗試突破
               無趣的主題并不一定得使用無趣的色彩組合。
            2. 多變
               嘗試在你多彩的背景上使用漸變、重復圖案、筆刷，光有顏色可不容易讓設計顯得好看。
            3. 堅持主題
               確保你的用色與你需要呈現的產品/服務有關聯。

            
            

            07. 做別人沒做過的事

            最好的網站中有一些非同尋常的，奇怪的，甚至可以算得上詭異的設計。不過那些挑戰傳統的嘗試說不定會已經改變了傳統的定義。話說回來，要做到完全原創，創造出沒人做過的東西實在是設計過程中最難做的事。

            打破常規之后，成功與失敗只有一步之遙。你要么做出令人驚艷的聰明設計，要么做出一堆垃圾飽受批評。別人從來不這么做是有原因的，因為有些點子實在是糟透了。要從人們知道并喜歡的區域走出來，你得非常勇敢才行。下面是一些相關實例：

            MB Dragan 上的獨特導航

            不是你歌詞平常所見所聞的站名導行欄系統，但看下來或是個站點，同有哪些標準導行欄系統都的好。怎樣做有一點冒險手游，但然而更加適合該站點品質。很切題的制定，沒辦法讓消費者不觀賞這導行欄系統與一個制定相互之間的配合默契渾然一體。

            Visualbox(視覺盒子) 非常視覺化的導航

            Visualbox的站點就一指標，向你動態展示這些人滿電智慧人生的散文集。全部這些人沒有效幾ps文字，你第1 眼見到的是這些人的公司名字和散文集選集。 電腦鼠標滑過加載照片時，會提示 出項目品牌，點一下是會一起去流浪滑到網頁中本次的有效角度。他是比較快速而入門的解決方法策劃方案，同時還比單純地堆一文件列表起來要引人注意人得多。

            廢話不多說的Nikola Mircic

            統計假設你是位交互性構思師，你要有被人看過你的的小說集，能感動的故事得雇請你。Nikola Mircic 為各位顯示了“直截了當”對修筑兩個這令銘記在心的公交站名有太大的的效用。一打開微信他的公交站名，各方面風格特征的的小說集就向你問候，他的品牌名稱和職業類型放到頁頂的標題地方，自然，搞好關系鏈接搜索沒少。找不到大批多此一舉中圖片文字來勸告你選擇他，的小說集客觀存在就表明了他的水準。自然，點擊事件的小說集縮圖會出來兩個具體分享頁，底下會有至少的中圖片文字了。實用習慣他集體方面的玩法。

            實踐新鮮想法的小貼士

            上面的例子并不是為了“激發”你的獨特創意，只是一些我發現的一些很獨特的站點，僅此而已。事實上，你也不應該到處搜尋，尋找新想法的靈感，因為這樣你的點子也是受別人的啟發，與完全創新是相悖的。所以如果你打算做真的非同尋常的東西出來，就趕快忘掉這一部分！

            • 保證事物之間的聯系
              如果你打算做一些特別特別特立獨行的事，先問問自己“真的有必要嗎?”，“這樣說得過去么？”，“和品牌訴求符合嗎？”…… 如果答案是肯定的，再采取行動！
            • 忘掉所有已知事物！
              好吧其實也并不是所有，基本原則還是要的。話說回來，也沒必要從全新的想法里面尋找靈感，因為那樣很容易誤入歧途。
            • 保證品質和水準
              基本上我覺得如果你的新想法足夠好，判斷品質究竟如何對你來說應該很容易。

            對于高品質設計你有什么看法？

            讓一項設計因高品質脫穎而出，實在涉及到太多方面。我只能說我列出了一些基本要點。所以我希望能聽聽您對這一問題有何高見？在判斷一件網頁設計作品是否顯示出高品質時，你最關注的是什么呢？

            推薦閱讀(均為中文譯文)：

            • 對于設計細節中的光影效果，你還可以參考：《》
            • 與此文類似，但更加簡潔的分析和技巧：《》

            關于作者與譯者

            原文出自，作者是?，初發表于2009年4月13日。

            譯文由翻譯。原始網址：?。