行业关键字
UI设计UI理论和资料 → 正文
交互设计中的四大策略(二)组织
作者: .lemon~萌小2 来源: 视觉同盟 时间: 2019年1月17日

一、页面风格

对于页面的调整,可以从分块、尺寸、颜色考虑。

1. 分块

页面的设计离不开分块,将多项功能分别组织到不同的菜单模块中,形成清晰的层次结构,类似于决策方法中层次分析法。先思考探究的决策目标是什么,确定决策准则,细分决策对象。

将决策的目标、考虑的因素(决策准则)和决策对象按它们之间的相互关系分为最高层、中间层和最低层,绘出层次结构图。最高层是指决策的目的、要解决的问题。

·最低层是指决策时的备选方案。
·中间层是指考虑的因素、决策的准则。
·对于相邻的两层,称高层为目标层,低层为因素层。

按照两两之间的关系画出框架图。

以树林的茂盛情况,可以从树木生长情况、种植间距、自然条件等方面来进行考虑。自生长情况包括树木的高度、树冠大小、树径等因素。

对于页面的分块也是如此,探究用户的行为习惯进行组织,用户想做什么、先做什么、后做什么?

一步一步地思考,将每一个步骤所涉及的内容分为一个版块,将每一个版块按照步骤的顺序进行排列。

比如微软的excel界面,打开页面,用户可以进行插入、页面布局、数据等操作;将每一个版块分细,开始菜单下有字体调整、对齐方式等。依次类推,页面的架构逐渐清晰。

版块的数目尽量少,提供给用户的选择越少,产生的负担越轻。为什么微信发朋友圈最多发出九张图呢?而不是四张呢?

理论上,人的大脑瞬间能够记住的最大数字是“7加减1”。

适当地再添加一项,讲究排列的对称性与美感,用户对此感知较弱。长期使用其他产品,用户对九宫格的设计较为习惯,比如九宫格输入法。并且,九张图的选择较少了用户的思考时间。

在设计一款产品的时候,首先思考产品的功能架构图和信息架构图,理清页面的整个布局,再产出原型图。没有逻辑的思考,原型图的布局将会非常凌乱,后期的修改会变得复杂许多。

在总览全局时,我们按照理想的方式设计,有一定的偏差,用户可能会选择其他捷径。以亲身感受为例,第一次使用实习僧投递简历,我根本不知道哪里查看投递情况。

作为求职者,我很希望能够快速看到求职情况。实习僧将查看投递的按钮隐藏在“消息”菜单下的右上角隐藏悬浮框中。按照自己规划图中清晰的线条和整洁的布局所迷惑,忽略用户的感受。简单的组织意味着你在使用产品会对什么感觉不错,不是你在规划看到了什么逻辑。

2. 尺寸

页面通常会有国字形、厂字形设计风格,将页面分成多个小框架。每一个框架的比例应该相同,使用按钮的格式统一。在利用网格来区分小框架时,要注意以下情况。

3. 颜色

页面使用的颜色过多,学习的时间变长。整个设计中的颜色应该完全统一,对重点的内容进行特别标注。色标系统是一条简化设计的捷径,使用颜色分层和颜色标记有细微的差别。

在做色标系统的前,应该思考用户停留的时间长短。如果用户属于临时用户,色标系统的设计是不太合理的,他们没有时间去区别颜色所代表的含义。在确保用户会花很长的时间去学习并重复使用设计时,色标系统的价值会非常大。

正如红绿灯的红、绿、黄色标,我们看到颜色能够条件反射出它代表的意思。假设我们出差到一家酒店,厕所的男女门分别为红色、绿色。无条件、无环境的设计适得其反在,在紧张、匆忙的情况下,人的思考会弱化很多。

二、内容

按照字母表的方式对内容进行排序,看起来简单,却经常不可行。如果不知道查找的内容,进行大面积排查的方式会浪费很多时间。比如,在数据库中查找九寨沟,页面未分类显示文章、图片、视频,到底想看哪一个呢?

从头查找显得很麻烦。按照格式排序来对内容进行排序,是一种比较好的分类方法。

对于专有名词进行字母排序建立索引是可以的。比如在数据库中查找中报考英语考试的人。使用姓氏排除会节省许多时间。

对于会议安排可以按照时间顺序组织,特别是持续时间相差不多的活动。用户不用是不是地查看时间和日记表,通过时间表能够对活动安排一目了然。

对于一些实体对象可以按照空间组织,比如走进一个房子,里面分为卧室、厨房、书房等。

对于同一个类型下的产品进行分类,可以从功能、选项、配件三个角度进行分类。以功能举例:电商类产品有淘宝、京东、苏宁,社交类产品有微信、QQ、一罐、Soul,阅读类产品有网易蜗牛阅读、微信阅读、当当阅读、掌阅。简单的分类指重复交叉最少的分类方法。

三、搜索

对内容进行有效的组织后,考虑如何设计搜索。无论是设计还是使用,搜索与搜索的最优适用条件不同。一般情况下,直接点击符合意愿的链接是最简单的选择,不用考虑需要输入什么关键词。

当用户看到链接时一下子明白当前程序可以做什么时,他们是不会去看帮助文档。在网站没有提示有效导航栏或者需要从大量类似中找到一个已知项的情况下,用户才会使用搜索。

如何实现搜索的内容与关键词有最大程度的匹配是技术的话题,不予讨论。

(责任编辑: Admin

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版