首頁

怎樣為網(wǎng)站創(chuàng)建風(fēng)格指南(style guide)

藍藍設(shè)計的小編

什么是風(fēng)格指南?簡單的說,就是一份告訴你如何講故事的文檔。它確立了一些標準,例如怎樣撰寫文案、怎樣排版、怎樣打造視覺元素和交互方式等等。風(fēng)格指南源自于印刷領(lǐng)域,例如報刊(看看衛(wèi)報的風(fēng)格指南 );在Web領(lǐng)域,它同樣體現(xiàn)出了巨大的價值。

無論是傳統(tǒng)印刷,還是互聯(lián)網(wǎng),最關(guān)鍵的都是“內(nèi)容”。風(fēng)格指南的最終目標就是讓內(nèi)容以清晰并且一致的視覺風(fēng)格呈現(xiàn)出來。BBC的全球體驗語言 (Global Experience Language,GEL)就是網(wǎng)站風(fēng)格指南的絕佳范例。不妨通過頁面右側(cè)的“Download GEL Web Styleguide”下載一份PDF文檔來稍作了解先。

點擊查看原圖

移動應(yīng)用的十項設(shè)計原則及小提示

藍藍設(shè)計的小編

 

移動設(shè)備與傳統(tǒng)桌面設(shè)備雖然都被成為“計算設(shè)備”,但它們之間的差異是顯而易見的:移動設(shè)備的屏幕要小很多,無線網(wǎng)絡(luò)鏈接方面會有不穩(wěn)定,電池續(xù)航能力較弱,等等。這份“弱點”清單可以列的很長,但如果你因此認為移動設(shè)備就是降級版的計算機,那同樣是錯誤的看法。

實際上,從其他一些角度來觀察,移動設(shè)備又是比桌面設(shè)備更加強大的。智能手機和平板電腦都是更加個人化的設(shè)備,它們會一直陪伴在你身邊,讓你隨時隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息;它們身上還有傳統(tǒng)設(shè)備所不具備的很酷的功能,包括GPS、數(shù)位羅盤、加速計等等。

所有這些差異都使得移動設(shè)備當(dāng)中的應(yīng)用程序在界面設(shè)計方面存在很多獨到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗,總結(jié)出了移動應(yīng)用界面設(shè)計的十條原則及小提示,在這里與大家分享,希望能夠幫助那些還不是非常熟悉這個領(lǐng)域的設(shè)計師們建立起一套有實踐價值的設(shè)計思維框架。

1.設(shè)計觀念

從傳統(tǒng)設(shè)備轉(zhuǎn)向移動領(lǐng)域,設(shè)計師們首先要做的是調(diào)整思維模式和設(shè)計觀念。

  • 專注 :移動應(yīng)用的本質(zhì)目標是幫助人們以最高的效率完成特定的任務(wù)。少即是多,你要砍掉的產(chǎn)品功能通常會比你想象的多很多。
  • 獨特:從一開始就要理解你的應(yīng)用與同類產(chǎn)品相比具有哪些獨到之處,將其體現(xiàn)到產(chǎn)品的整體用戶體驗策略當(dāng)中,并在交互及視覺設(shè)計流程當(dāng)中著重突出這些賣點。
  • 迷人 :移動設(shè)備是相當(dāng)個人化的工具,人們會在長久的使用過程中逐漸將感情融入到軟硬件當(dāng)中;應(yīng)用程序同樣要與用戶在情感層面產(chǎn)生互動,通過各種友好的、有趣的、可信賴的設(shè)計與功能讓用戶覺得愛不釋手。
  • 體貼 :不要將注意力過多集中在“開發(fā)”本身上,不要將自己的心智模型以及產(chǎn)品的業(yè)務(wù)邏輯作為設(shè)計的準繩。如果你確實希望自己的產(chǎn)品能夠被更多用戶所接受,那么必須學(xué)會站在他們的角度觀察問題、制定設(shè)計決策。

點擊查看原圖

不要用“多多益善”的觀念打造移動應(yīng)用

用戶到達頁面才是設(shè)計的開始

藍藍設(shè)計的小編

很久之前認為一個項目的完成和上線是一個項目的完結(jié),
后來認識到,一個項目或頁面的上線不是結(jié)束而僅僅是開始,
現(xiàn)在明白了,用戶到達頁面,我們的設(shè)計才是剛剛開始。

我不敢說是絕對的或者百分百,但是用戶到達該頁面、該網(wǎng)站、使用該產(chǎn)品,這之前更多的依靠的是搜索或者運營的推廣。作為負責(zé)部分項目的UE/UI設(shè)計師來說,我不是產(chǎn)品,不是項目經(jīng)理,更不是運營和廣告我沒有那么多的能力去干預(yù)用戶到達或者使用我的設(shè)計。

 
下面單說一下我理解的用戶到達頁面的三種狀態(tài)。
我認為一個頁面瀏覽行為可以分為:瀏覽前、瀏覽中、瀏覽后,三個階段。

 
初級設(shè)計師或者是產(chǎn)品亦或是互聯(lián)網(wǎng)工作人員大多認為:瀏覽中才是我要做的,要花心思做的。
點擊查看原圖

案例學(xué)習(xí) - 我們在設(shè)計iPhone應(yīng)用時犯過的錯誤

藍藍設(shè)計的小編

今年,我們(英文原文作者及團隊)發(fā)布了FreshBooks 的第一款iPhone應(yīng)用。從前我們的產(chǎn)品一直是通過Web端應(yīng)用的方式提供服務(wù)的。這次,我們把iPhone應(yīng)用的設(shè)計開發(fā)過程看作一張空白的花布,盡力在其中實現(xiàn)一些新的功能概念和設(shè)計想法。在這個過程中,我們著實學(xué)到不少東西。

不要害怕犯錯

對于移動應(yīng)用這樣的產(chǎn)品,設(shè)計過程中必然會遇到很多用戶體驗方面的問題與挑戰(zhàn),尤其是對于新手來說更是如此。

無論你的線框稿在邏輯上有多縝密,UI稿在視覺上有多漂亮,當(dāng)它們落實成為原型或最終產(chǎn)品時,總會有問題呈現(xiàn)出來。這并不完全是壞事;我們在設(shè)計FreshBooks的iPhone應(yīng)用時甚至將犯錯這件事也納入到了流程規(guī)劃當(dāng)中,這就意味著:

  • 坦承沒有完美的設(shè)計,無論稿件和原型多么優(yōu)秀。
  • 真正的成功或失敗都是由用戶的反饋來定義的。
  • 對于在設(shè)計過程中看到的問題要迅速做出反應(yīng),根據(jù)從實際用戶身上得來的驗證結(jié)果進行迭代。

接下來,我將向各位描述一下我們在項目中犯過的三個錯誤,以及我們是怎樣解決這些問題的。

應(yīng)用的主界面

在項目開始的時候,我們對FreshBooks的一些現(xiàn)有用戶進行了訪談,了解他們在生活和工作中是怎樣使用移動設(shè)備的,包括他們面對的實際問題,以及他們對移動應(yīng)用版本的FreshBooks的期望。

根據(jù)這些訪談,我們歸納出了一些基本的設(shè)計原則,例如下面這條:

以任務(wù)為中心的用戶體驗

移動應(yīng)用版本的產(chǎn)品應(yīng)該圍繞著一系列互不相關(guān)的帳單任務(wù)進行優(yōu)化,包括時間追蹤、為收據(jù)拍照存檔、開票等等,這些是移動應(yīng)用所處的使用場景當(dāng)中最常見的任務(wù)。

而其他方面的復(fù)雜任務(wù),包括批量編輯、權(quán)限管理、定制化等,則留給傳統(tǒng)的Web端應(yīng)用來承擔(dān),以此來保證移動版本在功能上的簡約與集中。

基于這條原則,我們設(shè)計了應(yīng)用的主界面。它由一系列最重要的任務(wù)組成,視覺上采用圖標加文字標題的形式,點擊進入相應(yīng)的任務(wù)流程。例如,用戶點擊了其中的“創(chuàng)建新發(fā)票”之后會進入發(fā)票列表界面,然后創(chuàng)建新發(fā)票的界面會自動滑入視圖。

點擊查看原圖

這種以典型任務(wù)為中心的設(shè)計思路在意圖上是好的,但接下來我們發(fā)現(xiàn)了一些問題。

和用戶談戀愛——愛情三角理論與用戶黏性

藍藍設(shè)計的小編

親密是愛情關(guān)系中的溫暖體驗,是一種朋友般的親近。由于真正喜歡和對方在一起,渴望同對方一道建立更有凝聚力的和諧關(guān)系,希望把自己的生活以坦誠、不設(shè)防的方式與對方分享。伴侶間會發(fā)展出屬于兩個人的溝通風(fēng)格,熟悉彼此不完美的個性。親密令戀人互相關(guān)心,善待對方,滿足彼此的需要和欲望。親密沒有激情強 烈,但能促進戀人相互親近,讓人感受到人際溫暖。

30枚飆升你創(chuàng)造力的網(wǎng)頁設(shè)計

藍藍設(shè)計的小編

在激活你的創(chuàng)造力之前,我先來說一個普遍現(xiàn)象:從事設(shè)計這個職業(yè),當(dāng)沒有創(chuàng)意的時候怎么辦?會懊惱驚慌失措?覺得自己不適合這個職業(yè)嗎?騷年菇?jīng)鰝?,不要驚慌!這種創(chuàng)意空白現(xiàn)象會發(fā)生在任何一個腦力工作者身上。那一刻抱著頭的你,肯定痛苦不已的覺得自己失去了所有才干,沮喪的覺得沒有在行業(yè)里繼續(xù)發(fā)展的能力,乃至永遠都不會再創(chuàng)造出很酷的設(shè)計。

其實我要告訴你:這一切都是正常的。在我們的某些時期某些時刻,每一個設(shè)計師都會倏然經(jīng)歷這樣的苦惱,聽我說,你絕對不是一個人在戰(zhàn)斗!

但我們?nèi)绾慰朔@些感受?找到靈感呢!很多前輩都教導(dǎo)我們說,想要有創(chuàng)造力,必須先讓自己產(chǎn)生某種身心的愉悅!

高端設(shè)計盛宴FRAME-FPA論壇在北京完美落幕

藍藍設(shè)計的小編

 

高端設(shè)計盛宴FRAME-FPA論壇于2012年12月15日晚在北京東隅酒店完美落幕。

 

由《FRAME國際空間設(shè)計雜志》和新西蘭廚房電器品牌FisherPaykel斐雪派克聯(lián)合發(fā)起的集結(jié)高端設(shè)計、生活意見、美食分享和社交活動的FPA論壇繼在北京+86設(shè)計博物館、上海源創(chuàng)創(chuàng)意園、深圳派意館成功舉辦后,于2012年年末回歸北京,與設(shè)計界的朋友再次相聚,共享年終設(shè)計盛宴。

pantone把綠寶石色作為2013年的年度顏色

藍藍設(shè)計的小編

 

色彩公司pantone 最近選擇了綠寶石色(emerald17-5641 )作為2013 年的年度顏色,在他們的描述中,綠寶石色 生動,光芒四射,有魅力…… 是一種代表了優(yōu)雅和美麗的顏色,加強了我們個人的自然存在感,帶給我們平和心態(tài) 。

藍注:今年prada 新款綠色寶石的裙子, 也特別的漂亮!孫儷穿過,從者眾!

點擊查看原圖

分享廣告設(shè)計圈線下活動專題好網(wǎng)站:第九課堂

藍藍設(shè)計的小編

藍藍寫

分享廣告設(shè)計圈線下活動專題好網(wǎng)站:第九課堂http://www.dijiuke.com/。

挺好!周六日及空余時間可以多學(xué)學(xué)、看看!

點擊查看原圖

案例學(xué)習(xí) - 響應(yīng)式網(wǎng)站的產(chǎn)品需求和設(shè)計流程詳解

藍藍設(shè)計的小編

根據(jù)DailyTech的統(tǒng)計,到2015年,移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶。除了智能手機之外,使用平板電腦甚至是電視機進行上網(wǎng)的用戶也在持續(xù)增加。在這種形勢下,怎樣讓我們的網(wǎng)站盡量兼容各種類型的設(shè)備,并確保優(yōu)良的用戶體驗,這將是越來越重要的問題。

通過響應(yīng)式的設(shè)計開發(fā)方式,我們可以使網(wǎng)站頁面隨瀏覽設(shè)備的不同而自行響應(yīng),動態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式,將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。

如果你對響應(yīng)式Web設(shè)計還不大了解,可以先參考閱讀我們之前的關(guān)于響應(yīng)式設(shè)計的概念、組成要素及基本實現(xiàn)思路 方面的文章,全方位預(yù)熱一下。

什么情況下適宜采用響應(yīng)式Web設(shè)計的方式

當(dāng)客戶提出產(chǎn)品功能移動化的需求時,有一些解決方案可供我們選擇,包括原生客戶端應(yīng)用、Web應(yīng)用等;究竟怎樣的方式更合適,還是取決于具體的需求情況。另外也要考慮網(wǎng)站本身是否需要實施移動化。雖然響應(yīng)式站點并不能算是一種純粹的移動化解決方案,但是,在某些情況下,這種方式是非常值得考慮的。

你心里沒譜

設(shè)計開發(fā)一個全新的移動版本站點或是客戶端應(yīng)用,整個過程是有很大挑戰(zhàn)性的。除非產(chǎn)品正式上線,否則你無法真正了解它是否會成功。與其單純的為了移動化而花費資源打造移動版本站點或是開發(fā)客戶端應(yīng)用,不如先花些心思將原本的網(wǎng)站打造的更具彈性,使其在各種主流移動設(shè)備中都擁有盡量優(yōu)秀的用戶體驗。

你想節(jié)約成本

要打造響應(yīng)式站點,自然離不開有經(jīng)驗的交互、視覺設(shè)計及前端開發(fā)人員。所需的資源,尤其是時間方面,比起普通網(wǎng)站來說大約增加20%到30%的樣子;但比起單獨打造移動版本的網(wǎng)站,或是設(shè)計開發(fā)客戶端應(yīng)用的成本來說,卻要低很多。從維護的角度來說,也會輕松很多。

你希望網(wǎng)站可以兼容未來的新設(shè)備

所謂的移動版本站點,通常是針對某類具體規(guī)格的設(shè)備進行單獨打造的,彈性比較差。新的移動設(shè)備層出不窮,傳統(tǒng)的移動版本站點需要不斷的進行更新維護,才能盡量保證在新設(shè)備中工作良好。響應(yīng)式設(shè)計可以根據(jù)設(shè)備瀏覽環(huán)境的具體規(guī)格進行判斷,使用不同的呈現(xiàn)方式來展示內(nèi)容,無需針對某種特定的規(guī)格進行維護,適應(yīng)性更好。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔