小型分页的设计方案改进和设计思路

岁月如毒love

岁月如毒love

2016-02-17 03:00

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的小型分页的设计方案改进和设计思路,手机电脑控们准备好了吗?一起看过来吧!

通常,当一个页面有太多信息要显示,而一页塞又不下所有信。为了请求速度、美观以及其他的各种理由,分页就会被我们请过来。让我们的用户可以选择是否继续前行或者后退,去找到他想要的东西。比如我们在淘宝搜索衬衣,这时通常会有 100 页的信息(当然不止 100 页,只是其实用户通常不需要那么多东西)。如下:

小型分页的设计方案改进和设计思路,PS教程,图老师教程网

一、小型分页的原始设计方案

分页的作用说起来有很多,特别是从性能的优化上,但最重要的原因是,让用户可以找到自己想要的东西。这点页面比较多的分页上,淘宝已经做得很好。但在小分页上,上次和一帮设计师在评审一个小分布设计方式的时候,有了一些不同的意见。先看一下这个小型分页(这里定义的是页面小于或等于5页的分页设计)的原始设计(交互白板,非视觉终稿)方案:

小型分页的设计方案改进和设计思路,PS教程,图老师教程网

看起来挺熟悉的,huh?是的,很多网站其实都采用了这种类型的显示方式。这里有设计师说,会不会把上一页和下一页放在一起,用用户按起来比较方便。就像这样:

小型分页的设计方案改进和设计思路,PS教程,图老师教程网

Hmmm,确实,这样比原来的好挺多的。至少用户可以更省力去翻页。这是有另外一个设计师就跳出来了,说,我们是不是还可以做进一步的优化?因为通常来说,我们按下一页的情况会比较多,上一页这些历史会比较少见。这时他提出的方案是:

小型分页的设计方案改进和设计思路,PS教程,图老师教程网

当然,这样也挺好的,理由也说得过去。就是有一种说不清的东西在里面,类似于技术和艺术究竟那种更重要,懂得的汉字和能写出好文章之间的关系。其实问题就出在,一是用户需要去做一个猜的过程,猜这个左向的指示符究竟是不是代表向上翻页;一是设计的不一致让心理有不和谐的感觉。特别是在中国在种好事成双,什么都要成一对的文化下,更明显。

二、我的方案

不过,对于个人来说,我并不赞同上面的这些做法。既然这个分页是小型的,一个小位置就能全列在上面的,那我们为什么还要去复杂化这个用户去选择的过程,而不直接提供一种更便捷的达到目的的方式?我的想法是小分页就应该把他们全显示出来,让用户操作更方便。如下:

小型分页的设计方案改进和设计思路,PS教程,图老师教程网

这种展开式的分页设计与原始方案的对比:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

从空间上

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

展开式显示更省像素。有很多好的设计师会考虑留白,更会考虑如果去合理地利用这些宝贵的空间,省像素。

从实用性上

如果看到第3页,突然想回到第1页,按照原来的设计,是不是得按两次上一页?如果有5页呢?我如何保证更快地在各页之间切换?展开式的设计可以更好地解决这样的问题。

三、结语

当然,并不是说这样的展开式分页就是更好的。还有可能要结合场景,比如像微博这些允许随时间线无限下拉的地方,我们完全可以让用户忽略分页这样的概念,只要用户向下拉,我们就提供信息的自动加载,以更方便用户的查阅。应用场景总是在变,但不变的是,我想自己应该继续这样:

一、去积累。有时候总有这样的小纠结,也可以说是一种小洁癖,像代码总追求最优的解决方案。虽然这样的纠结并不会对用户有多大的影响 ,但当你在一个项目中有10个,30个,100个这样的优化时,相信网站的体验将会超出用户的预期。当然,对于自己在这方面的能力,也将会有质的提升。所以,去积累吧。

二、超出设计去思考。对于交互,其实我们的最终目标是用户的使用方便与否(不是用户,有时候用户他可能需要的只是很简单的东西,比如一辆更快的马车,但如果你给他一辆福特汽车呢?),所以,应该跳出设计本身去思考,才更有可能得到满意的结果。

展开更多 50%)
分享

猜你喜欢

小型分页的设计方案改进和设计思路

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
小型分页的设计方案改进和设计思路

厨房设计方案

家居设计
厨房设计方案

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

沙发和茶几的搭配设计方案

工业设计 设计素描
沙发和茶几的搭配设计方案

装修如何制定设计方案 制定设计方案的流程是什么

装修
装修如何制定设计方案 制定设计方案的流程是什么

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

别致的餐厅设计方案

设计创意
别致的餐厅设计方案

精品画册设计方案

包装设计 名片设计 名片设计素材 画册设计
精品画册设计方案

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

成功的产品在于专注和优化其核心功能

成功的产品在于专注和优化其核心功能

Fireworks设计牛仔布料风格矢量图标教程

Fireworks设计牛仔布料风格矢量图标教程
下拉加载更多内容 ↓