【介面設計】iPhone App 的設計細節

标签: 介面/互動/網頁設計 app iphone 介面 設計 | 发表时间:2012-04-27 00:02 | 作者:iwucha
出处:http://www.mydesy.com

Sarah Parmenter在訪談中介紹了她在設計列車時刻表app時的流程和設計原則。
對設計師來說, iPhoneiPad是全新的平台。相比圖形和 網站設計的經驗積累,在 iPhoneiPad上的設計進化還都處於萌芽期。
在這裡,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,方便開發人員直接使用。

 

 

 

 

文章出處: 愛午茶


不能錯過的的創意:

線上支援《 Vimeo iPhone App 》

設計一個自己的iPhone App吧!

設計師必備的iPhone應用程式

飛爾精選.iPhone桌布.來自設計師之手

推廣App的關鍵要素
来自无觅网络的相关文章:

豪华的iPhone保护套-CalypsoCase (@jandou)

超酷!iPhone对讲机:Transceiver for iPhone (@ixiqi)

App Store:苹果的寡头游戏? (@myonlystar)

Iphone4 耳朵外壳创意设计 (@poboo)

十款iPhone创意外壳 (@ixiqi)
无觅


相关 [iphone app] 推荐:

DBA Notes 也有 iPhone App 了 ?

- Epile - DBA notes
刚才在我的 Google+ 上发布了一条半开玩笑的信息:DBA Notes 也有 iPhone App 了. 其实没那么神奇,借助于这款 iOS App : Bloapp .. 安装完这个 App 之后,到其网站上"创建"你的 App,其实主要是一些视觉风格的定义,用它扫描生成的这个 QR Code :.

iPhone App自动化测试

- BeerBubble - Taobao QA Team
         无线客户端的发展很快,特别针对是android和ios两款无线操作系统的客户端应用,相应的测试工具也应运而生,这里主要给大家介绍一些针对iPhone App的自动化测试工具.          首先,我们把这些测试框架分为三大类:接口测试工具、注入式UI测试工具、录放式UI测试工具.

苹果拷贝被拒的iPhone app

- 小天 - Solidot
Theregister报导,去年英国开发者Greg Hughes向iTunes App Store递交了一个无线同步iPhone和iTunes的应用Wi-Fi Sync,但遭苹果拒绝. 他改为递交到第三方应用商店Cydia(需越狱). 本周一,苹果宣布了iOS 5,其中一项新特性就是无线同步功能. 除了功能相似外,有趣的是两种应用的logo也惊人的吻合.

为iPhone App切图的技巧

- armgod - Kevin Cao's Blog
为了支持iPhone 4的视网膜屏,我们开发App时要准备两套大小的图片资源. 一般情况下,设计师就只做好高分辨率的Layout,我们在切图的时候多存一个缩小的版本. 切图的工作本来就繁琐,现在居然还增加了一倍工作量,实在难以忍受. 所以今天我们就来探讨一下利用工具提高效率的做法. 说明:有一些图片不能直接缩小,为了追求UI设计像素级精确的美感,设计师应该做好两套Layout.

iphone Web App 导航设计探讨

- Vingel - 互联网的那点事
最近在做iphone端Web App的项目. 由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间. 在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多. 导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. iphone Native App较常见的导航如下图所示:.

如何用HTML5制作iPhone App

- - HTML5研究小组
所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历. 你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了. 我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的. 你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序.

同学录iPhone App开发心得

- - 陈轶的盛夏厅
想起了似乎是一个月的事情了,但实际上是上周的事情. 周一中午,我突然发神经,决定给高中同学们开发一款同学录一样的App. 我需要一个App来证明自己的能力. 我自己也的确需要这么一个东西,我把初中同学的同学录拍成照片放在相册里,高中同学的同学录则放在GoogldDocs. 还有一个原因,我一直希望做一个有人真的会用的App出来,而这次,用户就是现成的,意味着从测试版开始就是有用户的;我甚至可以向他们咨询真正想要什么.