浅谈复杂信息型界面设计

产品设计 2018-12-08 阅读原文

在各种移动设备流行于大街小巷的今天,信息爆炸已成为日常现象,人们有更多的时间和更灵活的场景去接受各类信息。我们在设计产品的过程中,时常想要“塞给”用户更多的信息去吸引用户的关注,从而体现产品的价值。作为一个一直学习理工科的“艺术生”,我以理工科思维与艺术感观相结合的视角从事复杂信息类界面的设计工作已有5年时间了,在此以最近的项目为例总结一下经验心得,希望对各位有所帮助,也能获得各位的建议共同进步。

了解全局架构

在着手设计之前,要对产品架构有一个全局的掌握。产品想要传达的主要价值是什么,通过哪种方式被用户发现,通过哪种方式被呈现出来,又通过怎样的交互方式来服务用户。

例如,鲸准是以庞大的数据库为优势,包括各种创业者、投资人、投资项目、募资规模等相关信息,并整合分析了榜单、研报、项目集、融资速递等实时信息来提升用户粘性。那么在繁杂庞大的信息库中,视觉应该如何帮助呈现重要点睛信息呢?

首先,首页承载了整合各种快速入口的功能,将一些分类下埋藏层级较深价值较大的列表页提到首页入口展示。由于App服务的是双核心用户(创业者/投资人),所以,快捷的入口可以帮助用户随时进入页面寻找自己感兴趣的东西,实际上数据证明这里也是用户点击率比较高的地方。

App的俩个重要功能-行情(信息)和市场(交易)通过底部导航来完成导向,这俩部分是用户实时关注的地方,也是App留存用户的主要价值所在。

其余俩个部分为“消息”和“我的”,承载了App最关键的沟通需求和自我资产管理需求。

理清产品结构后我大致统计了一下各功能模块的主要呈现方式。然后思考在这里视觉可以帮助产品做些什么。

页面呈现方式以及交互

对于复杂信息型页面设计来讲,对视觉来讲最关键的就是列表和详情的展示了(页面的交互层级划分也很重要,在这里先不展开细讲)。各种繁杂的信息类型、超长的列表、细致冗长的详情页面无不让设计师头疼。然而,当这些问题处理好了,视觉自然会展现出一种美观的效果。

这里我总结了一些设计流程可以帮助解决这些问题:

1 | 根据产品定位设计风格,确定信息密度;

2 | 根据产品原型,从用户体验角度给出原型修改建议;

3 | 制定设计规范,保持设计样式一致性,从而简洁明了的展示信息;

4 | 根据产品的具体情况处理局部信息展示,不拘泥于一种形式,以不打乱设计风格的前提下优先考虑用户体验而设计。

5 | 设计时注意实际中一些模块的文本长度应用效果,并在产品测试阶段进行设计走查。

接下来详细介绍一下我在项目中是如何运用设计流程的。

每个产品有自己的市场定位,如果有品牌设计部门,可能会从他们那里直接得到答案,如果没有品牌设计的同学帮助,那就只有自己与产品多沟通来定位产品。鲸准在经历了创投助手、个人版、数据字典、对接平台、披露平台、交易平台的定位转变后,设计风格也从活泼年轻的“个人版”风格逐渐过渡到“简洁沉稳可信赖的”交易风“。最近的版本突出的交易系统风格所展示的主体内容就是“数据、文本”。在这种定位下,处理好文本信息的展示就犹为重要。在google最新推出的material design的设计指导下,市场上各大应用也在做出改变:突出主体内容,减少不必要的装饰。这个原则也正好满足我们复杂信息类设计的需求。减少不必要的装饰,适当增加留白,适当减少细线所带来的割裂感,保持颜色的克制应用等。

在前期的产品原型讨论过程中,建议设计师尽量一起参与,否则等产品完全讨论成熟之后,可能会有一些与视觉或者体验冲突的地方,再做修改就会加大成本。

当拿到产品原型初稿,首先要了解产品想要达成的目标,尽量在不改动产品目标的前提下帮助修改产品原型达到更好的产品体验。下面举个小例子:

当前产品有一个很重要的功能叫”领域图谱“,用来查看最近各领域的热度走势等信息来帮助投资人和创业者更好的把控市场行情。

当时拿到的这部分产品原型与市场上大部分竞品类似:即通过左右层层导航、分类进入详情页从而查看走势。

原型拿到的第一感觉是很理性,但是不够友好,扑面而来的大量选择性文本信息容易使用户望而却步。于是我和小伙伴一起商讨如何才能表现得更好。

当信息繁杂的时候,如果可以把一部分信息可视化是最好的,这样可以减轻视觉负担,更快速的理解更多信息。据科学研究发现,人在一屏内看5-7条以上的信息时就会觉得有负担,而且大脑处理图像的速度比处理文本要快得多。所以在设计此类页面时,信息可视化做好会为产品增色许多。

在这个项目里,我们进行了一定的信息可视化处理和信息层级的整合,将数目有限的领域用卡片式交互展示,放上趋势图和具体数据,美观而且直观,鼓励用户进一步的观看,并通过下次进入该页面同领域定位的方式来减少用户不必要的切换次数(大部分用户或者投资人都会关注特定的领域),同时左上角的图标可以展开全部领域列表上下滑动选择,更进一步提供了选择领域的快捷方式。页面内领域下方显示出更进一步的信息图和具体数据,图表下方展示该领域下的公司列表,集合了公司logo、名称、项目数、热度值和热度趋势变化的示意图。这样设计不仅把页面层级减少了,而且丰富了当前页面的信息,优化了用户体验。

有了设计原则的指导,我们就可以通过一些页面的设计来制定我们的设计规范,搭建组件库。眼下最快速有效的是用sketch+云盘来完成library从而更快速有效的更新与协作。(需要注意的是很多同步云盘都被禁了,工位相邻的小伙伴可以选择airdrop,注意俩个小伙伴最好不要同时编辑一个airdrop里的文件容易造成版本冗余生成。或者用一些版本控制软件也可以,类似Abstract,需要付费。)通过文本、颜色、间距、icon、item组件等的设计来制定规范,等规范制定好了就可以快速的进行页面设计。

设计中最能提升体验感的是产品的细节。如果无脑按照设计规范来搭建页面,就会发现不需要什么思考,只要各个地方保持一致就好。很简单快速。我自己在这几年的设计中也曾犹豫迷茫过,面对设计规范和视觉效果的取舍,应该如何做选择。通过大量项目的实践我渐渐发现,单纯依赖设计规范而放弃思考,设计出的产品往往缺一点灵魂,单调且机械。具体情况,还是要具体思考,毕竟设计是拿来体验的,不是流水线上的机械化商品。

复杂信息类设计最常见的问题是文本的长度控制,很多地方文本短至几字,长至几百字,需要设计师的全局考量,参照产品给出的文本上限/下限,做好设计统筹,结合实际字数设计出页面看效果,并在走查阶段反复验证。

以上是我的一些心得体会,希望对大家有所帮助。:)

UI中国

责编内容by:UI中国阅读原文】。感谢您的支持!

您可能感兴趣的

Fran Silvestre Arquitectos – UI/UX With all the different UX guidelines there is online about the subject. Everything is about what’s the best practice...
学习UI设计必须掌握的工具 学习UI设计必须掌握的工具 软件包四大福利 1、全网最新版UI设计四大破解版软件! 2、一位资深UI设计培训师讲解的课程! 3、学习UI设计必须要掌握的四大软件快捷键整合版! 4、UI设计必备PSD图标及APP素材 礼包领取地...
完全零基础能学好UI设计吗?学UI设计有前途吗?... 完全零基础能学好UI设计吗?学UI设计有前途吗? 可能很多打算转行到UI设计行业的小白都十分担心:完全的零基础能不能学好UI设计?应该怎么学习好?现在学习UI设计还有没有前途?等等的问题,你也同样在疑惑这些吗? 其实零基础也是可以学...
UI设计师如何进行竞品分析 目录 一.挑选竞品 (1)竞品确定 (2)数量去定 二.交互结构分析 (1)产品架构 (2)页面布局 (3)图形模式 (4)交互动效 三.视觉风格分析 (1)视觉性格 (2)品牌传达 ...
UI 设计新人容易犯的7个细节错误 在互联网产品圈里,用户体验一直是被格外推崇,几乎每一个产品经理都会把用户体验挂在嘴上。即便是一个产品菜鸟也会在言谈间说出一番诸如,做产品的一定要把用户体验放在首位之类的话。说今天是一个体验为王的时代,一点也不过分!那究竟什么是好的...