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

写给新手的交互规范入门科普

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

本文主要包含交互规范,经验分享,设计规范等相关知识,小薇谈设计希望在学习及工作中可以帮助到您

前两天有读者问我,应该如何区分初级交互设计师和高级交互设计师?有很多指标作为参照,最直观的问题可以归结成有没有出过交互规范。交互涉及到逻辑性,心理学,视觉设计等多个领域,具体到项目需要把控细枝末节,同时也具备归纳总结提炼的功力堪称完美。

每天充斥着各种会议,需求沟通,整段的时间都少之又少,再不会归纳总结可能觉得每天都在打酱油吧。曾经有句经典对白,不会做视觉规范的设计师只能算是个美工。设计师看到「美工」这两个字眼,就像开发工程师看到「bug」一样会瞬间燃起斗志,交互的范畴同理适用。

先有产品,后有规范?

这就像是先有鸡还是先有蛋一样,众说纷纭。规范顾名思义在经历了不同产品模块,不断迭代的过程中,对于产品设计者和开发者来说都需要一个实施标准来说服对方。当陷入到拉锯战,双方站在天平的两端都没有答案的时候,急需标准化的东西来推进产品发展。

同时在不断迭代的历程中,很多模块为了保住功能做了一些修改,这些小的修改积累到一定程度就会对产品整体的一致性方面提出挑战。

产品中的需求功能点不断完善的过程中,涉及到业务流程的场景也会丰富起来,很多的组件适用于不同场景也成为产品中必不可少的一部分。统一的对这部分已经积累下来的真实组件形成规范有利于开发和再利用。

所以先有产品,后有规范更为合理。

规范从哪儿开始?

交互规范分为web端和移动端以及其他配合产品使用的设备端,比如iwatch等。web端规范需遵循诸如一致性,连续性,用户可操控性的交互原则,熟悉windows和Mac的操作方法。相对于移动端以及其他设备端口需要熟悉平台本身的交互设计规范。

  • iPhone 交互设计规范
  • material design交互规范
  • iwatch 交互设计规范

熟悉了平台规则,来建立产品自己的规范体系吧。

划分规范体系

规范是产品系统化的产出,从大的方面产品的整体框架层面说起,包括标题栏、顶部导航、底部操作栏等,共同部分包括各类信息提示和组件,到产品各个模块相关的业务组件等。

整体框架规范

  • 界面规范
  • 标题栏
  • 顶部导航
  • 底部操作栏
  • 页面跳转逻辑

提示信息规范

  • 预先信息提示
  • 操作类提示
  • 谨慎类信息提示
  • 警示类信息提示
  • 悬浮类信息提示

因为产品类型不同,组件列表在这里就不一一列出了,大家可以尝试总结一下。交互规范对每种组件进行详细描述,包含三部分内容:

  • 构成元素,控件由哪些元素组成(文字,icon,操作按钮等等)。
  • 使用场景,控件应用于哪些场景,什么时候会使用到,触发条件等。
  • 细节说明,描述控件具体内容,在不同场景中如何呈现,特殊场景描述等。

小结

规范是形成体系化的标准,制定标准需要遵循4方面原则。

  • 统一性和标准性,导航结构一致、响应方式一致、文案表达方式保持一致、信息提示一致、功能名称保持一致。
  • 信息清晰,导向明确,主次布局合理、逻辑清晰、导航层次清晰。
  • 反馈及时有效,用户操作及时反馈、准确、简单、直白、具有导向性,don’t make me think。
  • 防止错误,不可修复操作及时提示,预防纠正错误,错误页面可及时返回,掌控权留给用户。

欢迎关注作者的微信公众号:「小薇谈设计」

「设计规范好文合集」

  • 《设计规范官网汇总:iOS、Material Design、IBM、Fluent……(持续更新)》
  • 《腾讯出品!从零开始制作设计规范的实用指南》
  • 《内部教程!超实用6步透视网易设计规范(附完整PDF下载)》

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

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

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

优设大课堂

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

  • 如何输出一份专业优秀的交互文档?
  • 网易设计师:超全面的交互规范设计流程
  • 写给新手的交互规范入门科普

相关文章

  • 2017-08-06响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
  • 2017-08-06借贷宝怎么推广让大家都来注册呢? 借贷宝推广方法技巧
  • 2017-08-06CSS HACK之IE6/IE7/IE8/IE9/FF(归纳)
  • 2018-08-23上亿人使用的百度贴吧,是这么做设计改版的!
  • 2017-08-06用Dreamweaver8对网站文件进行检查整理的方法
  • 2018-08-23学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 2018-08-23AI教程!手把手教你绘制矢量花丛文字效果
  • 2018-08-23让PM无言以对!可能是最专业的交互设计流程
  • 2018-08-23不懂服务设计?看看它的演变历史你就知道了!
  • 2017-08-06js、css、html判断浏览器的各种版本

文章分类

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

最近更新的内容

    • 设计师装备指南之 iMac 电脑全方位科普篇
    • 前端开发者的工具、库和资源
    • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
    • 画交互原型方案前,你应该思考的三个点
    • 提高网站可用性和转化率的25个工具
    • CSS XTHML书写规范以及常见问题总结(页面最优化)
    • Facebook 官方出品! iOS 11模板文件,含 PSD/SKETCH 和壁纸
    • 全球iPhone摄影大赛人物类冠军:如何提高手机摄影水平?
    • 网页宽度自动适应手机屏幕宽度的实现代码(viewport)
    • 「这个控件叫什么」系列之Notice Bar/通告栏

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

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