DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 用戶體驗設計:iPhone和iPad應用的設計
用戶體驗設計:iPhone和iPad應用的設計
編輯:關於網頁技巧     

本文翻譯自《Computer Arts》中對Sarah Parmenter的訪談錄。

關於Sarah Parmenter
英國艾塞克斯(英國英格蘭東南部的郡)Youknowwho設計工作室的創始人,Sarah Parmenter專注於網站,iPhone和iPad應用的設計。設計工作室創立於2003年。查看更多設計案例請點這裡。

Sarah Parmenter在訪談中介紹了她在設計列車時刻表app時的流程和設計原則。
對設計師來說,iPhone和iPad是全新的平台。相比圖形和網站設計的經驗積累,在iPhone和iPad上的設計進化還都處於萌芽期。
在這裡,Sarah跟大家分享了簡單明了的火車時刻表軟件設計流程和基本原則,可能對你自己的設計項目有所啟發。為了簡化過程,我們假設獲取火車運行數據的API是現成的。

1.首先,要確定你的創意還沒有人做過。如果你發現已經有類似的app,那你需要比它做的更好,有一些獨特的優化設計。最好的調查方式是到iTunes Store上搜索已有的iPad程序。

2.當有了創意,你還需要有個明確的定位,它會在後續的設計過程中決定app的設計要點。app定位可以通過蘋果的人機界面指南(Human Interface Guidelines)圖來確定。
距離圖中坐標原點位置越遠的app,特點越明顯,越需要精美易用的界面設計,讓他們與其他競爭者明顯區分開來。在這個案例中,我們把app定位在原點位置,即簡單使用的輔助工具。

3.確定app定位後,接下來需要聚焦app的核心功能。在團隊合作設計時,這一點尤其重要。團隊在提出各種功能需求時,很容易陷入哪些功能要包含在第一個版本中的爭論。Apple把這個過程叫設計ADS(Application Definition Statement),或者叫設計精簡的ADS。

4.走到這一步,很多人會認為對app的設計已經想的很清楚,可以直接開始設計圖形界面甚至編碼了。實際上,前面的過程,僅僅設計的導入階段。我們接下來要做的,是產品草圖設計。一般我們用紙和筆來畫,它們是最簡單,學習成本最低的工具。按照我們的設計經驗,勾畫出用戶需要用到的界面,包括像按鈕之類的界面交互元素;篩選出核心用戶最常用的,最適合移動應用場景的功能。

5.我們要設計的是輔助工具軟件,通常,它只需要主界面,和一個在背面顯示相關信息的輔助界面,它通過信息按鈕觸發後翻轉顯示。如果你設計的是其他app,可能還需要更多的界面。重點是要設計界面與界面之間的切換方式,這一點在設計交付給開發人員時會顯得尤其重要。我們把這個過程叫做app功能穿越(App Functionality Walkthrough)。

6.現在,開始app的低保真原型設計。重點是不要陷入過多的細節,低保真只是把你紙面上的草圖數字化,便於在電腦上持續的改進。所以,盡量使用黑白,粗糙的線條和圖形來制作低保真,別在細節上糾結,浪費時間。

7.低保真原型完成後,開始設計注重細節和精度的高保真原型。我使用PhotoShop,你可以選用自己熟悉的其他工具。一般,我會為iPad設置尺寸為1024X768的畫布,然後根據低保真原型進行細節設計。

8.當我們設計app的主界面時,顯示列車時刻表是設計的重點。它不需要包含所有功能,應著重顯示列車到達時間,出發時間,列出延誤或者取消等必要信息。

9.鑒於Apple提倡有質感,有仿真度的圖形界面,我們讓app的界面設計盡量接近用戶熟悉的火車站時刻表。在配色上,使用灰色,黑色,亮黃和紅色,配合一些個性化的圖標來表示遲到和取消狀態。

10.很重要的一點是,app所展現的信息,必須簡潔明了,沒有多余的文字。所以,在界面設計上,我們沒有引入任何華麗的圖形或者其他的信息來干擾用戶,讓他們能一眼就看明白app的用途。在數據條目之間使用間隔色,用醒目的字體顯示到達和出發時間,這些都是很好的設計體現。主界面背後的相關信息界面,使用Apple的標准界面即可,為用戶提供搜索列車後加入關注的功能。

11.我使用了很多細微的漸變和一些材質,重要的是,確保所有的信息都一目了然,不隱晦,不誤導用戶。

12.現在可以開始考慮icon的設計。這將決定app在appstore上的辨識度。你可以從簡單的輪廓設計開始設計,先把核心創意表現出來。

13.除非有必要,你的icon最好不要包含文字,盡量使用跟你的app圖形界面一致的材質和漸變。你如果想給用戶呈現高質量的UI設計,別忘了把icon設計成29×29,72×72,和512×512三種尺寸。

14.如果你自己不開發app的功能,還需要把清晰的設計指南交付給開發人員。我會把界面和描述集中到一張大圖,並盡可能的把所有可遇見的情況都給開發人員描述清楚。

15.最後,我們把低保真原型,所有的圖形界面設計圖(一般是PSD)和圖標打包在一起,做上清楚的標注,發送給開發人員。有時候,你可能還需要對PSD進行切圖,存成PNG,方便開發人員直接使用。

譯後感:

 

Sarah所講述的設計流程,跟我們設計傳統web軟件的流程沒有太大差別,都是基於統一的設計方法論。但是,appstore開創了一個全新的軟件生態系統,它不僅改寫了軟件的交付和消費方式,也對軟件的設計產生著顯著的影響。

appstore上成功的應用,絕大部分都是面向個人的軟件,它們功能簡單(相對於傳統的B/S或者C/S軟件來說),注重滿足用戶的核心需求,設計上極力追求完美,我把他們叫做微應用。由於這個微字,要求這些應用的設計過程要比傳統的UCD過程更敏捷;同時,微字帶來了appstore超過30萬的應用(截至2010年12月),也造就了贏家通吃的生存法則。

成功的app設計,要求在上線第一天就能夠吸引用戶。如果你上市的第一個月沒有進入排行榜,那馬上會在第二個月死亡。 微應用把Release soon, Release often法則打破了,它執行的是蘋果法則,Release awesome, Release incredible

Sarah的設計流程,可以歸納為以下的步驟:

市場定位 —》App定義(ADS) —》概念草圖 —》低保真原型 —》高保真原型 —》設計交付物說明和整理 —》外包開發

在這個流程中,並沒有傳統UCD方法論中強調的用戶分析,場景分析,信息架構設計等環節,他們已經變成基本原則,融入到具體的原型設計過程中去了。為什麼會這樣?還是因為微應用的特性決定的。軟件足夠小,不需要也不可能承受冗長的基礎分析和設計過程所帶來的成本,它需要的是更敏捷的設計流程,用盡量完美的設計,來滿足用戶的特定需求。

同樣的,敏捷設計流程,逼迫設計團隊必須裁剪需求,才能更好的適應贏家通吃法則。一個小軟件的失敗,損失的可能只是4周的工作時間,這並不是什麼大不了。你完成可以通過另一個新產品來獲得成功。

這篇訪談給我最大的啟發,就在於敏捷設計對於app設計的重要性,還有老外在面對微應用時,對於設計流程的堅持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved