今年写了些交互设计文章，总结经验，分享给大家~
《2017电商设计—你需要注意的交互逻辑》
写在前面的话：
本命年其实是个幸运年，有幸与产品和客户端开发的小伙伴一起工作，团队年轻又逗比～
在进行交互与视觉设计中，讨论沟通是可以得到很多我没有想到或者不了解的：设计以外的惊喜，就这些惊喜，我进行了总结，希望能帮助到大家，如果有与大家的想法有出入，也请不吝指教哇～
登录页是否需要导航栏？
导航栏的页面逻辑强调的是层级关系，一级-二级-三级页面等；
之后我们想一个问题：登录页面一般是从哪里弹出的呢？普遍的有这么几种：
（1）底部导航“我的”——登录页由底部向上弹出；
（2）将商品加入购物车——购物车结算——登录页由底部向上弹出；
（3）底部导航“购物车”——登录页由底部向上弹出；
由上，我们看到App的登录页的出现可以有很多种情况，而无论每一种的前面几步是神马，最后一步的交互总是酱紫：登录页由底部向上弹出。而不是层级之间的跳转，所以登录页往往没有层级关系。因此，大部分App的登录页面不含导航栏，也就是说登录页不是从导航栏进入，而是不同情况下弹出的~
当然，这里有一种情况：很多App的登录页会有类似导航的UI设计（返回按钮、帮助等），但是从开发的逻辑来说，这不是“导航栏”~
登录页导航这一部分的交互要考虑清楚，需要与不需要导航栏的逻辑是不一样的，如果后期还要改，IOS开发小哥可能要蓝瘦香菇~~
登录与忘记密码的“返回逻辑”
.返回逻辑与X逻辑
先说一下iOS的逻辑：在使用IOS的App时，你会发现有一些页面是从右面进入，也可以使用手势回退。有一些页面是从下面弹出的，这个是不能使用手势回退的，所以打个比方解释这两种逻辑的不同：
（1）返回逻辑：你在翻书，一页一页翻，也可以返回，手势回退，一页一页翻回来。这时候的“返回“按钮，就是翻页效果；
（2）X逻辑：你又拿了一本新书盖在了原书的上面，你从第一页打开。你没办法回到上一本书，你只能在这本书里面翻页。这时候的一个“关闭”按钮，应该是撤掉这本新书。
.登录页面最好不用返回逻辑，只用X逻辑
比如第一本书是App界面，当需要登录时，弹出了登录页面（第二本书盖上来，第一页）——点击忘记密码（翻到登录的书的第二页）——点下一步（翻到了第三页）。如果从多步忘记密码页面回到登录页面，页面之间有层级关系，可以考虑返回逻辑；但是想撤掉登录页面，就最好只考虑X逻辑，排除返回逻辑，这样更符合用户的操作习惯。
看淘宝的登录页面，是从下往上弹出，淘宝的“返回”按钮并不是翻页效果，而是页面从下面又拿走了，也就是撤掉“登录”这本新书的操作，其实这个操作是第二种X逻辑，不是返回逻辑~
.忘记密码页面可以有返回与关闭两种提示
如果用户忘记密码，暂定为两步：验证手机号——设置新密码；
无障碍完成操作：忘记密码第一步—忘记密码第二步—第二步成功直接回到登录页。有障碍的操作，则分为下面两种看：
（1）有返回与关闭按钮：回到登录页的最长操作（4步）：忘记密码第一步—忘记密码第二步—不想进行第二步操作了，点击关闭按钮——登录页；
（2）只有返回，没有关闭：回到登录页的最长操作（5步）：忘记密码第一步—第二步—返回—忘记密码第一步——登录页；
所以在有障碍操作时，忘记密码页面有“返回”“关闭”两种操作提示会更合适~
关于搜索页的tips：
搜索页面一般有两个部分：热门搜索+历史搜索；
.热门搜索
就这一种设计布局看：热门搜索的关键词放置在矩形控件时，依次横向排列。
热门关键词的字数不一，如果控件尺寸小了，就会有关键词溢出；如果控件尺寸大了，关键词字符少时，又会显得很空。所以为了达到更好的视觉效果，矩形控件尺寸无法统一。同理，也无法统一每行最右关键词距页面最右的距离（b表示）~就是这个位置：
人的浏览顺序一般是从左到右，从上到下。热词数量较多时，就会纵向排列。这样，用户在横向看完热词时，就会纵向继续浏览。一般的，热词纵向是2-4行，一旦热词过多，频繁的变动浏览顺序也容易引起用户疲劳。
因此，第二种布局（详见京东）：只有一行，滑动该行看更多的热词，我认为好处是这样：
（1）浏览顺序只有一种：用户在热词上的浏览顺序由两种变为一种：左右顺序，用户在“热词”模块无需变动浏览顺序；
（2）边距可控：可控制第一个热词距页面最左的距离a，和最后一个热词距离页面最右的距离b~~
但是也有第一种布局统一控件尺寸的App，猜想这样做的原因：
（1）设计是需要根据产品来调整交互与视觉的。每一种产品对应的需求是不同的，根据不同的产品需求调整最适合该产品的设计；
（2）热门关键词可以做到可控。就检索的热门关键词来说，到底“热门”的搜索是怎么评定，是按照用户的搜索量去排列，还是后台去“推送”？如果可以做到可控，那么在“热门搜索”这一块，设计就可以决定用哪一种布局~
.历史搜索
布局选择：
历史搜索关键词数量可能会超过热门搜索的关键词数量，一般历史搜索设置20个左右关键词（依不同产品情况定哦）。如果用“热门搜索”里第一种布局：试想一下，关键词有20个，那就要五六行，浏览顺序是两种，每一行最后一个字符距右的距离又不一样，视觉效果就比较混乱， 因此排除这种布局~~可以用列表纵向排列，同上，浏览顺序只有一种，字符距左右距离可控，视觉效果也比较好。
慎用“清空”：
（1）误操作有点怕：“清空”的按钮，对于想要进行清空操作的用户来讲当然是好用的，但是用户也很有可能误操作，如果误操作点击清空按钮后，再没有设置“确认清空？”的提示，那这无疑是“危险”的用户体验。所以在每一个搜索词后设定单独删除的按钮。可以看到有一些App，每个搜索词后有单独的删除按钮，也有清空全部的按钮，虽然满足了不同用户的需求，但是我觉得清空对购买转化率应该也有一定影响~
（2）影响购买转化率：历史搜索是用户在不同场景下进行的搜索操作，很可能代表着用户曾经想买什么，或者想给朋友买什么等等。他们在进行搜索的时候，就会带有购买欲望，这些购买欲望很可能转化成实际购买力~作为一个看重“购买”的电商产品来说，清空按钮=清空该用户的全部购买欲望。跟清空操作比，单独删除没有那么易用，但是却增加了商品转化的可能。因此，我觉得可以不设计“清空”，只在每个搜索词后进行单独删除。
目前总结就这么多啦，还有后续的，我再更~~~~如果有理解不到的地方，欢迎大家一起讨论，说出你的想法，哦雷雷~
《交互设计的八大法则》
一、功能可见性
1.在视觉感知上，某些元素适用于某些功能，这些元素便符合功能可见性。
2.如果设计中的元素的功能可见性与人们的感官预期相符，那这种设计会有很高的接纳率和使用率，也被认为容易操作。所以在设计时，需要尽可能的符合人们的心理预期，界面设计要模拟人们熟悉的物品或环境，暗示提醒使用者的新系统中的各部件的使用方法和功能。
3.应用例子：生活中门和门把手功能抵触，有推的标语，就不要设计有门把手。可以去掉文字提示，需要推的一面，设置无把手，需要拉的一面设置有把手，这样，用户在进行“推或拉”的动作，根据门把手的功能可见性，就可以准确的操作。再比如电脑屏幕的按钮设计，电脑桌面的垃圾桶图标、文件夹等等，都是模拟生活中的物品设计的，符合用户在生活中的认知，用来提示使用者，这些图标在软件中的功能。
图示：这些图标设计符合生活中的相关事物，能够使软件功能明显~
二、无障碍使用
1.好的设计不需要特别调整或修改就能很好的服务各种需要的人，此法则适用于所有大众。四大要素：易读性，易操作、简易性、包容性。
（1）易读性：不论感官功能差异，都可以理解的设计。
提升易读性方法：a.多种标注方式呈现信息，文字图像触觉等；b.辅助性感官设计 c.合理合适的方式呈现操控装置和操控信息。
（2）易操作：不论身体状况如何都可以使用。
提升易操作方法：a.最大限度减少使用者重复操作和不必要的体力消耗 b.运用完善和简单的功能指导准则，使操作装置容易使用。 c.辅助人体活动，提供方便的操作环境（残疾人专用道） d.合理合适的方式呈现操控装置和操控信息。
（3）简易性：不论经验背景、文化程度、注意力等，都易操控。
提高简易性方法：a.减不必要的复杂装饰 b.采用清楚明了，持续统一的提示符号和操作信息。 c.循序渐进展开说明、标注相关信息和操作装置。d.所有指令应该提供清楚的提示和反馈，确保信息简单易懂，适合不同文化程度的使用者。
（4）包容性：操作错误及导致后果最小化，
提高包容性方法：a.利用健全的功能可见性和可操作性（只标注正确的使用方法）预防错误。 b.利用确认与警告预防错误（删除时：确认是否删除）。 c.加入设计自正性的操作功能和安全网（自我调整与修正），减轻避免因错误造成的后果。
2.应用例子：大型电梯比小型电梯功能健全，两套操作板适用站着与坐着的人，操作板多种符号（数字图像盲点）。
三、成本效益
1.设计中，用来评估新功能/新元素出现的新增成本的最后财务回收状况。 如果与设计的互动成本>收益，则是不良设计，反之是优秀设计。
2.成本效益可以衡量设计的品质。如：网页下载的时间常见说法不超过十秒，但是，接受下载时间的长短，更多与网页提供的效益有关，如果网页具有合理效益，其实可以抵消超过十秒的下载成本。所以，可以通过改进设计品质来降低互动成本（设计能够提供效益）。
3.让产品继续进行应该效益>=成本，让产品更好，应该让效益尽可能的大于成本。应该从效益与成本两个方面工作：成本限制 或者 效益增加。所以不能仅仅考虑成本限制范围，也应该考虑互动效益成本。
4.应用例子：loading页设计：用成本效益来考虑，为什么loading页设计多样，不只是因为“有趣”这么简单的理由，有趣只是用户的直观感受。这种设计的应用实质可以用成本效益解释，等待的时间可以当做是成本，在技术无法缩短合理的等待时间时，成本就相当于无法降低，那么想要产品更好，需要从效益入手，设计可以带来效益，那么就需要改进等待页的设计。所以现在的loading页、进度条、错误页等等设计都体现能带来效益的创意互动。
图示：
四、8020法则
1.定义：在所有大系统中，高达80%的效果是由仅占20%的关键因素决定，在实际操作中发现，关键变量占10-30%不等。适用范围普遍，适用互不相关的事物影响。
2.8020法则有助于资源整合，可以帮助提升设计最大化。比如：客户用80%的时间集中于产品20%的功能时，那设计与检测应该集中于那20%，剩余80%应该重新评估，确认他们的价值。设计师可以利用此法则，对设计中的所有元素进行重新评估，划定重新设计与优化的范围，有效决定优势资源进行再设计，80%非关键能减则减，时间与资源有限时，不要试图改进与优化那80%。
3.应用例子：图形用户界面把大部分功能隐藏在功能菜单（降低视觉复杂性），常用功能难以找到（增加操作复杂性），所以应把20%关键功能放在功能菜单中（工具条的使用）。
图示：在印象笔记这个软件里，上层是功能菜单，在主页面上方设有常用功能的工具条，这就是把20%的关键功能摆设出来，没有隐藏掉。
五、MAYA法则
1.成功的设计可以从很多方面界定：功能、美学角度、适用性等，如果我们从商业绩效也就是销售量来定义设计的成功，可以从两个变量取得平衡：亲切熟悉+独一无二。MAYA法则就是帮助我们找到这两个变量的平衡契合点，所以一个设计如果可以结合让人感到熟悉+新奇的感受，就能够提升设计的成功。此法则应用于：面向大众对象的产品，用户是大众，而非专业设计师和艺术家。
2.用户喜欢熟悉的东西（曝光效应：物品或环境的吸引力会随着曝光次数的增加而增加），也喜欢新奇的设计。人们对新奇的关注与记忆大于典型性。此法则认为最理想的做法是：兼顾熟悉性和新奇性。 对用户来讲：最新奇但依旧可辨识的物品或环境，最富美学吸引力。
3.应用例子：设计的演变虽然一直有创意新奇的设计，但是都在从前被大众接受的设计渐渐演变而来，而非完全脱离重新创造，因此新奇的设计+过去设计的熟悉感，会使得用户具有吸引力和接受能力。图标、界面的演变。
图示：IOS不同版本的设计元素的对比，可以看出，虽然新版具有新奇性，但是仍然可以找到以前版本的熟悉感受。
六、区域对齐
1.该对齐适用于：元素形状不一，不对称时，元素可为图形或文字元素，如果是元素形式简单对称，就采用边线对齐的方式。
2.对齐方法：将要对齐的元素顺着中轴线摆放，让中轴线两边的视觉重心或者面积相等。区域对齐方法无法使边线对齐，如果想同时边线对齐，只能令元素边线在边线内或边线外。
图示：可以明显感受到右边对齐效果更好。
七、信噪比（常用于信息设计）
1.同一显示中，相关信息与无关信息的比例就是信噪比。在信息的创造、传达、接收过程中，信息的形式会递减，无关信息会增加。如何使得信噪比高，从而达到优秀的设计目标？可从两方面看：信号最大化或噪音最小化。
2.信号最大化：清楚的传达信息，高效率的呈现信息可以使得信号最大化。简单的设计可以带来极小的效能负荷，让用户专注于资料的意义。比如，没有用正确的图表呈现特定资料数据，基本会扭曲资料原意，所以正确的设计决策非常重要，必要时应进行测试。 还有一种方法，及时强调信息的关键方面，也可以减少信号递减的现象。比如：强调或备援识别，凸显产品的重要性。
3.噪音最小化：去除或减少不必要的元素，每一个不必要的数据项目、图标、线条、图案，都会让用户从重要元素上分心。每个设计元素的使用应该适当，一旦过多就是噪音。
4.应用：图表、表格设计的演变。
图示：左侧的图表无关信息元素比较多，图示的图案多样，表格的边框又粗又重，这会使得“噪音”增加。右侧是优化后的图表，减去了无关信息，用清楚明了的图示表示资料内容。
八、序列效应
1.在列举信息时，排在最前和最后的元素，比排在中间的更容易让人记住。
2.对排在开头的信息产生加强的回想效果，称为：初始效应，人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果，称为：时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。
3.在列举信息元素时，如果列举信息属于视觉性，那么把重要的信息放在最前面；如果是听觉性，就放在最后面。如果是用户必须做决定，并且是最后一项出现后马上做决定，那么就将想要用户做决定的信息放置最后，以便增加获选概率，否则放在最前面。
4. 应用例子：比如在很多app产品设计时，个人账户与设置基本放在页面的最前面和最后面，这体现着产品信息的序列关系，重要次序，所以在进行设计时，可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作，也可以利用这个法则，将信息放置最前或最后。
图示：
好啦，这是我最近整理总结出来的知识，设计也可以像数学一样，有规律可循，按照总结的规律规则去设计，可能会事半功倍~希望帮助到大家~~
