首頁

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

藍(lán)藍(lán)設(shè)計(jì)的小編

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

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

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

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

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

你心里沒譜

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

你想節(jié)約成本

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

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

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

表單設(shè)計(jì)與轉(zhuǎn)化率的提升

藍(lán)藍(lán)設(shè)計(jì)的小編

 

無論是用于注冊(cè)、支付還是聯(lián)絡(luò),我們總是需要通過表單來獲取用戶的信息。不幸的是,在現(xiàn)實(shí)當(dāng)中,總會(huì)有很多訪問者一見到表單就會(huì)立刻點(diǎn)擊瀏覽器上的后退按鈕。這里面原因有很多,例如表單篇幅太長(zhǎng)、不大友好、不那么值得信任,或是用戶還沒真正準(zhǔn)備好進(jìn)行交易等等。

這種情況每發(fā)生一次,我們就失掉了一個(gè)潛在用戶。怎樣將表單設(shè)計(jì)的讓盡量多的訪問者更愿意完成填寫,這是設(shè)計(jì)師們必須面對(duì)的挑戰(zhàn)。站在用戶的角度,我們可以將問題分為四個(gè)方面。

我能得到什么?

一提到“轉(zhuǎn)化”,設(shè)計(jì)師們首先想到的往往是一些相關(guān)操作的細(xì)節(jié)問題,包括按鈕的顏色、標(biāo)題的字號(hào)、對(duì)比度、對(duì)其方式等等。當(dāng)然,這些是必須考慮的,但最最首要的問題是:作為網(wǎng)站的訪問者,我為什么要填寫表單?我能得到什么?

訪問者不會(huì)簡(jiǎn)單的因?yàn)槟闾岢隽讼嚓P(guān)要求而把自己的個(gè)人信息透露給你;你要讓他們看到這樣做的好處在哪里。不妨把這件事看作一種交易,你的訪問者提供他們的名字與郵箱地址,從而換取到一些他們需要的東西,例如享受服務(wù)、免費(fèi)試用軟件、下載PDF文檔等等。

點(diǎn)擊查看原圖

除了讓瀏覽者知道他們能得到什么東西以外,你最好還能告訴他們這東西為什么是他們所需要的。要聚焦在產(chǎn)品的價(jià)值上,如果你能用最簡(jiǎn)單的介紹文字描述出你的產(chǎn)品能幫用戶解決怎樣的問題,喚起他們的共鳴,那么即使表單本身稍微復(fù)雜些,他們也會(huì)愿意完成填寫;否則,字段最少的表單也不會(huì)引起他們的興趣。

Q+ Web 改版設(shè)計(jì)小結(jié)

藍(lán)藍(lán)設(shè)計(jì)的小編

  WebQQ1.0最初以IM工具進(jìn)入用戶的視野,2.0標(biāo)志著WebQQ華麗轉(zhuǎn)身為平臺(tái)型產(chǎn)品,3.0是我們?cè)谏罨瘧?yīng)用平臺(tái)概念的定型,縱觀webQQ的演化,其獨(dú)特的產(chǎn)品形態(tài)一直被業(yè)內(nèi)各競(jìng)爭(zhēng)對(duì)手所仿效。 Q+Web的到來,我們將以更成熟的姿態(tài)擁抱變化,更強(qiáng)調(diào)平臺(tái)體驗(yàn)的優(yōu)化。我們總結(jié)了中間的各種反復(fù)和挑戰(zhàn),并希望以此積蓄經(jīng)驗(yàn)和力量。

 

Webim v5 那點(diǎn)事兒

藍(lán)藍(lán)設(shè)計(jì)的小編

為什么要改版?

隨著科技的發(fā)展,時(shí)代的進(jìn)步,微博用戶的上網(wǎng)設(shè)備也在快速更新。研究一下微博用戶的屏幕分辨率使用數(shù)據(jù)我發(fā)現(xiàn),屏幕分辨率越來越高的同時(shí),伴隨的一個(gè)數(shù)值,也就是顯示器顯示網(wǎng)頁外的空白面積也越來越大,如何利用好這部分空間是一個(gè)值得研究的課題。

前期看了一些同類產(chǎn)品

對(duì)于手勢(shì)的一些思考

藍(lán)藍(lán)設(shè)計(jì)的小編

Clear的出現(xiàn)引起了大家對(duì)手勢(shì)操作的熱忱, Google新專利采用“連續(xù)手勢(shì)”也讓我們看到了個(gè)性化手勢(shì)的前景。確實(shí),手勢(shì)操作能夠減少界面元素,提升效率;但其不可見性,抽象性,需記憶性等特點(diǎn)也決定了它的弊端。如何揚(yáng)長(zhǎng)避短,根據(jù)現(xiàn)有手勢(shì)的特點(diǎn)在合適的情境中使用,同時(shí)根據(jù)文化約定、實(shí)物隱喻、表音、表意等發(fā)想創(chuàng)新手勢(shì),而非一味地追逐跟風(fēng),值得我們思考。本文結(jié)合了珊璞之前對(duì)客戶端手勢(shì)應(yīng)用的分享以及網(wǎng)上的相關(guān)資料,從手勢(shì)的空間感帶來的心理感受,手勢(shì)賦予的功能,引導(dǎo)方式,與動(dòng)畫的配合,創(chuàng)新幾個(gè)角度進(jìn)行了總結(jié)。許多是大家已知的想法,在這里僅做簡(jiǎn)單的梳理;而引導(dǎo)方式、與動(dòng)畫的配合等,希望大家能有更多的思考,因?yàn)橥ㄟ^動(dòng)畫、轉(zhuǎn)場(chǎng)、擬物等方式,可以使注意力與流程更加流暢,同時(shí)貼合現(xiàn)實(shí)世界,從而有助于手勢(shì)的抽象性、需記憶性的克服。閱讀全文

一、空間感帶來的心理感受

拒絕平庸——淺談WEB登錄頁面設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

  用戶活躍度是檢驗(yàn)產(chǎn)品成功與否的重要指標(biāo)之一,傳統(tǒng)行業(yè)的商家極為重視門面的裝潢,因?yàn)橐粋€(gè)好的門面可以聚集人氣,招攬更多的顧客。古時(shí)候的大戶人家院子門口的石獅子或其他的擺件的擺放極為講究,有一定的風(fēng)水學(xué)說道理,更能彰顯主人家的身份地位.由此可見,“門面’就如人的臉面之于人的形象一樣重要,而WEB的登錄頁面就相當(dāng)傳統(tǒng)的“門面”。

Android 4.0設(shè)計(jì)初體驗(yàn)

藍(lán)藍(lán)設(shè)計(jì)的小編

Android系統(tǒng)是目前智能移動(dòng)設(shè)備中增長(zhǎng)速度最快的平臺(tái),但App的設(shè)計(jì)卻沒有形成自己的風(fēng)格,絕大都數(shù)都是ios風(fēng)格的移植適配。Google 在去年的10月份發(fā)布了Android 4.0 的界面規(guī)范,在樣式、控件上都做了非常個(gè)性化的革新,但由于Rom的多樣化,設(shè)備的不統(tǒng)一,新的4.0設(shè)計(jì)規(guī)范并沒有得到廣泛的普及。但以移動(dòng)設(shè)備更新?lián)Q代的速度,Android 4.0將會(huì)是趨勢(shì),與ios的差異性也會(huì)越來越明顯。由于博主的性格屬于典型的喜新厭舊,所以打算結(jié)合手上的項(xiàng)目做一個(gè)吃螃蟹的人…

如何打造軟件、應(yīng)用類shopping mall

藍(lán)藍(lán)設(shè)計(jì)的小編

 2011年各大移動(dòng)應(yīng)用商店迅速崛起,群雄割據(jù)。在移動(dòng)應(yīng)用商店的基礎(chǔ)上,軟件商店也悄然形成。這些軟件、應(yīng)用類商店形式多樣、風(fēng)格迥異。一些成功的應(yīng)用商店都已然向“shopping mall“邁進(jìn):比如應(yīng)用商店的大贏家蘋果APP Store(i Pad、iPhone), 國內(nèi)的安卓市場(chǎng)、網(wǎng)易應(yīng)用、騰訊應(yīng)用中心等等。這些商店成功的秘訣在于他們不僅僅將產(chǎn)品定位于一個(gè)簡(jiǎn)單的提供應(yīng)用下載的工具,而是精心運(yùn)營和設(shè)計(jì),創(chuàng)造出一站式提供應(yīng)用服務(wù)的場(chǎng)所。

  怎樣的軟件應(yīng)用類商店是最完善的呢? 如何使軟件應(yīng)用類“商店”提升為“shopping mall”呢?對(duì)此,本文從shopping mall的規(guī)劃原則著手,找尋其與軟件應(yīng)用商店的共通點(diǎn)。通過任務(wù)和場(chǎng)景對(duì)現(xiàn)有的幾大應(yīng)用商店進(jìn)行分析,提煉軟件應(yīng)用類商店的設(shè)計(jì)要素。

  Shopping mall的定義是:大型零售業(yè)為主體,眾多專業(yè)店為輔助業(yè)態(tài)和多功能商業(yè)服務(wù)設(shè)施形成的聚合體。而一個(gè)完善的軟件應(yīng)用類商店應(yīng)該是集倉儲(chǔ)、商場(chǎng)、服務(wù)與一身的軟件應(yīng)用中心。就如一個(gè)完善的購物中心,銷售的是種類各異的軟件。下圖從角色、任務(wù)和場(chǎng)景3個(gè)方面對(duì)shopping mall和軟件、應(yīng)用商店進(jìn)行對(duì)比分析。

 

 

如何制作實(shí)用美觀的設(shè)計(jì)文檔

藍(lán)藍(lán)設(shè)計(jì)的小編

前言:最近準(zhǔn)備做一個(gè)設(shè)計(jì)文檔的分享,但是一直沒有時(shí)間整理好keynote ,這里先分享一個(gè)設(shè)計(jì)文檔模版,以及模版中每個(gè)元素的使用理由與方法。之后的設(shè)計(jì)文檔分享中,會(huì)加入更多的設(shè)計(jì)文檔案例來分析討論。

Here we go.

作為一個(gè)交互設(shè)計(jì)師,我們要全局掌握產(chǎn)品的背景,邏輯,用戶體驗(yàn)。但是,我們不能忽略設(shè)計(jì)過程中一個(gè)很關(guān)鍵的步驟,設(shè)計(jì)輸出。

如果我們用email 或者其他大海報(bào)的方式來輸出設(shè)計(jì)文檔,有沒有產(chǎn)品經(jīng)理會(huì)抱怨說看不懂?有沒有開發(fā)抱怨使用過程中效率低?在我之前的工作經(jīng)驗(yàn)中,我一直保持用一種方式來輸出設(shè)計(jì)文檔,InDesign + PDF ,在之前的產(chǎn)品同事與開發(fā)同事得到的反饋是好的,這里也希望分享并討論這個(gè)方式是不是適合我們騰訊的產(chǎn)品開發(fā)節(jié)奏。

用InDesign輸出 PDF 設(shè)計(jì)文檔的好處有不少,我這里先列舉幾點(diǎn):

超平面的觸覺設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

 作為緊隨潮流嗅覺靈敏的Graphic設(shè)計(jì)師,你有沒有留意到逐漸興起的“超平面”設(shè)計(jì)藝術(shù)?那些已經(jīng)習(xí)以為常地被繪制在平面上、被保存于數(shù)字文件中的圖形、元素,因?yàn)樵O(shè)計(jì)師們的想象力而被賦予了動(dòng)人的生命力,變身成為現(xiàn)實(shí)物質(zhì)、躍然出現(xiàn)在可以互動(dòng)的空間中。
它有一個(gè)需要去感受的名字——Tactile Design(觸覺設(shè)計(jì))。

日歷

鏈接

個(gè)人資料

存檔