• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何输出高质量的交互稿?来看京东设计师的总结!

如何输出高质量的交互稿?来看京东设计师的总结!

作者:Roy_ 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互稿,交互设计,可读性,团队协作,经验分享,设计规范等相关知识,Roy_希望在学习及工作中可以帮助到您

交互设计师作为近年兴起的互联网设计岗位之一,具有其岗位产生的背景的特殊性。从交互设计师岗位职能来讲,它是产品与视觉、前端开发的桥梁,是产品研发线上的连接纽带。由于交互设计师既不是需求的发起者,也不是完全算是需求的执行者,所以作为产品研发线的中间环节,交互输出对准确性、效率的不言而喻。可参考某些传话类游戏,中间传递的人的重要性也不言而喻。

一、交互输出内容

以目前主流市场来说,大家还都是用Axure来进行交互稿件的绘制和输出,可见各大互联网公司的UED团队对Axure软件的兼容性还是比较认可的。那么,交互输出应该规定一些什么,输出内容分成几个大类,下面给大家详细讲述:

1. 页面元素

所谓页面元素,就是规定页面内应该存在什么内容、应用什么样的控件等,以及规定这些存在内容的样式。这些元素为页面组成的根本,也是交互输出最基础的根基部分。下列为笔者随便举例:移动端二次确认对话框的页面元素规定(由于方便显示,没有按照自身规范书写)。

2. 用户点击事件流

其实「事件」是个计算机词汇,你在输入框中获取焦点,就算是一个用户事件;亦或是你点击了某个链接,都属于事件,存在于Log日志中。那么所谓的用户点击事件流,通俗说既是用户使用产品时,与界面、服务器交互的过程。在此过程中,交互设计师需要规定用户点击后跳转的页面、界面对用户的反馈,此过程是塑造用户行为的关键环节。下列举例为移动端二次确认对话框的用户点击事件流规定:

3. 异常、边界情况

异常情况和边界情况其实可以分开来讲。首先说异常情况,主要包含:服务器响应超时情况、服务器错误、网络中断、弱网状态(主要存在Mobile端)等… 边界情况的存在主要用于限定一些特殊情况,例如:

  • 输入用户昵称的Maxlength (字符限制);
  • 移动端的加载等待时间(一般15-20S),超出后显示错误状态。

下列举例为移动端二次确认对话框的异常和边界规定:

二、交互稿输出原则

在了解我个人输入交互稿的内容习惯后,内容的基础上,如何完成准确性高、高效、有利于工作协同的交互输出?笔者个人在工作过程中,总结了以下几点交互输出的原则。

1. 模拟真实+规范统一

尽可能对线上页面的元素进行完整还原,目的是给读交互稿的同事一种代入感。但是模拟真实并不是进行像素级别的还原,那是视觉设计做的工作。其实做到模拟真实有一个捷径就是,建立自己产品的交互设计规范,这套交互设计规范库可以从控件级到组件级再到页面级。笔者注意到做到一般视觉、交互规范很难达到页面级别,因为产品页面模式多变。但是不同页面最终会落到一种前段「容器」模板中,这个容器可以是以列表、表单为基础的,也可以是产品的一个详情页模板。总之,每次交互输出需要利用这些规范模板时,都可以复用,达到模拟真实的效果。

利用页面级的规范模板可以促成产品规范的统一。但是说到规范的统一性,就不仅仅是页面级别,可能是更高的层级的统一性。比如下图所示,交互稿的命名、分页的规范。

2. 易读性

如何提高交互输出的易读性?这个问题见仁见智,从笔者本身角度出发,个人认为提高易读性最关键的就是:流程清晰,描述简练。能用简短步骤描述清楚的,就不用繁琐的步骤。同时流程应尽量简化,但是流程简化是建立在高效交互的基础上,故而交互设计能力还是关键;其次则是描述(交互说明),看过许多交互设计师、初级PM在写页面的说明时,长篇大论、文字繁琐至极,瞬间就会产生一种不想读下去的感觉。

你要想到:写文字交互说明的目的是为了补充原型图中没有提到的点,从而方便开发、上下游同步页面信息。所以在保证功能、流程完整度的前提下,尽量描述简练,是提高效率的好方式。

3. 业务逻辑 & 功能范围内的创新

老生常谈的话题。在基础方法论、行业经验都兼具的一群人当中,靠什么区别一个产品设计师是否优秀?没错,创新能力。业界大佬的例子数不胜数,我就不在这列举了。就拿身边的同学来说,他们的策划案、作品、PRD也看过不少,普遍来说大家都差不太多。但是有BAT或国际TOP3互联网公司实习的同学明显会体现出差别:那可能是页面中某一个控件用的十分巧妙、亦可能是某一个商业落地想法以前没有听说过,总之都会给人以一种眼前一亮的感觉。或许这就是创新能力吧。

 

欢迎关注作者微信公众号:「交互设计Roy」

「值得新手学习的交互设计方式」

  • 《超全面!写给零基础新人的交互设计入门完全指南》
  • 《专业科班的答案!一个完整的交互设计流程是怎样的?》
  • 《进阶好文!让人舒服的的交互设计稿该有的5个特点》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 如何输出高质量的交互稿?来看京东设计师的总结!
  • 交互方案该画到什么程度?来看全栈设计师的总结!
  • 如何让交互稿的体验更好?网易设计师总结的10个知识点
  • 解读交互稿模板:如何让设计稿更规范化?
  • 超全面!一个完整的交互设计稿有哪些必备元素?

相关文章

  • 2018-08-23进阶高级设计师!帮你做能落地的界面设计之输入框
  • 2018-08-23为什么优秀的设计师都是讲故事的高手?
  • 2018-08-23不懂服务设计?看看它的演变历史你就知道了!
  • 2018-08-238种引导方式,7个设计要点,让你全面了解新手引导!
  • 2018-08-23写给新手的APP结构指南:首页相关(上)
  • 2017-09-13sed简单教程
  • 2018-08-23挂墙上每天背!7种主流设计风格的制作心得
  • 2018-08-23AI教程!手把手教你绘制矢量花丛文字效果
  • 2017-08-06@Font-face的基本用法及让全部浏览器都兼容的方法
  • 2018-08-23网易资深设计师:新人该如何提升设计思维?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从零开始设计APP!快速提升引导页格调的设计方法总结
    • PS CC2018新功能给力来袭,Adobe这次出大招了!
    • 可能是你见过第一篇分析电梯交互设计的文章
    • 想让你的网页设计脱颖而出,可以从这5个维度入手
    • 关于CSS absolute与relative不得不说的话
    • 学会这4个心理学小知识,你的设计会更有说服力!
    • AI教程!教你制作超唯美的游戏场景
    • 7个实用技巧,让你的动效变得更优秀!
    • 盲人站长深恶痛绝的onfocus=”this.blur()”
    • 为什么不要再问用户「你们到底想要什么」?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有