前言

(每日更新-直到完成redesign)

因为工作中接触的全是B端产品的设计,而我们的“局方爸爸”似乎对美观程度不太在意,喜欢“五彩斑斓的黑”,“字要大,要现眼”.....um...工作中只要“爸爸满意就好”,但作为一个有灵魂的设计师,绝对不能降低对自己的要求.平常有时间...啊不对...是你得挤时间出来,对自己的理论知识、技能、审美做适当的训练.这话可能是对部分设计师说的,毕竟总是有些像我这样追求美的人..在工作中身不由己嘛哈哈哈哈哈哈...

进入正题.

我所接触的项目都是有关运营商的工作工具,与阅读类app有个很大的共同点...就是信息量特别大.如何在小小的手机上,清晰规整的展示大量信息,而不会引起视觉疲劳,能够提高阅读浏览效率,是我们应该探讨总结的点

我将从2个方面对掌中云阅读的首页进行改版.

一、设计细节

二、内容排版

对于信息量巨大的app来说,对浏览效率和浏览舒适度的要求显得更为重要.

所以我们首先观察和分析同类竞品的细节

1.字体

把几个比较优秀的阅读app首页截屏,对他们字体的 大小、段落行高、取色 做个对比,可以发现几个特点

a. 书旗、qq、微信的字体取色用的都不是无色系,都有色偏,且偏蓝色.掌阅、百度、搜狗用的则是无色系

b. 字体的大小,标题基本均为15 or 16px (1倍图下),段落行高约为1.3

由此,我们再回头来看看掌中云阅读app,单字体这块,就有很多可改进的地方

说了字体就不得不说说排版,再下面这张图,缩小了看,可以发现 与其他app对比,掌中云的首页看上去比较拥挤,首先,因为字体取色和段落排版不恰当导致,再者,可以再缩小途中很清楚的看出掌中云的数目标签显得比较突兀.

字体颜色分析

排版细则

1.尽量少或者不使用分割线切割模块,利用适当留白分割模块.

2.注意留白不是随便的距离.要有一定的关系

图标改版

1.金刚区图标:原本的图标的设计方法应该是在村色的图标上叠加半透明的圆.一个图标一个颜色,但是明度过多,显得有点乱

改版前

改版后:对icon的形做了调整,统一细节,如圆角大小,线条粗细,色彩明度、饱和度.添加了弥散式阴影,整个感觉明亮轻快,符合掌中云偏向年轻的用户群体.

改版后

2.tab栏图标

原版tab栏图标在视觉大小、样式上不同意,且品牌感不强,没有融入品牌元素,如logo特点,品牌色.

改版前

改版后;统一细节,如圆角大小,元素间距,线条使用1.5px(一倍图),视觉上更加清晰大方,融入品牌元素,强化品牌感.将社区和活动合并至发现中.

改版后

书架页面改版

原版我的书架

第一次见到这个界面应该是在我面试这家公司,当时面试我的好像是公司的合伙人,他问我,你觉得这个页面有哪里可以改进的地方吗?那时候我的回答并不好,没有抓住要点.

印象中,那时候页面和现在差不多.最深刻的上面那个蓝色的大色块.

今天厚脸皮对这家公司的合伙人发了个问.他说,这块区域是给新手推荐新书的,对于老用户会根据喜好推荐.

而我站在一个用户的角度来看,我会觉得这块内容占据在这里有些奇怪.如果是推荐...那给个标题也好啊...不知道的还以为强制加入书架呢..有洁癖的人可咋办捏.

不bb了...开始改版前的分析.

1.首先,上面蓝大色块太抢眼.

解决:书架属于比较“私人”的空间,对与蓝色块的推荐置换到首页的猜你喜欢模块.

2.如果书架内,书本很多,想要快速找到一本书怎么找?

3.阅读历史,我近期看了哪些书我想直到,或者下次进入app想继续看某本书,如何快速找到? 设计师存在的意义不只是为了设计界面,使画面好看,要知道你是个UI设计师,你的任务,不仅是让界面变得好看,还要通过对交互流程的理解,帮助用户,快速的解决问题或者达到用户的目的.

解决,添加阅读历史和搜索书架功能

4.排版问题(视觉层面)