就是愛分享
在製作網頁時,一般都會思考目標使用者是誰、這個網頁主要是給誰看的。「思考使用者」這件事可說就是在選擇網站上所要公開的內容種類。也就是說,如果是給不特定多數的使用者看的,最優先考量的就是內容要單純、確實、好操作等特點。如果針對的對象是對流行時尚有興趣的女性,就要優先考量高級品味、令人印象深刻等特點。目標對象不同,網頁樣式也就隨之不同。千萬記住網頁對象可說是決定網站設計方向的舵手。整合主題、目的、瀏覽對象、需要的功能等,就等於是在進行設計了。

選擇網站建構技巧
想做出不同樣式的網頁,有時候就必須選擇網頁建構技巧。本書當中將樣式設計與製作技巧完全切割開來,因此並不說明各種技巧。但是,了解網站的用途和技巧的選擇大有相關。例如像流行時尚的網頁和以最新話題為主的網站,就會需要大量運用視覺效果,如提供影片等嶄新的表現方式。這時,Flash這類聲光效果豐富的內容(rich contents)就會比較適合。此外,要讓任何人都能方便瀏覽操作的公眾網站,則需要以XHTML或XML來建構所要提供的資訊。在進行網站製作時,至少在主題、使用者、建構技巧這三項上必須要選對。

不要陷入形式化的設計模式
確立好上述三項後,網站樣式就能分出屬於那種題材。公眾網站就會做得像公眾網站、企業網站就做得像企業網站。但是要特別注意,在實際製作網頁時,一直想著要做出該主題的典型樣式,反而容易造成忽略使用者的觀點,落入千篇一律的巢臼。

地方政府單位、教育相關網站的設計


公眾性高的網站,重視使用方便性
公眾性高的網站首重資訊的結構、連結的方便性,最後才來講究樣式。「連結的方便性」對使用者最重要,對連接使用者與網站的瀏覽器等瀏覽工具也很重要。這種網站在建構時要確認標準語法(例如XHML等),要求該加的標籤(tag)是否都正確加上去了、是否有多餘的裝飾會影響使用者操作等。這些都做到了,再來強調清楚易懂,讓網站更平易近人。

必須要有連結性(access ability)的網站
地方市政府、教育相關單位必須要讓使用者能連結取得公共資訊服務,這樣的考量是很重要的。現在越來越多各級縣市政府開設網站來介紹市政建設,與接受民眾諮詢,因此特別重視網站連結性。

Design Samples
http://www.pref.niigata.lg.jp/
新瀉縣
要連結到災害資訊中心,與使用搜尋工具都非常簡單容易。

http://www.pref.kumamoto.jp/
熊本縣
最新消息放在中間,優先順位很清楚。

http://www.jpo.go.jp/indexj.htm
特許廳
提供了相當清楚的全區導覽。

醫療、生活資訊網站的設計


簡單、一目瞭然最重要
談到疾病或醫療等總讓人覺得高深困難,但我們可以透過設計讓網站看起來單純、簡易,以改變這樣的印象。網頁內容較為困難時,可以適時加入圖片,這樣不但有助於理解,還能緩和文字給人的壓迫感。內容越是困難,就越需要大量使用簡單的圖像,或清楚易懂的插圖來解說。

MEDINE
MEDINE(MEDIars on LINE)是醫療資訊搜尋網站中全球知名的資料庫,由美國National Library of Medicine管理,裡面可以查到世界70個國家出版的最新醫學期刊,包括文章與重點集結。雖然幾乎都是英文,但長久以來一直都吸引很多人來瀏覽查詢。

Design Samples
http://www.ihealth.co.jp/index.html
ihealth☆健康線上網站
插圖與裝飾讓畫面更平易近人。

http://us.pampers.com/globalsplash/languagejump.jsp
pampers.com
採用品牌顏色,讓畫面呈現一種值得信賴的感覺。

http://www.bbc.co.uk/health/
BBC Health
用動脈和靜脈的配色將資訊分組。

一般企業網站的設計


定型化的設計能有效傳遞資訊
多數的企業網站都運用相同架構的設計,一般都是在網站LOGO及全區導覽的標頭下方,依序放入與該企業產品相關的關鍵影像,和最新資訊的主題區塊。這樣的樣式讓企業類型網站的操作性具有一慣性,使用者也可說相當熟悉。因此,只要在關鍵影像或網站LOGO、導覽樣式的設計上呈現自己的風格,就能輕易和其他公司做出區隔。

全區導覽的位置要放右邊
全區導覽一直以來總是被放在畫面左邊,現在有人開始反向操作,換到右邊來了。畫面左側在使用最小的瀏覽器時,由於能讓畫面左側的資訊完整呈現,一直以來都被視為是選單顯示的最佳位置。但顯示完整範圍的800×600像素顯示器,畫面右側幾乎不管出現資訊被切斷的情形,也許就是基於這樣的理由,他們覺得放在右邊(常用的捲軸都在右邊)會更好。另外,左側本來就有瀏覽器原有的操作功能,為了避免搞混,放在右邊才是更好的選擇。

Design Samples
http://www.lego.com/en-US/default.aspx
The Official Web Site of LEGO
關鍵影像下方有各個導覽詳細內容介紹。

http://canon.jp/
Canon
關鍵影像和小標題區分開,是很典型的樣式。

http://www.ford.com/
Ford Motor Company
這個設計樣式中導覽結構單純、且很有穩定感。

IT相關企業的網站設計


利用視覺元素轉變印象
提供IT服務或產品的網站,其中的內容大多都可分為針對法人與針對個人兩種。針對法人的網站,內容大多包含技術性等難度較高的資訊內容,及企業本身的公司資訊等。針對個人使用者的網站內容,則應該要稍微簡單易懂些。可是由於各個資訊的入口太多只有一個,所以要儘量用門檻較低的呈現方式,讓網站有自己的個性表情,打出企業的品牌印象。尤其如果能適當加入關建影像,會讓網站更具親和力。

表格設計已經過時了?
表格標籤本來是用來製作表格的,但是卻用網頁編排設計之用,但是這種情形聽說不久的將來就會消失,因為今後主要的網頁建構法,將是用CSS和XHTML來將資訊與樣式的定義分開。從重視資訊架構型態的網路架構來看,使用表格就好像是用麻將牌來蓋房子一樣,雖然沒有什麼做不到的,但就是沒什麼意義,因為別的方法更有效!看來,重新思考標籤本來用途的時期已經到來。

Design Samples
http://cybozu.co.jp/
Cybozu
一貫重視幽默的網站風格,已經昇華為品牌力量。

http://welcome.hp.com/country/jp/ja/cs/home.html
日本惠普株式會社
印表機和影像的質感完全統一。

http://www.siemens.com/entry/cc/en/
Siemens AG
該公司經營的產品項目雖多,卻不會給人繁雜的印象。

介紹產品的網站設計


重視樣式的高層次設計已成為主流
有特定主打商品的企業網站、或介紹新產品的商品活動網站,這類以傳達商品資訊為主要目的的網站,要求的重點不只要有資訊、還要有創意。商品能否讓瀏覽者印象深刻,決定了這個網站是否成功。在這種情況下,Web也被要求設計得要有CM或雜誌廣告等促銷活動的效果,所以這種網站的最優先課題就是保持視覺資訊的質感。不只要有質感愈高級愈好的產品照片,還要有不影響照片品質的文字設計。

Affordance
網站建構的技巧當中,對於滑鼠碰到選項按鈕時而引發的動作我們稱為Affordance。這是將研究生態心理學的James Jerome Gibson提出來的概念再重新給予詮釋的名詞。這個詞一般意指環境會影響人類的行為、行動的方向。下雨了就躲到石頭下,這種人類因自然現象發生的變化而採取的行動,才是原本Affordance的真意。

Design Samples
http://www.peugeot.co.jp/index.html
Peugeot Japan
網站風格統一為「和消費者談車」,相當簡單。

http://www.symantec.com/ja/jp/index.jsp
symantec
全部設定為企業形象的色彩,算是刺激性較強的設計。

http://www.fritzhansen.com/en/fritz-hansen.aspx
Fritz Hansen
整體的設計樣式,能讓人感受到產品的性能。

展出作品集的網站設計


做個讓作品看起來更具效果的網站
網站有時也會用來發表自己的照片或插圖、或是介紹創作者、製作公司的作品及工作。有的網站會用Flash將整個網站化成作品的展示間,有的則是以縮小的照片來陳列作品,方向可以有很多種。最近有些網站則是運用部落格的功能讓瀏覽者觀看之外,還能讓人閱讀文字內容。樣式種類雖然很多,但他們共通的特點就是主題性很強。製作東西本身的行為本來就需要有個主題,不然就無法進行下去。

部落格會對網站造成什麼改變?
現在大受歡迎的部落格不用軟體工具就能更新,其中又以管理容易、能及時提供新資訊給使用者的RSS技術最受矚目。RSS主要透過RSS READER軟體來將最新資訊提供給使用者,但是這個工具和技術其實有可能會改變網站的使用方式。過去,使用者都是從入口網站直接跳到其他網站,但有了RSS就可以直接跳到部落格。入門網站週邊的廣告可想而知,效益會越來越低,因此部落格可能會成為改變金錢流向的要素之一。

Design Samples
http://www.hi-res.net/
Hi-Res!
結構雖簡單,但是還是能讓人感覺到這是個作品集網站。

http://www.joshuadavis.com/
Joshua davis
呈現製作的介面(interface)。

流行時尚相關的網站


加入尖端的發想
要讓網頁呈現出流行感,就是不斷將發明的創意化為有形,表現方式往往都要著眼於未來性。這樣說來,好像流行時尚的網站就沒有樣式可言了,不過懷疑Web的既定常理,是不管什麼網站都是共通的。使用性、連結性、SEO等評量一個好網站的標準,都是因為使用者有這類的需求。在流行的領域所追求的是超越使用性、能刺激視覺與聽覺的要素。這種網站的企劃要展現出重視先進與自由的感受。

什麼是使用性?
方便使用的網站就稱為使用性好的網站,但使用性好不好還需要檢查操作步驟才知道。具代表性的評量方法為「專家評量(Heuristic evalutation)」以及「優使形測試(Usability Test)」兩種。前者是由學者專家評估,後者是由使用者實際使用過後寫下意見。沒有經過這些是無法定論使用性佳不佳的。所以這還真不是件簡單的事呢!

Design Samples
http://www.theapt.com/
The Apartment
強調理性和都會生活這樣的訴求。

http://nikerunning.nike.com/nikeos/p/nikeplus/language_tunnel/
Nike Free
商品的質感從照片和圖形之中就可感受到。

http://www.ikea.com/
IKEA
這個網站的發想是要顯現模特兒立體旋轉的空間。

食物相關的網站設計


傳達樂趣的顏色與形狀
以食物為主題的網站有食品業者、食譜網站等。即使是以資訊傳達為主的企業網站,也必須創造值得放心、很有樂趣的印象。這時可以大幅採用令人聯想到食物的顏色,以及讓人感覺很開心的插圖。這樣的樣式會受小細節影響,例如有的時候文字內容陳述很多,不如用簡單、但四個角落很穩的表現方法來呈現會更美,所以在處理時要儘量小心這些小細節的部份。

影像解析度
顯示器上看影像的最佳解析度為72~96 dpi。「dpi」是指一英吋內有幾個點的單位數。列印黑白影像或傳單只要144dpi,商業用的就要300dpi。有時候影像解析度很高,可是顯示器上顯示的大小可能較小;有時候即使只有72dpi,但是畫面大小高達1200像素,這樣還是可以列印出不錯的品質,所以不能光用看的來判斷解析度大小。

Design Samples
http://allrecipes.com/
All Resipes
畫面很平易近人,令人很安心。

http://www.marthastewart.com/
Matha Stewart Living
感覺這家餐廳有點知性,不喜歡和別人一樣。

http://www.betterhome.jp/index.php
Betterhome的料理教室
內容多但卻看起來很簡單,讓人感覺到行家在料理的世界裡自在遊走,游刃有餘。

design note
設計與品牌
企業或商品要用某種既定的圖形或顏色來表現,以擴大其圖形認知度,甚至要讓人們從該圖形輕鬆就能聯想到企業或商品。這一連串的行為就稱為「品牌戰略」。在品牌戰略中,Web或適合促銷的印刷媒體所被賦予的角色功能就很大。這些是除了商品本身以外,讓品牌直接讓客人看到的機會。當然這些成果一定得要能展現品牌印象才行。

那麼有方法能讓品牌反映在設計上嗎?有。不用說,基本上沿襲企業形象色彩或標誌即可。品牌戰略就是向企業形象這樣,先定下所有媒體都要呈現的元素,再來談及其他的。所以只要將這些元素反映出來,就可展現一貫的品牌印象。但如果以為這樣就可以放心的話,那又太早了些。Web網站的設計,有時候是很難如己願地呈現品牌印象的。即使是徹底遵照企業形象手冊來建構網站也一樣。原因就是樣式的持續時間不夠。也就是說,網站設計大幅更新,既定的印象也會隨之重新改變。

光是企業形象並不代表品牌印象。網頁設計整體給人的印象,有時是會超越企業形象等「零件」功能的。設計格式包含功能或品牌印象等看得見的要素,及需要操作的要素等所有要素。這在介面設計(interface design)用語中就稱為「外觀與感覺(look and feel)」。而這個外觀與感覺也是品牌印象。蘋果電腦從2000年到2006年,Web網站上的外觀與感覺都還沒改過。持續使用相同的設計及持續相同設計格式的開發,對品牌戰略而言實為重要。

--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
0 Responses