TechOrange
Blog > 平台、開發與通路 > 網頁設計，怎樣最美？

網頁設計，怎樣最美？

[ 平台、開發與通路 ]
於 2012-10-29 16:05:21 發布
Tags :
關於作者
36氪

編按：本文譯自網站設計公司 weavora.com，介紹了在他們眼裡 8 個 Web 設計趨勢：單頁面、用照片做背景、色塊設計、超大號的圖片、聚焦簡潔、響應式設計、視差滾動、強調字體，每個趨勢後面都附了數個案例，相信對網站設計師會有一定的參考價值。

  • 像蘋果網站的單頁面

單個長頁面的設計一度不受人待見（無論是客戶還是設計師），但現在整個網路隨處可見。一個合理的解釋是，用戶現在早已習慣於使用鼠標滾輪了，比起在多個頁面間來回查看，用滾輪上下瀏覽要省事得多。

包括蘋果在內的一些知名大公司也使用了相當長的頁面來展示產品，獲得了很不錯的效果。

更多例子：

http://www.apple.com/iphone/features/

http://www.visualboxsite.com/

http://www.versapay.com/

http://www.fitbit.com/

http://cageapp.com/

http://www.squarespace.com/

  • 用品牌、商品照片做背景

出於品牌或展示的目的，把照片用做網站的背景，這樣可以形成強烈的視覺表達效果。這也是為何你能在時尚、服裝品牌、旅遊業等等行業看到這樣的設計辦法。

更多例子：

http://www.biamar.com

http://alexarts.ru/en/index.html

http://www.davidia-int.hr/

  • 色塊方格設計

這一設計方法主要是引入了方塊的網格設計，這些方塊要嘛是純色塊配上文字，要嘛是方形照片配上文字。

「簡潔」是吸引用戶的一大原因，而不同的色塊放在一起形成強烈的對比，容易引起用戶的視覺興趣，進而繼續探索下去。

更多例子：

http://dynamit.us/

http://lithium.com/

http://landor.com/

http://www.pepsi.com/

  • 超大號的圖片

這一潮流的興起，多少與 Mac OS X 圖標設計的流行有關。當工程師為自己的 Mac 程式推出網站時，這樣配有超大號圖片、突出品牌的設計再常見不過。自然地，這一潮流後來也被 iOS 開發者繼承了下來，成為現代設計文化的一部分。

更多例子：

http://www.zennaware.com/cornerstone/index.php

http://panic.com/

http://versionsapp.com/

http://www.piictu.com/

http://www.enstore.com/

  • 聚焦簡潔

對簡潔的追求貫穿了整個2012年，許多的網站開始尋求明快、直觀的設計。

極簡設計旨在透過整合或是刪除多餘的頁面實現簡化，只給用戶需要的東西。極簡設計通常會用到大號的加粗字體、超大號的圖片，清晰地把重要的東西傳達出來。

更多例子：

http://basecamp.com/

https://www.dropbox.com/

http://www.checkoutapp.com/

http://www.htc.com/

  • 響應式設計（Responsive web design）

隨著手機和平板設備越來越多地進入人們的生活，響應式設計也成為了當下網站開發不可忽視的一股力量。一個可自適應任何設備的網頁是很了不起的，響應式設計能確保用戶無論是在行動裝置，或者在 PC 上都能按你的意願瀏覽內容。

更多例子：

http://www.nealite.fr/

http://twitter.github.com/bootstrap/

http://www.fork-cms.com/

http://www.floridahospital.com/

  • 視差滾動

所謂「視差滾動」（Parallax Scrolling）就是讓多層背景，以不同的速度移動，形成運動視差 3D 效果。隨著越來越多的瀏覽器增加對視差的支持，這一技術也很有可能會更加流行。

更多例子：

http://benthebodyguard.com/index.php

http://www.tokiolab.it/#/

http://chartbeat.com/

http://inze.it/

http://titanic.q-music.be/

http://www.noleath.com/noleath/

  • 強調字體

從前，設計師所能使用的字體，受用戶電腦本地已有的字體所限；現在，借助 Google fonts 和 Typekit 等服務，從理論上說，你能使用的字體是無限多的，極大增強了網站設計的吸引力。設計師利用這一機會也已有了一段時間了，越來越多的網站也體現了對字體的重視；甚至有些網站如 Typographica，字體就佔了整個網站設計的絕大部分，出來的效果也相當不錯。

更多例子：

http://nicehair.org/

http://bitfoundry.ca/

http://daneden.me/type/

相信以上的這些設計方法會流行相當長的一段時間，當然，你也可以發揮創造力，有機地組合它們，做出優秀的網站。

（資料來源：weavora）

延伸閱讀

Skype創新記錄，同時在線2,700萬人
2011-01-12

老牌書籤網站 Digg 宣佈重回戰場，但大家還想玩嗎？
2012-08-03

7 大理由：為何 Facebook 不該推出 Facebook 手機
2012-05-29

梅西百貨這樣做電子商務：增加線上訂單履行中心，實體賣場成物流倉庫
2013-04-15

吹熄燈號！地圖日記終止社群服務，快上去備份你的日記和相片吧！
2011-11-16

Previous Post Adobe 問卷調查結果：網路廣告不過是一堆垃圾 Next Post 地球上 IQ 最高 15 位：聰明人就是長這樣！
  • G.J.Robert Ciang

    請不要雜用「響應式」、「自適應」等非臺灣中文資訊用語。看不懂。

  • 路過的

    想請教應該如何翻譯會比較適合本地呢?

  • http://www.facebook.com/nochingyo 游諾青

    Responsive Web Design的臺灣中文資訊用語是什麼呢@google-fe85adcd79136dcfe5e65dc1556d12b7:disqus
    這點我還蠻好奇的^ ^”

  • G.J.Robert Ciang

    你好 :)

    乍看原文字面，responsive web design 以臺灣本地常見的用語「直翻」的話可能是「回應式網頁設計」，因為臺灣習慣將 respond 對應到「回應」而非「響應」（臺灣中文的「響應」也是動詞，但指的是對別人的言論或行為進行正面的認可、跟從）；和「響應式」（個人推測來自中國）只差一字，似乎問題不大。

    不過，又查了英文維基百科定義（http://en.wikipedia.org/wiki/Responsive_web_design ），感覺 responsive web design 字面可能比較不容易聯想到實際意義，所以即使照字面翻出，仍不一定達意。（easy reading and navigation with a minimum of resizing, panning, and scrolling 和「反應」、「回應」有什麼關係？！）如果要讓翻譯更理想的話可以進入意譯的思考。

    再往下看維基百科 Elements of responsive web design (RWD) 一節，才看懂了，原來 responsive 指的是網頁透過 CSS 的設計，懂得針對使用者所用裝置、螢幕解析度大小不同而自動調整佈局，讓網頁在不同裝置上都能自動呈現最理想的閱讀外觀。如果在這層理解基礎上要想個比「回應式/響應式」更好的翻譯，確實是挺難的。如果在這裡把 respond 解釋為類似「適應」，則 responsive web design 可翻「適應式網頁設計」，或許較能兼顧原意及字數經濟。

    「自適應」的話學問不大，兩岸表達「對自己」、「自動」、「自行」意義的副詞，如果後面接的動詞是一個字的話，兩岸可能都講「自X」，如「自省」、「自主」、「自滿」、「自喜」；如果後面是接兩個字以上的詞，中國會講「自XX」，臺灣就看情況改成「自我XX」、「自動XX」、「自行XX」即可。網頁「自適應」可改為「自我適應」～

    （稱「中國」不稱「大陸」係反映個人政治見解，尚請網友海涵此一各自表述，如有不喜請自行代換成習慣的用語，謝謝～）

  • Alex

    超級受用的分享，很棒的文章！

  • G.J.Robert Ciang

    嗨嗨 @facebook-1168398304:disqus 我上面回覆 @b9f0c0b3c3ac6890c303295f467dfa03:disqus 君了可參考 :) 我在工作上還極少遇到這個詞，查了一下 Google （https://www.google.com/search?q=responsive+web+design&num=100&hl=zh-TW&newwindow=1&client=firefox-a&hs=TGZ&rls=org.mozilla:zh-TW:official&prmd=imvnsb&source=lnt&tbs=lr:lang_1zh-TW&lr=lang_zh-TW&sa=X&ei=eeuPUOCpDMjOmAWAi4GQDQ&ved=0CBoQpwUoAg&biw=1598&bih=788 ）只有「主動回應設計」可能算也是臺灣土產的翻譯吧，但偏直譯，不易意會出原義。另外就剩下舶來的中國翻法「自適應網頁設計」了，這我實在非常不推，和臺灣人的中文語感極為扞挌。

    因此提出「適應式網頁設計」聊備一說啦～

  • Miu

    翻譯本來就是譯義不譯字, 愈貼近中文愈好, 「響應式」這種翻譯固然是錯, 然而「自動適應」這種用詞也實在洋化…

    英文用responsive, 其實是偏向人工智能的用語, 說得網頁好像會乖乖聽話自己作變化, 如植物一樣會隨環境變化, 但我們中文電腦術語從來沒有這種選詞的傾向, 所以「自我適應」, 「自動適應」這些都應該是較西洋和科學(學科)的翻譯方法. (像我上地理課就常會看到這類看到頭痛的詞語,,

    其實responsive設計就是偵測不同熒幕大小,然後調整layout來方便讀者觀看. 這樣解釋過後, 你也知道用「自動調整」, 「調整式網頁」比甚麼「響應」「適應」來得淺易明白和「靠近」中文…

  • G.J.Robert Ciang

    同意，您的譯法更好！

  • http://www.facebook.com/william.ruiyang 吳瑞洋

    The article worth Nobel prize.

關於我們
TechOrange，專門追蹤全球網路產業的科技網誌。 提供網路創業者、行銷人員、媒體人員關於網路的 資訊與知識是我們的任務。文章輕薄短小，吸收科 技新知沒負擔，每天大概花吃顆橘子的時間來瀏覽就夠了。

找報橘tips@techorange.com
媒體合作請來信 pr@techorange.com
TechOrange 科技報橘  ©2011 All Rights Reserved.
Real Time Web Analytics