0条评论 | 46 views

创造一个统一外观,感觉完整的用户界面会增加你的产品附加价值。精炼的图形风格也使用户觉得用户界面更加专业。

本文档提供了一些信息,帮助你如何在应用界面的不同部分创造图标来匹配 Android 2.x框架下的普遍风格。遵守这些原则会辅助你为用户创造一个流畅而统一的体验。
为了使你创建图标的工作进行的更加快速,你可以下载 Android 图标模板包。更多信息请浏览Android图标模板包的使用
Android系统被设计在一系列屏幕尺寸和分辨率不同的设备上运行的。当你为自己的应用设计图标时,必须知道,你的应用有可能在任何设备上安装运行。正如支持多屏幕文档中所描述,  Android 为你直接提供这样的图标,他们会在任何设备上正确的显示,无论这些设备的屏幕大小和分辨率如何。
一般来说,推荐的方式是为三种普遍的屏幕密度(如表1)中的每一种都创造一套独立的图标。然后,把他们储存在你的应用中特定的资源目录下。当你的应用运行时,Android平台将会检查设备屏幕的特性,从而加载特定密度资源目录下相应的图标。想要了解更多如何存储特定密度资源的信息,请参阅创造合格屏幕尺寸和密度的办法目录。
Android 设备的屏幕密度基线是中等。因此,一种被推荐的为多种屏幕密度创造图标方式是:

  • 首先为基准密度设计图标(看表一为实际的像素尺寸设计的图标)。
  • 把图标放在你的应用的默认可绘制资源中,然后在 Android 可视化设备(AVD)或者HVGA设备如 T-Mobile G1中运行应用。
  • 根据需要测试和调整你的基准图标。
  • 当你对在基准密度下创建的图标感到满意的时候,为其他密度创造副本。
    • 把基准图标按比例增加为150%,创造一个高密度版本。
    • 把基准图标按比例缩小为75%,创造一个低密度版本。
  • 把图标放入你的应用的特定密度资源目录中。例如:
    • 中密度版本在 res/drawable-mdpi/ 目录下运行(或在默认 res/drawable/ 目录下运行)
    • 高密度版本在 res/drawable-hdpi/目录下运行。
    • 高密度版本在res/drawable-ldpi/目录下运行。
  • 如果需要,测试和调整高密度和低密度的图标。

关于如何创造和管理多密度图标集,参阅对设计师的小提醒
表 1. 对三种普遍屏幕密度中每一种密度的所需要的成品尺寸图标的摘要

Icon Type 对于普遍的屏幕密度标准版本尺寸(像素表示),

 
低密度屏幕(ldpi) 中密度屏幕(mdpi) 高密度屏幕(hdpi)
启动器 36 x 36 px 48 x 48 px 72 x 72 px
菜单 36 x 36 px 48 x 48 px 72 x 72 px
状态栏 24 x 24 px 32 x 32 px 48 x 48 px
标签 24 x 24 px 32 x 32 px 48 x 48 px
对话 24 x 24 px 32 x 32 px 48 x 48 px
列表视图
 
24 x 24 px 32 x 32 px 48 x 48 px
启动器图标是一个图形,代表了设备的主页和启动器窗口中的应用。
用户会在点击主页底部的图标中打开启动器。启动器打开,显示所有已经安装应用的图标。他们被以格状排列。用户选择一个应用,通过任何可以得到的硬件导航控制,例如轨迹球点击启动器图标。
用户也可以把一个图标从启动器窗口中拖出来,放在主页上,来更方便的访问应用。再这种情况下,系统会显示你的应用的启动器图标在主页墙纸上的映射。此渲染的映射尺寸与在启动器中渲染的尺寸相同。
系统控制了所有启动器图标的缩放,所以他们被渲染为统一的高和宽。被渲染的启动器图标的实际像素尺寸在随着设备屏幕的像素尺寸和屏幕密度的不同而显示的不同。为了保证你的图标渲染效果最佳,请提供为低密度,中密度和高密度屏幕制作的图标。想得到更多信息,请参阅上面的提供特定密度图标集或下面的为设计师的建议
风格你创造启动器图标应该符合以下原则的一般风格。这个准则并不限制你可以做的图标,而是强调你的图标可以在其他设备上共享的普遍的办法。图1提供了例子。
图 1.启动器图标风格的插图

干净和现代:
 

  • 启动器图标应该是现代的,有时有点古怪,但是他们不应该是过时和粗糙的。如果可能的话,你应该避免过度使用象征性的隐喻。

简单和标志性的:
 

  • Android启动器图标应该是自然的抽象表现;你的图标应该高度简化和夸张,以至于他们可以在小尺寸时合适显示。你的图标不应该过于复杂。
  • 尝试用一个简单的部分作为整体的象征性的代表(例如,音乐图标以扬声器作为特征)。
  • 考虑使用自然轮廓和形状,包括几何的和有机的,与现实(不是照片般的真实)映射。
  • 你的图标不应该呈现一个对更大的图像不正确的观点。

触觉和质感:
 

  • 图标应该表现为不平淡的,有质感的材料。更多信息请看下面的材料和色彩。

面向前方和顶部照明:
 

  • Android 2.0和以后的平台的新规定: Android启动器图标应该面向前方,透视非常小,而且应该顶部照明。

此外,注意所有图标应该有独立的文字标签,而不是把文字设计嵌入到图标里面,把努力用在使图标有特色和难忘中去。要看更多Android系统下应用的启动器图标的案例,请参阅标准启动器图标
做什么和别做什么以下有一些在你为自己的应用设计一个图标的过程中“可以做的的和不要做的”例子

Android启动器图标是...
  • 现代的,简约的,不平坦的,有触感,和质感的
  • 面向前方和顶部明亮,整体而言,色彩在一定的色谱中
Android 启动器图标不是...
  • 过时的,过分复杂,光滑的,平坦的
  • 旋转的, 剪裁不正的,过于深色的
图 2. 启动器中"做什么和别做什么"的例子

质感和颜色启动器的图标应该利用触觉,顶部照明,使用纹理材料。即使你的图标只是一个简单的形状,你应该尝试把它们当做真实世界的材料渲染。
该平台的默认应用中启动器图标用了以下图3所示的材料。 你的图标可以使用这些材料也可以创建新的材料。
Android 启动器图标经常包括由较小的形状组成一个较大的形状,并结合成一个中立的形状和一个中立的颜色。图标可能会使用中性色彩的组合,但保持较高的对比度。如果可能的话,每个图标不应该使用超过一个原色。
启动器的图标应该使用一个又限制的调色板,包含一系列中立的颜色和原色。该图标不应该过分饱和。
推荐的启动器图标调色板应用,如图4所示。你可以使用条侧板中的基本颜色和高亮元素。你可以使用白色到黑色垂直线性渐变叠加一起的调色板的颜色。这产生的印象是,光从顶部照射进来,且保持颜色的低饱和度。
图 3.你可以用它来创建你的图标的材料的例子.

图. 从推荐调色盘中选出的基本和高亮颜色组合形成的材料的例子

当你从简易的调色盘中取出一个高亮颜色组成材料时,你可以创造如图5所示的材料组成。为了帮助你开始,图标包(icons pack)包括一个Photoshop模板文件(Launcher-icon-template.psd),文件提供了默认的材料,颜色和梯度。
5. 推荐图标调色板.

尺寸和位置启动器的图标应该使用不同的形状和形式,而且这些必须缩被缩放和定位来创建一致的视觉重量。
图6展示了图标放置在各版本中的不同的方式。至于更详细的描述,就是为了制造一个一致的直觉质量,并允许加入阴影,你应该使图标比实际版本中的范围小一些。如果你的图标是方形或近方形,尺寸应该更小。
 

  • 为全版本边界框显示为红色。
  • 推荐的实际图标边界框显示为蓝色。该图标框的大小比完整版中的尺寸更小,以便有空间包含阴影和特殊的图标处理。
  • 对于方形图标,推荐的边界框是橙色显示的。为正方形图标框比较小是因为要在两种类型的图表中建立同样的视觉重量。

  • 高密度屏幕(hdpi) 的图标尺寸:
    • 全版本: 72 x 72 px
    • 图标: 60 x 60 px
    • 正方形图标: 56 x 56 px
  • 中密度屏幕(mdpi) 的图标尺寸:
    • 全版本: 48 x 48 px
    • 图标: 40 x 40 px
    • 正方形图标: 38 x 38 px
  • 低密度屏幕(ldpi) 的图标尺寸:
    • 全版本: 36 x 36 px
    • 图标: 30 x 30 px
    • 正方形图标: 28 x 28 px
图 6. 图标版本范围中图标的尺寸和位置.
 
使用启动器图标模板Android的图标模板包2.0是一个包含默认图标的材料和颜色调色板的模板。该模板为psd格式,方便Photoshop或相似的图像编辑器编辑。
To get started, fir要开始使用,首先下载 Android的图标模板包2.0.
一旦你下载了模板包,解压缩,并在Adobe Photoshop或类似的图片编辑器中中打开 Launcher-icon-template.psd ,注意调色板的材料和颜色。您可以使用该模板创建一个启动器的图标作为起点。
在创建您的图标之后,你可以按照以下规范添加阴影效果,作为你创造的合适的图片大小。
WVGA (高密度) 屏幕的阴影:
  • 效果: 底部阴影
  • 颜色: #000000
  • 混合模式: 多重
  • 不透明度: 75%
  • 角度: 90°
  • 距离: 2px
  • 扩展: 0%
  • 尺寸: 5px
HVGA (中密度) 屏幕阴影:
  • 效果: 底部阴影
  • 颜色: #000000
  • 混合模式: 叠加
  • 不透明度: 75%
  • 角度: 90°
  • 距离: 1px
  • 扩展: 0%
  • 尺寸: 3px
当添加了阴影,图标制作完成后,输出一个格式为PNG的透明文件,以确保您的图标在高密度屏显示大小为72 x72像素和在中密度屏显示大小为48 x48像素。关于为什么你应该为高,中,低密度的屏幕提供不同的启动器版本,参阅支持多种屏幕.
菜单图标
菜单图标是一个图形元素,当用户按下菜单按钮时在向用户显示菜单,在弹出菜单里显示。他们是平面展示的。菜单图标元素不能表现为3D或者透视的。
正如提供特定密度图标集中所描述的,你应该为低,中,和高密度的屏幕制作相应的图标集。这可以确保你的图标在一系列安装你的应用的设备中正常显示。见表1 所建议的为每种密度所创造的图标尺寸。此外,请参阅对设计师建议 中关于如何使用多组图标。
结构

  • 为了保持一致性,所有的菜单图标必须使用相同的原调色板和相同的效果。欲了解更多信息,参阅菜单图标颜色调色板
  • 菜单图标应包括圆角,要保证逻辑正确。例如,在图7中,合理表现圆角的部分是房顶而不是建筑余下的部分。
  • 所有这个页面上的特定尺寸是建立在一个48x48像素的画板,6像素安全边栏的基础上的。
  • 图标菜单效果(外发光)在灯光,效果,阴影 中被描述,它在必要时可以与6px安全边栏重叠。而基础形状必须始终留在安全边栏内。
  • 最后的图形必须导出为一个透明的PNG文件。
  • 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。

图 7.
菜单图标中的安全栏和圆角 。 图标尺寸是48x48.

 
灯光,特效和阴影菜单图标是平的。轻微凹陷和一些其他特效,如下所示,可以创造纵深感。
图 8.菜单图标的灯光,特效和阴影.
1. 前部: 从原色调色板中挑出颜色填充渐变
2. 内投影: 黑色 | 20 % 不透明度
角度90° | 距离 2px
大小 2px
3. 外发光: 白色 | 55% 不透明度
扩展 10% |大小 3px
5. 内斜角: 深度1%
角度 90° | 高度 10°
发光白色70%不透明度
阴影黑色 25% 不透明度
 


 
颜色调色盘
白色
r 255 | g 255 | b 255
用于外发光和斜面的高光。
渐变填充
1:  r 163 | g 163 | b 163
2:  r 120 | g 120 | b 120
用作颜色填充。
黑色
r 0 | g 0 | b 0
用于内部阴影和斜面的阴影。
步骤
  • 使用工具如Adobe Illustrator创建基本形状。
  • 导入到一个像Adobe Photoshop的工具,把它放置在48x48像素的透明的背景的图像上。注意安全栏。
  • 增加如图8所描述的效果。
  • 导出一个48x48像素的透明PNG格式的图标。
"做这些和不要做这些"在为你的应用做菜单图标时,下面是一些“做这些和不要做这些”要考虑的例子。
状态栏图标用来在状态栏中展示你的应用中的通知,他们与菜单图标非常相似,但是更加小,对比度更高。
正如提供特定密度图标集中所描述的,您应该为低,中和高密度的屏幕制作独立的图标集。这可以确保你的图标在一系列安装了你的应用的设备中显示正常。见为每个密度屏幕所建议的尺寸。此外,请参阅对设计师的建议中关于如何创建图标集的描述。
结构

  • 圆角必须始终被应用到基础的形状中和状态栏图标细节中,如图9所示。
  • 所有这个页面上的特定尺寸是建立在一个25x25像素的画板,2像素安全边栏的基础上的。
  • 状态栏图标可以在必要时与安全栏左右重叠,但绝不能与安全栏的顶部和底部重叠。
  • 最后的图形必须导出为一个透明的PNG文件。
  • 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。

阅读全文...

营销   

0条评论 | 29 views
你知道手机UI设计的禁忌吗?

策划   

0条评论 | 43 views
  题记:Pinterest名 称由Pin(图钉)+Interest(兴趣)组成,寓意为把自己感兴趣的东西(图片)用图钉钉在钉板(PinBoard)上,让用户不断发现新图片。 Pinterest页面底端自动加载无需翻页功能,让用户不断发现新图片。为用户提供在线收藏和分享Pinterest视觉艺术图片的服务。


国内类pinterest一览



只用了一年的时间,Pinterest一跃成为仅次于TwITter和Facebook的第三大社交网站,而在这股发展潮流的影响之下,国内的网站也纷纷开始跟风,要么建设新的,要么就是在网站下开始Pinterest类型的栏目,到罗宾发稿为止,已经统计国内有30多家类Pinterest模式的网站。那么Pinterest网站是不是真的能够取得成功呢?Pinterest网站是不是也和团购网站一样,最后会有一个大浪淘金的过程?这些问题就让我们拭目以待了。
本文主要分析Pinterest红火的原因
通过国外对于Pinterest网站的数据分析。我们可以看到从去年9月份到今年2月份,Pinterest新用户人数增加了886%,以每月53% 的速度增长。Pinterest网站的用户平均每天花费在网站上的时间仅仅98分钟,相对于facebook的7小时,tumblr的2.5小时有很大的 差距。是什么原因让Pinterest让人如此痴迷呢?

简单的设计
  简单的设计,方便的使用是Pinterest的特点,用户在收集信息中所需要花费的时间变得非常的少,网站的页面经过了精心的布局,只看到最为 主要的信息。而信息收集的简单也造成了Pinterest网...

阅读全文...

策划   

0条评论 | 32 views

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

 

营销   

0条评论 | 86 views

图标的圆角和光晕效果

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

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

策划   

0条评论 | 32 views

在产品的设计中,“反馈”是很重要的一个交互特征,它是一种界面输出物,用以给用户正确的引导信息,帮助用户判断和决策。而反馈的形式也是多方面的,视觉、听觉、嗅觉、触觉、正面的、负面的,都是在为用户传递信息。而没有反馈或反馈很差的交互,只会让用户产生失效和无助的负面体验。

 

在煤气中加入硫和笨,为的是通过臭味提供危险信号的反馈。地铁里的门在关闭前会发出滴滴的报警声,是用来告知乘客车门将要关闭的信息。这都是生活中无处不在的反馈。

今天要和大家讨论的是在手机产品中,用户在信息交互过程中所得到的反馈形式。

 

1.反馈的必要性

在用户与产品进行交互的过程中, 产品对于用户的每一次行为都要有清晰的、及时的提示和反馈,从而使用户获得操作行为结果的信息。

如果产品不提供任何信息反馈, 那么用户就无法确定自己操作行为的的结果,反馈机制是产品设计中不可或缺的基本元素,它是用户前进道路的指向标。

 

2.反馈的形式

反馈的形式是多种多样的,在不同的场景不同操作中要选择适合的反馈类型。而在手机产品中更要考虑操作区太小被手指遮挡住的情况,反馈一定要明显,并呈现在可视范围内。下面尝试对手机产品中的反馈形式做一些总结。

 

2.1 气球状通知

气球状通知是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况。

阅读全文...

策划   

0条评论 | 34 views
在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的产品心生怨念。刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉。


▣ 1、没有不可点击的效果

一般按钮会有四态,不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态,那么一定要灰掉,或者拿掉按钮,否则会给用户误导。

▣ 2、菜单层次太深

菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜单分类,不能有太多层级的菜单,否则很难预期,也很难找到,寻找和返回都会变得很麻烦。

▣ 3、文字长度不加以限制

手机界面很小,寸土寸金,一页只能显示下6~10个列表,一行只能显示下10~16个字,标题栏的字数以5个以内为宜,标签栏也以2~3个为宜,那么这时候出现文字过长的情况,一定要定义一下处理方式,如果是选择型的,一般是截断或者打点缩略;如果是内容阅读型的,可以折行。但最合理的方式还是精简文字内容,缩短文字长度。

▣ 4、文字表意不明

由于手机是碎片时间、片段式阅读,所以手机界面上的文字表意性要求的更高,更苛刻,一定要在用户瞟到的瞬间,准确的传达信息。除了表意清晰之外,还要求语言精简,避免啰嗦;使用用户的语言而不是程序的语言;产品文案体现产品性格。

▣ 5、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终,用户是为了完成某个任务而使用软件的,交互设计师除了关注界面元素、跳转逻辑和交互反馈之外,还要关注用户任务,分得清主要任务和次要人物,给主要任务一个畅通无阻的清晰流程,不要给予太多可能的分...

阅读全文...

策划   

0条评论 | 62 views

本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富,适合用户体验设计师、界面设计师、产品设计师、JS前段开发、手机产品设计以及iPad和平板电脑产品设计等使用。

Lumzy

官方地址:http://www.lumzy.com/

Lumzy是一个网站应用和原型界面制作工具。使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。 

Lumzy

Mockingbird

官方地址:https://gomockingbird.com/

Mockingbird(中文名:百舌鸟)是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果图。 

Mockingbird

The Pencil Project

官方地址:http://pencil.evolus.vn/en-US/Home.aspx

为设计图表和用户界面图形原型开发的一个自由和开源工具。 

The Pencil Project

Dojo

官方地址:http://dojotoolkit.org/

Dojo提供了强大的性能并节省您的时间。这是适合经验丰富前端开发者的JS开发工具包。 

Dojo

Mocklinkr

官方地址:http://www.mocklinkr.com/

自定义排版托管工具Mocklinkr,让你不用再担心没有漂亮版面

Mocklinkr

MockFlow

官方地址:http://www.mockflow.com/signup/

MockFlow是一个在线工具,用户界面设计和协作版面编排工具。 

MockFlow

Serena Prototype Composer

官方地址:http://www.serena.com/products/prototype-composer/index.html

Serena Prototype Composer是制作流程图,模拟程序流程和用户界面设计程序。 

Serena Prototype Composer

Cacoo

官方地址:http://cacoo.com/

Cocoo是一个用户友好的在线绘图工具,允许你创建一个如网站地图,线框,UML和网络图图等。 Cacoo可以免费使用。 

Cacoo

DENIM

官方地址:http://dub.washington.edu:2007/denim/

一个早期非正式的网站和用户界面设计工具 

DENIM

Hot Gloo

官方地址:http://www.hotgloo.com/

网上应用线框 

Hot Glo

User Interface Design Framework

官方地址:http://www.webalys.com/design-interface-application-framework.php

一个免费提供网页设计师使用的用户界面设计工具。 

User Interface Design Framework

Pattern Tap

官方地址:http://patterntap.com/

可以寻找一些设计资源与模式等。 

Pattern Tap

User Interface Design Patterns

官方地址:http://ui-patterns.com/

提供一些热门的用户UI界面设计模式参考图,分类很详细,如果设计网站或UI界面可以上去找一些资源,很不错。 

User Interface Design Patterns

Patternry

官方地址:http://patternry.com/

Patternry是用户界面设计模式库的目的是帮助解决常见的接口设计问题。

Patternry

Mephobox

官方地址:http://box.mepholio.com/

UI设计界面资源欣赏参考网站。 

Mephobox

Android Asset Studio

官方地址:http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html

可以在线生成图表,只需要输入参数即可 

Android Asset Studio

Mobility

官方地址:http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/

移动用户界面设计使用,可以输入参数进行测试,很方便 

Mobility

Android UI Elements Set

官方地址:http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/

可以自由设定Android操作系统的用户界面元素。 

Android UI Elements Set

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文件。 

ALL In One Web Elements Ki

iPad GUI Set

官方地址:http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

iPad平板电脑上设计布局用的元素集合。 

iPad GUI Set

策划