internet2share整理：中国在线旅游行业分布图

 

图标的圆角和光晕效果

圆角效果。图标的圆角效果是系统自动加上的，我们不能控制。这也是为什么我们看到的每个图标，其圆角效果是完全相同的。

光晕效果。光晕效果也是系统加上的，和“圆角”不同的是，光晕效果是一个可选项。我们可以通过设置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”。

举一个例子：

Icon.png

Icon@2x.png

这里需要注意的是，虽然在浏览器中，第二张图片的面积是第一张的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平板电脑上设计布局用的元素集合。 

继续看图~~

UI关键...请看下图: