搜尋

隨機推薦

最近一陣有些難以抑制的腦癢手癢,閱讀和碼字的慾望也漸增;卻受時間精力等絕對客觀因素所限,不得不維繫一週一篇譯文的頻率,感覺多少有那麼點沮喪和無奈。

  關於本文,其實在標題上猶豫了蠻久。這篇內容是新書A Practical Guide to Web App Success的第15章;主題顯然應該在Web應用方面,但是本章單獨拎出來看的話,卻又適用於各種常見類型的Web產品。whatever,不矛盾。 作者Dan Zambonini在本文中將向我們闡述Web應用在原型階段的設計與測試工作的重要性,並從實際執行的角度出發,介紹一些經驗方法和常用工具。走著。

  產品在原型階段的設計與測試工作,是決定一款移動應用能否成功的重要因素。提到原型設計和用戶測試,人們往往容易產生厭倦與迴避的感覺。這也不奇怪,在很多實際項目中,這方面的工作似乎就是「隨意性強」,「耗時」,「高成本」一類的代名詞。

  不過在我看來,它們其實是整個設計流程裡最重要的環節。無論你或你的團隊在用戶界面視覺設計等方面有多高的造詣,我都建議各位對原型環節的相關工作提 高重視。基於高保真原型的用戶測試,可以讓很多關於需求、功能、界面設計等方面的潛在問題儘早暴露出來;這類問題往往直接關乎著產品的成敗。

  另外,原型階段的工作非但不代表「耗時」與「高成本」,實際上正相反。從整個項目的角度講,在原型的設計與測試過程中發現問題並加以解決,比將問題留到視覺設計和開發流程中再處理,要省時省力的多。

Image 2012.06.06 下午11:45:35.png

一直以來都以設計師自居,但是作為設計師,有沒有做好藝術與商業之間的平衡?每個人都在因為別人稱呼其美工而大呼小叫的時候,我們是否有捫心自問, 長久以來是不是真的在以嚴謹的態度要求自己?如今這個時代雖然百花齊放,但是請銘記一點,自己永遠是自己,做好自己的每一件事情,為了你的對手和你的朋 友,下面談一談對設計工作的一些經驗。

 

Image 2012.06.06 下午11:40:58.png

對於一般人來說,網頁設計這一個行業似乎與美術設計很像,事實上有點類似但又不全然一樣。試想:一般的海報設計考量的重點,與網頁設計考量的重點,差別一定很大吧!雖然都是使用視覺的原理來呈現出不同的目的,但我們經常遇到客戶詢問網頁設計工作有何差別,以下是深圳網站建設公司的經驗分享:

 

1. 網頁設計是什麼樣的工作?

大家看到的網頁,都是網頁設計團隊的合作成果,分工十分的細膩,包刮括了:視覺設計、程式設計、主機維護、資訊安全...等,不過大部分的人都通稱為網頁設計。因此細分一下,視覺設計部份事由視覺設計人員所負責,而這正是大部分的企業最直接接觸的網頁設計部份。

 

關於英文字體的文章很少,因為資料有限我只參考一本《印刷字體》和紀元[MX]視覺的一篇文章。做完這個課程設計我瞭解了外文字體的一些知識,有一些也是我從各方面蒐集的一些資料:

 

一、英文印刷新字體

英文字體品種主要有白正細體、白正粗體、白斜細體、白斜粗體黑正粗體、黑斜粗體、花體、標題黑斜體、標題黑正體、斜黑體、書版正體、書版斜體、書版狹身正體、細黑正體、名片正黑體、美術正體、美術廣告斜體、廣告裝飾體、廣告狹身正體等。

 

二、西文印刷字體

西文字體通常不同字形來分類,不同的造型特點,形成了各種各樣的字體,各種字體充分體現了設計者的個性,形成了各自的風格和特點。在以後的長期使用中,這些字體 又派生出許多變形字體,這些變形字體具有同樣的特徵和一致的傾向。一般把具有共同特徵的字體群稱為西文字體體系,西文字體多以活字設計者、雕刻者、活字鑄造者或偉人的名字命名。也有用字體的發源地地名作為西文字體體系的名稱。西文字體的種類極為豐富,繁多,美國有1800多種,全世界有5000~6000種,西文字體主要是拉丁字母的體式。

拉丁字母起源於圖畫,是由古埃及象形文字演變發展而來,希臘人在與腓基尼人在交往中,吸取了他們的文化,創造了希臘字母,成為現代拉丁文字母的雛形,到羅馬廢除初期王朝政體而實施共和時期,拉丁字母基本定型。羅馬帝國出現時,拉丁字母得到很大發展並成熟起來,拉丁字母的發展不僅是一種文化的發展,而且字體也向美觀實用的方向發展。

 

1.漢字字體種類 

漢字字體主要分為宋(明)體、仿宋體、黑體、宋黑、楷體、手寫體和美術體。 


“宋(明)體”起源於北宋,定型於明代,故又稱“明體”。特徵為字形方正規整,筆劃豎粗橫細,棱角分明,結構嚴謹,整齊均勻,起筆、收筆和筆劃轉折處吸取楷書特點而形成修飾性的筆型。宋體是應用最廣的漢字印刷字體。 

依據字面的黑度可分為超明體、特明體、粗明體、中明體、細明體等。粗明多見於書刊標題和海報與廣告標題字,細明體最適合排印長篇正文,如圖所示。 

http://farm4.static.flickr.com/3441/3937423454_110a5ebb36_o.gif 

http://farm3.static.flickr.com/2558/3937405596_ec29ea2f58_o.jpg http://farm3.static.flickr.com/2464/3937405676_32962760b4_o.jpg http://addons.books.com.tw/G/001/7/0010446167.jpg http://addons.books.com.tw/G/001/3/0010444763.jpg 

http://www.books.com.tw/activity/2009/09/gogirl/images/cover.jpg 

宋體 


即便你的產品90%的時間都運行良好。但是如果在用戶需要幫助時置之不理,他們是不會忘記這一點的。——《getting real》

我們有時候不能不面對產品出錯的時候。無論設計得多麼用心,無論做了多少測試,用戶仍然會遇到錯誤和問題。既然出錯不可避免,那麼如何進行容錯性設計才是關鍵。

容錯性設計就是當錯誤發生時,人們看到的界面。

就像對付不該發生的錯誤一樣,容錯性設計的關鍵在於“做好防禦”。產品設計者們必須不斷尋找可能造成用戶困惑和不滿的出錯點。好的防禦性設計決定用戶體驗的好壞。

http://i.imgur.com/zrclVtC.png

如今的設計圈子裡,線框原型(線框圖)這個詞正在越來越多的被提起。過去幾年中,在軟件和Web設計等相關行業裡,線框原型得到了迅速的普及,同時也帶來了很多的誤解。它的概念甚至在慢慢的被扭曲,使新手在入行時往往不能正確的理解它的用途。

問題出在哪裡呢?最近,我(原文作者)與一些設計專業的學生進行了交流,他們問到不少關於線框原型的問題。通過這些問題,我發現他們對於“線框原型”這個概念的心智模型與其本質相去甚遠——在他們的理解中,這個概念包括很多涉及視覺設計方面的因素。更糟的是,他們甚至不願意去做線框原型方面的事情,他們只知道這是流程中的一個需要執行環節,卻不明白它的重要性。這事弄的我相當鬱悶,最初,我覺得這搞不好只是個例而已,但通過對行業內的現狀進行觀察,我逐漸發現,線框原型在很多項目流程中的執行情況真是夠慘不忍睹的;原因來自很多方面,包括客戶、設計新手、產品決策者等等。

實際上,線框原型的規劃是Web設計中必不可少的重要步驟,設計師們應該真正瞭解它,並學會正確的運用它。

 

以下是我做美工的兩年生活中一條條總結出來的經驗,每一點都是我常用的,雖然不是什麼大學問,但我覺得要互相學習才能提高,所以現在拿出來和大家一起分享,如果你覺得實用就拿去試試,然後留個評論,我就很高興了,不喜歡的可以路過。費話少說,下面正式開始。

 

1.加載大圖片時,顯示loading小圖片。

這招是我最常用的。當我們要加載一張比較大的圖片時,如果能加載圖片的同時,顯示loading的小圖片,那樣看起來就人性化很多。當加載完成時,圖片會蓋住loading小圖片,這是一個很有用的小技巧,我的每個網站都加上了這個功能,不信你可以到這個頁面看,http://www.82xuexi.cn/html/2008-09/245.htm這個頁面是我專門做來演示這個示例的,上面我放了一張很大的圖片,應該可以看清加載過程。要實現這個小功能,只要在網站的公共樣式表上添加下面這個樣式 ,就可以實現了。

img {
background-image:url(loading.gif);
background-position:center;
background-repeat:no-repeat;
}

解釋一下上面的代碼,懂CSS的站長可以略去這段。第一行“img”指向頁面的全體圖片元素(看到樣式表的優勢了吧,只要一句,就能作用於網站的全體同類元素,不是DIV+CSS的網站站長是不是有想法了?呵呵)。第二行“background-image:url(loading.gif);”是指為圖片添加一個以圖片為背景的背景(讀起來有點拗口)。這個loading.gif是你要你自己上傳的加載小圖片。不過有些網站的images文件夾裡已經有這個圖片了,直接用就行,如果你確實不想到處找的話,我這裡有一堆,選一個你喜歡的玩玩吧:http://www.82xuexi.cn/html/2008-09/333.htm。第三行:background-position:center;把背景圖片居中,這樣看起來比較順眼。第四行:background-repeat:no-repeat;就是讓loading.gif小圖片只顯示一個,如果沒有這句,就用出現很多排列起來的loading.gif小圖片,這要注意一下。

 

 

如何選擇一種最恰當的網頁背景網站設計中最常見的問題之一。 通常網站設計者都已準備好網站內容,而且版面佈局大多也基本敲定。但背景要麼是令人厭煩,要麼是讓人眼花繚亂,讓設計者遲遲不能確定。

今天,我們將介紹幾個實際網站來啟發你的靈感,看看如何設計趣味而又令人感興趣的網頁背景。收藏本文,當你再次閱讀時,你定會被某一個背景設計所迷戀。

clip_image002[4]

前言

自Google出現並改變了遊戲規則之後,用戶對於網頁的關注時間一直在下降。對於任何一個時下話題,有千萬條結果可以關注,可以抓住訪問者注意力的機會非常明顯地下降了(2002年,BBC報告指出大約在9秒內)。想像一下你自己瀏覽網頁時的時:你會閱讀所有的文字和圖片,嘗試著徹底瞭解整個網頁內容是什麼嗎?最有可能的答案是:"不會。"伴隨著充斥四周的信息轟炸,我們像被寵壞了的孩子那樣,不會投入足夠的的注意力去關注一個網頁到底想告訴我們什麼。

我們快速決定是否關注一個網站時,取決於我們在幾毫秒的時間裡 可以弄清楚多少東西。提供良好的第一印象是設計師和網站所有者的責任。說服訪問者的機會非常小,大部分設計(很可能也包括你)將這個作為次要工作,因為大 家覺得設計師只關乎美學。然而,大多數的網站並不是是為了給訪問者留下深刻印象,大部分的網站是為了銷售而存在的。無論它是為了讓訪問者去訂閱博客還是下 載一個試用版軟件,每一個網站的存在最終都是為了銷售某些東西。

在 這篇文章中,我們談談如何使用科學的辦法,使用A/B測試和多變量測試,去為網站創造更多的銷售、下載、註冊(或達到任何其他商業目標)。與一切和科學相 關的東西一樣,這篇文章將一步一步地探索並重現那些增加你轉化率(客戶與訪問者的比率)的方法。還有,你可能會對之前發表在這裡的一篇文章《終極A/B測試指南》感興趣。

 

第 1 頁,共 4 頁

Please publish modules in offcanvas position.