BACK >
如何搭建交互设计合理结构
作者:吾诺瀚卓    浏览次数:468    日期:2017-11-21

如何搭建一个合理的交互设计稿结构?各个界面应该如何摆放?清晰易读的交互设计说明应该是怎样的?

一、每一页交互稿应该是怎样的?

1. 每页交互稿的内容

一般而言,每一页交互稿应当具备以下几项内容:

a 单页交互稿示例

页面标题:建议使用「固定在浏览器顶部」功能让页面标题常驻。

界面标题:方便交互稿中的互相索引,比如「回到界面B状态」。

界面:建议尺寸为360*640px,长页面也可自行延伸高度。

设计说明:逻辑关系、元素状态、小微流程,都可以放在设计说明中。

流程线:说明界面间逻辑关系,可使用软件自带流程线。

链接:指向其他页面,比如支线流程,开发同学阅读起来会很方便。

作者信息:这是设计师的落款,同时也方便他人联系设计师。

2. 网格系统的应用

确定了页面内容后,内容的布局也很重要。布局不好就会显得乱糟糟的,怎么处理布局问题呢?笔者提供一个「网格系统」,可以让设计稿很有「秩序感」。具体而言,在Axure的「布局→ 栅格与辅助线→ 网格设置」中设置间距为40px的网格(40px是常见界面尺寸320、360、640、1080…的公约数),然后尽量保证所有的元素贴齐网格即可。使用后你会发现自己的交互稿变得井然有序,且美观很多。

a 带有网格系统的交互稿

网格的另外一个优点是可以很高效地对齐各个元素,如下面视频所示:

b视频: 借助网格快速对齐元素

3. 每页只展示一条流程

每个交互稿页面应当最多承载一条「流程界面」,多出的流程可以新开子页面。从而保障每一页交互稿都是点状或者线状的,而不是网状的,因为网状的交互稿很难阅读,阅读者需要纵横双向滚动屏幕寻找信息。

a 反例:网状的界面结构很难阅读

二、 清晰易读的设计说明

设计说明是向开发同学传递设计信息的重要存在,如果设计说明位置杂乱、对应关系不好、可读性差,很容易让开发同学「不太想看」很常见,最终造成设计还原度底,沟通成本增高等问题。

a 设计说明示例

一个较好的设计说明应当遵循以下几点原则:

位置统一:在笔者提供的交互稿模板中,所有设计说明均在界面下方。

对应关系明确:须在界面上打标志绿点,与每一条设计说明一一对应。

提供标题:标题可以大大提高开发同学的阅读效率和视觉搜索效率。

规整:多条设计说明的排布应当规整有序,使用上文中提到的网格可以很容易达到这一点。

接近界面:因为设计说明是针对界面的解释,所以不能离界面太远,不然很难对着界面看说明。如果设计说明实在太多,可以采用动态面板的方式承载。

三、最后几个有用的提示

最后,补充几点笔者认为很重要的提示:

大部分开发同学都有一种「不想仔细看交互稿」的倾向,其中大部分原因是交互稿可读性不好。

交互稿是「工程图纸」,不是「设计草图」,所以信息交代得越详细越好,越精确越好。

每次更新交互稿,都应该在「更新日志」里写明,并在页面中也标志出更新的地方。否则会给开发和QA同学带去极大的麻烦。

尽量不要频繁更新交互稿,会给人一种「不专业」的印象,且会给自己养成坏习惯。

字体使用PingFang SC-Regular和PingFang SC-Semibold,实测兼容性最好,要知道大部分开发同学都只有系统默认字体。