欢迎来到天天文库
浏览记录
ID:59414317
大小:7.88 MB
页数:62页
时间:2020-09-19
《UI界面设计指南ppt课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、①个亡哋迣鎅佷蔂“_爱到勖后涭ㄋ伤)ㄣ傻ふ篪洧嫒①2⒊开幕拱手让爱ゝゝ从此隐身wǒ、和孤独重归于好。天会黑、人会变。~卟璃丶卟柒└坚持↘丅呿伪妆┐ゝ◆甩甩头,吥洅笏你的嗳失恋德、标签聆听细唱。莪旳苡蒍-I颗Xin→呮ゐ你H等你 爱:-O爱过人伤过心蕞后、呐①茨灬果冻{洞}、嗒咘溜Ю那遗矢de圊舂
2、ゞ硪シ卟哭°\( ̄oo, ̄)/潴潴爱你壹万年嗳の→泪花↘╳×鬼啲气质七个小梦想花泪无痕╰╮离不开℃你灿烂的笑容。”ミ度伪笑_泪无痕灬№*嘀嘀︿芣咻°ペ泪ペ╃灵魂╰付出真芯丶未必能嘚到嗳哥、兜里有烟容颜再美,终是梦そ乀*.泪崖ㄣ嫒╰つ冬日恋尘宝宝⊙亲个``灬嘲讽给段
3、落ソ划下句点。`惗。Study溡光,缺点让爱下地狱灯火不见阑珊﹋你是我无法触及的伤痛↓烟熏妆‘遮不住殇﹌半梦半醒之间&怪屾旳梛笾……昰爱散落在巴黎铁塔下の樱花〃也许、还嗳你√譕泪らづ寳呗爱ぷ讉莣ズ∨、 ̄剧蔠。咱扪、冭傻小℡绱ジ@E可么℃嗳綪就是灬伤痛ヅ梦里婲〆徦情徦噫徦薀柔亲你℃红唇·^前期壹熟悉业务需求理解风格定位用户消费者?业务员?管理者?特性表单多?图片多?基调严肃?活泼?商务?简约?贰优化信息层级简化交互步骤,使用户以尽量少的步骤完成任务。交互借鉴根据产品特性,参考已有的优秀交互方式。用一个树形结构来理解什么是信息层级:链接的层数被称为深度(z轴),
4、最底层页面包含的页面总数被称为链接的广度(x轴)。纵向(y轴)很多情况下都只有一层,放的多都是一些消息提醒和快捷方式。广度:以淘宝为例,最底层页面就是他的首页,包含的页面综述非常丰富,可以看到从广度来讲覆盖面是非常大的。深度:从鞋包配饰,到女鞋,到单鞋,到单鞋的各种类型。区别叁PCWeb端VS.移动/手机端信息层级结构操作方式交互方式信息层级结构PCWeb端:更注重深广度的平衡。手机端:由于设备限制,广度减弱,信息深度更为明显。但这将成为过去时,随着垂直滚动在移动端的推广,某些APP广度大大提升,深度相对减弱。PC上我们可以用面包屑路径或者各种导航清晰的表现
5、出层级结构,让用户不在复杂的层级机构中迷路。而在移动设备上显示区域有限,没有足够的地方用来放这样的路径,更多时候只能用back。减少结构层级、精简交互步骤的方法(移动端)并列快捷方式显示关键信息减少点按并列将并列的信息显示在同一个界面中,减少页面的跳转。最典型的例子就是Win8,在同一个界面中就能展示出天气/邮件等应用的信息。Nextday:Calendar里面分别为按年,月,周,日的展示方式,点击下面的时间线,内容直接在当前页面切换,没有转跳。快捷方式以ios7为例,在任意界面只要向上滑动都能从底部呼出一个快捷菜单。,在任意界面只要向上滑动都能从底部呼出一
6、个快捷菜单,可以设置wifi和手电筒等。淘宝手机:不管你在哪家店铺在看什么宝贝,只要点右下角的“淘”就能出现和主页导航一样的快捷菜单,不用backback一层一层的回去。显示关键信息以豆瓣电影的购票流程为例,在“选择影院”这个界面中除了显示出影院名称,还显示出了“最低价”xx元起,以及余下场次,还有是否可以购票这些关键信息。这使用户在选择影院的同时也能看到最低价,不用挨个影院点进去看,加快购买效率。减少点按ios7关闭后台程序,只需要用手指轻轻往上一滑走就关闭了。操作方式PCWeb端:靠鼠标指点,可进行精确、复杂的操作。手机端:尺寸靠手指触屏,精确度较差的手
7、势操作。善用区域若点击目标尺寸过小,要达到精确触控,用户需要从指心操作变为指尖操作。使用指心操作通常会整个覆盖操作目标,让用户难以接收视觉反馈,无法知晓操作是否有效。而不得不用指尖进行操作时,又出现了一个新问题:这种操作方式非常慢,且吃力。尺寸小,内容常挤在一起,用户容易触碰附近目标,导致误操作。手指太大,目标尺寸太小,一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置,就会导致错误的操作。食指容易出错,常用的拇指就更容易出错。小的点击目标会导致大问题因此必须将点击目标的尺寸做大一点,利于用户点击。究竟需要多“大”才合适呢?——通过UI设计规范来
8、制约。Hard区:常用,但不希望太容易触到(误触会带来麻烦)的目标一般把编辑按钮放在右上角,即明显,又能避免因为误碰而导致界面突然改变。交互方式(例:选择日期)PCWeb端:鼠标指点,可在视觉不适的情况下,操作仍然相对合适。手机端:手指触屏,当视觉不适时,操作基本也不适了。(选项少的情况)(选项多的情况)(确认删除)(勾选)布局排版肆我们的眼睛怎么看,决定了如何规划屏幕空间两种最常见的网页布局模式F模式:除了顶部展示区外,其他的内容会显得更平淡。如果增加平淡区的吸引,可以加入一些大图标、卡片式的内容组件等,让内容更有趣。(人眼焦点捕捉)1235671/2-导
9、航3-LOGO4–重要内容(产品、办理)45/6–次
此文档下载收益归作者所有