当前位置 : IT培训网 > ui设计 > 界面设计 > 移动界面设计需要知道的几个知识点

移动界面设计需要知道的几个知识点

时间:2016-09-13 16:08:51  来源:UI设计网  作者:IT培训网  已有:名学员访问该课程
标签(Tag):   移动界面设计(2)
手机使得设计师对传统元素进行了彻底地改造,不仅仅是重新组织。本文讲的是移动界面设计中的几个知识点。

随着移动应用的运用,移动页面的也越来越多的融入大家的生活,这样移动界面设计就越来越需要我们的重视了。

一、重新思考导航条设计

手机使得设计师对传统元素进行了彻底地改造,不仅仅是重新组织。除了进行更好地改造,他们也提出疑问“我们为什么需要改造?”

用户可以通过链接列表对网站内容有大致了解,但是列表过于冗长成为设计师不得不应对的问题,如今这种趋势变得日益明显。导航条已经过时了,页面和面板的形式正在流行。越来越多的响应式网站将导航条移动到单独的页面或者采用下拉列表的形式。按照惯例,轻击包含三个水平条的图标就会显示出可点击的链接列表或者站点架构。

二、消减内容

消减多余的信息不论对手机网站还是台式机网站,都同样重要。但进行信息的删减并不是那么容易的事情。因为通常情况下事物的发展过程都是从无到有。

1.计划:要明确目标、受众、责任、如何度量成功等等。

2.设计:创建图形,撰写素材、建立原型等等。

3.构建:HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,(在这里你可以插入最喜欢的同时最令你厌烦的缩写词)

4.测试:在不同的浏览器中,在实际使用的过程中

5.配置:上传至服务器,建议采取这种顺序。

这是违反用户直觉的行为,但是为了用户在使用的过程中可以更加专注,设计师就必须从开始设计的时候就进行删减。

1.计划

2.设计

3.复查:为了巩固删减的成果,我们需要不断向自己发问“我们还能再做些什么?”

4.构建

5.测试

6.编辑:仔细检查网站的每个部分,如果去掉某个部分,网站还能正常运行吗?

7.再次测试:棒极了,你去掉好几个部分,但是有没有做的太过头了?

8.配置

这不是为了删减而删减也不是为了部分用户使用方便而让网站变得低能。这是在进行信息设计,为的是能够让这些信息在用户期望之外的更多场合发挥效用。

三、帮助用户做出明智的选择:例如,一段描述性文字并不总是能服务于标题。标题本身就应该包含帮助用户决定应该点击什么的正确的关键字。缩略图应该在展示整幅图像的同时保持自身的可识别性。

四、练习重新设定:当你在创建或者编辑页面、帖子、图片或者别的媒体时,想想他们在不同的使用环境时会呈现出什么样子。就像在不同的浏览器中进行测试一样,同样的设计在不同的环境中会有什么反应?在手机浏览器中还能正常工作吗?在台式机浏览器中呢?在邮件中呢?能够被大声诵读吗?能够被粘贴到word文档中,被打印和传真吗?不要轻视那些看似荒谬的使用情形,他们都是出色的尝试,不久之前网页根本没办法出现在手机上。你的网站将来会出现在什么地方?

五、 删掉主页:不要担心,之后还可以把主页放回来的。没什么比去掉设定的简介能够帮助你更好滴发现网站的优先级。哪个页面能够最好地呈现网站的宗旨?如果它们之中有一个页面能够代替主页的作用,那么你可以想想这个页面到底能为网站做什么。

在每个页面,每篇文章,内容的每个部分都重复这个实验:如果你删掉了它,什么能够替代它?如果回答是“无可取代”,那么它就是必须的。如果主页消失了,“主要业务”的页面依然能够正常工作,那么你需要对页面再设计,直到它变得至关重要,或者干脆删掉它。

六、使用折叠

将内容进行合并,这是以更加复杂的设计为代价解决了导航栏的问题。幸运地是,相同的概念——统一信息的类型——能使单个页面和整个网站都从中受益。下图展示了典型的新闻类页面。

移动界面设计需要知道的几个知识点_www.itpxw.cn

虽然这种布局方式在宽屏台式机或者笔记本电脑上能够行得通,但如果应用在智能机上就会有问题(如下图)。

移动界面设计需要知道的几个知识点_www.itpxw.cn

借用报纸行业的一句谚语: “折痕”是读者最先看到的地方。但是折叠与其说是分界线倒不如说是新内容的开始。在使用触屏设备的时候,人们本能地知道通过手指轻轻滑动屏幕就可以滚动页面。那意味着设计师可以最大限度地发挥折叠的优势。

首先,我们一起来回顾一下使用维恩图的宗旨,将相关类型的信息进行整合。

移动界面设计需要知道的几个知识点_www.itpxw.cn

过度使用的导航链接(通常是最先着手修改的地方)以及跳转到其他文章的广告要么被合并要么被移除。元数据出现在导航周围的空白区域。广告、目录、站点名称以及导航是否出现在屏幕顶端反映了设计师心中的优先级顺序。

当我们抛弃了最开始设想的页面概念,然后根据内容重新组织页面,就会有出人意料地效果。

移动界面设计需要知道的几个知识点_www.itpxw.cn

上文中,新的页面元素经过重新组织后展现在一个垂直面上。概念上说,智能机的浏览器变成一扇窗,用户需要将每一块内容填充进去。不是屏幕变小了,而是与平时相比,用户每次可以看到的内容变少了。

移动界面因为太小,所以移动界面设计比PC页面更难设计,但是移动页面由于编辑的翻阅,也吸引了更多的用户。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容