1. 如何组织信息
组织页面信息的首要任务是判断信息优先级,分清重要信息与次要信息,删除无用信息。化繁为简,降低视觉干扰。举个小例子,数份简历扎堆时,信息有效快速传达是第一步,再者才是加入一点点自己的小个性。
2. 如何对齐
首先达成信息优先级主次的共识,可以提升排版的效率。
a. 信息分组
先从一个酒店预定成功通知消息案例来看,通知信息文字平铺直叙,并未合理分组(左图)。图片部分上方酒店评价、信息地址和电话操作按钮剧中对齐,酒店名成为了一个小标题。做适当调整后(右图),使得正文通知、价格和时间字段分组明确。电话按钮同酒店信息组对齐,使得图片区域的文字和操作信息更为整体。
b. 居中对齐or左对齐
信息分组后,居中排列每组信息的小标题,模块感增强,使得阅读标题和每个组信息中产生视线的跳跃。小标题和每组信息统一居左对齐,更符合快速浏览和操作。
3. 如何有重点
a. 大小对比
前面谈了如何组织信息,那如何使主要信息更为有重点?首先可以通过拉开大小比例,拿一张活动海报来举例。5米处能看到什么?海报的大图案渲染气氛的整体感受;3米处能看到什么?活动主标题;1米近距离又能发现什么?具体信息和时间等。
b. 并非均分
看似没有什么差错的信息布局(左图),为什么始终差了一些什么?由于细节之处并非理解信息主次。最初设计稿追求绝对的均分,导致信息较散,没有“组”的紧凑感。
页面元素中的左右间隔往往也会被忽视,如(左图)中帐号头像与页面的左边距=帐号名称之间间隔,使得页面中间区域的信息散于页面边界。具有平面设计意识的排版不仅是设计软件中的文本框绝对居中对齐,需要对信息分组与主次深入思考,避免机械的均分对齐。
UI设计中对平面基础能力的检验
UI设计(User Interface界面设计)的设计原则:简易性、一致性、用户习惯、人性化等。遵循UI设计的设计原则,提高平面设计能力,可使得界面更为优雅。
1. 精简与一致性
在手Q公众号图文消息优化中,我们发现线上旧的图文消息边距较为肥厚,在大图+1小图的.情况下由于代码的模块化拼接,始终无法达到完美的像素间距。在考虑多种纯文字、单图、多图文模版拼接后,尽量减少间距规则和字号种类,达到拼接模版的统一规则。保证一致性为前提,也提供灵活拼接的多样性。
大图+1的情况下,定义1条小图的上下间距相等等于一个单位,而不是单个模块中小图距离上方的1/2单位,在+n小图的时候使得两个小图之间的间距相加后等于一个单位(见下图)。这个小小的视觉细节在和技术同学耐心联调后是可以完美实现的。
2. 操作的轻量化
在某电台app概念设计中,讨论后优化框架(右图),默认拉取专辑封面图,支持上传图片入口置于右上角,默认歌词展示在封面图上可点击编辑,整个页面可视化了最终分享出去的样式,所见即所得。设计优化后,让整个操作有了重点。可以直接在分享预览图上操作,缩短了分享路径,最重要带给用户轻量化的操作感受。
平面设计灵感注入UI设计
好的UI设计可以让软件变得有个性和品位,同时操作上是简单舒适的。平面设计的灵感,往往可以使得界面设计跳出线框与控件的束缚,充分体现软件的定位和特点,使用过程中变得更有趣味。
1. 更具吸引力的点击
关注一个账号、小站的通常app的做法是:头像加关注按钮。在 V 的频道界面中,点击头像即关注,按下后头像成为星形遮罩,表示已关注,点击操作反馈超乎预期又在情理之中。
2. 更优雅的操作
在手机app上后期处理一张照片时,通常是操作区域和照片分开。Black 的处理照片主界面的操作有趣而直观,再调整曲线或加暗角操作都在图片层上,整个界面的导航也突破了传统控件模块,使得整个app在直观又易操作的基础上,彰显独特的态度和个性。
1.
2.
3.
4.
5.
6.
7.
8.