陕西省和城乡建设厅网站wordpress修改代码后

陕西省和城乡建设厅网站,wordpress修改代码后,3g手机网站,有什么做海报网站前言 虽然不同项目的产品类型千差万别#xff0c;设计师做方案时用到的方法和思路总是相对固定的 一个人的价值#xff0c;取决于他/她能为别人带来的价值 第1章 初学乍练—帮你把握大方向 1.1 设计中的交互设计 1.1.1 设计的目的#xff1a;满足需要 第二次世界大战#x…前言虽然不同项目的产品类型千差万别设计师做方案时用到的方法和思路总是相对固定的一个人的价值取决于他/她能为别人带来的价值第1章 初学乍练—帮你把握大方向1.1 设计中的交互设计1.1.1 设计的目的满足需要第二次世界大战让德国人束手无策的战机德·哈维兰蚊式战斗轰炸机简称【蚊式轰炸机】。由英国的德·哈维兰de Havilland飞机公司设计制造的。设计师充分考虑了战争的现实需要采用木制保证了物资匮乏时代仍可以高效地制造减轻重量使其速度更快能够躲避敌人的攻击。设计的目的是满足需要而艺术的目的是表达艺术家对世界的看法1919年德国成立了世界上第一所完全为发展设计教育而建立的学院—【包豪斯】Bauhaus从此设计学科真正建立。包豪斯首次将“理性思维”的观念注入了设计活动中提出了关于设计的三个基本观点①设计是艺术与技术的新统一②设计的目的是人而不是产品③设计必须遵循自然与客观的法则来进行。包豪斯实践了许多前所未有且影响深远的举措①首次提出要为大工业生产而设计②包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为对平面和立体结构的研究、材料研究和色彩研究三个方面使视觉教育第一次比较牢固地建立在科学的基础上。③包豪斯首次提出了“以解决问题为中心”的设计理念。包豪斯强调【形式追随功能】强调突出功能去掉不必要的装饰1.1.2 什么是交互设计1979年3月28日凌晨美国宾夕法尼亚州哈里斯堡东南16km处的【三里岛核电站】2号反应堆发生了放射性物质外泄事故。调查发现操控员的处理以及控制室仪表盘的界面都存在严重问题控制室的仪表盘没有提供监视堆芯温度的仪表监控阀门的指示灯没有显示是哪里的阀门出现了问题这样的设计使操控员在出现问题几小时后都无法确定问题发生的位置导致问题越来越严重最终发生了爆炸。在这个监控系统的交互设计方案中缺少了对关键部件的监测反馈缺少有效反馈例1手机App股票的“交易”界面只说明了操作失败但没有说明原因例2微信登录页错误提示的设计。用户第一次密码输入错误时会出现错误提示第二次输入错误时微信会提示是否需要找回或重置密码。在处理错误信息这个问题上更进一步的交互设计方案是【防患于未然】例3支付宝转账功能的设计方案。用户输入数字后会在输入框的上方出现“给对方转账xx元”的提示更进一步进行了改进用户点击昵称后直接进入转账页面从流程上直接进行了优化避免了用户犯错。用户进行操作过程中系统或程序在用户操作错误时给予及时反馈能带给用户掌控感提升用户体验。交互设计中“交互”一词英文是interaction其中inter是“互相”的意思action就是“行动”所以interaction直观上解释就是“互相的行动”也就是主体行动一下客体再行动一下彼此往复你来我往“交互设计之父”艾伦·库伯《About Face 4交互设计精髓》“交互设计是设计可互动的数字产品、环境、系统和服务的实践“交互设计与人机交互的重叠区域最大与工业设计、建筑设计、信息架构设计、视觉设计都有交集。交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。这些互动的过程主要发生在若干个节点上。节点与节点之间的过程系统需要让用户明白需要做什么发生了什么以便进行下面的步骤。交互设计师处理的就是用户与这些关键节点的互动让用户知道自己现在所处状态、该做什么、操作之后有何种效果这三种关键信息辅助用户完成任务。1.2 如何学习交互设计1.2.1 互联网产品开发流程产品需求阶段交互设计阶段视觉设计阶段开发/测试阶段上线阶段1.2.2 交互设计师的必备技能场景思维用户习惯和心智模型设计目标竞品分析流程设计设计原则设计规范原型制作可用性测试1.2.3 交互设计的学习方法学习基础知识和技能然后进行实践是高效进行交互设计学习的“秘诀”。第2章 登堂入室—目标用户和场景2.1 确定目标用户著名的美国设计理论学家维克多·帕帕奈克Victor Papanek认为设计是为构建有意义的秩序而付出的有意识的、直觉上的努力他认为设计有两个步骤。第一步理解用户的期望、需要、动机并理解业务、技术和行业上的需求与限制。第二步将这些知道的东西转化为对产品的规划或者产品本身使产品的形式、内容和行为变得有用、能用、令人向往并且在经济和技术上可行。目标用户是产品主要服务的群体处于不同发展阶段的产品可以使用不同方法确定产品的目标用户对于已经处于成熟期的产品可以通过分析用户的属性和行为数据得到目标用户的画像对于处于拓展期的产品需要进行市场调研、竞品分析根据公司策略明确产品的目标用户人群对于从无到有的产品一方面有赖于产品经理对于产品的定位和嗅觉捕捉潜在用户满足他们尚未被满足的需求另一方面也要通过市场调研分析竞品来确定用户。2.2 场景思维2.2.1 什么是场景场景Scenario原是一个戏剧领域的词意思是“剧情概要“将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成其任务”这是一个伟大的视角转变“以场景为中心”的概念则强调要以人的需求为中心系统和应用程序要去帮助人们满足他们的需求DOS操作系统需要用户记住各种命令的代码而苹果计算机的操作系统从用户角度出发进行设计不用太多的学习就能掌握绝大多数操作2.2.2 描述场景的公式场景特定类型的用户Who在某时间When某地点Where周围出现了某些事物时With What萌发了某种需求Desire会想到通过某种手段Method来满足需求。设计机会点2.2.3 场景的分类用户场景和硬件场景用户场景客观场景还原用户的真实生活片段重点用于发现用户的问题目标场景描述用户如何使用公司的产品来解决遇到的问题实际场景用于对用户进行测试验证用户是否能够顺利地完成操作是否能够使用设计方案解决问题。设计方案主要服务于主要场景兼顾次要场景和极端场景。主要场景服务于产品目标用户中的主要人物模型即App的主要使用者需要保证其可以轻易找到所需功能并轻松使用次要场景是小众需求设计方案需要保证用户在想要使用的时候即使多点击几次只要找到即可极端场景服务于第一次来到页面、页面尚没有内容、页面网络连接不好或者页面状态改变时的情况考虑了主次场景之后是否考虑极端场景是考验设计方案是否缜密完整的一个重要方面首次使用时的新手引导首次使用时没有数据的情况页面无响应、无网络大量数据网络慢是否有缓存数据过期状态的改变如换城市等。硬件场景各种硬件设备层出不穷硬件本身的特点也都各不相同这就需要设计师在设计的时候把硬件的特点考虑在内2.3 用户场景地图用户体验地图用户体验地图是一种梳理体验问题的设计工具。它是用可视化的形式将用户在经历一个过程中的主要体验都表现出来并将用户的所做、所思、所感都分别展现以便设计师更全面地了解产品带给用户的体验以发掘可以优化的地方。用户场景地图用户场景地图是指设计师使用场景思维将用户经历某个过程的场景用类似用户体验地图的思维进行排查从中发掘设计机会点。第3章 渐入佳境—心智模型和习惯3.1 心智模型3.1.1 什么是心智模型一个人对世界的理解3.1.2 心智模型与表现模型所谓表现模型库伯解释说它是“设计师所选择的一种表现方式用来向用户展现计算机程序有怎样的功能”。通俗点说就是设计师提供一套设计方案让用户可以容易地操作一个设备或App而根本不需要弄懂它的工作原理是什么。设计师方案里使用的表现模型越接近用户的心智模型则越容易被用户接受一个优秀的设计方案需要达到以下四项标准①恰当的吸引力功能入口的吸引力程度与功能的重要性成正比。②容易理解用户一看便知按钮、元素等的状态和可能的操作方法。③正确的表现模型设计师需提供给用户一个正确的概念模型使操作键钮的设计与操作结果保持一致。④反馈用户能够接收到有关操作结果的完整的、持续的反馈信息。3.1.3 心智模型的概括方法唐纳德· A. 诺曼的定义中心智模型包含两个关键要素经验和期望。瑞士心理学家皮亚杰认为人的认知结构的发展存在同化、顺应和平衡化三个过程同化就是把环境因素纳入人们已有的认知当中以加强和丰富原有认知的过程简单来说就是老经验指导新情况顺应是指认知结构因为受到外界刺激的影响而发生改变的情况也就是新经验改变老经验平衡化是指同化和顺应是一个动态平衡的过程。3.2 用户习惯1用户单手持手机操作时底部区域更易操作因此应该将重要的按钮放在页面底部。2扩大按钮操作区域。有时为了视觉的美观页面中的按钮尺寸不能设计得太大。但按钮的可操作区域却是可以扩大的。这样可以大大方便用户的点击。3如果设计师需要设计一个PC端的网页请注意图片永远比文字更能吸引用户的注意。第4章 驾轻就熟—设计目标面面观4.1 什么是设计目标设计的目的是满足需要2025-04-28 09:11:06 不一定是为了方便用户使用也可能为了其它目的故意增加使用难度。圆纸卷卫生纸再设计改造成了方形希望用户在使用时可以降低资源消耗传递出节省的信息。设计目标是对设计方案要达到的期望效果的总结。在设计刚开始时首先确立设计目标可以让设计师在设计的时候更有针对性做到有的放矢事半功倍。具体到互联网产品的交互设计设计目标是通过综合产品目标和用户目标得出的。4.1.1 产品目标产品目标是从业务的角度出发根据业务需求归纳得出的对需求的期望效果。产品目标通常表现为“某个功能可以为App的某个数据带来提升”这样的形式。作为交互设计师在接到需求后一定要分析透彻产品目标是什么。 因为产品目标从一个方面决定了设计方案的方向。在互联网公司中产品需求主要来源于三种团队产品经理、设计师和用户研究员。针对三种不同来源的产品需求如何得出产品目标。1由产品经理提出的需求阿里巴巴提出的“五导家设计法”中“挖掘业务本质需求”的方法。该套方法提供了4个方向的基本问题设计师可以通过这4个方向的问题逐步了解需求的各个方面并从中总结出需求的产品目标。理清需求的4个方面①为什么会产生这样的需求需求是怎么发现的要解决怎样的问题目标是什么②业务方针对目标提出的产品解决方案是什么具体是怎么想的是否还有想要解决的问题没想好方案的③该业务经验性的特点有哪些是否有数据或报告产品/品类特色是什么何种内容转化率高、点击率高④业务后续规划的蓝图是怎样的深挖需求的5个方面①定位的主要目标用户群体是谁?选取得是否合理?为他们带来的核心价值是什么?为公司带来的核心价值是什么?②整个业务流程是怎样的?盈利模式是什么?③市场/行业情况怎么样?未来的趋势呢?④竞争对手是谁?我们跟竞争对手相比核心竞争力在哪里?5核心策略方向是否真的有效?发力重点是否合理?2由设计师提出的需求在实际工作中应用较少是由设计师通过分析数据、总结用户反馈等方式提出。3由用户研究员提出的需求用户研究员在了解用户需求方面有很多针对性的方法专业的用户研究员会根据研究目标选择相应的方法以获得真实的用户想法。常用的用户研究方法有用户访谈、问卷调查等。在得出产品目标后下一步需要找到用户使用产品时的目标。一个好的交互方案永远是设计师在平衡产品目标和用户目标之后得到的。4.1.2 用户目标用户目标是设计师对用户在使用某个功能时其希望满足的需要的总结。用户目标是从用户的角度思考使用某个功能可以带来哪些收益。确定用户目标的方法是从功能的场景出发明确用户有何种需要。亨利·福特Henry Ford曾说过“如果我最初问消费者他们想要什么他们会告诉我‘要一匹更快的马!’。”在汽车还不普及的年代消费者不知道汽车的存在只知道马。但“更快的马”这个需求更深层的需求是更快的交通工具再深层一点的需求是更快地到达目的地。4.2 为什么需要设计目标4.2.1 设计时有的放矢4.2.2 更容易得到团队和用户的认可4.2.3 设计效果更容易验证4.3 案例分析——如何确定设计目标一个理财产品的续约需求分别分析需求的产品目标和用户目标然后将它们综合第5章 取长补短—竞品分析有方法5.1 为什么要做竞品分析分析各种方案的利弊从中获得灵感为设计师设计自己的方案打下基础5.2 竞品分析的维度确定竞品分析的维度是从设计目标出发思考自己的产品希望通过怎样的方式去吸引用户让用户更愿意使用你的产品而不是竞品的。5.3 如何选择竞品一条原则是看竞品是否有设计师当前项目所涉及的功能设计师在选择竞品的时候一定要以功能为基准而不是单纯地以竞品是什么类型的App为基准。5.4 竞品分析的方法最常用的竞品分析的方法有流程走查法、表格法和借鉴法3种。5.4.1 流程走查法研究一个竞品的时候建议按照入口、主要页面、操作、反馈的顺序来进行即设计师需要根据普通用户日常使用这款产品的路径对竞品进行走查。一个功能完整的流程包含了“发现→了解→操作→跟进”四个主要阶段。这个流程的万能公式。网易严选App下单的入口有“立即购买”和“加入购物车”。立即购买”背景是浅灰色的而“加入购物车”是红色的更加明显。显然网易严选App的设计者希望用户更多点击“加入购物车”。京东App上下单的入口只有“加入购物车“体现了京东App对于购物车概念的重视—京东App的设计者希望用户都是去购物车结算。5.4.2 表格法表格法主要指用表格统计竞品中某个功能特性的有无从而知晓某个功能的普遍程度对市面上的产品有一个更整体的把握。有两种表格可供使用一种表格是对比不同竞品的相同页面中各种元素的有无。另一种表格是对页面中元素的状态、行为进行分析对比。5.4.3 借鉴法借鉴法比较简单就是找到竞品中值得借鉴的部分分析原因然后说明如何借鉴。第三篇 原型制作第6章 略有小成—设计流程有公式6.1 如何画流程图流程图可以清晰地表现出用户完成一个任务所要经历的各种步骤和操作。6.1.1 画流程图的原则流程图主要由三种元素组成页面、动作、条件以起点作为开始流程图不展示内部算法逻辑只展示用户界面逻辑不要把操作步骤和界面都表现出来应该只表达界面6.1.2 画流程图的工具Axure …6.2 设计流程的万能公式发现→了解→操作→跟进淘宝App用户发现了感兴趣的商品了解商品“操作”如购买、加购物车、收藏购买该商品那么“跟进”这一步会是查看物流、评价等步骤把商品加入购物车那么“跟进”就是查看购物车收藏了商品那么“跟进”就是查看收藏流程中的“操作”这一步需要设计师带着“如果……不……”的心态发现很多可以做条件判断的地方6.2.1 发现1恰当的吸引力功能的入口要符合这个功能的重要性不能比更重要的功能更显眼也不能太低调以至于没人会注意到2清楚的含义表达Facebook将用户最近拍的照片都展示出来只要选择某张现成的照片就可以发动态信息因此促进了用户发动态信息的行为2025-05-07 09:39:52 减少了操作步骤6.2.2 了解1运用接近性原则接近性原则就是人们倾向于将彼此在位置上接近的物体归为一类。2保证文案表意准确、清晰一个界面中除了图形元素文字也是重要的“视觉元素”3主次分明重要的信息在视觉上更明显一般通过加大尺寸、加粗、使用更显眼的颜色等方法就可以做到4保证元素的可预见性用户看到一件物品或者一个界面不用学习就知道如何使用不用思考without thought6.2.3 操作4项要点注意用户习惯、尽量缩短操作路径、注意遵循一致性、合理使用设计规范控件6.2.4 跟进设计师主要的任务是让用户知道在进行了操作之后如何查看到后续的结果。第7章 心领神会—设计原则有遵循7.1 一致性一致性原则就是相同的功能在不同的页面需要保证相同的或者类似的交互操作体验从而保证体验符合用户预期。产品满足一致性是为了保障让设计方案符合用户的预期降低学习成本。7.1.1 一致性原则对于用户的作用1在设计方案中应用一致性原则有利于用户对界面和功能操作的认知统一学习成本低。让用户有了稳定的预期降低了学习成本2加强对产品品牌的辨识度在设计中不断使用与公司品牌相一致的设计加深产品品牌对用户的印象7.1.2 一致性原则对于产品的作用1复用资源降低设计成本。2保证不同设计师方案的一致。3新人可以快速上手。4提高开发速度。7.1.3 一致性原则的运用界面排版交互控件多终端的体验文案7.2 容错性容错性是产品对用户错误操作的承载性能即用户对产品操作时出现错误的概率和错误出现后得到解决的概率和效率。7.2.1 操作前的预防在用户进行操作之前告诉用户一些有价值的提示可以有效避免用户犯错提高用户的操作效率。微信登录页面在输入账号和密码之前“登录”按钮是不可点击的买火车票选择日期时不能选择当日日期之前的日期7.2.2 操作中的提醒当用户正在进行操作在还没有完成操作、造成结果的时候软件可以对用户进行预提醒。用户在支付宝App的聊天界面输入数字244界面中会自动出现“给对方转账244元”的提醒7.2.3 操作后的解决办法当用户已经完成了操作但是操作之后出现了错误这时软件需要提供给用户弥补的方法。经典的“CtrlZ”组合键操作允许用户退回到上一步网页版Gmail里当用户删除了邮件提示用户已经完成删除同时提供了“撤销”按钮允许用户反悔另一种弥补的办法是为出现的问题提供解决方案。淘宝App当网络不好或无网络的时候页面无法展现内容此时页面提示用户“别紧张试试看刷新页面~”这样温柔的提示让用户感受到温暖。7.3 使用正确的意符7.3.1 意符的概念唐纳德· A. 诺曼在《设计心理学》中提出的概念他指出“‘意符指的是能告诉人们正确操作方式的任何可感知的标记或声音。”一个优良的设计方案中使用的意符一定是让用户看到就知道点击了这里能做什么反过来如果用户看到了却不会使用或者使用后经常发生错误就不是好设计。设计师在进行方案设计时一定要注意页面上的元素是否能表达出它本来该有的意思。7.3.2 注意文案的运用1清晰表达信息Airbnb网站的案例。当用户首次登录后会展现提醒用户打开通知的页面。标题“打开通知”介绍了这个页面的主要意图下面的说明文字解释了打开通知带来的好处第一个按钮“好的打开吧”是模拟了用户答应请求后的语气而“跳过”则表达了一种“我现在不想打开”的意思为后续再次提醒用户打开通知做了铺垫。使用“跳过”这样的文案比使用“拒绝”或“不用了”之类含有否定意思的文案要好得多。2展现产品个性要展现一个产品的个性不仅仅可以通过界面中的视觉元素展现例如颜色、图标、排版风格等而且通过文案也可以很好地展现。尤其是现在越来越流行的语音交互设计文案的风格更是展现产品个性的最重要的一方面。7.4 即时反馈给予用户即时反馈指的是系统在用户进行操作后应立即给予操作结果的展示提供即时反馈是重要的交互原则但反馈也不是越多越好。过多的反馈会打扰用户的使用。投票案例每个选手的下方有个投票按钮每个用户每天只能投给一个选手一票为了表达出“不能再投票了”的状态将所有按钮置灰页面中有很多被置灰的按钮这个页面看起来不是很友好投票页面在投完票之后用户已经选择了一位选手此时用户最关心的是“我是否已经投票”了。如果对这个活动比较感兴趣用户还可能想要了解一下投票的排名以及浏览一下都有哪些选手参与了投票。改进后的方案在用户点击投票之后首先指明了用户投的是哪位选手、现在该选手共有多少票、排名是多少后续的页面展示了票数的排名从而避免了满屏都是置灰按钮的情况。7.5 通用设计原则1对齐对齐的种类主要有三种左对齐、右对齐、居中对齐。要选择尽可能少的对齐方式对齐的方式多页面会更乱就达不到使页面整洁的效果了。2分类分类的原则是指将相关的项目组织在一起并且把不同的类别用留白区隔开。3主次分明将页面中重要的信息提取出来并使用加大字号、加粗、区隔等形式予以加强可以有效地将页面信息表现的更清楚。第8章 融会贯通—设计规范有标准8.1 提示框8.1.1 Material Design设计规范谷歌公司注意提示栏不能包含使其消失的“取消”DISMISS按钮不能与悬浮按钮重叠不能同时出现两个提示栏8.1.2 iOS设计规范与提示框对应的是透明指示层HUDiOS规范中的透明指示层与Material Design规范中的提示框有以下4项区别。①透明指示层出现在屏幕的中央提示框出现在底部。②透明指示层可以有图标提示框不能有图标只能用文字。③透明指示层一般是毛玻璃透明提示框一般是灰黑或者黑色半透明。④透明指示层中内容可以变化如调节音量时提示框中内容不可变化。iOS设计规范提到潜移默化地将状态改变或者其他类型的反馈放进用户的界面中。理想的情况是用户可以不用进行操作或者被打扰就能得知重要的信息。iOS“不操作、不打扰”的原则短信App用户进行删除操作之后短信就消失了这时候就不需要再弹出提示框提示“已删除“8.2 警告框两种系统中它们有以下两个共同点1都出现在页面的中央且自带蒙层2警告框的选项通常是两个且应避免“是/否”这样的选项选项应明确告知用户操作的结果。8.2.1 Material Design设计规范警告框是一种紧急的打扰提示以告知用户一项发生了的情况。警告框和之前提到的提示栏都是在用户进行操作之后出现的提示框警告框可以看作是操作的确认可以理解为操作的“最后一步”只有当用户点击了“确认”按钮这个操作才算是真正完成提示栏是当用户真正操作完了之后才出现的提示信息其信息的重要程度比警告框要低Material Design设计规范把警告框分成两种有标题的和没有标题的认为大多数的警告框应该都是没有标题的用一两句话描述一个询问决定的文案①使用疑问句例如“删除这个对话”。②文案与警告框中的按钮文案要相关联。有标题的警告框Material Design设计规范提出“只在高风险的操作时使用”标题的写法需注意以下两点。①尽量使用询问操作的疑问句例如“清除USB存储内容”。②避免使用不包含操作信息或其他有价值信息的问句例如“警告”“你确定吗”。8.2.2 iOS设计规范警告框包含的元素标题必选、描述信息可选、输入框可选、按钮必选① 尽量少使用警告框② 确保警告框在竖屏、横屏条件下都显示正常。1标题和描述信息标题要尽量简洁字越少越好。标题可以考虑使用疑问句或者简短的陈述句尽量避免显得“指责”“审判”和“羞辱避免使用“你”“你的”“我”“我的”这样的文案有时候它们会被理解为高傲的或者带有羞辱意味2按钮①通常情况下使用两个按钮②按钮的文案建议使用能够描述操作结果的文案避免使用“是/否”这样的文案③一般来说警告框左边放“取消”按钮右边放用户最可能点击的按钮左边表达取消操作的按钮都叫作“取消“④iPhone的Home键自带取消警告框功能8.3 底部模态浮层在Material Design设计规范中是模态底板Modal Bottom Sheet在iOS设计规范中是上拉菜单Action Sheets和活动视图Activity Views。8.3.1 Material Design设计规范底板分为两种模态底板和固定底板Material Design设计规范中提到了四种关闭模态底板的方法点击系统返回键、向下拖动、点击底板以外区域、点击关闭按钮8.3.2 iOS设计规范1上拉菜单上拉菜单是当用户激发一个操作的时候出现的浮层2活动视图活动视图可以是从底部出现的浮层也可以是从按钮处展现的弹出框Popover8.4 底部固定浮层8.4.1 Material Design设计规范固定底板的状态是固定的与App界面在同一层级而模态底板的状态是临时的其层级位于App界面之上如果两种底板同时出现模态底板是高于固定底板的应该压在固定底板上。8.4.2 iOS设计规范关于工具栏iOS规范给出了以下几个需要注意的事项①提供与当前页面相关的操作选项。工具栏应该提供当前的页面下常用的操作②考虑使用图标还是文字来表示操作按钮。如果操作的按钮多于3个使用图标如果等于或少于3个则文字有时能更清楚地表达操作③避免使用分段控件Segmented Control。分段控件让用户可以切换不同的页面④为文字操作按钮提供足够的空间8.5 简易菜单、简易对话框和弹出框简易菜单对应的是Material Design设计规范中的Simple Menu简易对话框对应的是Material Design设计规范中的Simple Dialog弹出框对应的是iOS设计规范中的Popover。8.6 确认弹框和全屏弹框1确认弹框需要用户明确地选择一个选项的弹窗弹框里只专注选择一个值2全屏弹框全屏弹框承载了一组任务表达“保存”含义的按钮最好使用动词如“保存、发送、分享、更新、创建”等8.7 模态模态让用户聚焦到某一个任务、消息或者视图上而不能做别的事情直到用户完成了当前的任务。一般来说模态视图包括一个“完成”按钮和“取消”按钮。8.8 弹出类控件对比总结8.9 搜索8.9.1 Material Design设计规范“搜索使用户可以迅速定位App里的内容。”这是搜索功能的核心。一般的搜索操作应该至少包含以下3个要素。①打开搜索输入框。②输入和提交搜索词。③展示搜索结果。帮助用户提高搜索的体验。①语音搜索。②搜索历史。③搜索词自动补充当开始输入关键词时最好有关键词自动补充还要有清空按钮可展开式入口其实和固定式入口差不多区别仅仅是入口形式上的不同8.9.2 iOS设计规范1如果有必要可在搜索栏中提供一些提示和上下文2考虑在搜索栏下方提供快速入口和其他内容以帮助用户更快找到结果3在搜索栏的下面可加入“分段选择控件”以帮助用户缩小搜索的范围8.10 滑动器8.10.1 Material Design设计规范连续式滑动器分离式滑动器8.10.2 iOS设计规范iOS设计规范中定义滑动器只有水平的8.11 按钮8.11.1 Material Design设计规范按钮主要有以下五种扁平按钮、凸起按钮、底部常驻按钮、下拉菜单按钮和开关按钮扁平按钮把文字用作按钮用法扁平按钮一般用在警告框中推荐居右对齐。一般右边放操作性的按钮左边放取消按钮用在卡片中扁平按钮一般居左对齐以增加按钮的曝光凸起按钮起到强调按钮本身的作用底部常驻按钮下拉菜单按钮开关按钮8.11.2 iOS设计规范三种按钮系统按钮、信息按钮和添加联系人按钮。系统按钮单纯使用一个词作为一个按钮①使用动词②尽量使动词简短。③只在必要的情况下增加边框或者背景色信息按钮添加联系人按钮8.12 标签导航和分段控件8.12.1 Material Design设计规范信息架构标签导航一般用于从一个比较高的层级来组织信息呈现出提纲挈领的效果。内容一个标签里的所有内容应该属于一个大分类如“设置”或“音乐”并且标签之间内容不能有重叠。使用标签有两种。一种是固定标签适用于标签数量比较少的情况。另一种是可滑动标签适用于标签数量比较多的情况。通常建议标签在以下的情况下使用①需要经常切换视图②App包含的视图比较少③App提供的几个视图都比较重要。8.12.2 iOS设计规范分段控件通常用来作为不同视图的入口例如在地图App里分段控件可以让用户在“地图”“公交”和“卫星”等视图间切换iOS设计规范给出了以下4项要点。①限制分段选项的数目以提高可用性②尽量保证每个分段选项里的内容的尺寸是一致的③在一个分段选项里避免同时使用文案和图片④如果用户定制了一个分段控件的外观那么需确保内容的位置是恰当的8.13 底部导航栏8.13.1 Material Design设计规范底部导航栏可以允许用户通过点击一下就在不同页面间进行方便的切换。用法底部导航栏主要是为手机的导航设计的底部导航栏主要用于以下两种情况。①3~5个同等重要的页面间切换②需要在App里方便地对页面进行切换样式①当某个选项是被选中状态则展示该选项的图标和文字。②如果只有3个选项则一直展示所有选项的图标和文字如果有4~5个选项则被选中的选项展示图标和文字未被选中的只展示图标行为当用户选择点击某个选项时应该直接展现相应的页面或者刷新当前的页面8.13.2 iOS设计规范1如果底部导航栏中的某个选项暂时不可用不要把该选项置灰。在不可用而又点击了的情况下页面只要展示这个页面为什么没有内容就可以了。2避免使用过多的选项3可以使用角标来提示信息数量8.14 抽屉导航抽屉导航是Material Design设计规范中独有的导航方式适用于App中某些功能比较突出而其他的功能不太突出的场景不太突出的功能都可以塞到抽屉导航栏中。抽屉导航栏从屏幕最左边向右出现占据屏幕100%的高度8.15 手势8.15.1 Material Design设计规范按住水平滑动、按住上下滑动8.15.2 iOS设计规范边缘滑动手势起到了全局操作的作用从屏幕左边缘向右滑动可以返回上一级页面从底部边缘向上滑动可以滑出控制栏从顶部边缘向下滑动可以滑出消息/控制中心浮层手势能表现执行的操作效果8.16 导航设计总结8.16.1 Material Design设计规范如何确定一个App的导航结构制作任务清单找出App的用户是谁以及他们的角色是什么找出那些他们都想执行的、最普遍的任务确定优先级给用户的任务分出高、中、低的优先级。在UI界面中给那些用户经常使用或者优先级高的功能以更突出的设计。分组和排序找出用户在App中操作的所有流程路径并通过研究这些路径确定导航设计。拆解将复杂、大型或者模糊的用户任务分解成更小的用户任务。8.16.2 iOS设计规范1.层级导航在每一级页面只选一个入口直到用户到达他们的目标页面。2.扁平导航扁平导航允许用户在多个内容分类之间切换3.内容驱动或体验驱动导航该种导航允许用户在内容间自由地切换或者内容本身就定义了导航第9章 登峰造极—原型制作有技巧9.1 什么是交互原型交互原型分为静态原型和动态原型静态原型有两种工具可供使用Axure和SketchAxure可以使用站点地图来组织页面所以比较适合大型的、有多个页面的方案Sketch制作原型文件效率高输出文件为PDF格式适合小型的、功能单一的方案动态原型推荐使用苹果公司出品的Principle软件还有一个在线的动态交互稿制作网站—Flinto9.2 交互原型的作用静态交互原型的本质是一种沟通工具主要用于团队内部协作其作用是传达需求①产品经理主要关注设计方案是否满足业务和用户需求②视觉设计师需要知道产品定位是怎样的有哪些页面要设计页面间的跳转是怎样的各页面各元素包括什么状态③开发人员需要知道产品要实现多少功能有多少页面页面间是怎么跳转的异常情况如何处理哪里需要动效动效的效果是怎样的页面的运行规则④测试人员需要参考交互原型梳理测试用例测试用例需覆盖所有功能、使用场景、操作行为、产品细节保证上线无bug或少bug状态。9.3 交互原型的制作9.3.1 项目概述在交互原型的第1页可以加上“项目概述”这个主题主要展示该需求的基本信息和迭代说明9.3.2 方案展示交互原型中必须包含以下信息。①功能的完整流程。②界面及界面中的元素展现需求的所有功能点。③界面中元素的各种状态说明包含界面中元素的默认状态说明、操作说明等。④元素操作后的效果。⑤异常、极限状态说明主要包含无响应、无网络、网络切换、空数据、字符限制、网络慢、数据过期、拉取数据失败、页面不存在、页面状态的改变如换城市、首次使用新手引导等。绘制高质量的交互原型有以下6点建议。①同一页面的不同状态最好在一个页面展示不要忽略极端情况。②页面之间要对齐左右排列的页面顶端对齐上下排列的页面左对齐。③界面绝大多数元素均使用黑、白、灰界面色值不超过3种。越深的部分代表这个部分越重要。特殊情况下需要强调某个元素则可以使用彩色。④界面中的控件应遵守第8章中介绍的iOS和Material Design设计规范。规范的控件会提升交互原型的专业度。⑤界面中的图标可以去iconfont官网寻找合适的图标进行示意。如果不使用具体的图标可以使用圆形、方形来代表“这里需要一个图标”。千万不要使用绘制粗糙的图标这会降低交互原型的质量⑥如果是为手机App绘制交互原型则可以使用i Phone 8标准下的2倍图尺寸即750px×1334px如果是为计算机网页绘制交互原型则可以使用宽度为1920px的分辨率然后考虑在更小的界面下应该如何呈现。9.3.3 设计分析可以在交互原型中加入设计分析的部分设计分析里只需要放入最核心的信息即可包括场景分析、产品目标、用户目标第10章 出神入化—可用性测试见真章10.1 可用性测试介绍可用性测试又称易用性测试是用户体验研究中最常用的一种方法侧重于观察用户使用产品的行为过程关注用户与产品的交互是更偏重于行为观察的研究10.2 正式的可用性测试分为7步测试前的思考→制作测试原型→撰写测试脚本→招募测试者→设置测试环境→预测试和正式测试→测试结果统计分析10.2.1 测试前的思考此次测试的目标10.2.2 制作测试原型10.2.3 撰写测试脚本测试脚本的意义是把整个测试流程提前写下来以保证第6步“预测试和正式测试”可以顺利、高效的运行10.2.4 招募测试者招募5~8名测试者比较合适。这个数字是人机交互专家雅各布·尼尔森提出的测试5个用户就可以发现大约85%的可用性问题性价比最高10.2.5 设置测试环境设置测试环境的目标是让被测试者在测试时感到舒服、不紧张从而可以得到更真实的测试结果10.2.6 预测试和正式测试预测试的过程是找两位不知情的同事预先进行一遍完整的测试过程然后总结过程中关于测试本身的问题以便对测试过程进行优化。10.2.7 测试结果统计分析测试完成之后有一项比较繁重的工作将录制的视频或者音频转换成文字稿10.2.8 可用性测试报告在通过以上7个步骤收获了许多结论之后设计师就可以开始撰写可用性测试报告报告一般包含3部分内容背景介绍、测试方法、测试结果。10.3 敏捷的可用性测试正式可用性测试流程由于耗时较长一般用于设计大改版的情况敏捷的可用性测试就成为操作性更强、更迅速有效的验证方法。10.3.1 媒介即信息加拿大传播学家马歇尔·麦克卢汉有个著名的理论媒介即信息。主要内容是传播信息的设备本身也是一种信息纸质书、电子书或说书人念出来的有声书这三种方式传达给读者的信息量是不同的方案为哪种类型的设备而设计就一定要尽量在相应的设备上进行测试。10.3.2 设计师自测当设计师把方案转移到真实设备上之后就可以开始自测了。自测时主要依据第6章讲过的设计流程的万能公式的4个步骤进行依次查看每一步是否完整。发现①功能的入口位置、显著程度、展现形式是否恰当。②是否需要新手引导。③从A页面/状态到B页面/状态的过渡。④点击瞬间网络问题、动效、频繁点击。⑤载入中网络问题、载入时间、可否取消。⑥过场动画。了解①由于网络问题无法加载。②没有内容。③大量内容如微信群聊中有许多条旧消息。④内容获取失败。⑤数据过期。⑥缓存内容。⑦状态改变导致内容改变如来到新的城市。⑧加载动效。操作①网络问题无法加载。②从A页面/状态到B页面/状态的过渡。③操作前默认提示。④操作异常状态如格式错误。⑤操作后反馈。⑥操作失败情况需要提供提示和解决办法。4跟进是否展示清楚哪里可以跟进。10.3.3 寻找用户进行敏捷测试注意选择测试对象测试的用户对产品了解越少越好注意测试时的提问方式避免给被测试者带来引导第11章 超凡入圣—人人羡慕作品集11.1 核心原则展现设计思路用户体验之间取得平衡项目介绍、目标用户定义、场景分析、设计目标定义、竞品分析、流程图简单需求可省略、交互方案、方案效果通过数据/用户反馈来说明。设计师用来发现问题的常用方法有可用性测试、用户体验地图、用户访谈、数据分析等只展现最好的作品展现不同方面的作品11.2 作品集示例项目介绍包含项目背景、设计师职责和需求介绍目标用户和场景设计目标优化点展示竞品分析流程图和交互方案方案效果说明方案效果最有效的方式是从数据的角度说明方案上线后数据上涨了多少第12章 返璞归真—活出自己最优秀12.1 勤于总结归纳对于大型需求设计师在做完之后就可以进行复盘整理对于小需求建议设计师每周或每两周总结这些需求的设计思路并用PPT的形式沉淀下来待需求上线及时补充好方案的数据效果12.2收集优秀案例设计师在平时收集优秀的和有缺陷的设计案例是很有效的设计提升方式12.3 为自己而工作珍视自己付出的时间同一份时间既出售给了公司拿到了薪水也出售给了自己获得了成长