文章目录 [隐藏]
动互联网时代，用户信息被孤岛化，用户生产的内容被隔离在自家产品，搜索引擎无法通过搜索抓取，例如微信公众号、小红书等。
在国内除百度搜索外，用户使用量最多的可能就是微信搜索。微信搜索可以同时搜索到来自微信公众号、微博、知乎、腾讯视频、快手、第三方网页、小程序等渠道的内容。
本文主要讲解微信搜索功能规则设计，大纲如下：
搜索范围一般有两种，一种是全局搜索，搜索的内容为整个平台的内容；另一种是局部搜索，即搜索结果仅为规定的范围，其好处可以缩小搜索结果范围。
微信首页、通讯录和搜一搜均采用全局搜索，即搜索内容为整个微信平台和第三方的内容。
小程序和订阅号搜索，则是局部搜索，即只搜索规定范围内的搜索结果，避免搜索结果含有其他非想要的类型。
微信是为数不多的将搜索范围前置（搜一搜，搜索结果页也有搜索范围筛选），而其他的 app 大部分是将搜索范围后置。即搜索出现结果，通过 tab 展示不同的搜索结果，例如 b 站。
为什么微信将搜索范围前置呢？
我在网上找到了比较靠谱的回答，以下是来自纯银社群 Tony 的回答：
微信目前没有能力去做全搜索结果的后置分类。这里的“没有能力”是个中性词，因为和网页这种格式化标准化的内容组织形式不一样，微信内部的内容格式高度不统一，难以统一搜索。
比如现在微信的搜索结果是有分类的，分类是 1. 最常使用；2. 联系人；3. 群聊；4. 公众号；5. 聊天记录；6. 收藏；7. 内容搜索（搜一搜）。其中有可能还插入一个“游戏类别”。同时前置也有分类，分别是“朋友圈”，“文章”，“表情”，“小说”，“音乐”，“表情”。
可以看到这些分类对应的内容可能是通讯录的联系人，可能是群聊名称，也可能是公众号名称等等。这些格式不统一的内容之间，缺乏一种像网页 pagerank，社交媒体 feed 的 edgerank 的排名算法，这在技术上就形成了很大的挑战，微信很可能“没有能力”。因为内容形式不统一，就很难用同一个标准算法衡量每种内容的权重，即使是淘宝的商品，因为统一是商品，所以基于“好评”“购买量”“价格”等特征来做 rank 的技术挑战也比微信要在“联系人”“群聊”“公众号”“朋友圈”“表情”这些纷杂的内容形态之间做 rank 要简单的多。
简单说，如果只搜联系人，微信能做排名；只搜朋友圈，微信也能做排名；但是揉在一起，微信就不知道怎么做排名了：联系人应该排第一栏还是朋友圈内容应该排第一栏，或者说是表情包应该排第一栏？这个结论如何得出？
因为微信没有能力做这些不同格式内容的搜索排名，或者说控制不了把多种不同格式内容糅合在一起进行搜索的用户体验。他只能采取“后置分类倾向于 IM 产品的应用内搜索，如联系人，群聊，公众号”，“前置分类倾向于内容分类搜索，如表情，小说，音乐”。来达到一个虽然不如 google 百度这样流畅自然，但足够可控的，比较稳定的搜索体验。
微信搜索过程中，因为搜索内容都是本地，所以采用即时搜索机制，这一过程中体验很好，用户不需要点击键盘上的搜索按钮，因为当前页即代表结果页。
搜索机制分为两种，一种是本地搜索，一种是网络搜索。
本地搜索，即不需要通过网络数据即可检索出本地信息内容，其特点是速度快，不需要加载。
网络搜索，即通过网络数据检索出非本地存储数据的内容，其特点是可以获得大量的数据。
联系人、群聊、使用过的小程序、收藏文件标题等均存在本地，不需要联网即可搜索，无需加载。
搜一搜为网络搜索，即搜索的主要为网络全平台信息。
输入搜索词即时出现搜索结果，则为即时搜索。用户不需要点击搜索按钮即可得到搜索结果。
如下图所示：淘宝搜索，搜索关键词，出现搜索词的联想匹配。用户只能点击搜索或点击匹配联想词进入搜索结果页
微信搜索，用户输入关键词，即时出现搜索结果。
两者差异化是因为：微信搜索结果页可以在当前页面呈现，而淘宝，关键词的搜索页是搜索词的全部的商品，搜索过程页，无法承载搜索结果。
两者搜索结果的内容形态差异，导致出现这两种完全不同的设计。
微信主要为即时通讯工具，所以搜索的主场景围绕着：搜索联系人、群组和聊天记录展开。其中权重最高的是最常使用。其次是联系人、群聊、使用过小程序、公众号以及聊天记录等
其排序顺序如下图所示：
其中搜一搜为网络搜索，其他为本地搜索。
搜索结果排序，反映出用户对类型的高低频，越排在前面，搜索的频率越高。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Echo的设计笔记
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文做设计探讨交流分享，不涉及商业，如有不足多多指教。 其中的优秀案例、插图部分来自站酷、花瓣和百度（详情请查看原链接）仅供参考学习。
本文从“视觉专题设计简述”也就是视觉专题设计的基础理论、“专题设计思维养成”就是总结一些常用的设计前期思维方向如何找到和“案例参考”三个部分构成。
首先是视觉专题设计简述：
大家有知道”视觉传达艺术设计“专业吧，这个作为大学艺术设计专业中的一种（Visual Communication Design）是为传播特定事物通过可视形式的主动行为。大部分或者部分依赖视觉，并且以标识、排版、绘画、平面设计、插画、色彩及电子设备等二度空间的影像表现。总之就是针对眼睛可以看到的具备美学影响的设计符号，称之为“视觉传达”。
视觉设计的领域很广，总的大致分为7种，所以印象中视觉传达专业的同学会的都挺多！！！哈哈哈
字体设计、标志设计、 插图设计 ，这三种就是字面意思，大家也常接触就不做文字说明。
而下面这几种，我用括号内的文字做区分说明。
编排设计（文字、图像、图形、广告招贴、书籍等编排设计）
广告设计（主题、创意、语言文字、形象、衬托等要素组合进行平面艺术创意的一种设计）
包装设计（综合运用自然科学和美学知识，为在商品流通进行的包装造型、结构、装潢设计）
展示设计（主体为商品，在既定的时间和空间范围内，对展示空间的创作过程）
当视觉设计前面加两个字，“视觉专题设计”，这个就是将视觉设计加了限制条件，是针对产品某个主题活动，以特定风格传递产品想要表达的信息，为提高产品转化率，达到流量、曝光、口碑收益的运营设计。
如果说需求方让你只是做一个视觉设计，那么他们的需求就是为了能够准确传达信息，有些童鞋做设计过于自嗨，沉浸自己的设计风格中，没有get到需求方一个简简单单的想法，他们只是想要传达信息，所以给出合适的信息展示就能完成，而设计图片的美感只是锦上添花，你说他们的审美不过关，也能否先反思一下自己的设计图是否能让别人不思考就看懂。如果他们要求是一个专题设计，这是为品牌服务，最后落脚点是品牌，那他们需要的就不仅仅是个美感、信息传递、突出符合产品自身的调性，以及带来流量的设计才是他们想要的目标。
因此想要做好一个视觉专题，不妨倒推一下整个专题设计的目标：
流量增长（当今最具价值证明，数据说话）
曝光增加（好的坏的，只要有，就有热度，就有话题，区别同类的“脸盲”）
口碑更好（毫无疑问对品牌属于积极正面的影响）
带来收益（前三条都是为这条准备，收益才是王）
所以当我们产出一个设计任务时，可以从以下4个不同层次的设计把控点来，反思调整自己的作品：
首先，基础层级是传递出准确的信息，也就是这个信息是能被人识别读懂（如果一个视觉专题设计产出除了设计师本人能看懂，其余人不明所以，那么只能说明这个设计够“艺术”不够“过关”）；
其次，高一点的层级就是除了能准确传递正确的信息以外还能包含一定的信息量，说明这个设计传达出不止是一点有效信息；
再来就是“视觉效果来源于匹配程度”，意思是看完这个设计我能够联想或者关联到一些和他相关的信息事物，证明此设计传达出了准确有效的信息还能让所有信息，规律的结合，成为观看者联想起过往浏览过事物与之匹配的事物；
最高一层就是视觉与信息的唯一匹配，这也就是我以后看到这个设计就只会想起某个特定品牌， （例：看到少了一块的苹果图片
，一定会想到“乔布斯的苹果公司、他的手机等”；看到
一定会想到“腾讯公司的QQ企鹅”）
市场固定资源有限，想要瓜分到一口蛋糕， 现在每个企业都需要一定的专题设计来提升自己品牌的影响力，借机造势，作为企业形象与美誉度的提升突破口，结合各种销售玩法达到目标。
企业发展的不同阶段对专题设计的要求也是不同，起初需要一个视觉符号来代表，让大众记住公司，这也是初期阶段受美学影响，各个公司和企业都想要注册商标；随着时间变迁企业的发展和转型需要，诞生了一批品牌符号，也就是我们常说的IP形象、文创、动漫、虚拟智能人工等等，这些是受营销思维主导催生的视觉设计产业链；最后能扛住时间检验，并且让自己的企业视觉设计做到极致，成为为社会文化审美的标杆，推动风格潮流的风向，就成为了一种特定的文化符号，这是所有企业向往的方向，也是最难成就的顶端。当我们能在制作自己的专题设计时，包含企业所想，那么你一定是个格局大家！
接下来是讲述思维养成的一些方法：
拆解需求——了解清楚现在的事实、目前商业需求的背景，收集通常这样的需求在市场上的视觉风格，分析定量现状和定型现状，从而推导出商业假设，得出用户体验目标，反复推敲找出设计发力点。
定量属性是指以数量形式存在着的属性，并因此可以对其进行测量。测量的结果用一个具体的量（称为单位）和一个数的乘积来表示。以物理量为例，距离、质量、时间等都是定量属性。
定性是指通过非量化的手段来探究事物的本质。其概念与定量相对应。
定性的手段可以包括观测、实验和分析等，以此来考察研究对象是否具有这种或那种属性或特征以及它们之间是否有关系。
定性研究是与定量研究相对的概念，也称质化研究，是社会科学领域的一种基本研究范式，也是科学研究的重要步骤和方法之一。
如果说定量研究解决“是什么”的问题，那么定性研究解决的就是“为什么”的问题。
专题设计一般分为三类：活动、信息、组合；确定好自己的设计类型，
活动类专题设计——时效性强整体活动时间短、活动类主体利益针对人群、设计调性喜庆，通常大红色，
为了达到想要的商业回馈，争取利益点，主要信息简单明了；
信息类专题设计——活动周期可循环、活动类主体利益是产品、设计调性多数贴合品牌性质，为了
稳固原有商业形象、让品质再次提升，拉近与用户的距离，多数采用品牌的ip或者文艺的插画来凸显温馨；
举例为“京东618”和“face u”、“支付宝 花呗”、“飞猪旅行”各有特色
信息组合类的专题设计——活动周期可长可短，也没有特定的时效性，既包含活动类的特点，也包含信息类的特点。它的定量现状和定性现状都可用不同场景区分。从举例就可看出，
“阿里巴巴云栖大会”、“成都国际设计论坛”、“台北灯光节”、“海信发布会” 主视觉海报——
思维方式2是分析构思：
团队的小伙伴一起头脑风暴，发散思维写出与主题相关的，尽可能的多写，然后再根据意向分类，提取出自己关键词汇，结合词汇在脑海产生的视觉元素，整合筛选定好方向
方向定好后，我们就要选取如何通过创意与表现，来实现专题设计让人记住。
常见的创意方法，通过流行的表现风格做视觉呈现，如三维立体、手绘插画、赛博朋克等；
通过独特风格、操作难度高、技术含量大的表现手法做视觉呈现，如手工塑造、超写实还原、概念模拟等；
通过具有情感化设计的图文做视觉呈现，图文具有强有力共性（例如“杜蕾斯文案”、“江小白酒情怀”堪称文案绝绝子······）通过动画实现等等····
而表现从浅至深就是，引导——刺激——价值
Å
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：YiVi_eleven
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
上一篇文章讲解了产品的数据都有那些，设计师可以通过数据进行设计决策，并且分享了“数据好体验不一定会好的这个观点”。今天这一篇文章咱们聊一聊“怎么用度量产品体验”这个知识点。
流量红利退去进入互联网下半场，所有产品都在比拼产品体验，这些年体验的设计价值越来越多受到公司重视，几乎所有的互联网公司，都会说：“产品（用户）体验设计”，但是大部分产品设计从业者，都弄不明白“产品（用户）体验设计到底是什么？产品上线了我们怎么去衡量设计策略的有效性，以及怎么评估现阶段产品的产品（用户）体验”的状况。这篇文章，我们就把目光锁定到“用户体验”和“衡量标注”两个问题上。
文章结尾我将分享腾讯中国用户体验行业发展报告，最近总有粉丝反应链接过期问题，如果获取不到可以私信我。
我们在项目中经常听到产品经理定的产品目标是“提升用户体验来提升产品数据”，貌似很多项目都能和用户体验沾点关系，首先让我们从了解“体验”概念这个角度，来解析为什么提升用户体验就可以提升产品数据。
产品（用户）体验设计，我们可以把这个词拆开来看看产品、用户、体验这三个词都各自代表的含义：
产品：可以理解为用户在享受服务过程中承载服务的载体，比如手机、电脑、应用程序等。
用户：广泛的含义是使用者，即产品的使用者或享受服务的人群。
体验：这是一个过于宽泛和宏大的词，也是一个比较抽象概念，简单理解为用户对产品的主观感受，这个感受可能是好的，也可能是坏的。
总结一句话体验设计就是用户与产品的发生互动行为后，用户产生的心理感受。如果用户在产品使用场景中完成期望目标，所产生的愉悦的感受体验，称为好的用户体验。
产品（用户）体验设计 User Experience Design（以下简称体验设计）中“用户体验”的概念最早由Don Norman教授（曾任苹果用户体验架构师）在上世纪60年代提出并进行了系统性研究。他表明，用户体验设计，是用户在使用产品的直观感受，并归纳出好的用户体验应以用户为中心，是尊重用户的、是有效的、顺畅的、一致的、符合直觉的。后有人把Don Norman教授这段话归纳为体验设计应遵循“可用性、易用性、满意度”这三个原则，如图：
体验设计在产品迭代中有多重要，看下面这种张图你就会懂了。现在互联网产品的迭代方式是“小步快跑，快速迭代”，产品迭代无外乎两个原因；
1） 产品利益：为了推出迎合市场的新功能，促使用户进行付费行为获取商业利益
2） 用户体验：不断优化产品体验、提升产品质量、不断的实现用户健康增长。
由此可见，体验设计在产品迭代中拥有举足轻重的分量。
体验设计的价值体现在用户心理感受与产品业务价值发生关联的场景中，比如愉快的购物体验、高效的退货业务等这些场景都会促使用户信任产品从而提高用户下单率。在这些场景中就会体现体验设计的产品价值和商业价值，产品的页面清晰操作简单很容易触发用户愉悦的心理感受，从而进行下单的互动行为。
另外我还要补充一点其设计价值，因为设计师是站在用户的角度考虑问题、解决问题的职业，而ui设计师的核心价值就是提升产品体验，所以综上所述，体验设计的价值在于设计价值、商业价值和产品价值这三点。
体验是一个比较抽象的概念，很多场景中所表达的都是用户对产品的主观感受，最开始判断体验的指标也很抽象，后来人们把抽象的指标和埋点的数据相结合，通过数据去衡量比如页面访问次数、用户停留时间、产品加载速度等。
*在工作中常会用到易用性、满意度、nps等维度再结合后台数据埋点这种方式进行用户行为分析来评估用户的体验指标是否达标。
现在为了方便大家进行分类，大家把衡量体验的所有指标都是按照用户感受、用户行为、系统表现这三个纬度进行度量：
用户感受、用户行为、系统表现只是一种简单的方法，大家要有这样一个认知，不同细分类型、不同生命周期的产品，对于各个指标的偏重也有所不同。如协同办公类的产品更注重协同性，而数据产品更注重易理解性和一致性。初创期的新产品需要容易上手，对易学性要求较高，而成熟期的产品可能更需要考虑各个角色的需求满足度。
市场上的产品主要分为两类c端和b端，因为两类产品的用户属性、盈利模式、产品定位不同，所以两类产品的体验目标各不相同，最大的区别在于用户、体验、数据上的不同，接下来让我们聊一聊两款产品的体验目标侧重点各自都是什么。
c端（Consumer）产品通常指消费者或者个人终端用户使用的客户端，类似产品有微信、知乎、qQ音乐等产品。
因为c端产品的用户忠诚度较低，一言不和就换产品使用，所以为了留住用户各大产品不惜成本追求极致的体验。帮助用户解决需求的同时，与其他竞品相比产品的整体体验相对有趣是现在c端产品的体验目标。
B端（Business），通常为企业员工或商家使用的系统或平台，类似产品有SaaS软件服务系统——微盟、oA办公自动化系统——飞书、cRM客户管理系统——销帮帮等产品。
而B端产品具有链路冗长、操作复杂等特点。b端的产品体验核心是降低用户上手门槛，提高产品的工作效率，帮助用户高效的完成工作任务是现在B端产品的体验目标。
*在B端产品中经常会提及“易用性”这个专业名词，为什么呢？那是因为B端产品针对的是商家，用户，所以对于这类用户高效是他们的核心需求，那怎么样才是高效呢，那就是后台系统要做得极其简单也就是产品的易用性要高。
通过上面讲解大家可以了解到判断用户体验的具体产品数据和抽象概念的指标有很多，这里我着重讲解三个在行业内使用最为常用的三个比较主观的体验指标，即满意度、净推荐值、费力度。
为什么只讲解这三个呢，那是因为这三大评估指标分别代表体验设计的设计价值、商业价值以及产品价值。
这应该是最经典的衡量指标了，也是更大互联网对于产品来说最为看中的指标。早在于1965年“满意度”这个概念就被提出，在我们在生活中都可以看到关于客户满意度方面的调研功能，比如app storr对产品的体验，送完外卖对店家和送餐人员的服务点评等。
优势：
满意度的扩展性强非常高，可以用于询问用户各种问题，可以看整体的产品体验满意度，也可以看具体的某个功能的满意度。
劣势：
满意度对未来行为的预测是最差的，满意度能够体现出用户对产品短期内的幸福感，但无法体现用户对产品的长期态度。
净推荐值是由贝恩咨询企业客户忠诚度业务的创始人佛瑞德·赖克霍徳（Fred Reichheld）在2003年提出，它把用户分为推荐者、被动者和批评者这三类，通过计量用户的推荐意愿的强烈度而判断用户的忠诚度。
优势：
他常作为未来的客户满意度指标，精准的测量某一项的客户满意度，与满意度相比这个指标更为直观，用于衡量用户长期的幸福感，也用于全链路全流程的满意，判断用户忠诚度，也可以看到项目未来一段时间的发展趋势。
劣势：
虽然获得的指标是最为直观的，但度量的问题往往只有一个所以反应的用户视角会比较狭隘。并且设计的问题也不能证明推荐者会真的推荐，所以得到的结果并不一定是用户在现实生活中的推荐行为相关。
客户费力度这个概念在2010年在《哈佛商业评论》中被提出，可以理解为是升级版，用于询问用户在产品使用过程中高频出现的问题，主要是为了满足用户的满意度但是无法体验用户的忠诚度的用户所设计的。
优势：
帮助产品设计发现和解决复杂流程中的问题，比如B端产品中，可以通过数值的表现，对下一次改版进行想法升级。
劣势：
对于衡量产品质量比较适合，但不是很适合衡量品牌在用户中的价值地位。并且并能用来来挖掘用户真实的评价和需求痛点。
*在这里还有一个知识点向大家普及，就是可用性测试——SUM。
每个设计师都在遇到这样的问题；
设计领导：你怎么证明你做比其他设计同事好
开发同事：你们设计只关心美不美，浪费研发资源 产品经理：我觉得这个功能优化并没有比竞品的好？
公司老板：你们对产品盈利都做那些什么贡献？
我们在做真实项目的时候会发现几乎所有的设计策略都能和用户体验扯上关系，比如我们通过xxx提升了用户体验从而提升用户在xxx场景的用户满意度。这样折腾了一圈，但是发现好像有产品没有什么实质性的效果，设计很难度量也难度凸显设计的价值。
其实上面这个问题曾经其实也困扰了我很久，但随着做的项目越来越多，我现在从体验设计师的角度尝试回答这个问题：
1）“体验”是用户纯主观的感受，概念比较抽象，从这个情况来看是很难被度量的。
2）促成体验好与不好的因素有很多，很难定直接定位体验问题的根本原因。
3）现在产品迭代频繁，提升了一个场景的体验，往往另一个场景体验问题就会暴露，很难确定产品终极目标。
但是作为体验设计师，我们需要在项目中对体验有以下三点比较清楚的认知：
·体验是直观的用户体验感受和清晰的设计价值体现。
·体验要以体验为中心做有价值性的探索设计破局点。
·体验需要对设计产品迭代有明确的改版目标。
我们要完成设计师的使命，在项目中凸显设计的价值，所以我们需要一套科学的、成体系的、可量化用户的体验完整的度量框架，能够聚焦用户体验问题作为驱动、提炼提升产品体验的目标，从体验角度解决体验需求。项目中的度量有其三点意义：
1）可以具像化有刻度的的体现用户主观感受的测量工具。
2）可以通过度量提炼出以用户行为作为产品迭代目标。
3）可以更好的根据自己公司业务场景搭建体验设计体系。现在很多公司都有自己的度量体系，比如阿里，滴滴为体现设计在业务中创造的价值，都有自己的设计质量评估体系。他们通过划分场景、量化设计可以更准确的刨析出那个体验的根本问题。并且评估潜在用户的体验感受，为之后的产品改版找到体验优化方向。
度量的概念在我们的生活中很常见，以下是对度量比较严谨的概念解释：
【度量Measure】是一种测量评定对象的方式，它帮助我们结构化的获取对象的状态与变化，我们运用这些数据进行洞察，转化为有用的信息，帮助决策和优化，这个过程也是分析诊断的过程
用户体验度量体系是可以通过某种形式测量采集得到的，例如对用户无感知的埋点法、由用户直接反馈的问卷法等等，设计度量作为项目中重要一环，不仅能够验证产品及设计策略的有效性，还可以有效验证了我们服务化升级目标及设计目标拆解的精准性，也为后续优化带来了更多的线索。
所以设计度量的建立应具有有效性、稳定性、针对性、扩展性、可持续性这五个原则。
我们通过某种形式测量产品体验时候，把保证“体验好”转化为可以测量的概念，如用户留存率、流失率、关键操作的完成率等，通过这些直观数据的改变去衡量抽象体验的问题，在这个过程中需要保证数据结果是真是有效的。
人与人之间的体验差异本身是具有差异性的，用设计度量时候人的感受往往会受到环境、情绪等影响，产生随机误差。我们需要度量的结果尽量减少外界环境的干扰，出于这个目的度量需要具有一定的稳定性才能进行真实结果反馈。
可以反应用户体验问题的指标有很多，数据埋点也有很多。本身数据是有欺骗性的，所以我们在做设计度量时应该划分场景，即不同场景对应不同的数据埋点，有明确的度量目标，才能做到只聚焦某个产品的端上体验问题，那这个度量结果才有针对性。
我们要保证输出的指标和测量模型，不仅适用于整体，也可以针对某个场景某一个交互环节，某个界面进行度量的测量，度量应该具备扩展性。
度量的目的不仅是反应当时产品存在的问题，也要预测出未来产品规划方向，度量指标的可持续性指应持续观察、跟踪、和优化指标，使得度量体系可以贯穿在产品整个生命周期中，也利于对产品迭代优化后指标数据的前后对比。
可用性测试大家一定经常听，在很多测试场景，我们很容易把体验度量和可用性测试的概念相混淆。
可用性测试：通常是在开发完成之前，让用户完成特定的任务，通过观察用户在使用产品时的反馈，从中发现设计中存在的可用性问题的一种测试方法，其目的就是为了付出最小可行产品来做正确的设计，避免消耗太多开发资源做产品。
体验度量：是一种更宏观的视角，强调用户与产品之间的整体交互，以及在交互过程中形成的想法、感受和感知。用户判断产品现在阶段暴露出来的体验类型问题，对未来设计的一种预判。
“满意度—有用”，“净推荐值—有效”，“费力度—易用”这几个观测维度贯穿了互联网1.0到4.0时代，在不同时期，各类模型普遍都会涉及到的维度，根据以上三点也严格的度量的标注和具有较强的普适性、通用性的度量模型，接下我将带领大家一一了解这些度量模型都有那些。
方便大家区分可以把度量标准梳理成国际标准和国内标注两个部分，大家了解即可。
ISO/IEC 9126 (1991) 软件质量模型是是一种评价软件质量的国际标准，包括3个层次，由6个特性和27个子特性组成：
1）质量特性
2）质量子特性
3）度量指标
* 在这里设计师应该注意「适应性」、「易安装性」、「易理解」、「易学」、「易操作」和「一致性」，产品应注意「共存性」「易替换性」和「可移植性的依从性」，其中「易用性」的概念涵盖了用户体验中常规易用性的维度。
该模型是ISO/IEC 9126的升级版，包含8个特性和36个子特性，相对比较全面的了，大家可以从各特性的定义、范围与度量标准评估自己产品。
该模型重新定义了「效益」、「效率」、「满意度」即定义为一个产品可以被特定用户，在特定场景下，达成特定目标的效益，效率和满意度。
- 效益（effectiveness）：用户完成任务的精确性和完整性。
- 效率（efficiency）：用户完成任务所消耗的资源。
- 满意度（satisfaction）：用户对任务流程的可接受程度。
SO9241对Usablity的定义，在今日的设计质量评估仍旧有很强的指导性和应用性，具备很强的可操作性。比较重视「效率」和「效益」这两个维度，在任务完成程度和所消耗的时间/人力资源的场景下，评估出特定任务的可用性，在流程较长的B端产品体验度量中尤为常用标准。
这里我还查阅到和体验有关的国外资料，称之为标准也可以、称之为模型也没错，他们分别是“蜂巢模型、尼尔森十大可用性原则、USE量表”，有兴趣的同学可以自行查找了解。
度量模型也分为国内和国外这两部分讲解，这里介绍常用的8种类型，其中HEART模型是目前比较成熟的体验度量模型，也是各大互联网公司的应用最广泛，普及率是最好的模型之一了。
HEART是GOOGLE公司基于商业和技术的产品评估体系提出的模型概念，它包含5个维度，适用于市面上大多数C端类产品。
这五个维度分别是：
1）愉悦度：用户主观的体验即使用产品或者功能时是否会感觉到愉悦感。
2）参与度：用户对产品内容是否感兴趣并愿意主动分享给其他人。
3）接受度：用户看到新产品或新功能可以接受并且愿意尝试新的功能。
4）留存度：在一段时间后，新、旧用户是否愿意回来继续使用产品。
5）任务完成度：在使用过程中，用户能够高效，准确、流畅地完成当前任务。
如果结合上一篇数据认知的文章，就可以通过以下数据去衡量产品的体验度量，如下图：
这个模型虽然是全维度、多参数、多角度、系统性的评估方式也是目前普及率最高的，但是也有其自身缺点。
PULSE模型以网站为维度来衡量体验的模型，通过商业指标和技术指标，衡量网站的整体表现。同样包含5个维度：
1）页面浏览量：属于产品指标，指页面被用户访问的次数，以及页面的点击转化情况。
2）运行时间：属于技术指标，指衡量网站可以持续稳定地运行时长。
3）系统延迟：属于技术指标，指衡量用户打开页面的速度是否流畅。
4）周用户活跃：属于产品指标，反映网站的实际运营情况，估计产品的用户规模。
5）商业收益：属于商业指标，指产品的营收情况，不同类型的产品类别是不同的，比如电商类更关注GMV等指标，视频业务关注广告，电子书业务关注VIP售卖等。
GSM模型是Google的用户体验团队提出的一种指标体系，即目标（Goal）、信号（Signal）、指标（Metric）这三个纬度做为另外横向的参考纬度，他最有价值的一点是把GSM模型和HEART模型想结合，设计一个更为全面的体验度量模型，具体内容如下图。
UES应用场景更加适合B端产品。是阿里云设计中心基于易用性量表去扩展而成的度量模型，它的核心纬度包括易用性、一致性、满意度、任务页效率、性能。其中易用性是B端产品的重要属性，他的背后就是易用性量表的标准，与常规的易用性量表相对来说更为成熟和精细化。
四项五度模型应用场景更加适合C端产品。它是阿里巴巴1688UED团队在Google的HEART模型的基础上升级的度量模型，从用户的行为角度出发，四项分别是「当下、未来、态度、行为」；五度分别为「吸引度、完成度、满意度、忠诚度和推荐度」。
四象模型是面向工具类产品的体验度量方案，它以「角色」与「心智」「功能」和「性能」这四个维度，分析人与工具之间的微妙关系。
B-Metric是一个关注业务特点与用户角色的度量模型，也是一个个比较全面的指标体系，该体系包含基础体验、角色体验、企业价值三大部分，基础体验是提供产品最基础体验的保证；角色体验则是我们在设计产品最为关心的体验纬度；企业价值是产品所带来的盈利情况，也是体验相关的实际价值。
PTECH模型是阿里巴巴支付宝团队设计的度量模型，它是基于HEART模型升级后基于用户行为分析和应用性能检测的模型，比如：将愉悦度改为满意度，将任务完成度改为任务体验，在参与度下并入接受度、弱化留存率，引入清晰度与性能体验的全新维度。
模型种类有很多，这里说明一下测量三种方法，大家简单了解即可。
前面讲到了体验是一个抽象的概念，必须要有数据这种比较具象的概念做支撑，在《u一点料》这本书中，作者把数据比喻成设计的理性之光，我这种观点认为用在度量上也不为过，因为度量的体系是建立在数据之上的。
而这种度量体系的搭建本身就是为了用户着想，以创造用户价值为出发点的体系。所以我认为度量体系的搭建应该具备两种模式，即“数据驱动+体验驱动”这两种模式。
体验度量体系虽然是一种很复杂的体系，但是如果以化繁为简的思路去刨析它的话，我们可以讲这种复杂的体系概括为三个层级来解决问题：聚焦体验的问题——体验目标的指标——后续指标的追踪。
聚焦体验的问题：就是在业务链路中找出最能提升用户体验的关键问题，并把这个问题进行可度量的转化，换一个角度说找出的这个问题也是我们搭建度量体系的目标。
体验目标的指标：当体验目标被我们明确之后，就可以利用市面上现存的度量体系来进行度量纬度的测量，当然也可以理解为这是定义体验标准的过程，既然有标准一定会有定义标准的指标，而筛选体验目标的指标就是在这个环节被筛选出来的。
后续指标的追踪：这一个环节就是首位的环节了，其中包括验收和追踪两个步骤，在度量体系的标注线客观的捕捉其变量的特征，为后续的项目改版方向提供线索支撑。
凡事都需要有一个目标，确立体验目标就是体验度量的开始，清晰准确的目标决定度量体系的最终质量。这里有两个方法可以帮助我们梳理出用户的产品的体验目标。以下内容我以金融产品为例子讲解每个步骤我们应该做什么。
体验和需求分不开的，在卡诺模型（KANO）中，将产品功能的需求 分为五种属性：必备型需求、期望型需求、兴奋型需求、无差异型需求、反向型需求。以金融类产品为例子，我们需要找到必备型需求、期望型需求、兴奋型需求，来确定用户的需求都有那些。
也可以通过定性、定量的方式把划分后的需求，在梳理成以满意度、易用度、有效性为三个纬度的体验目标，比如
满意度：产品内务对用户的吸引力、产品界面是否美观友好给人舒适感觉、客服是否专业性高可以即使有效地回复用户问题、用户对品牌是否表示认可是否用户对品牌有赞美，用户会产品的是否有信任感觉、用户是否愿意持续使用产品等。
易用性：是指产品功能对用户的难易程度，比如功能入口是否容易识别，用户是否能快速找到自己所需要的内容，产品操作步骤是否简单符合用户习惯、用户在浏览内容适合时是否可以快速阅读和理解、产品对用户不恰当的操作是否有提示和限制，产品对用户的错误操作是否有提示，用户能否快速地知晓产品的使用等。
有效性：用户账户资金是否安全、产品提供的内容服务是否有价值、用户可以顺利完成核心任务、产品基础功能是否健全完备、产品提供的信息内容是否准确完整、用户查询信息和提交信息是否能即使响应、产品运行速度是否稳定。
前面讲了很多关于度量模型的知识点，如果你在之前的工作中没有接触到度量提醒，那么这里我将讲解一些关于“怎么选择度量模型”的办法。
行业界内的体验度量上的方案，大致可以用“客观度量、主观度量、主观&客观结合度量”这三个纬度进行区分。
客观衡量法：通过数据埋点监测用户行为数据。比如经典的 PULSE 模型，还有大家熟悉的运营指标，活跃用户数、留存率、点击率等等。
主观衡量法：就是收集用户主观的评分。比如满意度、费力度，可用性测试量表（如SUS）等等。
主观+客观衡量法：把用户行为数据和主观的评分结合起来，多数用归一化方式得出一个总分，把分数划分成不同档次作参考。比如Google 经典的 HEART 模型，PTECH 模型，阿里云UES模型、58同城B-Metric等等。
*在这里我还是比较推荐使用 HEART 模型（Google），因为他的五个纬度包含了定性和定量两个数据纬度，也可以从宏观和微观两个角度解析产品。
上一篇文章《数据认知篇》简单的介绍几种数据测试的方法，比如A&b TASR测试、灰度测试、可用性测试的方法，这里就可以派上用场。通过测试中的订单量、点击率，活跃度的数据波动我们可以直观的对应出我们产品质量、系统性能等的体验类型的问题。这样我们的体验度量体系的雏形就搭建完成。
最终我们集合成这样的表格就可以了。度量体系最重要的就是发现具体的体验问题以及后续的改进方向。
明确体验目标：我们产品目前存在什么体验问题，他的严重程度有多少，是否对产品的盈利造成影响。
改进方向：我们要改进什么场景，要用什么设计策略怎么提升产品的用户体验等。
体验设计是产品的重要一环，除了研发，持续的用户体验活动可以使每个人的努力更有效和更有价值。在设计过程的每个阶段，不同的用户体验方法可以使产品开发工作保持在正确的轨道上，符合用户的真实需求而不是想象中的需求。
产品的体验研究，研究的越早，研究结果对您的产品的影响就越大，而且根据最后的体验定义，有助于做出现阶段或者未来产品的迭代规划，
在所有阶段进行用户研究，正如我们在下面展示的，在任何合理的项目计划的每个阶段都有一些有用的东西可以学习，每个研究步骤都会增加你的产品价值。
一下是我在国外网站搜集到的一篇关于“用户研究的方法论”，文章地址我输入到文章末尾处。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：斜杠7湿兄
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
有研究表明，人们会自然地认为外表更漂亮的人拥有更加优秀的品质特质。即我们对一个人的外表印象会影响对他品质的感受和思考，心理学上将这种行为称为「光环效应」。
同样有人认为，这样的光环效应作用于人机交互设计领域也一样是奏效的。好看的设计，会让用户认为产品更好用，外观会影响用户对产品可用性的感受，这就是所谓的「美即好用效应」。
前面我在谈「费茨定律」或是「恐惧留白」的时候，大多数方法论都可以溯源到真实的科学实验或心理学文献记录。
但在查找「美即好用效应」资料的时候，所有内容对初始实验都是一笔带过：
1995年，日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过26种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试。结果发现，这些因素中很大一部分对真实可用性的影响微乎其微，反而界面美观度对真实可用性的影响出乎预料的大。
表现可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间，而界面美观度这个数据达到了 0.589。
我试着到很多地方去搜索更多关于该实验的记录，却都没有找到相关论文。所以对于这个实验的结果，我只能保持观望态度。（也可能是我检索资料的能力还有待提升...）
首先是我无法确定所有参与者在这个实验中的需求目标是否发生变化，概述中既没有阐明对照组，也没有告知实验对比过程的细节。
其次在「美观度对可用性的影响较大」的实验结论中，科研人员是如何定义「美观度」的标准的？审美是一种主观意识，那么「美观度」应该如何被定义，科研人员究竟是从配色、排版、统一性，还是动态和谐的交互流程定义了实验界面的「美观度」？我们也不得而知。
所以「美即好用效应」在人机交互领域的可用性，究竟是一条科学实验结论，还是属于用户心理研究，抑或只是人传人传出来的自然规律，作为笔者，我本着对我读者负责的前提下，也只能画个问号。
在人们追求基本生理需求的时代，「美即好用效应」的作用力必然不会比温饱时代的大。
为什么这么说？从马斯洛需求层次理论模型中就可以看到，对于用户而言，“审美需求”是在保证了一系列缺失性基础需求之后，才会追求的需求层次。
马斯洛需求层次理论映射到用户体验五层理论也是异曲同工，从战略层到表现层，越是重要的层级挂靠的马斯洛需求层次就越基础。拥有巨大商业价值的产品，往往影响其在商业市场中走向的，都是基础需求，而非高层级需求。
这就为什么我前文说道，很多人抽离前提来谈「美」的重要性。用户对「美」的追求是在满足了基础需求的前提之下，如果一个产品的战略、范围层难以落地，空谈「美即好用效应」便是空中楼阁罢了。
表现层在没有可靠的战略前提之下，是毫无商业价值的个人狂欢。
UI是一项纯艺术性创作的职业吗？在我刚接触UI行业的时候，我是这么单纯地认为的，但现在已经不再是了。
我前一阵子看了像素范泡泡老师的直播，其观点我非常赞同，也在社群里和大家进行过了交流。在此我引用两个泡泡老师举到的 iOS UI 的案例，来阐述 UI 探索的「美」，究竟是在探索什么。
大概在去年，网传苹果将强制要求 APP Store 中的应用程序要适配暗黑模式。暗黑模式也掀起了一轮新的视觉设计潮流，暗调的设计语言让产品在视觉上看上去更酷更年轻。
但苹果激励大部分应用程序适配暗黑模式，只是单纯的为了视觉上的好看吗？其实并不是。
是因为后期的苹果硬件设备多采用OLED屏幕技术，比起其他厂商的LCD屏幕技术，有其优点，但也有其缺点。OLED采用低频PWM调光模式，也就是通过低频频闪的方式控制屏幕亮度（一亮一暗、一亮一暗如此反复）。在调低屏幕白光亮度的情况下，频闪很容易造成用户视觉疲劳。这一点极可能成为苹果设备的销售弱点。
于是苹果希望在用户需要调低屏幕亮度的场景中，通过暗黑模式的视觉手法，大量运用黑色，这样OLED屏幕的光源就可以直接关闭，而不需要采用频闪的方式来控制屏幕亮度，从而减轻用户视觉疲劳的现象。
（ps.看不懂的朋友莫急，文末我放了B站up主硬件茶谈的《全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普》视频，感兴趣的小伙伴可以查看）
苹果主动落地暗黑模式的开发，并且激励在应用市场上架的其他应用也适配暗黑模式，实际上是与其商业目的挂钩的一种行为，只是将解决方案落实到了表现层。
iOS7掀起的扁平设计风潮，至今还在影响着UI设计趋势以及用户的审美。但你硬要从个人审美角度去评判曾经的拟物风格与现在的扁平风格究竟哪个更好，只能说仁者见仁。
泡泡老师认为，iOS 拟物风格向扁平风格的转换，也不仅仅是基于视觉「美」的考虑。因为曾经的苹果在全球移动品牌厂商中，拥有更加优质的屏幕硬件，他们的屏幕可以高清显示更多的设计细节，于是仿真的拟物风格在苹果设备上通过其光影、阴影的展示，可以突出苹果的屏幕优势，从而成为其商业卖点。
但后来随着移动设备品牌商的硬件差距不断缩小，高清显示已不再成为苹果独家的亮点，苹果也就不需要再花费更多的设计成本在拟物设计上了。此时的拟物设计成本并不能再持续带来高效的商业回报，从而转向扁平风格，一方面可以提高设计效率、降低设计成本，同时对其周边设计的延展性更高。
从这两个案例中可以看到，UI虽然做的是表现层的工作，但实际上也是在为用户、为商业、为战略而服务。除了视觉的「美」，我们也应该关注产品背后的数据、商业价值，我想这就是UI与纯艺术性创作型设计岗位的区别吧。
说了一堆，感觉我好像一个「美即好用效应」的ANTI份子...其实也不全是。我清楚「美即好用」在一些商业案例中的运用，我不否定该定律存在的价值，只是想表达一些看法。
首先我认为不应该在产品还没有扎根市场，拥有产品自身的商业价值之前，过分拘泥于视觉表现层的内容。在腥风血雨的互联网商业市场，迅速小跑迭代，做好用户数据分析，增强产品自身留存实力、激活市场潜在用户，比把目光放在视觉表现上可能更有价值。当产品在一个领域或市场积累了一定忠实度较高的用户之后，「美即好用效应」可能才会发挥其功效。
其次我想对话同行的UI设计师，我一年前在《UI如何提升个人价值？UGD思维了解一下》中已经说到过，UI设计不应只停留在视觉表现层，想提升自我价值，一定要培养超脱表现层的思维能力。
我们不应该一味地信奉「美即好用」。作为UI设计师，我们要通过避免「美但不好用」或「不美但好用」的极端来平衡视觉表现与功能的体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：UCD耍家
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
有时候我们的标签都是从后台获取的数据，然后利用JS添加到页面上，当我们写生成的标签的点击事件（click）时没有效果。
例如：
<section> 测试动态生成的DOM点击事件 <br /> </section> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $.ajax({ type: "post", url: "Handler1.ashx", data: {}, success: function (data) { $("section").append(data); //把获取的标签动态添加到页面中 } }) }); $("#test").click(function () { alert("Smile"); }) </script>
生成页面，点击A标签无效果。
这里只介绍两种解决方法。
①把事件写在生成的字符串当中，感觉很low
里面什么方法名外面就声明一个（需要带参就传参）。
②我一般喜欢在JS里面直接写点击事件，不喜欢在标签里面写事件
我们直接写这个标签的点击事件是没效果的，我们就换个写法，利用On来完成。
这样也可以完成点击事件。
另附：a标签的href也是可以执行脚本的，点击事件也会执行脚本，点击事件优先，然后在执行href链接。
下载一般都是把A标签的Href给个一般处理程序的链接（参数就用？传值）。但我这个下载的参数是动态生成的，在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接
//下载 $("#uploadInfo").click(function () { var uids = ""; $(":checkbox[name='A']:checked").each(function (i, item) { uids += $(item).attr("data-id") + ","; }) if (uids === "") { NewAlertBox("warning","请最少选择一项",2000); } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids; $(this).attr("href", urls); //执行完了点击事件，把Href赋值，然后自动跳转href链接 } });
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。
通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style>
<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>
</body>
显示结果
对应的jQuery代码如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(){ alert("我是小div"); }); // 为外层div元素绑定click事件 $("#content").click(function(){ alert("我是大div"); }); // 为body元素绑定click事件 $("body").click(function(){ alert("我是body"); }); }); </script>
当点击小div时，会触发大div与body 的点击事件。点击大div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡 }); // 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); event.stopPropagation(); // 阻止事件冒泡 }); });
event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
html部分
<body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值，val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) event.preventDefault(); } }); }); </script>
//阻止默认行为 ( 表单提交 ) event.preventDefault();
还有一种防止默认行为的方法就是return false。效果一样。
代码如下：
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#sub").click(function(event){ //获取元素的值，val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault(); return false; } }); }); </script>
同理，上面的冒泡事件也可以通过return false来处理。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); // 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); //event.stopPropagation(); // 阻止事件冒泡 return false; }); });
在开发中遇到这个问题，就是第一次加载的时候会错位，出现窄很多的现象，在网上找了一番后，发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的，但是解决方法我没怎么看明白，于是按照他所说的原因，即
这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性，它会使Table标签中多一个style=”width: xx px;”属性，这就导致了变化大小时标题对不齐现象。
然后在 datatable中加入了 serverSide 设置，
$('#charging_table').dataTable({
serverSide : false,
......})
既然是因为 serverSide 的原因，那我把它 设置为 false 结果问题还真解决了！
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
-
$("#li_certificate").click(function () {
-
$(this).parent().addClass("selected").siblings().removeClass("selected");
-
$("#div_record").hide();
-
$("#div_certificate").show();
-
//这个位置写那个重新适应宽度的代码
-
});
不论是 toB 还是 toC 的移动端设计中，都会遇到一些表单填写和上传证件信息的情况。面对移动端要手动填写的表单，用户通常期待有高效的解决办法可以立即完成填写任务。本文为你总结出了几种移动端表单设计的实用原则，可以有效解决表单不够友好、用户填写错误、费时费力的问题，希望对你有帮助。
1 . 表单结构分层
从表单结构层面来看，内容过长的表单，信息可以分步骤、分页面处理。
使用条件
案例分析
做企业认证时，由于需要填写的项目较多，步骤繁杂，因此很多产品会采用分步骤的形式，提示用户当前进度。
2 . 页面内容分层
每个页面的信息内容呈现，有层级，有重点
使用条件
案例分析
大众点评在设置用户信息时，虽然要填写的内容都是“设置”，但是重点需要设置的信息使用了链接颜色处理，做了强调。
1 . 以选择代替输入
如果用户可以做选项时，就不要使用输入，可以充分利用移动设备的性能，比如 GPRS 定位、通讯录等，合理调用第三方或系统信息。
使用条件
案例分析
2 . 提供默认选项，替用户做选择
选取最大概率事件作为默认选项，减少用户的手动调整
使用条件
案例分析
蚂蚁链实人认证在上传证件时会根据用户所在国家和地区，帮助用户默认选择概率最大的选项，不需要用户自己操作。
根据调用内容调动不同的键盘类型
根据表单输入内容的不同，调用出系统不同的键盘类型。
使用条件
案例分析
航旅纵横在航班查询的时候，由于航班号都是大写字母和数字的组合，所以键盘会默认调用出只有数字和字母的输入法，同时默认开启大写形式。蚂蚁链实人认证在用户手动填写身份证时也同理。
重要的信息要始终可以被看到
需要避免输入项被键盘遮挡，也要避免将重要的输入提示作为占位符，不要在用户填写时被输入的内容遮挡。
使用条件
案例分析
大众点评在写评论时，一些可以激励用户写点评的提示性文字，会在用户输入时始终存在。
重要的信息要始终可以被看到
当输入需要被判断和检验的信息时，系统最好可以针对信息做实时校验，避免用户一直到最后提交表单时才发现填写问题。
使用条件
案例分析
证件号码输入错误时会给予相应的提示。
原文链接：长弓小子（公众号）
作者：元尧
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
酷家乐的产品性质决定了其增值付费类活动的目标用户从根本上说是真正意义上的b端用户，这类用户群体的审美喜好一直以来很难与视觉流行的趋势和酷家乐品牌调性找到平衡点，这类视觉产出已经遇到瓶颈；而此类运营动作越来越多，并且作为公司营收的重要组成部分，在视觉侧形成正确的指导方向具有非常重要的意义。
背景
目标
用户画像
过半购买角色具备设计属性，对审美也有一定的要求，所以推广视觉表现可以也需要具备一定的设计感
购买角色年龄分布较广，岗位属性分布也比较平均，因此推广视觉表现需要兼顾各年龄层，具有通用适配性
视觉现状
设计过于“用力”，为了在营销活动中体现酷家乐科技属性，与D端视觉产生差异，一味采用深色/蓝色，硬朗机械感；营销氛围叠加后画面过饱和，难以与传统电商拉开层次。
流行趋势
根据用户画像，结合流行趋势与酷家乐品牌调性，我们得出了视觉关键词，我们将它概括为“轻炫彩”。
升级后的虚拟奖品全部采用3D设计，强化奖品的真实存在感，更容易吸引用户注意；同时应用“轻炫彩”的设计原则，能够普适于大部分增值营销类活动页面/海报中。
输出的系列图标可以在不同场景下复用，提升了长期的设计效率。
原文链接：酷家乐用户体验设计（公众号）
作者：柚子、阿九
团队：柚子、阿九、九州、白夜
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com