國外25個最佳樂隊和歌星網站

原文：國外25個最佳樂隊和歌星網站

譯自：25 of the Best Websites of Bands and Musicians

國外請尊重版權，轉載請註明引用來源，多謝！
通常，各種類型的娛樂行業相關的網站可以用來啟發你的設計靈感。樂隊和歌星需要有一個能夠吸引訪問者並為其粉絲提供他們所有必需信息的網站。本文我們將為大家推薦國外的25個設計非常棒的樂隊和歌星網站。
這些網站看起來都很潮，它們使用了當前比較流行的一些設計元素，比如：大字體設計、大背景圖、手繪元素、塗鴉背景等。
當然，國內的和港台的一些明星的網站設計的也是非常棒，我們最近也將收集一些設計最好的中文樂隊和明星的官方網站，以給大家提供參考。

文章來自baystars design網頁設計公司

11個創意jQuery畫廊插件

由kulando.de整理的jQuery圖片切換效果插件。
德文原文地址：http://webstandard.kulando.de/post/2009/07/16/creative-image-galleries-by-jquery
FullScreen Image-Gallery

SupersizedGallery

ImageRotator
Galleria
Content-Gallery
Galleriffic
EasySlider
看中文介紹的猛點此處：http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/
ImageScroller
Slider
ImagesSwitch

PanoramaView
文章來自http://jsssc.cn/creative-image-galleries-by-jquery/
文章提供BAYSTARS DESIGN網頁設計公司

Web可用性設計的247條指導方針

譯序：Userfocus是英國一家專門從事網站可用性設計的咨詢培訓公司。它為我們分享了247條Web可用性設計的指導方針，並把它們清晰的分為六個大類：首頁可用性設計、任務導向、導航和信息架構、表單和數據輸入、可信度、寫作和內容質量、頁面佈局和視覺設計、搜索可用性、幫助反饋和容錯。如Userfocus所說，“雖然易用性系統的設計遠不止應用一些簡單的指導方針，但是它們卻可以為獲取穩定性和好的實踐提供有意義的幫助。”
原文地址：http://www.userfocus.co.uk/resources/guidelines.html

目錄：
首頁可用性設計（20條評估首頁可用性的方針）
任務導向（44條評估網站對用戶任務支持程度的方針）
導航和信息架構（29條評估導航和信息架構的方針）
表單和數據輸入（23條評估表單和數據輸入的方針）
可信度（13條評估可信度的方針）
寫作和內容質量（23條評估寫作和內容質量的方針）
頁面佈局和可視設計（38條評估頁面佈局和可視設計的方針）
搜索可用性（20條評估搜索可用性設計的方針）
幫助、反饋和容錯（37條評估幫助、反饋和容錯的方針）
首頁可用性設計
首頁元素要清晰的關注用戶的關鍵任務（避免“增加功能傾向（featuritis）”）
如果網站比較大，那麼首頁應包含搜索輸入框
首頁要十分清楚的提供產品（內容）分類
在首頁或首頁內一次點擊展示有用的內容
信息展示時應當是簡單的、自然的、符合邏輯順序的
在首頁展示真實網站內容的優秀示例
首頁上的鏈接以最重要的關鍵詞作為起始（例如：“Sun holidays”而不是“Holidays in the sun”）
在首頁提供一個最近的特色項列表，並提供存檔內容的鏈接
首頁導航不要過度格式化（修飾），確保用戶不會把它誤認為廣告
在首頁清晰的聲明價值取向（例如一個標誌性的口號或歡迎語）
在首頁包含有意義的圖案設計，而非無關的剪貼畫或繪畫作品
導航選項按邏輯性或用戶導向方式排序（把次要的公司信息放在底部）
首頁標題（title）可以為諸如google等搜索引擎提供良好可見度
所有公司相關信息安排在一個顯著區域（例如：“關於我們（About Us）”）
用戶可以瞭解到價值取向
一看到首頁，第一次訪問的人就知道從何處開始
在首頁展示出所有主要的操作選項
首頁擁有一個易記的URL
首頁需經過專業設計，以給用戶良好的第一印象
首頁的設計要能激發用戶探索站點的興趣
首頁就要像一個首頁，不能讓用戶把它與二級頁面混淆
任務導向
網站應避免出現不相干的、多餘的或讓用戶分心的信息
避免過多的使用腳本、小應用程序（applets）、視頻音頻文件、圖案和圖片
網站應避免不必要的登記
關鍵人物路徑必須是清晰的，無干擾的（例如：購買、捐獻）
信息以簡單的、自然的（natural）、符合邏輯順序的方式展示
應盡量縮減每個任務需要的屏幕數量
應減量減少頁面滾動（scrolling）和點擊
網站應正確的預期和提示用戶下一步可能的動作
展示圖表時，確保用戶可以看到真實數據（例如在柱狀圖上標明數字註解）
當分配給用戶任務時，應充分利用計算機的優勢（例如搜索輸入的自動完成功能）
用戶可以快速完成普通任務
當必要時，應為當前任務提供數據對比功能（例如：商品比較）
任務順序應當與用戶日常工作順序一致
網站可以保證用戶的工作比不使用它時更輕鬆快捷
最重要的或經常使用的主題、特徵或功能應放在頁面中央附近的位置，而不是特別靠左邊或右邊
確保用戶不會重複輸入相同的信息
重要的、頻繁使用的主題或任務應接近網站的“表面”
保持最少的錄入（例如購買過程中），並為用戶提供加速器
任何給定任務路徑應當有一個合理的步驟長度（2-5次點擊）
當一個任務有多步時，網站要告訴用戶完成任務需要的所有步驟，並為用戶當前步驟所在的位置提供反饋
在每個產品後面緊跟它的價格
可以非常容易的找到網站的隱私策略，尤其是在那些要求填寫個人信息的頁面。隱私策略應當是簡單的、清晰的
網站用戶不需要記住從一個地方到另一個地方的信息
隱喻的使用可以被典型用戶輕鬆理解
數據格式應當遵循文化常規
軟件的內部工作細節不要暴露給用戶
應當迎合用戶那些之前已經養成的那些小的互聯網習慣
網站應當易於用戶瀏覽，在執行前可以自己嘗試其它的功能操作
第一次到訪的典型用戶應當可以在不需幫助的情況下完成最常用的功能
當用戶回到網站時，用戶可以記得如何執行主要任務
那些新穎設備（novel device controls）的功能應當是顯而易見的
在購物車頁面，在頁面的頂部或底部應當清晰的展示”處理結賬”按鈕
重要的操作入口（例如“添加到購物車”）應當非常清晰可見
操作按鈕（例如“提交”）應當由用戶觸發，而非在完成所有選項時系統自動觸發
命令或操作項英以按鈕的形式的展示（而非例如鏈接）
如果用戶在事務處理中中途退出，用戶在稍後返回站點時可以繼續他退出之前的工作
當頁面展示大量信息時，用戶可以排序和過濾信息
按鈕或圖標上的圖像應當與內容相關
當用戶被系統自動註銷時應當提示用戶，並且自動註銷的時間間隔要恰當
不必要的功能（例如flash動畫）可以被關閉或跳過(skip)
網站應當是健壯的，並且所有關鍵功能可正常工作（例如不應有javascript頁面異常、CGI報錯或死鏈接）
網站通過不同程度的說明來支持新手用戶和專家用戶（例如幫助信息、錯誤信息）
網站允許用戶重新填寫一些信息項（例如更改發貨地址、更改賬戶信息）
網站允許用戶自定義操作時間參數（例如自動退出的時間）
導航和信息架構
關聯頁面或區域間的跳轉移動應當是方便的、顯而易見的，並且可以容易的回到首頁
在絕大部分頁面都可以輕鬆的導航至用戶最可能需要的信息
導航選項按照最常用邏輯或任務導向方式排序
導航系統應當是內容寬泛並層級較淺的，而非有比較深的層級
站點結構是簡單的，有一個清晰的概念模型，沒有不必要的層次
在所有頁面都可以到達網站主要部分（持久導航persistent navigation），導航過程不會中斷
導航標籤放在頁面頂端，而且要設計成看上去可以點擊的樣子
要有一個站點地圖用來提供整個站點內容的概況
在任何頁面都可以鏈接到站點地圖
站點地圖提供一個簡潔的網站概貌，而非主要導航的重複或各主題的簡單羅列
提供良好的導航反饋（例如顯示當前位置）
分類標籤應當能準確描述該分類的信息
鏈接或導航標籤包含用戶要達到目標所尋找的“觸發字眼（trigger words）”
術語和常規（例如鏈接顏色）應當（近似地）與互聯網習慣用法保持一致
在網站各個組成部分中的鏈接樣子應當一致
產品頁面應當包含與當前產品相似或互補產品的鏈接，以實現交叉營銷
導航項和鏈接中的用詞應當是無歧義的，並且使用術語
用戶可以排序和過濾目錄頁面（例如按價格排序或最熱門排序）
當鼠標放在某個可點擊的元素上時，元素應當有明顯變化（包括光標的變化）
重要內容可以通過不止一個鏈接訪問到（不同的用戶有可能需要不同的鏈接標籤）
僅用於導航的頁面（例如首頁）可以再不滾動的情況下瀏覽
觸發事件的超鏈接應當與鏈接到其它頁面的超鏈接（例如：下載）在外觀上有明顯區分
網站允許用戶控制交互速度和順序
在網站每個頁面清晰標注退出入口，允許用戶從當前任務中推出，而不必通過一個額外的對話框
網站不可禁用瀏覽器的“後退”按鈕，“後退”按鈕應當在每個頁面的瀏覽器工具欄上都有顯示
用戶點擊瀏覽器後退按鈕時，總能回到他之前所在頁面
購物車（basket）和結賬（checkout）鏈接應當在每個頁面中都可以看的十分清楚
如果網站有打開新窗口，那麼這個動作不應使用戶困惑（例如：新窗口應該是一個設定大小的對話框或並可以輕鬆關閉）
菜單的使用說明、提示、相關信息應當在每個屏幕的同一位置顯示
表單和數據輸入
數據輸入框在適當的時候應當包含默認值，顯示要填的數據格式和輸入框允許輸入的長度
如果任務設計源文件（例如紙張形式），那麼界面應當與源文件的規格一致
網站能自動完成格式化數據的輸入（例如貨幣符號等），用戶不需要輸入類似£ 或 %的符號
表單域的標籤應當清楚的說明該輸入框希望輸入什麼
表單中的文本框應該為預期答案設定合理長度
表單中的必填項和選填項應當有明顯的區分
登陸和註冊應當用相同的表單（就像Amazon一樣）
如果完成表單需要外部信息的話應當提前告知用戶，例如護照編號
表單中的問題項（輸入框）應當按邏輯分組，並且每組都有一個標題
表單域應包含提示、示例或樣例答案，告知用戶輸入框期望輸入什麼
如果輸入框的標籤以表單問題的方式提出，那麼這些問題應當是陳述清晰、簡單的
在表單中，相對於文本輸入框，應當優先使用下拉菜單、單選按鈕、復選框（文本輸入框不應當使用過度）
在數據輸入頁面，光標應當被放置在需要輸入的地方
數據輸入（例如日期）和輸出（例如數值單位）的格式應當被清晰標明
用戶可以在進輸入一些基本必要信息就可以完成簡單的任務（系統可以默認補充一些不重要的信息）
表單允許用戶盡可能久的保持一種簡單的交互方式（例如，用戶不必在鍵盤鼠標間不停的切換）
用戶可以更改表單域的默認值
文本輸入框需指出要輸入數據的數量和格式
表單在提交前執行數據驗證
在數據輸入界面，在適當的時間執行表單域級別驗證和表單級別驗證
網站應可以輕鬆地更正輸入錯誤（例如，當驗證表單未完成，應當將光標放置在需要輸入的位置）
數據輸入和數據顯示應當保持一致性
表單域標籤應當靠近輸入域（例如：標籤右對齊）
可信度
內容應當是最新的、權威的、可信賴的
網站有第三方（例如引用、第三方使用見證）來說明信息的準確性
應當清晰標明網站的幕後有真實的組織（例如：提供一個真實地址或辦公室照片）
公司有一些認證專家（可以使用一些憑證）
網站應避免廣告，尤其是彈出式廣告
在結賬的最一開始就突出提示運送費用
網站應當避免空洞的營銷辭令（marketing waffle）
每個頁面都應當清晰顯示站點標識，保證用戶確認他仍然在同一個網站上
通過網站可以輕鬆聯繫到某人以獲取幫助，並可盡快得到回復
內容是新鮮的，網站應經常更新，總包含最近的內容
網站應當避免版式錯誤和拼寫錯誤
用可視化設計來補充商品和線下營銷信息
網站組織應當有一些真實的人，他們是誠實的、可信賴的
寫作和內容質量

網站有能引起別人興趣的、獨一無二的內容
正文是簡明的，沒有不必要的說明和歡迎辭令
每個內容頁應以內容結論或內容意義啟示作為開端，正文以倒金字塔方式書寫
相對於敘述式的文本，網頁應當優先使用無序列表和有序列表
列表應當以簡短的說明作為開始，幫助用戶意識到該列表是如何與其它關聯起來的
那些最重要的列表項應當放在列表的前面
信息應當分層次組織，從一般的到具體的，組織結構應當是清晰的、符合邏輯的
內容應當專門為互聯網（Web）創建（web pages do not comprise repurposed material from print publications such as brochures）
產品展示頁面應當包含購買須瞭解的信息，用戶可縮放產品圖片
使用超文本適當地組織內容
以主動語態書寫語句
網頁應當易於快速瀏覽，充分使用標題、副標題和較短的段落
相對於文本式的語言，優先使用地圖、圖表、圖形、流程圖和其它視覺元素
每個網頁都應有描述信息，以及有用的標題，用以支持書籤
鏈接及鏈接描述（title）應當具有描述性或推測性，不應當出現“點擊我（Click here）”這樣的鏈接
標題不應當故作風雅、故作聰明或含義隱晦
鏈接文本應當與目標頁面的標題(title)相符，這樣用戶就可以在到達目標頁面時心裡有數
按鈕文本及鏈接文本以動詞開頭
標題和副標題應當是簡短的、直截了當的、具有描述性的
遣詞造句及用到的概念應當為典型用戶所熟悉
有序列表從1開始，而不是0
第一次使用的縮寫詞彙應當加以說明
文本鏈接應當足夠長以便於理解、又應當足夠短以保證最少換行（尤其被用作導航列表時）
頁面佈局和可視設計
網線數應當適於目標用戶和他們的任務
佈局可以幫助用戶把注意力集中在下一步要做的東西上
在所有頁面，最重要的信息（例如經常用的主題、特色和功能）放在屏幕的第一個滿屏
網站在不水平滾動的情況下就可以使用
可點擊的元素（例如按鈕），應當設計成明顯可點擊的樣子
不能點擊的元素
按鈕或控件的功能從他們的標籤或設計上就可以明顯看出來
可點擊圖片包含多餘文本標籤（Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation)）
超文本鏈接可以輕鬆被辨認（例如下劃線），而不需要大面積掃視。
網站字體使用應當具有一致性
控件和它所具備的操作之間的關係是顯而易見的
圖標和圖形是標準的和（或）直觀的（具體的和為人熟悉的）
在每一個頁面上都應有一個清晰的視覺“起點”
網站的每個頁面共享一致的佈局
網頁為打印格式化，或者有一個為打印準備的版本
按鈕或鏈接能顯示出他們被點擊過了
圖形用戶界面（GUI）組件（例如單選按鈕和復選框）應當被適當地使用
所用字體應當是可閱讀的
網站應當避免使用斜體字，並只為超文本添加下劃線
信息密度和留白應當有一個良好的平衡
網站看上去應是讓人愉悅的
網頁應避免出現“滾動障礙物（scroll stoppers）”（標題或其它頁面元素給用戶造成在頁面頂部或底部的錯覺）
網站應當避免大量使用大寫文本
網站應當有一致性的、清晰可識別的外觀和感覺，以吸引用戶
深藍色避免使用在細節地方（Saturated blue is avoided for fine detail）（例如文本、細線和符號）
借助顏色組織和分組頁面元素
網站圖形不應當與banner廣告混雜不清
對於重要的主題分類加重顯示（em）
在標準寬度的瀏覽器窗口中，內容頁面一行不要太短（小於50字）也不要太長（大於100字）
頁面依據柵格設計，所有頁面元素和部件水平對齊、垂直對齊
有意義的文本標籤，令人印象深刻的背景配色，邊框和留白的恰當使用，這些一起來幫助用戶把網頁元素分別出不相關聯的功能區域
網頁配色合理搭配，避免過於複雜的背景設計/li>
較為獨立的網頁應當避免雜亂不相干的信息
標準頁面元素（例如頁面標題、站點導航、頁面導航、隱私策略等）可輕鬆找到
組織logo放置在每個頁面的相同位置，點擊logo後返回最合情理的頁面（比如首頁）
吸引人注意力的特色元素（例如動畫、醒目的色調、明顯的字體大小差異）應當保守的使用，並只在恰當的地方使用
圖標（icons）要在視覺上和概念上有所區分，但又要與頁面和諧。
相關信息和功能集中放置，每一組可以在一個視野瀏覽到（大約直徑為4.4厘米的屏幕區域）
搜索可用性
默認搜索應當是可以直觀地配置（沒有布爾操作符no Boolean operators）
在搜索結果頁面向用戶展示搜索到的內容，並且在該頁可以編輯檢索詞並重新提交搜索
檢索結果應是清晰地、有用的、並依據相關度分級
檢索結果頁面應清晰告訴用戶檢索到多少條記錄，每一頁顯示的記錄數可以由用戶配置
如果沒有返回結果，系統依據用戶輸入的檢索詞存在的可辨認問題提供建議和可選輸入項
搜索引擎可以優雅地處理空檢索串的情況
最常用的檢索串可以獲得有用的結果
搜索引擎應當提供模板、示例或提示來幫助用戶高效使用它
網站應當包含一個功能更強大的搜索頁面，幫助用戶更加完善他們的檢索（可以把它叫做“修改檢索 revise search”或“精確檢索 refine search”，而非“高級檢索 advanced search”）
檢索結果頁面不顯示重複結果（無論是能感知到的重複還是實際的重複）
檢索輸入框應當足夠長，可以應對常用檢索詞的長度
檢索應當覆蓋整個站點，而不是站點的一部分
如果網站允許用戶創建復合檢索，那麼這些檢索應當是可保存，定期被執行的（這樣用戶就可以跟蹤動態信息的最新動態）
檢索界面應當放置在用戶期望的地方（一般是頁面的右上區域）
檢索框及他的控件應清晰列出（多檢索框可能會難以理解）
站點既可以滿足那些想隨便瀏覽的用戶，也可滿足想搜索的用戶
在檢索結果頁面應當明確當前檢索的範圍，並且用戶可以約束這個範圍（如果該任務需要的話）
結果頁面顯示有用的元信息（meta-information），例如文檔的大小、創建的日期、文件類型（word、pdf等）
搜索引擎提供自動的拼寫檢查，並提供複數詞和同義詞查找
索索引擎提供相似檢索選項（例如 “更多相似” 鏈接）
幫助、反饋和容錯
常見問題解答或在線幫助提供循序漸進地指導，幫助用戶完成最重要的任務
在恰當的地方和恰當的時間可以輕鬆獲取幫助
提示應當是簡潔的、表達清楚的
用戶不需要求助於用戶手冊或其它外部信息來使用站點
網站有一個定制的404頁面，該頁面包含如何找到要找頁面的提示，並包含主頁和和檢索頁面的鏈接
網站在必要時（例如校驗時）提供良好的反饋信息（例如進度提示或一些信息）
用戶在選擇商品時可獲取到幫助
用戶在執行由潛在“危險”操作（例如刪除什麼）之前提供用戶確認
用戶確認頁面是清晰地
錯誤信息包含先一步該做什麼的清晰指示
在提交購買的前一個時刻，網站向用戶清晰地展示概覽頁面，這個頁面應當與購買確認頁面區分開來
當用戶需要在不同的選項（例如在一個對話框）前抉擇時，這些選項應當是明確的
在網站響應時間時產生的不可避免的延遲應當告知用戶（例如授權信用卡交易時）
錯誤信息以非嘲弄的語氣書寫，並且不要責怪用戶的錯誤
頁面可以快速加載（5秒或更短）
網站提供對用戶輸入或其他操作的及時反饋
在加載比較慢的大頁面應當提示用戶（例如：“正在加載……”），最重要的信息應當首先顯示
當使用工具提示條（tool tips）時，應當提示對用戶有用的額外幫助，而不是簡單的重複圖標、鏈接或字段域標籤中的文本
當給用戶一些幫助提示時，告訴他們要做什麼，而不是避免做什麼
網站在適當的地方向用戶展示如何做常見任務（例如：提供網站的功能示例）
網站通過提供反饋信息（例如“您知道嗎？”），幫助用戶瞭解怎樣使用網站
網站提供上下文敏感幫助
幫助應當是直截了當的，用直白簡單的方式表達，避免使用行話和流行語
當一個任務成功完成後，網站提供清晰地反饋信息
必要時重要提示信息應當在屏幕上保留，使用戶有足夠時間記錄下這些信息
遵循“菲茨法則”（控件之間的距離和控件的大小應當是適宜的，大小與距離成比例）
目標對像間有足夠空間，防止用戶點擊了多個目標或錯誤的目標
可點擊元素之間至少有兩個像素的距離
當網站發生錯誤時，應當是顯而易見的（例如，當表單未完成，高亮未完成的表單域）
網站提供適當的選擇方式（例如下拉列表）來代替用戶輸入
網站應努力把防止用戶出錯的工作做好
網站在糾正用戶錯誤輸入前提示用戶（例如，google的“您是不是要查找…”）
網站應當確保任務不是令人困惑的
錯誤信息應當用直白的語言描述，並給與問題足夠的解釋
用戶在一個任務中可以推遲解決錯誤至一個較晚的時間
如果有必要的話，網站提供錯誤信息更多的細節
可以非常容易撤銷（或取消）、重做（Redo）操作

文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司

網頁設計的甘苦談 (二)

客戶篇

那裡的客戶(日本跟美國),他們都知道自己要的是什麼(包含風格,如何呈現,動線要怎麼樣的),業務要如何跑都有計劃,他們甚至很清楚的知道自己要怎麼運用網路這一塊,且設計的部份他們都不會干涉太多,首頁內頁都只要各做一頁,他們看了適合他們之後,我們可以很快的進入切版動作,也可以很快的結案,很多同學都問為什麼那麼快,呵答案是我們都是花大半的時間做溝通(50%溝通,40%製作,10%測試)

為什麼他們會覺得他們情願跟客戶一直溝通,也不要像我們台灣這樣一直改來改去(ㄏ回來的時候,去設計公司上班時還蠻不習慣的),因為他們認為客戶不可能要的只有那些,為避免發生修改,所以他們願意花50%的時間在溝通上,相對的經過這些繁瑣的溝通後,他們的腦海裡都已經規劃好客戶要的籃圖了....

不像台灣,台灣是溝通只溝通少部份,根本不知道客戶的詳細需要,然後開始做版,做出來的東西,只是類似他們需要的,但到快要結束的時候,客戶開始改東改西了,改到設計師都快翻臉了,還在改.....所以這是所有設計公司必須討論的一點.沒錯,收錢是很重要的,但客戶所要求的品質更重要............

通常他們跟客戶溝通的時間要花上一個多月,完全了解客戶所需的,他們才肯跟客戶簽約,但簽約之後的作業,他們只需花一個多月,而且客戶都沒有任何修改....這就是為什麼日美的設計費用會比台灣高很多.........

他們美國那裡通常一個案子都可以報到5000美元以上的費用,無論案子的大或小,至於日本那裡,他們都可以報到50萬日元以上,而且無論大小.....

呵我回來的時候,還聽到某些同業有能一個CASE只報幾千元而已,深入了解之後,是套版,而且品質不佳,但台灣的很多公司行號,覺得套版可以用就好了,反正我們又不靠網路賺錢,有的人還說我不需要有網頁...但是他們根本不知道網路的重要性,這個是需要再教育的......

嚴格來說台灣對網路的認識,只在初級,這是低的可憐.........

BTW,我那時候在國外,了解到溝通的重要,高層指派案子給我的時候,我就很高興,因為可以了解客戶的產業跟需要,然後做出客戶喜歡的東西,我覺得這是很快樂的.......

那個時候公司有些FREE的課程,有心理學,SEO,網頁規劃,專案管理,CIS等等的課程(還有更多),我花了三年時間把這些課程上完了,哈有夠累的.因為我還有晚上的研究所跟夜市通的網頁規劃也要兼顧到,所以會異常的累,但卻累的很快樂.......

(待續..........)

文章來自BAYSTARS DESIGN網頁設計公司

tab(標籤)在使用時的禁忌

總結者：戴雨森 yusendai.com
我們小組討論的話題是tab（標籤）在使用時的禁忌。
在討論的開始，大家很快產生了六個感興趣的話題：
如何處理海量的tab？
在流覽器中關掉tab之後應該發生的行為？
不同tab下內容的相互關係
多層tab的使用
Tab和SEO的關係
使用多個tab工作時快速回到注意力的焦點
由於時間有限，我們討論的話題最終集中在一個點上：如何處理海量的tab？經過大家的熱烈討論，現在將一些想法以及對應的示例總結如下，還請各路英雄好漢指正。
首先回顧一下Tab的歷史。這裡的tab，是一類交互元素的統稱，既包括在web設計中的導航，也包括在流覽器等桌面軟體中的使用。被稱為tab的交互元素一般有如下兩個特性：
同時具有動作和狀態兩個含義。tab之所以流行，一個原因就是因為它既方便操作，同時又能夠讓用戶清楚地知道自己目前在哪個位置（tab）
從資訊架構的角度來看，tab之間的內容一般是不交叉的。並且tab之間的關係應該是平等的，沒有相互隸屬的關係。
所以從廣義來講，絕大多數導航功能表其實都可以歸結為tab。
在網頁設計中tab的使用一般認為是Amazon開了先河。相信大家很多人都讀過LukeW的經典回顧文章：The History of Amazon’s Tab Navigation（中文版請猛擊這裡）。從這篇文章中我們可以看到，Amazon的導航從最初只有兩個tab：Book和Music，演化到2000年最多的時候有兩排tab。很顯然，當tab數量增多的時候，tab這種對話模式遇到了一些困難。
另一個例子是Word 2003中的設置對話方塊。如下圖所示，當標籤太多而顯示空間有限的時候，微軟不得不同樣把標籤排成兩排。這樣做的一個大問題是，上排的標籤在選中的時候，如何表示選中狀態和當前內容頁的關係？
微軟的做法是飽受詬病的。在上圖中當用戶點擊上排標籤時，上排自動和下排對調從而保持標籤和內容頁的緊貼關係。然而這個做法使得標籤的位置非常不一致，相信很多人都有著同樣的迷茫經歷。
在其他一些軟體中，如firefox 3（如下圖），點擊上排標籤時，僅僅將標籤顯示變為選中狀態，這樣的好處是保持了標籤位置的一致性，然而卻失去了一些位置上的指示功能。
那麼如果多排標籤不是個好主意，如何處理很多的標籤呢？
一個顯然的思路是把標籤從慣用的水準排列換到豎直排列。一般這樣的排列是在視圖的左側，可能是以圖示或者文字的形式。
不過這種做法存在一些問題。首先，如果標籤的名字很長，將會佔據很多寶貴的左側空間，而這一空間正好是螢幕上使用者注意焦點，兵家必爭之地。有的網站的做法是將文字垂直擺放，這樣的做法，特別對於英文網站來說，可讀性簡直就是災難。如果放在右側，有可能和捲軸相互干涉，並且用戶也不容易注意到。其次，當標籤不多的時候（考慮標籤數目可變的情況），標籤下方放什麼內容也是比較頭疼的。
（左）一個設計網站的縱向標籤排列，可讀性很差。（右）雅虎易搜裡面採用的右側垂直標籤導航
另一個思路是，如果標籤之間存在著某種結構，那麼可以把標籤分組。然後增加一個導航級別。微軟的onenote在這方面做到了登峰造極的程度，將資訊分為Notebook, section, page三個層次，每個層次都用標籤導航來表示，結果就是在頁面的上方，左側和右側都佈滿了標籤……微軟功力不俗，用格式塔（左側的分割）、色彩標記（section的彩色和page的白色）等手法把三層標籤導航都處理得很好。

另一種分組的方式是直接呈現在標籤上。考慮windows工作列的默認分組方法，將同一個程式的不同視窗歸為一組。或者是IE8中，將來源於同一父網站的標籤用相同的顏色歸為一組。
如果標籤之間不存在重要程度的區別，也不存在顯然的結構呢？比如流覽器的標籤？不同的流覽器有不同的做法。firefox和IE的預設做法是只顯示一行標籤，設定標籤的最短長度，然後在兩端加入向左/向右的箭頭，同時還在標籤欄左側或者右側加入顯示全部標籤按鈕。Safari 4只在最右側加入一個”…”的”顯示全部標籤”按鈕。而Chrome做的比較奇怪，沒有最短標籤長度這一設置，也不管三七二十一將所有標籤都顯示在一行裡面

總結流覽器的做法，可以看出還是以對標籤欄的橫向操作為主。舉個手持設備的例子。facebook的iPhone App中，對於不同的feed是將其顯示在一個”window”中，手指滑動可以拖動feed條在window下移動（語言很難描述清楚，看圖）。另一個對標籤條橫向操作例子是蘋果的 Mac頁面 ，在這裡蘋果使用了交互設計模式中的”注釋捲軸”模式，將捲軸加上了標籤的功能，這同時也是標籤分組的使用。
總結以上討論：
1. 在靜態頁面設計中，儘量避免使用多排水平標籤的佈置。可以使用垂直標籤代替。
2. 如果標籤之間存在結構，可以將標籤分組。分組可以以下拉式功能表，顏色分組等多種方式進行。
3. 如果標籤重要性或相關性存在區別，可以顯示最重要的標籤，然後加入”更多”（全部）按鈕。
4. 如果標籤之間都是相互平等的，可以考慮對標籤欄進行操作，如加入左右移動按鈕，允許使用者拖動/滑動等。

原文：http://uxday.com/archives/76

文章來自BAYSTARS DESIGN網頁設計公司

設計良好的網頁四大原則

英文原文：http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/




我最喜歡的設計書籍之一就是《Robin Williams Design Workshop》.它深入實際的設計理論，並且包含許多極棒的設計實例。其中一個值得關注的地方就是4項主要的設計原則，它們已經在設計中為我所用。這4項原則就是：反差, 重複, 排列, 和分類。

本文將討論這4項與網頁設計相關的原則。只要在腦海中牢牢記住了這4項原則，你就一定可以設計出更加整潔漂亮的網頁。

1.反差效果

好的反差效果設計可以給用戶一個極好的第一印象。如果用戶的眼睛沒有焦點，注意力就會在處處是相同尺寸的元素和排版介面中迷失。設計師需要設計出很明顯的突出視覺元素來引導使用者的體驗。你可以通過選擇圖片、顏色和字體等來形成良好的反差效果。

圖片反差

當需要在很多小元素後面展示一個大尺寸的插圖時，這種方法很有效。嗯，我的意思就是，比如：

The Invoice Machine




這個網頁利用一張大圖片來吸引使用者的注意。而同時網頁很自然的單色又讓很少的藍色應用有了更好的效果。

Instabox



當你眼睛看到這個頁面的時候，首先你會注意到什麼？最有可能的就是盒子上面的那個星星了。跟 The Invoice Machine 一樣，它們都是通過用一張大圖片和很少的顏色來製造一個視覺焦點。

文章來自BAYSTARS DESIGN網頁設計公司

當網頁設計師遇上前端開發

作為網頁設計師，在和前端開發人員溝通時你是否常常會聽到這樣的聲音：

—— “大姐，給點專業精神好不好，這個表格是自我調整的，你這樣設計頁面不好擴展啊…”
——“用ajax不是不行，不過你要事前給我說嘛，你不說我怎麼知道呢，你說了我就知道了嘛…”

面對這些回答，除了欲哭無淚，你有沒有想過是什麼原因導致出現這樣溝通偏差，有沒有解決的辦法呢？設計師需要瞭解哪些知識才能和前端開發人員來更好的合作呢？ 首先得從這兩者之間都有哪些不同說起。

我認為最主要原因在於設計師和前端開發在部門中不同的職責劃分。

通常情況下，產品設計師的產出物多是線框圖（wireframe),視覺設計稿（mockup）等，前端負責編寫HTML,CSS等代碼（demo），有時還會根據需要編寫程式碼（如 JSP/ASP/PHP/Rails),光看這些分工，就知道不同的角色對產品的理解和著重點是截然不同的。按照正常的專案流程，設計團隊通常需要先設計出介面mockup或demo（HTML/CSS),接著開發人員才開始正式編寫代碼。

然而多數情況下為了保證專案進度，需要開發人員和設計師在專案前期就介入進來，不同的是，開發人員多是審核通過項目計畫書（PRD）和原型評審，她們更關注於技術可實現性；而設計師更傾向理解產品經理的專案需求以及通過什麼樣方式來解決需求從而達到提升使用者體驗的目的，她們更關注創意的可行性。

更令人糾結的是前端開發對“介面元素”和“交互動作”的理解和設計師有很大不同。統一的介面元素對網站的前端架構也會很有好處，他們更關注代碼的再使用性。 一方面是CSS：前端開發要實現設計師（或者自己引以為自豪）的介面設計，如果新頁面的設計和原先頁面中相同功能元素的設計有出入，哪怕是一點出入，都有可能帶來很多重複的工作，將CSS文件變得越來越臃腫。

另一方面是JavaScript：對於很多應用型網站，會有很多需要JavaScript的頁面交互元素。這些交互元素的視覺或者行為設計與之前的有出入，也會讓前端工程師為了既保證代碼的健壯性來方便後端工程師的開發，又為了實現一些設計上的差別而對現有代碼修修補補忙得不可開交，最可怕的是最終淹沒于bug的海洋…而交互設計師的側重點並不在程式的編碼實現，而注重於使用者如何最好地與系統交交互操作，在設計中重點需要考慮的是介面元素的易用性：比如他們會考慮到並非每個使用者都是電腦的熟練使用者，面對隱藏的層和特殊設計的功能表可能會抓瞎，使用者不見得能明白按兩下左鍵能自動滾屏或者怎樣能讓自動滾屏停下來，直接看最下面的結果？

總之，設計師（完美主義者更甚）會不斷完善產品，來滿足更好的用戶體驗。那麼設計師怎樣來解決這些問題呢？我覺得最重要的就是“溝通”，這是最根本的解決辦法。在原型設計前期就要針對自己想法的詢問前端開發在技術上的可行性，在介面設計過程中會有很多精確到圖元級的標準，同樣要和他們溝通瞭解代碼的實現方式，不然很有可能做無用功。在提交介面設計之後，交互設計師也要主動出擊，不定時的去關注demo的實現效果（mockup和demo多多少少存在不一致，在後期需要跟進；另外涉及到複雜的對話模式前端很可能會忘記或者搞混，也需要不斷的去核查）。

另外建立標準的文檔管理和設計規範也很重要，好在我們開始建立設計規範和標準(淘斯基和TPL 模式庫）的文檔管理方法（SVN)，包括：

• 制定檔命名標準
• 設定檔統一路徑
• 保存原始創作檔（例如PSD、Fla原始檔案）
• 最終完成檔（經過產品經理認可的檔）
• 視覺模式庫和與其對應的代碼模式庫

當然，前端都很忙的，經常去“騷擾”他們會被鄙視的。跟他們溝通也需要技巧和一些基礎認識，我總結了以下幾點需要謹記：

1. 網站的頁面是動態的。 photoshop呈現的是靜態的東西，而網站頁面是動態的展現內容、佈局和交互。設計師過多關注用戶體驗層面，很難對所有的細節做到面面俱到。而前端（包括開發）需要照顧到所有的功能點涉及到的頁面，因此在前期要考慮的儘量周全，別讓別人幫我們收拾爛攤子。
2. 關注新技術。網頁設計缺少技術支援永遠只是藝術。設計師必須經常關注新的技術和對話模式，這樣才能在設計的時候提供多種解決方案，才能權衡利弊找到最優化的方案。
3. 介面元素的標準化和統一。前端關注代碼的再使用性，設計師關注新創意。因此在設計前期就要考慮哪些元素和對話模式既可以滿足用戶體驗又能夠被重複使用，以此來提高效率。
4. 團隊合作很重要。設計師很容易沉浸在自己的小世界裡不能自拔，這是我們經常犯的通病。“溝通”是團隊合作的關鍵，一切皆在溝通。
5. 相信自己。前端通常出於不同的原因對一些對話模式可行性做出判斷，比如代碼複雜程度，技術可實現性等等。

好的設計師需要有一些超前意識和冒險精神，當他們受 新技術的激發，認為它能夠大大提升用戶體驗的時候，就需要把它當作挑戰來實現。在對技術的深入瞭解後去說服前端一起努力實現。 好了，這些血和淚的經驗是我工作一段時間慢慢總結的，如果你有更多的方法，希望能一起分享。


文章來自BAYSTARS DESIGN網頁設計公司

本公司網頁設計新作品: 網頁設計 - 良聯工程有限公司

以環保大方為主的設計風格
向國際挑戰
文章來自ＢＡＹＳＴＡＲＳ　ＤＥＳＩＧＮ網頁設計公司

本公司網頁設計新作品: 阿根廷吉普360度活動網站

此活動希望能把吉普車的性能更透明化
文章來自BAYSTARS DESIGN網頁設計公司

本公司網頁設計新作品: 班內邱巧克力冰淇淋形象官網

此網頁設計乃希望消費者能夠更加認識巧克力的原味

全網以flash設計為主

文章來自BAYSTARS DESIGN網頁設計公司