首頁(yè)

移動(dòng)應(yīng)用的十項(xiàng)設(shè)計(jì)原則及小提示

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

 

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

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

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

1.設(shè)計(jì)觀念

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

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

點(diǎn)擊查看原圖

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

案例學(xué)習(xí) - 我們?cè)谠O(shè)計(jì)iPhone應(yīng)用時(shí)犯過(guò)的錯(cuò)誤

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

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

不要害怕犯錯(cuò)

對(duì)于移動(dòng)應(yīng)用這樣的產(chǎn)品,設(shè)計(jì)過(guò)程中必然會(huì)遇到很多用戶(hù)體驗(yàn)方面的問(wèn)題與挑戰(zhàn),尤其是對(duì)于新手來(lái)說(shuō)更是如此。

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

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

接下來(lái),我將向各位描述一下我們?cè)陧?xiàng)目中犯過(guò)的三個(gè)錯(cuò)誤,以及我們是怎樣解決這些問(wèn)題的。

應(yīng)用的主界面

在項(xiàng)目開(kāi)始的時(shí)候,我們對(duì)FreshBooks的一些現(xiàn)有用戶(hù)進(jìn)行了訪談,了解他們?cè)谏詈凸ぷ髦惺窃鯓邮褂靡苿?dòng)設(shè)備的,包括他們面對(duì)的實(shí)際問(wèn)題,以及他們對(duì)移動(dòng)應(yīng)用版本的FreshBooks的期望。

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

以任務(wù)為中心的用戶(hù)體驗(yàn)

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

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

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

點(diǎn)擊查看原圖

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

談?wù)凪obile Web App的設(shè)計(jì)方法

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


Native App與Web App的爭(zhēng)論從未停息過(guò),盡管很多人在批判Web App的各種不是,但也阻止不了各種各樣的Web App如雨后春筍般出現(xiàn),尤其是伴隨智能手機(jī)的普及而受到重視的Mobile Web App。這是一種在非議聲里成長(zhǎng)起來(lái)的產(chǎn)品形態(tài),無(wú)論其結(jié)果如何,都應(yīng)該吸引開(kāi)發(fā)者和設(shè)計(jì)師的關(guān)注。
 

移動(dòng)應(yīng)用設(shè)計(jì)案例 - 打造初創(chuàng)型產(chǎn)品的用戶(hù)體驗(yàn)

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

又是天氣不錯(cuò)的周末,不冷不熱,一年里最舒服的一些時(shí)日了叭。感覺(jué)自從十一長(zhǎng)假結(jié)束之后有些東西就變掉了,自己熟悉的很多事情、很多感覺(jué),都像是在頭腦里向后退去了一層,要努力去抓才能讓它們回來(lái)的樣子誒。也許只是陽(yáng)光泛濫了太久的緣故。

好叭。今次的譯文是我最喜歡的一類(lèi)小菜,篇幅簡(jiǎn)短,實(shí)戰(zhàn)性強(qiáng)。原文 作者,來(lái)自Frog的一名交互設(shè)計(jì)師,講述了她與朋友在共同設(shè)計(jì)開(kāi)發(fā)拼車(chē)服務(wù)Ridejoy的iPhone客戶(hù)端 的過(guò)程中所遇到的一些挑戰(zhàn)以及相關(guān)的解決方案。前戲到這里,進(jìn)入正文。

著名互聯(lián)網(wǎng)公司最早期的界面是怎樣的?

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

人也挺好奇這東西的,于是就順便在網(wǎng)上搜集了下,以下資料,如有不準(zhǔn)確,請(qǐng)指出。

1、Google ,推出的時(shí)候界面其實(shí)就蠻簡(jiǎn)潔的了,只不過(guò)現(xiàn)在更簡(jiǎn)潔。

如何設(shè)計(jì)讓用戶(hù)滿(mǎn)意的IPHONE應(yīng)用?

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

你喜歡 iphone 嗎?你喜歡iphone的應(yīng)用嗎?面對(duì)著如此之多新奇各異的應(yīng)用,你是否有想 設(shè)計(jì) 一個(gè)屬于自己的應(yīng)用的沖動(dòng)那?那么你知道如何才能 設(shè)計(jì) 出讓用戶(hù)滿(mǎn)意的應(yīng)用嗎?我在平時(shí)的iphone應(yīng)用設(shè)計(jì)中,總結(jié)了一些經(jīng)驗(yàn)教訓(xùn)希望和大家一起進(jìn)行探討。

手機(jī)軟件啟動(dòng)畫(huà)面深入探討分析

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

 

動(dòng)需要時(shí)間,所以帶來(lái)了一些用戶(hù)體驗(yàn) 的問(wèn)題

1.用戶(hù)不知道機(jī)器在做什么,會(huì)懷疑機(jī)器遲鈍、效率低下

2.用戶(hù)等待會(huì)有厭煩情緒,直接影響對(duì)機(jī)器的情感

為了解決這些體驗(yàn)問(wèn)題,人們使用一個(gè)畫(huà)面來(lái)代替后臺(tái)正在運(yùn)行的代碼,換來(lái)人們對(duì)機(jī)器的好感。為了做到這一點(diǎn),很多公司都用心良苦,動(dòng)畫(huà)越來(lái)越細(xì)膩,形式也越來(lái)越多。這里不贅述舉例,主要談?wù)勔苿?dòng)應(yīng)用客戶(hù)端的啟動(dòng)畫(huà)面(以iOS平臺(tái)為例)。

移動(dòng)應(yīng)用程序的啟動(dòng)畫(huà)面存在的環(huán)境

移動(dòng)應(yīng)用程序存在的環(huán)境是惡劣的,這是相對(duì)PC來(lái)說(shuō)。即使產(chǎn)品設(shè)計(jì) 支出對(duì)功能做了很多減法,即使工程師日日夜夜在做性能優(yōu)化,應(yīng)用程序的啟動(dòng)還是需要一些時(shí)間。啟動(dòng)畫(huà)面在移動(dòng)客戶(hù)端產(chǎn)品存在的必要性不得而知。

移動(dòng)應(yīng)用程序啟動(dòng)畫(huà)面的設(shè)計(jì)法則一  ——避免顯示無(wú)關(guān)內(nèi)容,包括一個(gè)漂亮的圖,要盡力讓啟動(dòng)畫(huà)面變得有意義。對(duì)于用戶(hù)來(lái)說(shuō),他們希望立即體驗(yàn)?zāi)愕膽?yīng)用程序而不是欣賞一些無(wú)用信息。

如何理解這個(gè)法則,如何使用這個(gè)法則,下面的例子說(shuō)明了一切,你也可以下載并體驗(yàn)這些應(yīng)用,了解更多有關(guān)啟動(dòng)畫(huà)面的秘密,歡迎隨時(shí)交流。

場(chǎng)景一 品牌含義的延伸

如果啟動(dòng)時(shí)間不是一兩秒那么短的時(shí)間,我們可以利用這個(gè)時(shí)間展示應(yīng)用程序的品牌。但是不要只是展示品牌,最好能夠結(jié)合應(yīng)用程序所提供的服務(wù),將品牌的含義延伸到畫(huà)面中,帶給用戶(hù)一種親切感,或者讓用戶(hù)了解到產(chǎn)品的文化,或者其他你想讓用戶(hù)了解的故事。

案例一

只是標(biāo)識(shí)的設(shè)計(jì)。很多應(yīng)用都是這樣設(shè)計(jì)的。將自己的標(biāo)識(shí)往中間一放,告訴用戶(hù)我就是我。然后沒(méi)有任何情感的進(jìn)入了內(nèi)容界面。有的時(shí)候,標(biāo)識(shí)本身?yè)碛匈|(zhì)感,讓畫(huà)面還能充滿(mǎn)視覺(jué)的期待,如果像bing這樣,有點(diǎn)……

軟件啟動(dòng)畫(huà)面深入探討

淺談“移動(dòng)端圖片分享軟件”界面設(shè)計(jì)

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

 

背景趨勢(shì)
  讀圖時(shí)代的來(lái)臨,讓那140文字描述的Twitter顯得黯然無(wú)光,“圖片分享”被預(yù)言是社交應(yīng)用的下一次革命,自2010年picplz蟬聯(lián)Google market熱門(mén)應(yīng)用榜到去年instagram榮膺Appstore年度最佳應(yīng)用,圖片分享已成為當(dāng)下最熱門(mén)的社交應(yīng)用,數(shù)周前Facebook以10億美金收購(gòu)了僅有13人的創(chuàng)業(yè)團(tuán)隊(duì)instagram,此舉更印證了圖片分享這一趨勢(shì)。

Android手機(jī)應(yīng)用UI設(shè)計(jì)的10個(gè)建議

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

最近,許多開(kāi)發(fā)者進(jìn)駐手機(jī)領(lǐng)域,小團(tuán)隊(duì)也能夠構(gòu)想出優(yōu)秀和獨(dú)特的想法,使用業(yè)余時(shí)間便足夠來(lái)開(kāi)發(fā)應(yīng)用。

每個(gè)開(kāi)發(fā)循環(huán)遲早到會(huì)走到應(yīng)用幾近完成這個(gè)點(diǎn)。接下來(lái)要做什么呢?你可曾聽(tīng)說(shuō)過(guò)“用戶(hù)體驗(yàn)”這個(gè)詞?以下這10個(gè)技巧能夠使新手機(jī)應(yīng)用在發(fā)布前提升質(zhì)量,最大化發(fā)掘該應(yīng)用的潛力,從而最小化用戶(hù)差評(píng)和低下載量這種不良結(jié)果。

1、首次開(kāi)啟體驗(yàn)

優(yōu)秀的網(wǎng)站和手機(jī)應(yīng)用有諸多相似之處。這兩者都能夠迅速吸引用戶(hù)或訪問(wèn)者。如果沒(méi)有做到這點(diǎn),用戶(hù)很可能會(huì)轉(zhuǎn)而尋找其他替代品。多數(shù)用戶(hù)不愿意浪費(fèi)時(shí)間來(lái)弄清楚要如何運(yùn)行應(yīng)用或閱讀復(fù)雜的教程。他們會(huì)選擇放棄該應(yīng)用。

首次開(kāi)啟應(yīng)用時(shí),每個(gè)人的腦中都會(huì)浮現(xiàn)出相同的3個(gè)問(wèn)題:我在哪里?我現(xiàn)在能夠做什么?我接下來(lái)能夠做什么?

努力使應(yīng)用立即對(duì)這些問(wèn)題做出回答。如果你能夠在前數(shù)秒的時(shí)間里告訴用戶(hù)這是款適合他們的產(chǎn)品,那么他們勢(shì)必會(huì)進(jìn)行更深層次的發(fā)掘。

日歷

鏈接

個(gè)人資料

存檔