第五章 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

相关推荐

  • 【译】学习Axure RP 8 Beta - 流程图改进

    From: Learn Axure RP 8 Beta: Flow Diagramming Improvements(http://www.axure.com/c/blog/161-learn-axure-rp-8-beta-flow-diagramming-improvements.html) 专题:Axure8.0 Axure RP 8 中在流程图部分做了部分…

    2015-08-20
  • 【Mockplus教程】表格

    Mockplus对于表格的控制,采用的是通过文字来控制外形和数据的方法。稍微熟悉后,你会发现,这种方式可以很快地组装表格。 如图,这里是一个表格: 双击这个表格,进入编辑,看到如下的文字: 好像很难? 别急,我…

    Mockplus 2015-10-17
  • 【Mockplus教程】为什么我不能设置链接的切换动画?

    目前只有mobile项目和pad项目支持链接切换动画,桌面项目、网页项目、空白项目均没有支持。

    Mockplus 2015-09-23
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • axure实例教程 鼠标悬停+动态面板结合使用

    鼠标悬念时改变原状态,如加底色/字体颜色改变等交互在axure中是非常容易实现的,本原型中结合了鼠标悬念和动态面板的使用。上图片啦:
    1.鼠标悬停前效果

    2.鼠标悬停后的效果:字体低色为粉色

    2014-12-31
  • Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框(Toast)

    从现在做,跟我一起来认识Mockplus的交互。 Mockplus的交互,非常简单、直观、容易上手。你所需要做的,只是拖一拖鼠标,然后几步设置而已。 当然,只要你愿意,还可以实现强大的交互效果。 不废话,先来做一个,试…

    2016-01-18
  • Axure官方教程中文版第4课:构建交互动作-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(4).MP4 新建文件 1、添加一个按钮和两个文本框 2、禁用第二个文本框 3、设置第一个文本框不可点击 4、设置第二文本可用 5、将第二个文本框设置获…

    2015-01-26
  • Axure RP 8 BETA

    新一代的Axure 8.0 现在推出 beta版本   [button type="danger" text="官网下载beta版本" url="http://www.axure.com/beta" open_new_tab="true"] 快速下载地址: Win版下载地址:http://pan.baidu.com/s/1o6p…

    2015-08-13
  • 你应该知道的24种新兴交互设计

    文字原文:一淘UX原文:http://ux.etao.com/posts/570   在互联网这个领域,每天都有不计其数的产品诞生,有些产品只是灵光一现,有的却存活了下来,但是不论存活与否,这些产品上总有一些设计细节让我们眼前…

    2014-12-18
  • 交互设计师推荐APP产品原型设计工具 |UE网交互设计学堂

    最常用的才是最靠谱的,有些文章里说的很多但是我作为一个交互设计师几乎都没使用过原因很简单,用不到那么多。 1.Visio 2013 推荐指数  ✦✦✦✦✦ 原因:线框专业户,灵活,Office使用习惯接受程度较高。支持各种平台…

    2015-07-01