第五章 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元件下载:Axure 7.0 ios8元件库1.2最新版

    axure 元件下载 注意事项: 1、本元件库中的字体图标以及部分元件使用时,需要双击安装1.2版本的压缩包中的TFF字体文件,并重新启动Axure,否则拖进编辑区不能正常显示。 2、如果在本机演示原型,无需进行其他设置…

    2015-07-20
  • Justinmind 7.1.0 win&mac网盘下载

    自定义需求字段 如你所知,Justinmind企业版可以帮助你通过需求管理与所有设计团队打造智能商务解决方案。直到现在,你已经能够在你的原型中定义项目的要求。随着在Justinmind编辑的需求领域,用户已经可以定义需求…

    2016-04-13
  • 为什么要做艾欧交互学堂网站-@阿西-UED

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

    原型设计教程 2014-09-14
  • 8种移动APP导航设计模式大对比

    本文转自用户体验联盟 当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来? 也许我们对比和了解…

    原型设计教程 2014-10-24
  • axure实例教程 鼠标悬停+动态面板结合使用

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

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

    2014-12-31
  • 国内外人气UX/UI/PD设计社区推荐,纯干货

    对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情。如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求、烦恼找不到设计解决方案、得不到有效的用户反馈…

    2023-03-03
  • UX的设计灵感从哪里来?——看看Megan Wilson的采访

    Megan Wilson是一位资深的用户体验师和UX Motel的专业编辑。同时她是ux.walkme.com网站UX专栏作家,在Facebook、领英有大量粉丝。和一般介绍性的文章不同,她喜欢用访谈的方式来发表UX方面的文章,这样的文章,有很…

    2023-03-03
  • Mockplus原型交互跟我做之7 - 拉长页面做滚动,并固定顶部和底部

    在Mockplus的App项目,你可以快速地拉长页面做滚动,并且固定顶部和底部。请看视频:

    2016-02-18
  • 016. 动态面板——axure线框图部件库介绍

    1、什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件(你可以把一…

    2014-09-12
  • 交互设计前的预备知识

    进行交互设计之前需要一些预备知识: 预备知识一:能看懂思维导图:下图是艾欧学堂的思维导图 在思维导图中可以清晰明确的看到我们的栏目规划,和内容方向那么原型设计基于此开展设计,如果有一份完整的需求说明书…

    原型设计教程 2014-09-27