appUI设计文档.docx
- 文档编号:1158674
- 上传时间:2022-10-18
- 格式:DOCX
- 页数:12
- 大小:1.33MB
appUI设计文档.docx
《appUI设计文档.docx》由会员分享,可在线阅读,更多相关《appUI设计文档.docx(12页珍藏版)》请在冰豆网上搜索。
appUI设计文档
相关任务
1.3-4张大小640*1136640*960700*13341242*2208引导图片和一张启动画面图片(暂时先做640*1136大小其他图片押后),主要向用户介绍应用的相关操作,内容介绍等之类的信息图片
2,app主界面
3.最新物流资讯主界面和显示正文的界面
界面要求扩展性好(方便以后新功能的增加)半扁平化(具体见适合开发者的UI设计7条法则.doc),其他ui设计相关见文档(IOS-UI.pdf)
图标设计可参考(图标设计.doc)
细节包括以下内容:
尺寸:
UI元素的尺寸以及中间的间隔
约束:
布局的哪些部分是允许拉大的,哪些不允许
颜色:
字体的颜色,边界,背景等等——给他们一个名字+RGB/HSB值
字体:
按钮,标签等等的字体——包括重量(粗体斜体之类的)以及尺寸,你在设计中用到的所有字体,使用TTF格式
资源:
在哪使用他们以及它们的名字
图片资源:
所有的单独的UI元素图片,@1x(正常分辨率)以及@2x(分辨率翻倍)版本,png格式
icon:
app的所有icon(包括retina版本的),png格式
参数等相关内容做成图表分类好
尺寸参考
(详情见尺寸参数.xls文件)
设计要点总结
依从:
以内容为主角,其他都是配角。
所使用的元素应当作为内容的补充,不要使用会分散人注意力的视觉元素与内容争抢目光。
简化:
将用户界面简化到只保留最核心的美感。
每次在你要添加新元素时都应自问:
是否必要?
如果你的应用不属于游戏或者没有特定的主题,那么请慎重使用大量的材质、3D效果和多重阴影,将关键放到功能性颜色、协调渐变和美观的文字上。
内容最大化:
内容应占满整个屏幕,给内中的元素留出最大的空间。
不要使用多重容器,将滚动区域最大化以便给交互留出更多空间。
颜色:
使用显眼的颜色表现能够点击或需要突出的元素。
颜色和中性色调选择的正确与否将决定你设计的成败。
这是iOS8设计中将要深层次讲解的一个方面。
文字即时内容
为了简化用户界面以及突出内容,文字将占到整个屏幕的50%到90%。
考虑到这一点,你应当选用漂亮的字体,通过设定适当的粗细、线宽和颜色使其达到视觉美观、适合阅读的状态。
这一方面将在文字部分进行更深入的介绍。
负空间
使用负空间凸显内容。
你所能看到的东西越少,就越能将注意力全部集中到仅有的物体上。
负空间能够留出呼吸的余地。
不用在屏幕中堆砌太多的结构和无用的视觉元素。
图标状态
用于导航的图标有两种状态:
轮廓及填充。
使用轮廓的好处是不分散注意力。
如果对图标进行填充,就会转移人的注意力。
另外其还可能表示当前页面为活动页面。
明晰
让一切显然易懂。
按钮应当表现出自己的功能,文字应该方便阅读并留出舒适的间距。
你的内容应当明确表现出应用的功效。
例如,如果是有关咖啡的应用,则应当能让人联想到咖啡豆、浓缩咖啡和咖啡的棕褐色。
文字要方便阅读
在视网膜屏幕上,文字的大小不能小于22px。
最佳阅读尺寸为32px。
使用作用明确的图标
图标不能含混不清,应当明确表现出自身的作用。
在可能的情况下,尽量使用文字辅助。
如果你使用了图标,那就一定不能在其他地方使用与当前图标类似的其他图标,否则会让用户看不懂。
同样,不要使用“后退”或者“提交”这种太泛泛的文字,而应尽可能明确,例如“返回首页”或者“注册新账号”等。
更多细节请阅读图标部分。
描述性画面
每个页面都应说明自己的用途。
尽量减少使用品牌内容,代以明确的画面标题,如果采用了标签栏,则还应使用高亮的当前标签状态。
颜色的含义
颜色是有含义的。
你可以使用红色、绿色、蓝色和中性色调分别表现破坏性操作、确认操作、链接和非活动状态。
如果将这些颜色用做其他用途则会误导用户。
例如,删除按钮上一定不要使用绿色。
深度
深度可能是最难理解的一个部分了。
这是个非常抽象,同时又很有力而独特的概念。
深度是指所有内容都应当具有关联和过渡关系。
在真实生活中,当你从一个房间进到另一个房间中时,你会产生过渡和距离感,这样你才不会迷路。
这个理念同样适用于用户界面。
“对人和人所存在的现实的冷漠,是设计的唯一大忌。
”-DieterRams
过渡界面
从个人角度来讲,我认为这是iOS8最有意思也最独一无二的一方面。
每个屏幕之间的过渡、桌面缩放成文件夹然后缩放到应用。
从传统角度来说,这种技巧很难操作,但Xcode5让这一切变得容易实现。
有关这部分技巧将在动画部分进行详解。
模糊背景
背景不能影响到内容的清晰度。
将背景模糊化不仅能让你保证其颜色的自然,同时能够突出前景。
模糊并不是无中生有的效果,它在现实生活中也真实存在,比如你定睛看某个物体时,其他物体就会变模糊。
一切为了讨喜
在指南中有3项能够让应用出彩的内容没有被提到:
动画、手势和音效。
这3项内容很容易用过火,所以要谨慎。
动画
动画不仅能作为画面之间的过渡,还能给你的设计增添趣味性。
另外还能让容易被忽略的元素受到关注。
手势
自iPhone5开始采用长屏幕以来,后退按钮按起来就不那么方便了。
所以说,手势虽然比不上眼睛看得见的视觉按钮,但也可以作为视觉交互的一个延伸。
其对于水平比较高的用户来说非常方便。
而随着我们大家的水平日渐提高,视觉提示正逐渐让位给一些真正有用的功能。
音效
音效在应用中的使用很少,但其却能将一项平凡的任务转变成令人激动的体验。
通过音效,大家不用眼睛就能知道你使用的是什么应用。
如果能让音效达到耳熟能详的效果,你就能以最小的努力赢得很大的成功。
三条规则
下面这3条极为重要的iOS设计规则是万万不可忽略的:
思考触摸界面、提高文字可读性并针对iPhone4进行优化。
触摸设计
按钮应当方便好按。
在视网膜屏幕上,按钮的大小应当为60-120px高。
最佳高度为88px。
在极少数情况下,可以为文字内部的链接设定44px,但使用时要慎重——用户可能很难按得到。
即便是纯文字按钮也应该有至少60px的可点击区域。
宽度应与高度相同。
可读性
在视网膜屏幕上,文字大小不能小于22px。
最佳阅读字体大小为32px。
使用120-140%的线高可提高阅读体验。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- appUI 设计 文档