第五章 PC软件首页交互设计

交互设计思想页面

互联网产品的第一印象就是首页,重要性毋庸置疑,首页可突出设计值或决策者希望第一时间重点表达的内容。现在市场上的WEB产品,APP产品,PC产品等没有完全相同的首页,几乎所有的团队都根据自家的需求与侧重点进行首页设计

产品步入交互设计的阶段后首先需要确定的是这款产品的需求,主要包含以下需求

  • 需求说明书(如果没有需要和产品负责人逐项确认清楚功能模块)
  • 产品功能功能模块图(层次结构图)
  • 产品的流程图(核心需求交互设计主要突出的就是交互步骤)

      PC软件产品的首页交互设计

PC软件的首页设计往往基于鼠标+键盘的人机交互方式进行的,所以最基本的交互动作往往是“单击”、“快捷键”。

PC软件的首页在进行交互设计时,有很多要素要注意,第一点就是界面要简洁,功能入口要摆放合理。

下图是思维导图Mindjet 14的首页,大家可以看到首页上部的功能栏设计是否和win平台的office系列软件相似呢?为什么要这么设计一款画图首页的界面?

交互设计师的角度,一款新的软件产品在设计之初就要考虑用户的学习成本,所以在设计之初我们需要做的事情是避免设计过于难学的交互动作(即使是创新也要考虑用户学习成本),我们来看看Mindjet 14和OFFICE有哪些交互能扯上关系吧

图:Mindjet 14 首页

1

图:Office2013 Word首页

2

对比Mindjet 14和Word2013发现上面部分的编辑功能区几乎很相似,保存按钮,粘贴按钮,文件主菜单,开始(tab)都是直接沿用了Office。

那么,这么做会不会被说抄袭?没有创新?

其实,这种设计思路是为了延续用户使用习惯,减少用户操作学习成本,对一款软件的推广是有至关重要的作用的。试想我们是先接触到PC,从office03到现在office13很多人都是先接触到的Office,他们这些人在使用编辑器的时候有些形成的固定的使用习惯,比如Ctrl+S快捷键是保存,比如进来软件首页给用户一种似曾相识燕归来的感觉,他不用怎么学习就玩的飞起,这就达到了我们的目的。

关于创新,要是都全部一样那就是2个Word了没有Mindjet的存在理由了,之所以交互动作相似,Mindjet还是有自己方向,因为两款软件定位不一样,Mindjet是用来画图,Office系列的Visio也是画图软件,那么Mindjet做出了什么亮点在首页上就应该第一时间告诉新用户

这时候需要考验设计师怎么向新用户引导使用自家软件的特别功能交互

Mindjet首页在左侧有个视频播放窗口,一些简单的功能介绍和使用特色。

在界面的中央部分由个思维导图的案例,用户可以选择查看学习在这个案例基础之上直接修改得到自己第一个作品,也可以新建一个新的。

首页突出亮点,首页部分的引导案例上有很细节的部分一个节点可以放图片+文字,还有不同样式可以换,这更大限度的给了视觉需要较强的用户一个贴心的提示。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/957/

(0)
iouedioued
上一篇 2014-10-12 10:41
下一篇 2014-10-13 22:09

相关推荐

  • 电子书阅读APP原型设计解析

    我是比较喜欢纸质书的,一本好书,我总愿意买本纸质书,放在家里可以随意翻看,或一遍,或多遍,偶尔也会当花瓶放着。 阅读纸质书是视觉,听觉,触觉,嗅觉的享受,甚至连带着回忆都是美好的。 柔和不刺眼的纸张带…

    2015-06-11
  • 100%干货!大型互联网公司精益产品设计流程

    相对于传统产品设计流程,精益产品设计流程越来越受互联网公司,特别是创业公司青睐,但很多人听过精益创业、精益设计,但并不明白其中的奥秘,本文就带大家揭开精益产品设计的流程方法和要点。 首先我们来看看传统…

    2016-05-31
  • Justinmind权威指南:​基础-Justinmind基本元件的使用-2

    ​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注 矩形 这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,…

    2015-08-31
  • Axure实例教程:仿淘宝搜索原型

    做了个模仿淘宝搜索原型,先上图啦

    看似简单的搜索栏,包括的内容可不少哦,包含了:矩形、文本框、动态面板等。

    2014-12-31
  • 【Mockplus教程】删除

    1 删除单个页面或分组 直接选中需要删除的页面或分组,在右键菜单中选择“删除”,或者使用Delete键删除; 2 删除多个页面或分组 在同一个分组下,按住Ctrl键,鼠标单击页面选择多个需要删除的页面或分组,然后右击选…

    Mockplus 2015-09-10
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 为什么要做艾欧交互学堂网站-@阿西-UED

    我是阿西,艾欧交互学堂的管理员,自己想了很久,做这个项目究竟是为了神马? 可能目前大家还没关注到我们,但是等将来你们关注到后,肯定也有这个疑问,就是这个人为什么要做一件看似不靠谱的事情呢? 这里就要解…

    原型设计教程 2014-09-14
  • 跳出思维圈,“类H5”助你市场推广一臂之力

    HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来…

    2023-03-03
  • 在线预览Axure文件,使用新浪SAE发布在线Axure文档

      俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT 行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:…

    2016-01-07
  • [桌面版] 在 Mockplus 2.1 (预览版)中使用滚动区

    1、添加一个滚动区。为方便查看,可以设置一个背景色 2、双击编辑滚动区 3、点击滚动条两端的按钮可以扩展或收缩滚动区中的内容。在两端按钮按下的同时,按住Ctrl键,可以加速扩展或收缩。也可以直接把内容组件拖到…

    2015-11-12