图标的圆角和光晕效果
圆角效果。图标的圆角效果是系统自动加上的,我们不能控制。这也是为什么我们看到的每个图标,其圆角效果是完全相同的。
光晕效果。光晕效果也是系统加上的,和“圆角”不同的是,光晕效果是一个可选项。我们可以通过设置app的光晕参数(UIPrerenderedIcon),告诉系统是否要为我们的图标打上光晕效果。
总结:1)设计图标时请记得,图标的圆角效果是系统自动加上的,且是我们无法控制的。 2)设计图标前先决定,是否要使用系统内建的“光晕效果”。
每个图标都有相同的圆角。左边的两个图标有光晕效果,右边的两个没有。
启动画面
我们可以为app设置启动画面,以便在app启动的时候显示。苹果在其开发文档中,很明确地表示:启动画面的作用是给使用者一种错觉,一种app启动很快速的错觉。即,启动画面的初衷不是为了给用户某种“视觉上的冲击”。所以,苹果建议开发者使用app的“空白”界面作为启动画面。苹果自己的app就是这样做的。如果我们无视这种约定,而是使用和app界面完全无关的“插画”作为启动画面(很多app都是这样),那么一般情况下,会有“地摊货”的嫌疑。虽然大多数的普通用户不清楚启动画面“应该”是什么样子:或许用户会喜欢有“视觉冲击力的”插画;或许用户会奇怪为何到了4月,启动画面却仍旧是春节的主题;又或许用户什么感觉也没有。如果一定要使用插画,那么不妨先回答这样一个问题:考虑到苹果开发的app,其启动画面使用的都是朴素的“空白”界,那么我们的app是否有足够充分的理由,来支持使用插画呢?
如果要让启动画面漂亮,我们可以先让app的界面漂亮;App的界面漂亮,那app的“空白”界面也就漂亮;App的“空白”界面漂亮,启动画面也就漂亮了。
系统自带的“时钟”app。第一张是启动画面:使用的是app的“空白”界面。第二张是app运行时的截图。
App的界面漂亮 = App的“空白”界面漂亮,启动画面也就自然漂亮。比如,Tweetbot的启动画面。
Retina
iPhone 4和iPod Touch 4有一个新的特性:在屏幕尺寸不变的前提下,分辨率提升一倍(320 x 480 => 640 x 960)。苹果将这个特性命名为Retina。
用苹果的话讲:
Retina显示屏的超高像素密度已超过人眼能分辨的范围。
Retina对图像设计(图标、启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片。同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本。换言之,我们要准备两套图。
针对不同分辨率的图片,苹果规定了一个命名规范:假如一个普通分辨率的图片,文件名是“abc.png”,那么与其对应的高分辨率的文件名就应该是“abc@2x.png”,多了“@2x”。
举一个例子:
这里需要注意的是,虽然在浏览器中,第二张图片的面积是第一张的4倍,但是在支持Retina的iPhone中,显示的大小是一样的。
格式和尺寸
图标和启动画面的格式:推荐使用PNG格式,可以是标准的24位颜色(红、绿和蓝各用8位),外加alpha通道的8位。不要在app图标上使用透明色。
图标的尺寸:苹果有一份完整的文档,列出了app所需的全部图标尺寸,和其各自的使用环境。
Technical Q&A QA1686: App Icons on iPad and iPhone
- App程序包必须包含以下标记为“必须”的图标。
- 图片尺寸的单位是px。
表格一:只支持iPhone的app图标要求。
尺寸 | 文件名 | 用途 | 是否必须 | 备注 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必须 | 无 |
114×114 | Icon@2x.png | 高分辨率的iPhone 4主屏幕 | 可选,但建议加入 | 无 |
72×72 | Icon-72.png | 主屏幕,为了兼容iPad | 可选,但建议加入 | 无 |
29×29 | Icon-Small.png | Spotlight和设置app | 可选,但建议加入 | 无 |
50×50 | Icon-Small-50.png | Spotlight,为了兼容iPad | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
58×58 | Icon-Small@2x.png | 高分辨率的iPhone 4的Spotlight和设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
表格二:只支持iPad的app图标要求。
尺寸 | 文件名 | 用途 | 是否必须 | 备注 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必须 | 无 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可选,但建议加入。 | 无 |
29×29 | Icon-Small.png | iPad的设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
表格三:Universal的app图标要求。
尺寸 | 文件名 | 用途 | 是否必须 | 备注 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可选,但建议加入 | 文件应该是PNG格式,但文件名不要使用.png后缀。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必须 | 无 |
114×114 | Icon@2x.png | 高分辨率的iPhone 4主屏幕 | 可选,但建议加入 | 无 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必须 | 无 |
29×29 | Icon-Small.png | iPad和iPhone的设置app,iPhone的Spotlight | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可选,但建议加入。 | 无 |
58×58 | Icon-Small@2x.png | 高分辨率的iPhone 4的Spotlight和设置app | 如果app有设置程序包,那么建议加入。否则可选,但建议加入。 | 无 |
- 尺寸单位是px,宽x高。
- iPhone/iPod Touch的启动画面是全尺寸,iPad的则要去掉“状态栏”(Status bar)的高度(20px)。
- iPad的启动画面是分模式的:竖排(portrait)和横排模式(landscape)。
尺寸 | 设备 | 模式 |
---|---|---|
320 x 480 | 低分辨率iPhone/iPod Touch | 竖排和横排 |
640 x 960 | 高分辨率iPhone/iPod Touch | 竖排和横排 |
768 x 1004 | iPad | 竖排 |
1024 x 748 | iPad | 横排 |
在产品的设计中,“反馈”是很重要的一个交互特征,它是一种界面输出物,用以给用户正确的引导信息,帮助用户判断和决策。而反馈的形式也是多方面的,视觉、听觉、嗅觉、触觉、正面的、负面的,都是在为用户传递信息。而没有反馈或反馈很差的交互,只会让用户产生失效和无助的负面体验。
在煤气中加入硫和笨,为的是通过臭味提供危险信号的反馈。地铁里的门在关闭前会发出滴滴的报警声,是用来告知乘客车门将要关闭的信息。这都是生活中无处不在的反馈。
今天要和大家讨论的是在手机产品中,用户在信息交互过程中所得到的反馈形式。
1.反馈的必要性
在用户与产品进行交互的过程中, 产品对于用户的每一次行为都要有清晰的、及时的提示和反馈,从而使用户获得操作行为结果的信息。
如果产品不提供任何信息反馈, 那么用户就无法确定自己操作行为的的结果,反馈机制是产品设计中不可或缺的基本元素,它是用户前进道路的指向标。
2.反馈的形式
反馈的形式是多种多样的,在不同的场景不同操作中要选择适合的反馈类型。而在手机产品中更要考虑操作区太小被手指遮挡住的情况,反馈一定要明显,并呈现在可视范围内。下面尝试对手机产品中的反馈形式做一些总结。
2.1 气球状通知
气球状通知是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况。

▣ 1、没有不可点击的效果
一般按钮会有四态,不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态,那么一定要灰掉,或者拿掉按钮,否则会给用户误导。
▣ 2、菜单层次太深
菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜单分类,不能有太多层级的菜单,否则很难预期,也很难找到,寻找和返回都会变得很麻烦。
▣ 3、文字长度不加以限制
手机界面很小,寸土寸金,一页只能显示下6~10个列表,一行只能显示下10~16个字,标题栏的字数以5个以内为宜,标签栏也以2~3个为宜,那么这时候出现文字过长的情况,一定要定义一下处理方式,如果是选择型的,一般是截断或者打点缩略;如果是内容阅读型的,可以折行。但最合理的方式还是精简文字内容,缩短文字长度。
▣ 4、文字表意不明
由于手机是碎片时间、片段式阅读,所以手机界面上的文字表意性要求的更高,更苛刻,一定要在用户瞟到的瞬间,准确的传达信息。除了表意清晰之外,还要求语言精简,避免啰嗦;使用用户的语言而不是程序的语言;产品文案体现产品性格。
▣ 5、交互流程分支太多
做交互的时候一定要有一个任务流程的概念贯穿始终,用户是为了完成某个任务而使用软件的,交互设计师除了关注界面元素、跳转逻辑和交互反馈之外,还要关注用户任务,分得清主要任务和次要人物,给主要任务一个畅通无阻的清晰流程,不要给予太多可能的分...
本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富,适合用户体验设计师、界面设计师、产品设计师、JS前段开发、手机产品设计以及iPad和平板电脑产品设计等使用。
Lumzy
官方地址:http://www.lumzy.com/
Lumzy是一个网站应用和原型界面制作工具。使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。
Mockingbird
官方地址:https://gomockingbird.com/
Mockingbird(中文名:百舌鸟)是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果图。
The Pencil Project
官方地址:http://pencil.evolus.vn/en-US/Home.aspx
为设计图表和用户界面图形原型开发的一个自由和开源工具。
Dojo
官方地址:http://dojotoolkit.org/
Dojo提供了强大的性能并节省您的时间。这是适合经验丰富前端开发者的JS开发工具包。
Mocklinkr
官方地址:http://www.mocklinkr.com/
自定义排版托管工具Mocklinkr,让你不用再担心没有漂亮版面
MockFlow
官方地址:http://www.mockflow.com/signup/
MockFlow是一个在线工具,用户界面设计和协作版面编排工具。
Serena Prototype Composer
官方地址:http://www.serena.com/products/prototype-composer/index.html
Serena Prototype Composer是制作流程图,模拟程序流程和用户界面设计程序。
Cacoo
官方地址:http://cacoo.com/
Cocoo是一个用户友好的在线绘图工具,允许你创建一个如网站地图,线框,UML和网络图图等。 Cacoo可以免费使用。
DENIM
官方地址:http://dub.washington.edu:2007/denim/
一个早期非正式的网站和用户界面设计工具
Hot Gloo
官方地址:http://www.hotgloo.com/
网上应用线框
User Interface Design Framework
官方地址:http://www.webalys.com/design-interface-application-framework.php
一个免费提供网页设计师使用的用户界面设计工具。
Pattern Tap
官方地址:http://patterntap.com/
可以寻找一些设计资源与模式等。
User Interface Design Patterns
官方地址:http://ui-patterns.com/
提供一些热门的用户UI界面设计模式参考图,分类很详细,如果设计网站或UI界面可以上去找一些资源,很不错。
Patternry
官方地址:http://patternry.com/
Patternry是用户界面设计模式库的目的是帮助解决常见的接口设计问题。
Mephobox
官方地址:http://box.mepholio.com/
UI设计界面资源欣赏参考网站。
Android Asset Studio
官方地址:http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html
可以在线生成图表,只需要输入参数即可
Mobility
官方地址:http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/
移动用户界面设计使用,可以输入参数进行测试,很方便
Android UI Elements Set
官方地址:http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/
可以自由设定Android操作系统的用户界面元素。
OSX Leopard GUI Set
官方地址:http://www.tutorialshock.com/freebie/mac-osx-leopard-gui-set/
该软件包含一些常用的Photoshop原文件和PNG文件,这些元素都是用来设计GUI界面的素材,通过该软件你可以快速制作出一些出色的界面
ALL In One Web Elements Kit
官方地址:http://bestblogbox.com/freebies/all-in-one-web-elements-kit/
网页布局元素大集合,PSD文件。
iPad GUI Set
官方地址:http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
iPad平板电脑上设计布局用的元素集合。