搜尋

隨機推薦

24 十二月 2010

新問題

來也匆匆,去也「沖沖」。距上次發佈垂直柵格與漸進式行距(上)發佈,已經不知不覺過去了兩個多月了。反過來,看看上次的成果。誒?怎麼感覺邊注有點奇怪呢?
還是參考我的這篇關於排版的文章:我們知道
  • 中文互聯網上最常用的行距是1.5左右
  • 行長越長,需要的越大的行距. (行距太小,讀者閱讀換行時容易串行. 行距太大,讀者閱讀行時會感覺到文字不連續.)
看 來,對於邊注的12px字體大小的,24px的行高顯然過大了。但是,根據上一篇文章的方法,垂直韻律需要邊注的行距和正文的行距應當一致。那麼為了保持 垂直韻律,我們只能同時減少左右兩邊的行距——總結:不靠譜。那麼,我們該如何調整邊注行距,卻又能夠讓我們建立的垂直韻律生效呢?這就需要我們引入漸進式行距

準備工作

去年的時候,青雲發表過關於柵格系統的文章 . 我們知道網頁的柵格系統是運用固定的格子設計版面佈局,使其風格工整簡潔. 視覺上來說,柵格系統能夠將大塊區域分割成小區域,清楚地展示頁面的佈局,並能夠引導視覺線在各個板塊之間掃瞄、閱讀. 從信息上來說,柵格系統讓信息的呈現方式更加直觀,從而有效提高易讀性.
但是大部分柵格系統是在水平方向上的佈局,其實,我們的垂直方向也是有柵格系統的——也就是我們的「垂直韻律」.

垂直韻律的就像好比我們手上拿著的線格本子,有著一行行的網格線,安排著垂直方向上的文字排版。「排版中的空間就像是音樂裡的節拍. 」音樂的節拍雖然有許多變化,但是幾乎每首歌都會有一個固定的節拍來掌握整個歌曲的節奏. 這就是為什麼柵格系統一般用固定寬度的網格陣列來指導和規範網頁中的版面佈局以及信息分佈.
其實,那麼,在網頁裡,垂直韻律應由三個因素控制:

認真考量這三個因素的值,才能實現垂直韻律.

 

八卦為先

八卦是種優良品質,特別是用在技術上時。來看幾個Reset CSS的八卦問題吧:

  1. 你知道世界上第一份reset.css在哪麼?
  2. * { margin: 0; padding: 0 }人品很壞嗎?
  3. Eric Meyer和YUI是情侶嗎?
  4. Google有用reset.css嗎?
  5. No CSS Reset的口號是誰最先提出來的?

類似問題或者說困惑還能列舉很多,reset.css極其簡單又極其不簡單。繼續挖掘八卦之前,請先關機遐思,或去如廁更衣透透氣,想想後再讀下文。

 

對於相冊來說,大圖的瀏覽非常重要,因為對瀏覽者來說最重要的就是大圖看得爽不爽,因為做項目的需要,我比較了許多相冊的大圖瀏覽方式,現在一一評說,本文只代表我個人的觀點,歡迎大家拍磚呀!

Flickr

Flickr一直是專業攝影愛好者喜歡的相冊,它在照片詳情頁面提供了許多的尺寸供瀏覽者選擇,還體貼的提供了「大尺寸下載」的鏈接,讓瀏覽者能把心儀的照片下載到自己的硬盤。

 

可視性的問題幾乎在每次不同產品的用戶測試中都會出現:用戶總是對頁面的某些元素、功能視若無睹,或根本無視。基於此,對這個問題進行了一番小小的研究。

為何用戶視若無睹?

視覺是人的生理與心理現象。本文述及的是視覺作為心理現象,也即由知覺、思維、記憶、情感等視覺認知引起的可視性問題,而非用戶眼睛在生理上存在缺陷,也不是錯幻視覺(詳見鏈接圖例)。用標準些的心理學術語來說,這裡所說的「視若無睹」(注)是視覺意識缺乏(failures of visual awareness)。

註:在此用「視若無睹」僅是為了行文的通俗,從更嚴謹的角度來說,到底是視若無睹還是根本無視,涉及到較複雜的認知心理學對「視」的定義,還有記憶、感知等,就不扯了

心理學家對視覺意識缺乏有頗長時間的研究,而針對人機交互領域的研究已發現,人在一個視覺環境中,只會意識到該環境的很小部分。除了認知的有限性, 我們還 常常高估了眼睛能看到並理解的內容的多少。這種視覺意識以及後續理解的缺失,造成了用戶對界面信息的視若無睹。下面,就來看看人視覺心理的「兩盲三高 」。

《用戶研究角度看設 計》系列是淘寶的用戶研究團隊在可用性測試之後的點滴思考。在每次與淘寶用戶的直接接觸、觀察用戶的操作之後,作為體驗分析師的我們總是會感慨:「為什麼 有些細節設計看似已經很顯眼了,用戶就是沒有注意到?」、「為什麼用戶偏偏要那樣去理解?」、「用戶在那個流程中為什麼陷入困惑,甚至不能完成任務 了?」,然後,我們會思考這界面背後的原因,分析用戶當時具體說了什麼,是什麼原因導致用戶那樣理解……這個過程需要非常嚴謹的思考,因為向設計師反饋的 任何一個詞語都會導致不同的設計。同時,這個過程也令我們非常享受,如果說設計就是解決問題,在可用性測試之後的分析時間就是分析師的「設計」時光。

我們冀望通過用戶研究角度的思考,帶給設計師一點點啟發,並且將我們在研究中發現的問題,固化在設計模式庫中,以便今後不再出現同樣的問題。當然, 作為體驗分析師,我們對交互設計和視覺設計瞭解得不夠精深,還不能像設計師一樣把握項目中的種種約束,所以,這個系列的內容可能還比較粗淺,更偏重於「商 業-技術-用戶」三者中「用戶」這個角色的直接想法。

另外,我們的思考來源於淘寶或其他網站各位設計師的設計,所以,有時可能會拿來作為反例,還請各位設計師見諒。我們儘可能拿自己網站的例子作為反面教材,如果在反例中涉及了您的網站,還請多多包涵。

讓我們開始第一個故事吧——

有一個網頁上典型的細節,它如此細微以至有時設計師在項目的最後時刻才記得擠一個位置給它,但它又如此常見,在不少網站的詳情頁面不經意就出現了; 我們在軟件中不常見到它,但在超文本世界裡,在互聯了朋友的世界裡,它卻時而閃現——它就是「複製鏈接」,英文別名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL(如圖1)。作為設計師,你曾經注意過它嗎?

前三篇文章中,明確了柵格系統的設計細節和適用範圍。這一篇將集中討論960柵格系統的技術實現。

Blueprint的實現

Blueprint是一個完整的CSS框架,柵格系統是它的一部分功能。我們來看demo頁面

以上三欄佈局的代碼為:

<style type="text/css">
.container { margin: 0 auto; width: 950px }
.span-8 { float: left; margin-right: 10px }
div.last { margin-right: 0 }
hr { clear: both; height: 0; border: none }
</style>
<div class="container">
<div class="span-8"></div>
<div class="span-8"></div>
<div class="span-8 last"></div>
<hr />
</div>

上面是基本功能,Blueprint還支持append-n, prepend-m, border等「高級」功能,這些就不細說了。Blueprint的特點簡單總結如下:

  1. 採用浮動來實現佈局,簡單明了
  2. 950兩側沒有margin, 最後一列的class需要加上last
  3. 採用額外標籤來清除浮動

研究(2)中討論了柵格系統的基礎知識。這一篇將集中探討柵格系統的粒度問題。(註:如非特別指明,柵格系統均指24列960柵格系統)

淘寶的首頁截圖)目前尚未嚴格遵守柵格系統,如果重構的話,寬度方向可以考慮採用下面的柵格佈局(只考慮頁面主體部分,忽略高度的比例):

(圖1)

 

在整個產品設計的過程中,視覺設計與交互設計的「工序」非常緊密,兩者關係也是相輔相成,互相影響。而視覺界面作為最直接與用戶交流的層面,如何把交互設計以良好表現形態展現給用戶,這裡主要集中探討視覺在提升交互的可用性方面的作用:

1.提升可瀏覽性
2.精確與高效地傳遞信息與任務
3.貼合用戶的心智模型
4.讓交互富有情感

首先澄清一個應用場景問題。研究(1)中指出,對於結構複雜的網站,不少設計師們喜歡採用960固定寬度佈局。但要注意的是,960並不是萬能鑰匙,大部分網站沒有也不需要柵格系統。Amazon採用的是寬度自適應佈局,最大限度的呈現信息。Google更是簡簡單單,主題部分就一個列表。eBay的頁面非常簡潔,商品頁面寬度自適應,信息自然流暢,噪音少,購物很踏實。類似的站點還有很多,對於這些站點來說,寬度自適應佈局更受青睞。

有個很有意思的網站是Yahoo!, 看起來是固定寬度佈局,實際上在CSS中只要去掉一行,就能搖身一變自適應寬度了:

第 3 頁,共 4 頁

Please publish modules in offcanvas position.