當(dāng)產(chǎn)品相對(duì)穩(wěn)定與可控，小神有愿望快速記錄這個(gè)項(xiàng)目。

內(nèi)容涉及小神參與產(chǎn)品設(shè)計(jì)與執(zhí)行的過(guò)程，由交互/視覺(jué)設(shè)計(jì)層面的需求分析、功能設(shè)計(jì)與設(shè)計(jì)執(zhí)行組成。

與其帶入一些工作中的設(shè)計(jì)技巧，小神更愿意分享其中的設(shè)計(jì)思想與理念憧憬。

設(shè)計(jì)之所以不同于美化，是因?yàn)榍罢弑毁x予了驅(qū)動(dòng)的靈魂。

背景

milk香港版，內(nèi)部命名”milk mobile”。是香港潮流雜志《milk》在移動(dòng)新領(lǐng)域的合作嘗試。目標(biāo)設(shè)備為主流的中高端便攜移動(dòng)設(shè)備，iPhone/iPod touch/Android Phone/WP7…目前iOS版本如期發(fā)布，您可以從這里獲得最新的版本。其它平臺(tái)蓄勢(shì)待發(fā)…

在發(fā)布后兩周中，milk香港版榮得Apple app store的”新品推薦”與”熱門推薦”，Lifestyle排位第二。

小神在過(guò)去的三個(gè)月，從零開(kāi)始著手milk香港版的設(shè)計(jì)執(zhí)行。

設(shè)計(jì)的生命周期

在展開(kāi)一項(xiàng)工作時(shí)，我們都希望對(duì)它在整體上有所控制。

一個(gè)相對(duì)清晰的timeline使得設(shè)計(jì)在時(shí)間與質(zhì)量之間平衡，并在恰當(dāng)?shù)睦锍瘫�有所產(chǎn)出，跟隨整個(gè)項(xiàng)目進(jìn)展。

milk mobile的設(shè)計(jì)定義

milk mobile的品牌與內(nèi)容定位，決定這即是一面向城市快速消費(fèi)的精神食糧。

它具備幾個(gè)特質(zhì)——高時(shí)效性、眼球經(jīng)濟(jì)、缺乏耐心的。

繼而在視覺(jué)與操作著力營(yíng)造如此的氛圍：

信息傳遞的高度流暢。

信息呈現(xiàn)的節(jié)奏感。

輕松的操作瀏覽環(huán)境。

探索從Splash screen開(kāi)始

Splash是用戶進(jìn)入App，直到程序完全可用前，顯示的第一個(gè)視圖。

Splash Screen概念存在的價(jià)值

品牌識(shí)別（權(quán)重30%）

當(dāng)用戶通過(guò)桌面icon進(jìn)入milk香港版，會(huì)再此傳達(dá)具有品牌象征的手寫milk英文字符。與milk其它產(chǎn)品形象統(tǒng)一，用戶得以加深認(rèn)同感與歸屬感。

必要的數(shù)據(jù)加載與反饋過(guò)程（權(quán)重70%）

對(duì)于milk香港版而言，splash screen的存在更多承載的是功能層面的需求。

對(duì)網(wǎng)絡(luò)與cache的不同狀態(tài)產(chǎn)生的scenarios進(jìn)行處理，并提供良好的反饋。

在iOS Human Interface Guidelines，對(duì)Splash的概念有較為詳細(xì)的闡述，你可以點(diǎn)擊這里查看。但并不贊同對(duì)Splash Screen的一個(gè)定義——Launch Images。

我們所感知到的信息是流動(dòng)的，圖像與其承載的信息也應(yīng)該在表現(xiàn)上流動(dòng)，貼近感知。

流動(dòng)的圖像表現(xiàn)上更貼近于animation，iOS從文字示意上誤導(dǎo)設(shè)計(jì)人員并限制了它的可能性。

Launch/Splash是一個(gè)無(wú)限延展的屏幕空間，不僅是”圖像”。

作為跨平臺(tái)設(shè)計(jì)，Android對(duì)Splash screen的理解，更注重實(shí)用性。

If your application has a time-consuming initial setup phase， consider showing a splash screen or rendering the main view as quickly as possible and filling in the information asynchronously. In either case， you should indicate somehow that progress is being made， lest the user perceive that the application is frozen.

Windows Phone 7注重信息傳遞的效率。絕對(duì)效率是應(yīng)該被真正推崇的，當(dāng)你不能提供更好的理由使其存在。

Don’t use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.

Don’t use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often， that assumption is correct.

通常，我們尊重平臺(tái)的design guidelines，它使得你的app與OS融為一體。

milk香港版Splash screen wireframes

基于以上的定義，沉淀設(shè)計(jì)。文檔的細(xì)則，受限于NDA將不被分享。但你可以在測(cè)試app的過(guò)程中，看到不同scenarios下的表現(xiàn)。

當(dāng)無(wú)網(wǎng)絡(luò)無(wú)cache狀態(tài)。

milk香港版不可用，沒(méi)有數(shù)據(jù)的App是丑陋的。用戶更需要的是一個(gè)友好的幫助界面，提供狀態(tài)反饋與解決方案，在易識(shí)別的區(qū)域提供異常網(wǎng)絡(luò)狀態(tài)與”重試”入口。

當(dāng)有網(wǎng)絡(luò)無(wú)cache狀態(tài)。

客戶端從服務(wù)器端取得少量的必要數(shù)據(jù)，繼而無(wú)縫過(guò)渡。

當(dāng)無(wú)/有網(wǎng)絡(luò)有cache狀態(tài)。

客戶端優(yōu)先讀取cache，弱化用戶不需要參與的載入狀態(tài)信息，并無(wú)縫過(guò)渡。

受益于尺寸變形動(dòng)畫，milk logo的使用場(chǎng)景由Splash自然轉(zhuǎn)化到app頁(yè)面。于此同時(shí)，漸隱Splash背景與隱藏提示信息。由此結(jié)束整個(gè)Splash screen。

milk香港版Splash screen的視覺(jué)設(shè)計(jì)與交付

Splash的視覺(jué)風(fēng)格統(tǒng)一于app完整的視覺(jué)設(shè)計(jì)。

黑白為色調(diào)，賦予皮革材質(zhì)，以幽暗的頂部光線滲透全部的元素。致力于簡(jiǎn)潔但不失細(xì)節(jié)的表現(xiàn)。（視覺(jué)設(shè)計(jì)將單獨(dú)成文）

使得用戶將視覺(jué)重心停留在表現(xiàn)豐富的資訊信息。

針對(duì)iPhone的屏幕與app的默認(rèn)展示方式，需要320×480以及為retina屏幕的640×960兩種尺寸的設(shè)計(jì)（單位px）。

Android有著更廣的屏幕設(shè)計(jì)需求，但從實(shí)際的開(kāi)發(fā)實(shí)踐，我們只保持了480×800的設(shè)計(jì)資源。這被驗(yàn)證為是體積與質(zhì)量的最佳妥協(xié)方案。

接下來(lái)的是其中的一則redlines圖像，此類的設(shè)計(jì)資源為團(tuán)隊(duì)的開(kāi)發(fā)人員提供參考，使得整體項(xiàng)目運(yùn)轉(zhuǎn)順利。

當(dāng)時(shí)間充裕，執(zhí)行Flash實(shí)現(xiàn)的高仿真模型，更高效的推動(dòng)溝通，并為開(kāi)發(fā)人員提供參考。

Review設(shè)計(jì)是一個(gè)自我提高的過(guò)程，并希望對(duì)讀到該文的同學(xué)有所幫助。

文章來(lái)源：mdong.org 轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： 產(chǎn)品設(shè)計(jì) 交互設(shè)計(jì) milk香港版 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。