规范化入门交互设计
这是一篇适合刚入门的设计师，对交互设计规范的详细介绍。主要含括了原型的概念、界面基础控件、界面常见的布局方式，对设计规范不熟悉想要更深入了解的可以参考一下。
01.原型的概念原型设计为了让用户能够更直观的评估产品设计，避免将错误带到最终的产品中去，从而根据构思设计产品的大概草案版本，称为原型设计
初级原型：（概念草图）用户通过该种原型，对之前的需求结果有一个表象上的呈现，能够更直观的了解产品特征。初级原型也为设计者的思路落到实处提供途径。
高级原型：在产品逻辑、交互逻辑、视觉效果等等极度接近最终产品的形态。这样不熟悉产品的人也能通过观察、使用明白这个产品有什么用。
可交互的高级原型：有交互效果的高保真原型，无限接近于上线稿。
原型=产品草图
02.界面中的原型板式——界面基础控件通用基础控件状态栏 status bar：显示设备信息或用户通知信息
导航栏 navigation bar：iOS和Android布局不同 安卓叫app bar
内容content view：主要设计区域
标签栏 tabbar：iOS都有，安卓以前没有，现在跟iOS越来越像，也有标签栏
对话框与提示框弹窗可以分为4个种类，每个种类适用于不同的交互场景下，并不是每个弹窗都需要被确认。这四个种类分别是 “Toast提示框” “Dialog对话框” “Actionbar功能框” 与“Snackbar提示对话框”没有任何一个用户喜欢弹窗，所以使用要控制。
Toast提示框：是一种非模态弹窗（自行消失的，时间自定），它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。例如你发出了一条短息，app弹出一个Toast提示你消息已发出。
toast替代方案：多态按钮这种提示可以常驻在页面里，即使用户短时间内注意力转移，提示也不会消失，确保用户能一直完整的看到。此外页面内提示能容纳更多信息量，与页面本身风格比较契合，没有阻塞感，适合表单错误提示、加载过渡。
Dialog对话框：是一种模态弹窗，当用户进行了敏感操作，或者当app内部发生了较为严重性的状态改变，这种操作和改变会带来影响性比较大的行为结果，一般情况下dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失。
Actionbar功能框：可以看成是Dialog的一种延伸设计，两者都是模态弹窗，用户必须进行回应，否则弹窗不会消失，用户无法继续其他操作。actionbar比dialog拥有更多的功能按钮，提供给用户更多的功能选择。
Snackbar提示对话框：是安卓系统的特色弹窗之一，它也是一种非模态弹窗，同时拥有toast和dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互。
页面指示器是附着在轮播图、一组卡片或者页面的底部，用来表示页面总数量和指示当前停留的页面。通常有一组等距的小圆点组成，小圆点的数量代表页面总数，其中深色或实心的小圆点代表当前页面。
设计要点1.不要显示太多
超过10个很难在一屏内展示，超过20个页面用户浏览起来会非常耗时。如果超过20个页面请考虑使用其他形式或控件展示。
设计要点2：避免滑动冲突
一般来说用户在移动端习惯使用左右滑动操作，因此要注意同页面内会不会与其他支持左右滑动的空间（例如：顶部tabs、地图、轮播图等）产生手势冲突。
设计要点3：样式可以特殊化
如果指示的某个页面较为特殊，可以为某定制特别的样式，例如锁屏页用户可以不解锁直接向左滑动打开相机，因此为相机设计了特殊样式突出这个功能。天气app中一眼就明白第一个是当前GPS定位地址。
设计要点4:不要把指示符做到页面内
页面指示器的层级比页面要高，因此切图和研发工程师沟通实现方案时，一定要确认把页面指示器单独切图处理。千万不能把页面指示器嵌入到页面里，导致滑动页面时跟随页面一起运动。
通告栏notice bar经常能看到很多app的 navigation bar（iOS叫导航栏，安卓叫app bar/应用栏）下方、列表上方或者页面底部悬浮着一个横幅。这些横幅通过某个事件触发而出现，能常驻显示直到事件结束，并且通常可以操作。
设计要点1:醒目的区分不同类型
如果你的app中有用于警告、温馨提示、活动促销等不同的notice bar，可用颜色和图标进行区分，便于用户形成视觉记忆，快速辨识通告类型。
设计要点2:不要附加太多操作
一条notice bar只描述一个事件，通常点击后提供处理这个事件的页面，最多再提供一个关闭notice bar的按钮。不要在notice bar上附加太多操作，增加用户选择负担。
加载占位符skeleton screen近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位符，与线框图的效果非常相似。skeleton screen本质上是界面加载过程中的过渡效果。
气泡弹出框 PopoverPopover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和三角箭头组成的弹出窗口，箭头指向的地方通常是导致popover弹出的控件或区域。通过点击popover内的按钮或非popover的屏幕其他区域可关闭popover。
设计要点1:情境下的相关选项
如果界面中有多个项目，而且每个项目都有多个相关选项，使用popover承载多个情境下的相关选项是个不错的方案。在手机上，相比于action sheet，popover的三角箭头能明确的指示当前操作的是哪个条目，不易出错。
设计要点2:提示引导
popover的三角箭头这一独特特性，同样适合作为提示引导或者展示附属信息。每当上线新功能，用popover能很好的吸引用户注意力，引导用户了解新功能。界面图形较多的情况下，用popover简短的展示附属文字信息，能帮助用户很好的理解图形的含义。
徽标/小红点 Badge[小红点]是这个控件在国内最通俗的称呼，正式的名称为[badge]徽标，徽标是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。
设计要点1:注意数字的长度和上限
小红点可以分为五数字和有数字两类，对于有数字的小红点，由于界面显示空间有限，因此要注意视场景和信息类型决定数字最长显示多少位，如果数字达到上限该如何显示。
设计要点2:一键清除
小红点如果非常多出现频次又很高，会对用户产生一些情绪干扰，例如很多强迫症用户每次遇到小红点都会设法点击消除掉，收集qq以此为出发点，创造性的设计了一键拖拽清除小红点的功能，得到用户好评。
开关/滑动开关/切换开关 SwichSwich有两个互斥的选项（例如开/关、是/否、启动/禁用），它是用来打开或关闭选项的控件。选择其中一个选项会导致立即执行操作。
设计要点1:立即执行操作
Swich与Radiobutton（单选按钮）、checkbox（复选框）最大的区别是：swich操作后，程序立即执行相关操作。而单选按钮和复选框一般用在表单里，仅反应当前的选择状态，如果要执行操作并生效，需要点击额外的提交按钮。
注：开关按钮页面不需要加保存按钮，
设计要点2:注意加载状态
如果开关所执行的操作需要与服务器交互，就必须考虑加载状态了，例如刚进入页面时，获取开关的状态需要加载。如果改变开关的状态，需要与服务器交互，必须等待服务器返回成功指令后才能改变开关的状态，传统的做法是为初次加载和操作后等待准备特定的样式。
设计要点3:危险操作二次确认
正是由于按下开关后立即执行操作，如果操作比较危险，请在点击开关后加入二次确认流程，避免造成严重损失。
字母索引导航A-Z index字母索引导航能将信息以首字母进行分类组织并提供导航。字母索引历史悠久，早在我们的实体书籍入字典、词典等就运用这种信息组织方式。正因如此，字母索引导航是用户非常熟悉的一种导航方式。
设计要点1:注意非字母开头的内容
一些移动社交网络的昵称，可能会使用emoji表情或者数字作为首歌自负。一般来说可以通过在字母末尾增加“#”，表示非字母开头的内容。如果首字母非字母的内容太多，可以考虑采用其他数据类型的导航。
设计要点2:增加常用选项导航
字母索引导航严格按照字母顺序排序，但是在某些场景中，这并非是最高效的。例如在外卖app选择城市的列表中，用户选择当前城市的可能性最大，因此可以在字母索引导航最顶端增加当前GPS定位地理位置的导航等等。
03.界面中的原型板式——界面常见的布局方式标签式 labelling type、列表式tabular form、
卡片式card type、多面板式multifaceted plate type、
瀑布流式cascade flow type、手风琴式accordion type
标签式 labelling type:也叫网格式布局，一般承载较为重要的功能，由于标签式的设计较有仪式感，所以视觉上层级很好，一般用于展示较多的快捷重要入口，且各模块相对独立。
标签式布局的优点是个入口展示清晰，方便快速查找。缺点是扩展性较差，标题不易过长。并且非重要层级的功能，或者不可点击的纯介绍类元素，不适用于标签式设计。最多两排，不宜过多
如果产品需要，如下图这种分层级也是可以的
列表式tabular form：（适用于有规律的内容）列表式布局式移动端应用小屏幕的限制下最常见的版式形式尤其适用于文字较长的信息组合，列表式的布局优点是信息展示较为直观，节省页面空间，浏览效率高，字段长度不受限制可以错行显示。
缺点是点一的列表容易视觉疲劳，需要穿插其他版式形式让画面有些变化，并且不适用于信息层级过多并且字段内容不确定的情况，这些情况仅仅通过分割线或者间距的区分容易让用户出现视觉误差。
卡片式card type：卡片式设计的另一个典型好处是可以将不同大小、不同媒介 形式的内容单元以统一的方式进行混合呈现，最常见的就是图文混排，既要做到视觉上尽量一致，又要平衡文字和图片的强弱，这是卡片设计经常有奇效。
当一个页面内信息板块过多，或者一个信息组合中信息层级过多通过列表式设计容易使用户出现视觉误差时，卡片式的设计就再合适不过了，卡片式设计的缺点是对页面空间的消耗非常大，需要上下左右各有艰巨，就会导致一瓶呈现的信息量很小。
卡片可以进行归类，卡片设计在视觉层级上是最高的，可以赋予用户有任务的感觉，通过卡片设计可以跟物理空间进行联系，如优惠券用卡片式设计
多面板式multifaceted plate type：如京东分类页多面版的布局更常见于pad终端，但移动端也会用到。多面版很像竖屏排列的tab，可以展示更多的信息量，操作效率较高，适合分类和内容都比较多的情形，多用于分类页面或者品牌筛选页面。
优点是减少了页面之间的跳转，并且分类较为明确直观。它的不足是同一界面信息量过多，较为拥挤，并且分类很多时，左侧滑动区域过窄，且不利于单手操作。
瀑布流式cascade flow type：当一个页面内卡片的大小不一致，产生错落的视觉效果就是瀑布流，瀑布流设计适用于图片/视频等“浏览型”内容，当用户仅仅通过图片就可以获取到自己想获取的信息时，那么瀑布流再合适不过了。
移动端的瀑布流一般式两列信息并行，可以极大的节省交互效率，并且可以用来制造“丰富/华丽/眼花缭乱”的体验，适用于电商或者小视频类应用。瀑布流布局的缺点时过于依赖图片质量，如果图片质量较低，整体的产品格调也会被图片所影响。
瀑布流会确定卡片的宽度，高度根据图片内容自适应。
手风琴式accordion type：手风琴式布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容式隐藏的。因此它可承载比较多的信息，同时保持界面简洁。
手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。手风琴在浏览器上很常见，很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。手风琴布局的缺点是同时打开多个手风琴菜单，分类标题不易寻找，且容易将页面布局打乱。
UI中国
作者：星云Design
建筑设计泛化是指什么
是一种通用的设计方法和思维方式，可以提高设计效率和质量，促进建筑设计的创新和发展。建筑设计泛化是指将建筑设计中的一些基本概念、原理和方法，应用于不同类型的建筑设计中，从而形成一种通用的设计方法和思维方式。建筑设计泛化的目的是提高设计效率和质量，减少设计过程中的错误和重复，同时也可以促进建...
rl设计是什么意思?
RL设计是指机器学习领域中的一种算法，它利用智能体与环境交互的方式来学习最优的行动策略。RL设计可用于各种场景，例如自主驾驶、机器人控制以及游戏自动化等。在RL设计中，通常会定义一个任务和一个智能体。任务是智能体需要完成的目标，智能体则是学习最佳策略以达成任务目标的算法。智能体与环境不断交...
一文了解UML!
作为设计交流的桥梁，UML的核心价值在于其设计思维而非单一的图形表示。用例图是UML的核心，用于需求分析，它描绘出参与者如何与系统互动，用例之间的关系和扩展，如区分主动和被动参与者，以及用例的业务描述和扩展场景。用例图中的关系包括包含、扩展和泛化，通过这些关系，我们能避免局部视角的局限性，全面...
我们如何正确使用Use Case?
例如上图中的:用户登录,泛化出了昵称登录和手机号登录两个case(实体),而在界面设计中也许是一个界面(通用登录界面),也许是两个界面(交互设计师会有一大堆理由告诉你那种设计更好,但一般没有一种是按照用户 业务可能性驱动 分析的,因为交互设计师不喜欢研究业务过程,哈哈!交互设计师不要打我哈!)。如果我们用界面...
软考设计模式技巧
1、看类图 软考刚开始的时候做设计模式，觉得不需要看类图，根据前后代码就可以填空，直到最后才发现类图才是设计模式的核心。拿到一个设计模式后，先看一下概念，接下来看的就是类图，图中有哪些抽象类，接口，具体类，类与类，类与接口有什么对应关系。2、找关系 关系是转换成代码的关键，在类图中...
类图到底怎么画?
深入理解类图：绘制对象世界的蓝图类图，作为面向对象建模的灵魂，是一种直观且强大的工具，它为我们揭示了模型的静态结构和类间交互的秘密。这些结构包括类、接口、以及它们之间的各种复杂关系，如依赖、泛化、关联、聚合和组合等，是软件设计中的基石。接下来，我们将逐一探索这些关键元素，帮助你掌握如何...
软件概要设计和详细设计精要
业务流程是架构的关键连接点，通过对象组件封装和角色协作，实现功能的合理分配。UML的角色交互图犹如工作说明书，详细描述了角色间的责任和交互方式，而泳道图则进一步细化了工作流程，动态与静态设计相结合，确保功能的完整性和准确性。在详细设计阶段，系统架构的构建尤为关键。界面、服务器（承载业务逻辑）...
教学设计研究发展的各阶段的特征联系
创造性和直觉是设计活动的主要特征。设计者作为设计活动的主体,对情景的分析和需要的描述,离不开技术与理性的思考,但是,设计者的创造性和直觉则对提出有关方案的设想极为重要。设计者的经验、理论素质、风格、情感、洞察力等都会影响对问题的理解。理解的不同,则可能导致不同的方案。设计过程中通常存在着社会性交互...
需求分析与系统设计的图书目录
译者序前言第1章 软件过程1.1 软件开发的本质1.1.1 软件开发的不变事实1.1.2 软件开发的“意外事件”1.1.3 开发还是集成复习小测验1.11.2 系统规划1.2.1 SWOT方法1.2.2 VCM方法1.2.3 BPR方法1.2.4 ISA方法复习小测验1.21.3 三级管理系统1.3.1 事务处理系统1.3.2 分析处理系统1...
爱情插画设计理念-服装设计中常见的插画的艺术风格有哪些?可以详细说说...
1、插画的独特性来自于其中的隐喻和引人入胜的视觉 和艺术一样,设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成,包含的隐喻使得其中的价值更加复合,值得反复咂摸,而不是一眼就可以完全看穿。2、数字插画能强化交互 应用在短视频中数字化的好处就在...
束修羚羊： 1,做交互设计和UE的人大概分三类,一类是从平面设计视觉设计的端点延伸至交互设计的端点,属于“视觉发展路线”;再一类是从软件工程等工程项目的方向发展转化而来,属于“工程发展路线”;前两类都可看做是计算机专业的人群,当...
凤庆县13527029061： 交互设计规范应该包含的哪些内容 - ？
束修羚羊： 当产品规模大了之后就需要多个产品设计师协作完成整个产品,由于不同产品设计师之间的设计理念、设计方法、设计习惯的不同,协作完成的产品往往会导致产品一致性差,质量参差不齐. 这个时候会需要一份交互设计规范来规范和指导产...
凤庆县13527029061： UI交互设计需要学些什么东西?？
束修羚羊： UI设计是一个课程大类,包含的小科目很多,比如平面设计、网页设计、电商设计、UI交互设计等等.接下来我们分别讲一些每个科目的培训课程内容.一、平面设计 平面设计分为两个阶段,在第一阶段视觉设计基础中会学习UI行业概述与课程...
凤庆县13527029061： 交互设计怎么入门 - ？
束修羚羊： 可以先了解下什么是交互设计.交互,在这里指的是作为服务使用者的用户和作为服务提供者的电话银行系统之间的互动通信并交换信息的过程,有请求,有应答,需要双方参与. 交互设计可以划分为纵向和横向(动态的和静态的) 纵向太深,...
凤庆县13527029061： 交互设计入手方法 - ？
束修羚羊： 个人看法: 1,做交互设计和UE的人大概分三类,一类是从平面设计视觉设计的端点延伸至交互设计的端点,属于“视觉发展路线”;再一类是从软件工程等工程项目的方向发展转化而来,属于“工程发展路线”;前两类都可看做是计算机专业...
凤庆县13527029061： 如何零基础学习交互设计 - ？
束修羚羊： 参加培训版班,买相关书籍.Ⅰ、 先了解一下交互设计的基本概念:交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的.交互设计师通过设计用户的行为,让用户更方便更有效率的去完成产品业务目标,获得愉快的...
凤庆县13527029061： 交互设计师如何做交互? - ？
束修羚羊： 尽管很多谈及交互的书上都已经回答过了:发现用户需要,建立明确需求提出设计方案制作设计原型用户测试和评估还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节.其实交互设计需要...
凤庆县13527029061： 交互设计需要什么样的基础? - ？
束修羚羊： 你好, 如果你想做交互,我建议你首先要确定自己是否喜欢交互,适不适合做交互.你一年到头都在上班加班做交互这个事情,所以喜不喜欢很重要.你可以先去了解交互是做什么的,如何做,及未来的职业的发展方向,看看这个是否适合自己...
凤庆县13527029061： 大学生~想做交互设计师~必须学什么方面? - ？
束修羚羊： 不用会画画,交互设计师和视觉设计师在工作内容上还是有区别的.你有编程的基础,而且会Axure,这应该是很大的优势了.当然交互设计的重点其实是在于对用户需求的敏锐把握,把用户需求与产品功能设计、界面布局巧妙地结合起来.对...
凤庆县13527029061： 对于零基础的新人,交互设计师都有什么要求? - ？
束修羚羊： 各个公司交互设计的定义和工作内容都不太一样,有些公司交互=ps+网页设计,这个3个月掌握有可能.你说学习mm,visio,axure是做原型设计的,很少有新人一上来就让你做原型的. 工具使用仅仅是基本技能,只要精通一种就可以.关键是思...
