变设龙 企业高质量图片智造平台
增值电信业务经营许可证：苏B2-
编辑热线：6-2
A5创业网 版权所有
扫一扫关注最新创业资讯交互丨加强设计过程的逻辑性，能帮你解决这3大难题
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
交互丨加强设计过程的逻辑性，能帮你解决这3大难题
鸿影：师的核心竞争力应该是什么？对于不同的人来说答案可能不一样，而我认为应该是在发现、分析和解决问题过程中贯穿的设计表达「逻辑性」。在面对复杂信息架构产品的设计时，结构化、强逻辑的设计思考与表达过程也尤为重要。
如何提高过程的「逻辑性」？需要指出的是，这并不能简单地和「逻辑思维能力强」进行等同（事实上，作为非常重要的通用岗位能力，合作的产品经理与开发在这方面完全可以比我们强）。我在两年来的实习 & 工作中，虽然被 Leader 与同事们贴过几次「逻辑思维能力强」的标签，但也同样被挑战过「为什么设计目标是这样的」、「设计目标与解决方案的关联在哪里」、「这里的信息层级有点乱」等问题，也有过在和业务方的「撕逼大战」中溃败、无奈接受自己的创意被砍的经历。
反思自己遇到这些问题的原因，还是在设计与表达过程中的「逻辑性」不够强，在思考深度上不够追根究底，前期偷懒跳过了一些需要逻辑推导串联的步骤，才导致了后续的痛苦「掉坑」。而在加强了设计过程的「逻辑性」后，再遇到以下这些问题，也许你可以和我一样变得豁然开朗。
为什么他们总是揪着我的设计细节不放？
之前我们以设计师的身份作为 Owner 驱动了某业务的首页改版项目，而我身为主设计师，在前期的设计分析过程中运用了一套比较合理的方法论和流程，因此改版的整体方向与梳理出的页面内容框架是比较受到业务方的认同的，可最终方案的需求 & 评审过程却成了我有史以来最虐心的一次经历。虽然大家都认同页面的基础框架，但对框架里放什么内容、内容的细节该如何设计等却众说纷坛；而我在解释这些细节部分为什么做成这样时，因为缺乏框架设计阶段那样逻辑清晰、有理有据的推导过程，多多少少有些底气不足，最终不得不接受被打回修改方案的结果。
问题出在我的「」主要聚焦在宏观框架层面（甚至用了一大堆设计方法论与用研过程来支撑），但却没有贯穿到对每一个内容模块、每一个细节的思考中去。对细节部分的信息归纳与优先级梳理不充分，自然也就难以解释清楚为什么放这些内容、为什么这么排列等问题。但是页面模块的细节太多，每个都像设计宏观框架时那样把用户体验地图、卡片分类等方法祭出来支撑解决方案显然是不现实的，所以我之前设计模块细节时都比较随性，并无太多分析推导流程。
师兄在注意到这个问题后，和我讨论提出了「微链路」的解决方案建议，就是在进行每个具体模块的设计时，在确定模块的基础框架布局后，用一套迷你版的用户体验链路（类似流程图，但内容比操作跳转更丰富）来快速梳理用户浏览、分析和进一步探索模块中内容的过程，先看什么、后看什么、可能有哪些条件判断与分支操作等，从中分析提炼出模块中每个具体信息（标题、标签、文本、富媒体等）的优先级，再分类归纳进基础框架，确定最终解决方案。这么一来，模块内的信息优先级就变得和页面一级内容框架一样清晰了，解决方案「为什么放这些内容、为什么内容这么排列」的问题也得到了解答。
以上是打码处理过的「微链路」过程图一张……
遇到直接给详细线框图的产品经理，我该怎么办？
作为一个讨厌受空间限制的交互设计师，我不反感甚至喜欢口头提需求的业务方与产品经理，这样自己可以有更多的设计发挥空间（当然，也得面临沟通修改成本更高的问题）；而当被产品经理直接塞来接近交互稿甚至高保真的详细线框图时，内心就会变得异常不愉快。这也是我之前一直试图推动改革和产品经理的协同模式的重要动机。
但是我理想的交互产品并行协同模式（之前的文章有详细提到）并不适合于所有业务场景，在项目有着强业务诉求驱动、时间周期也紧急的情况下，产品经理直接提供详细线框图能让项目整体的效率变得更高，这样的情况还是不可避免的会遇到。
遇到之后该怎么办呢？我之前主要就做做优化交互细节、补充遗漏场景的事情，有时甚至就默许给视觉直接出方案，自己内心的成就感变得非常低，情绪上也一直比较抵触接这样的需求。
在经过了一段时间的挣扎与迷惘后，我逐渐悟出了一点解决窍门：在拿到产品经理的线框图后，先有意识克制自己不去关注交互细节的合理性、有没有漏掉特殊场景等，而是进行逆向推理，从线框图中抽象出页面的信息框架，分析每个框架要解决的本质业务/用户诉求，再对框架之间的并列、从属等层级关系，按照自己的想法重新梳理归纳，这样很容易发现产品的线框图在信息架构上的混乱错漏之处，再拿出疑问去和对方讨论，设计更合理的整理解决方案。
用户体验设计不应该只是对界面交互、视觉、动效体验细节的「查漏补缺」（这只是交互设计师工作的一小部分），而应该是不断追求从更高的维度（信息架构/全链路体验 -& 品牌传达/商业模式 -& 社会价值）来抽象思考与解决问题。
创意从何而来？从「神来一笔」到「有迹可循」
设计方案的创新性不够也是之前一个令我苦恼的问题，总觉得自己按照方法和流程推导出来的解决方案虽然没有大错，却给不了人眼前一亮的感觉，而偶尔萌生的创意，基本都属于「神来一笔」的类型，并没有太多支撑依据去说服业务方（业务方典型态度：呀这个不错——成本有点高/好像不是很符合我们的业务定位——列为P2的需求/直接砍掉吧），最终成功落地上线的也是寥寥。
作为一个典型理性思维的交互设计师，在狭义交互设计领域的创意突破（想法很多和动效相关，但是产品主要使用场景在PC端浏览器，客观限制较大）受限之后，我开始将目光放向了品牌设计领域，结果取得了前所未有的灵感迸发效果。
我先是想起了业务方屡屡提到的几个和产品品牌定位相关的 Slogan、关键词等，再结合产品的内容特性，从中联想到了一些可以具象化的元素——网络、神经、雷达、声波，接下来将这些元素融入到自己的方案设计中去（可以融入的地方很多，背景纹理、图标、控件轮廓、Footer 顶部等），有效缓解了之前那种和同类产品过于同质化的效果。
这样萌发的创意变得更多，但都是有迹可循地发散自产品本身的品牌定位，而不是沦为虽然有亮点却背离了业务定位的「自嗨型设计」，就像之前 Julie Zhuo 女士在《Junior Designers vs. Senior Designers》一文中提到的——初级设计师像一个亢奋的小精灵，而高级设计师在疯狂中有规则。
「专业科班的平面设计训练方法」
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注你需要注意的电商设计交互逻辑
写在前面的话：
本命年其实是个幸运年啊，今年就有幸与产品和客户端开发的小伙伴一起工作，这个团队年轻又逗逼……别看我们进坑不久，涉坑未深，但是我们努力也傲娇着呢！哼╭(╯^╰)╮
stop，掰扯回来，在进行交互与视觉设计中，不断的与他们讨论，讨论沟通是可以得到很多我没有想到或者不了解的：设计以外的惊喜，就这些惊喜，我进行了总结，希望能帮助到大家，如果有与大家的想法有出入，也请不吝指教哇，呜哈哈~登录页是否需要导航栏？
导航栏的页面逻辑强调的是层级关系，一级-二级-三级页面等；
之后我们想一个问题：登录页面一般是从哪里弹出的呢？普遍的有这么几种：
（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）影响购买转化率：历史搜索是用户在不同场景下进行的搜索操作，很可能代表着用户曾经想买什么，或者想给朋友买什么等等。他们在进行搜索的时候，就会带有购买欲望，这些购买欲望很可能转化成实际购买力~作为一个看重“购买”的电商产品来说，清空按钮=清空该用户的全部购买欲望。跟清空操作比，单独删除没有那么易用，但是却增加了商品转化的可能。因此，我觉得可以不设计“清空”，只在每个搜索词后进行单独删除。
目前总结就这么多啦，还有后续的，我再更~~~~如果有理解不到的地方，欢迎大家一起讨论，说出你的想法，哦雷雷~~随手点个赞，你是个好人，诶嘿~~~
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的编辑推荐大作
你需要注意的电商设计交互逻辑
在她入驻到UI中国的日子里
总共吸引了4096位设计师的驻足流连
总共收获了31位设计师的由衷赞赏
总共获得了9位设计师的悉心珍藏
总共引起了0位设计师的深入讨论
依然要删除吗？您的位置：
对设计或交互而言，可以从哪些方面注意设计细节？
—— BEGIN ——
不知道大家有没有这样的情况发生，自己设计的作品“乍一看不怎么样，仔细一看，还不如乍一看”！
其实不耐看，或者不敢放大看的原因都是：细节做的不到位。
最近在做手机OS的主题图标，对细节的感触很大，今天结合主题图标来和大家聊聊：我们可以从哪些方面注意自己的设计细节。
大纲如下：
给造型加点细节
多加点质感的细节
不要让图标看着灰灰的
风格特点的运用
一、给造型加点细节
造型是所有设计执行的第一步，造型做不好，说别的都没用。
那如何能给造型加点细节，使其变得更加耐看呢？
打个比方，我们要画一个圆角矩形：
哪个更有设计感，更有细节呢？
当然是第二个。
第一个一看就是默认的圆角，没有细节可言，放在真正的案例中就像下图一样：
如果 youtube 的图标用了第一个普通的圆角矩形，可能就有现在那么耐看了！
造型加点细节，你也可以理解为：别让造型太普通。
比如，我们要做一个定位图标：
这是一个很常见的定位图标，在图标网站上一搜一大把，那如何让他变得不那么普通呢？
首先比例上可以做点事情，比如拉长；之后在线条上再做点文章，比如给直线加点弧度；最后就得到了一个看起来没那么普通的定位图标了。
它就是谷歌地图上面的一部分：
方法不止一种，大家可以多思考总结，观察优秀的设计，借鉴他们，然后超越他们！
二、质感的细节
假设我们现在做一个文件管理的图标：
这就是一个细节很少的普通图标，我想在这个图标上面加一些轻质感，如何做呢？
例如转折处加一点高光：
例如纽扣加点真实的效果：
再例如加点渐变折叠的设计语言，来丰富层次：
优化前后的图标对比如下图：
这样看着就显得精致、专业多了！
但这里需要强调一点：由于我的前期风格定位是轻质感与轻拟物，所以加了一些质感的细节；但并不完全适用于任何场景，所以大家一定要具体场景具体分析哦！
三、不要让图标看着灰灰的
有的时候颜色用不好，很容易让图标看起来脏脏的、灰灰的。
这里我们要记住两点，一个是增强主影响与图标背板的对比度，二是主形象一定要尽可能的提亮突出（这个也不是绝对的，特殊风格特殊处理）。
举个例子，下图是一个相机的图标：
这个图标存在的问题就是：摄像头与背景对比不够强，粘在了一起；使整体看起来灰灰的，尤其是在饱和度较高的背景上面。
为了提高对比，要么让摄像头颜色变浅，要么让背景颜色变浅。
我原则第二个方案，把背景颜色变成白色，如下图：
这样看着就好多了。
但是放在纯黑色背景下，我们会发现：好像摄像头的颜色还是有些灰，不够明亮，那我继续将其提亮，如下图：
这样整个图标就做的差不多了。
所以，大家一定要让图标的层次拉开，该亮的地方亮起来，该暗的地方暗下去，大胆果断一点，都是80、90后，咱怕啥！
四、关于风格特点
有些时候，即使图标的造型没有特别惊艳，如果能赋予一个统一的风格特点，也会使图标看起来非常出彩。
关于风格特点，举几个例子，比如颜色：
大空逸_kin 作品
高级灰的颜色就是这套图标很重要的风格特点。
这套图标得风格特点就是和六边形形进行结合。
kidaubis作品
柔和的渐变就是这套图标的风格特点。
如果用户看了你的设计之后，没有任何记忆点，那就基本上是没啥风格特点了，所以前期规划时一定要考虑好！
我们在欣赏别人优秀的作品时，不是随便看看就好了，不仔细分析，很难看出里面的细节，而如果你一直不注意细节，作品怎么可能会精致耐看呢？对不对！
—— END ——
本文由 @杜松 原创发布于人人都是产品经理。未经许可，禁止转载
本文「对设计或交互而言，可以从哪些方面注意设计细节？」转载自网络，作者观点不代表本网站立场，如需处理请联系客服QQ邮箱
人人都是产品经理相关文章
学习提升axure的途径，最常见的无非两种：1、买书籍，跟着书籍的操作练
———— / BEGIN / ———— 摩拜单车推出了5元3个月会员卡的
作者：7哥 全文共 3703 字，阅读需要 8 分钟 ———— / BE
好的设计规范，不仅为产品建立起统一的交互规则与品牌视觉，让用户拥有更好的
作者：水度力子 全文共 4849 字，阅读需要 10 分钟 ———— /
你是什么样的产品经理？我为什么要你？你能帮我做什么？本文用产品面试官的思维去分析产品面试，让你真正的成为产品大咖！场景：A：“您好，我是XXX，年龄XX，学历XX，在校奖励XX，从业经验XX，工作过的公司XX，负责过的项目XX，离职原因XX”。我：“好，你的情况我基本
首先很抱歉，这是一份姗姗来迟的获奖名单。 历时一个多月，小米直达服务测评
作者：朱小磊 全文共 2003 字，阅读需要 5 分钟 ———— / B
作者：文俊 全文共 4364 字，阅读需要 9 分钟 ———— / BE
拉勾网2016年《互联网人才薪酬报告》显示： 运营是一个厚积才能薄发的岗
借助红包这个点，去反推产品，反推对方产品经理的思考过程，最后反推出需求的最根本原因。这是一个反推的过程，而这过程恰恰是学习和分析产品的好方式。8月21日，传了许久的百度外卖出售给谁的消息，终于尘埃落定，饿了么收购百度外卖，至此，外卖江湖的三国杀，转变为两
我们的征途是星辰大海 加入风口上的企业，成就最好的自己 风尖的职位机会，
—— BEGIN —— 在中文的互联网世界里，社交这两个字好像一直是腾讯
一名优秀的产品经理不仅能引导产品的发展，而且能引导公司的发展。同时，他还
作者：平章大人 全文共 2764 字，阅读需要 6 分钟 —— BEGI
—— BEGIN —— 最近有部分同学说，关于产品设计中的异常流程总是考
作者：Endy 全文共 3980 字，阅读需要 9 分钟 —— BEGI
2015年5月，怀揣着“产品经理改变世界”的愿景，我们在广州举办了第一届
作者：夜雨 全文共 1494 字，阅读需要 3 分钟 —— BEGIN
做产品经理那么久了，一直都在复制粘贴以前的任务；忙碌多年却前进缓慢，还要网站后台｜LOFTER（乐乎） - 让兴趣，更有趣
LOFTER for ipad —— 让兴趣，更有趣
下载移动端
关注最新消息
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
this.p={ currentPage:1,pageNewMode:true,isgooglead3:false,ishotrecompost:false,visitorId:0, first:'',tag:'网站后台',recommType:'new',recommenderRole:0,offset:7,type:0,isUserEditor:0,};}