链接 地址 案例 大家好，我是小六。新年开工大吉，祝大家新的一年不改稿，统统一稿过。给大家分享一些可视化设计参考网站，帮助大家提高效率。喜欢文章的小伙伴，动动小手一键三连！！！上期回顾：可视化设计神器第二弹！15个精选神器都在这！大家好，我是小六。阅读文章 > 一、Tableau Public链接地址： https://public.tableau.com/app/discoverTableau Public 是一个免费的平台，可以在线探索、创建和公开分享数据可视化。每天查看一个新的可视化项目专题，里面还有各种类型的可视化形式参考，不管是做大屏还是做仪表盘都是很不错的参考。二、Information is Beautiful Awards链接地址： https://www.informationisbeautifulawards.com/showcaseInformation is Beautiful Awards 是一个可视化社区，一直在表彰数据可视化、信息图表、交互和信息艺术领域优秀可视化作品案例。涉及艺术、娱乐与文化、时事与政治、地点、空间与环境、人物、语言与身份、科学、技术与健康、人道主义、休闲、游戏与体育以及不寻常等领域的优秀案例作品，非常值得一看。三、Observable链接地址： https://observablehq.com/communityObservable 社区是可以从其他社区成员那里发现和学习数据可视化技术的地方。里面非常多的可视化设计案例，非常不错的参考。四、Polygraph链接地址： https://polygraph.cool/projects/Polygraph 是 The Pudding 旗下的品牌工作室 ，专门从事使用数据、初步研究和可视化的编辑。每一个项目案例都非常有参考价值，这里就不一一介绍了，大家可以点击上方链接详细了解。五、visualcinnamon链接地址： https://www.visualcinnamon.com/visualcinnamon 是一个热衷于参与数据可视化和数据艺术的天文学家建立的，里面分享了他对接的工作中的一些可视化实际案例，创作了大量更具创造性的数据可视化案例，而不是局限在仪表盘、大屏等展示形式。给你不一样的设计参考思路。六、ourworldindata链接地址： https://ourworldindata.org/blogourworldindata 包含 297 个主题 3395 个图表，涉及人口变化、健康、食品和农业、能源与环境、创新与技术变革、贫困与经济发展、生活条件、人权与民主、暴力与战争、教育与知识等等方面的可视化数据案例展示。七、shirleywu链接地址： https://shirleywu.studio/一个叫吴雪莉的个人站，里面的案例挺有意思，可以参考参考样式形式。八、即时工具链接地址： https://www.67tool.com/一个实用工具集合，视频、音频、图片、文档、图表、办公辅助、文本工具、数字工具、加密工具、单位转换等等超多强大功能应有尽有。九、图象超级助理链接地址： https://tuuux.com/plugin/download最后给大家推荐一个可视化设计 PS 插件 “图象超级助理”，多种素材组合应有尽有，颜色、大小、字号等各种细节都可二次编辑，可视化图表、组件、地图、装饰组件等一应俱全，超多模板。支持关键词检索，快速定位你想要的内容。欢迎关注作者微信公众号：「小六可视化设计」本篇来源：优设网原文地址：https://www.uisdc.com/visual-design-tools
案例 用户 操作 时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速，很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法，以及其对应的优秀案例：分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。往期回顾：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 一、分割屏幕的布局通过将屏幕的布局进行分割处理，可同时呈现多项内容，让用户自由选择任务主次，同时处理多项任务。分屏设计很常见，但其中的体验细节却依旧值得研究和优化。案例 1 微信在 Pad 端的分屏布局考虑得很周到，看微信视频时支持分屏功能，还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸，体验顺畅，看视频、接微信两不误：案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放，不仅可以在 App 内或外呈现小窗模式，正在播的视频，在被临时打断退出视频后，还可以用音频的方式继续播放：案例 3 微信的新功能，在你阅读文章时依旧能看到朋友发来的微信消息，可以直接在当前页面回复消息，避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”，一会儿再做处理：案例 4 微信视频号改版后，点击视频号下方的博主名称和头像，下方弹窗会弹出该博主的主页和其他视频，而当前正在播放的视频会渐渐呈现小屏播放，视频内容不会被遮挡，既不影响观看，也不影响用户探索该博主的其他视频内容：案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频，既可以听内容，也不影响你继续浏览订阅号的其他内容：二、更容易再续操作产品可以让操作更容易被用户管理和掌控，在被打断后很容易被用户重新再续，给用户足够的掌控感。在一些特殊情况下，几件事可以交替、穿插地处理，同时进行。案例 1 钉钉的移动端浮窗功能，向右滑动退出正在操作的页面时，就会出现添加浮窗区域，用于收录未做完的操作。同时显示出已添加浮窗的内容数量，最多添加 5 个：案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容，在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章，可以更合理地掌控阅读节奏：案例 3 微信读书 App 会在你跳读到其他章节时，在页面下方显示“返回原进度”的按钮，方便你在跳读后回来继续阅读：案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件，页面上方会增加一个类似浏览器标签页的 Tab，你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时，同时又收到了其他的新邮件，去查看新邮件之后，可以通过 Tab 直接回到邮件编辑页面，继续编写刚才的邮件：案例 5 使用钉钉发起会议邀请，如果中途退出，系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示，帮你续写内容：三、忽略非重要操作用户可以选择忽略或隐藏并不重要的、正在进程中的任务，将更多的时间用在其他事情而非无法控制的等待上。案例 1 iOS 系统中，当你在不同 App 之间传递文件时，如果文件过大，弹窗的“取消”按钮会在几秒钟之后变成“隐藏”，用户点击后可以继续做其他操作，并不妨碍后台的文件传输。案例 2 微信在接收超大文件时，增加了“发送给朋友”的选项，你不必等待文件在自己这边下载完成后再发送，可以直接发送源文件给对方，同时下载：案例 3 微信拨打语音的界面，在等待好友接听的过程中，你可以看到对方朋友圈的动态，缓解无聊的等待，也为即将进行的语音聊天提供了话题：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/13-product-design-details-2
画面 视觉 案例 hi，我是鱼先生，不止会设计的 90 后解忧大叔。设计画面平淡无味，是大多数设计师都会遇见的难点之一，那么今天跟着鱼先生一起来学习几个比较实用的版式技巧，希望可以给你带来一些提升。方法就是通过增加画面的维度，从而增加空间感，提高视觉的层次感。更多提高画面冲击力的方法：用超多案例，教你一招搞定海报设计视觉冲击力！强烈的视觉冲击力对于平面设计来说是一个很重要的品质，而关于如何加强画面的视觉冲击力，有一个方法简单又有效，即加强画面的空间感。阅读文章 > OK，开始吧！形式 01：图形类通过处理元素的前后关系，或者元素相互穿插的关系，从而增加画面的视觉层次感。特别是打破大家常有意识形态的时候，效果会更好，比如上图案例中的相框，一般来讲相片不会出现在相框外，那么作为设计师，我们刻意把相框内的人物或元素进行破局处理，这个时候就等于让画面增加了一个视觉维度，原本平淡的画面就会显得更具备层次感。我们继续看一些其他的案例视觉，加深理解：形式 02：文字类在以文字为主题的视觉画面中进行前后穿插，或借助某些元素进行前后关系的建立，让画面从一维到多维的变化，从而提高画面视觉效果。形式 03：虚实结合虚实结合就比较容易理解，利用前实后虚或前虚后实的方式，让画面产生前后延伸的空间感，就像在摄影里面的景深一样，从而刻意塑造出虚实有度的空间层次感。形式 04：制造空间利用文字的透视感，或者某些元素的透视感增加画面的空间感。比如下面前两张案例，左边绿色这张就是利用文字的透视，让整个画面的空间感立马就出来了，再看右边案例中，利用圆环元素从远至近的塑造透视关系，也起到了视觉引导的作用，同时也是他们要走向的方向，其他文字则与圆环元素进行相互结合，也增加了画面的契合度。形式 05：烘托气氛利用光束的点缀烘托，直接的作用就是聚焦主体，产生强调的作用。平面设计是在一个平面上玩出各种花样的视觉艺术，以上的方法其实都是为了让画面在一维视觉上增加维度，从而塑造更好地视觉效果。OK，理论看完了，我们在实战案例中加深理解一下。实战演练案例 01① 我们来做一张画展海报，首先我们先选择了一张图片素材，放置在画面中。② 把图片嵌入椭圆形内。③ 把所需要的文案进行排版。这个时候我们发现，当图片素材完全嵌入椭圆内的时候，整个画面视觉总感觉缺少了一点活跃的效果，发现问题，那我们继续优化。④ 我们就把人物模特的一部分进行处理，造成破局的效果。如下图画面所示：⑤ 最后我们再次放上文案，得到以下案例：这个时候我们仅仅只是调整了头巾的部分，因为头巾露出来之后，形成了圈里圈外的视觉层次感，增加了画面的活跃性。最后我们看一下对比图：案例 02我们再来实践一张画册的案例。常规情况下，设计师都会直接利用图片素材进行板块设计，如下图案例所示：猛一看好像没有什么毛病，版面简洁，但我们仔细去观察的时候，就会感觉画面规规矩矩，缺少一些设计感。没关系，跟着鱼先生继续来尝试调整，这一次我们把汽车进行抠图处理，然后左右两页的颜色进行分别填充，汽车跨越两个颜色之后，看上去就产生了跳跃的视觉性，前后和左右的维度都产生了变化，画面看起来就比原来饱满多了。做到这一步对于大多数设计师来讲已经可以结束了，但是这里呢，我们可以再深入一个层次，因为我们可以明显看出来上面的案例画面还是有些太过于空洞。这个时候我们可以把主体汽车这部分再进行优化，我们加入英文装饰，让整个画面再进行一个层次的加深。完成后如下图所示：这里如果想要继续优化细节，我们同样可以在汽车后面的文字上面下功夫，这里我利用模糊工具把文字局部进行模糊处理，形成了虚实结合的方式，让整个画面看上去更加的饱满。完成后，我们一起看下对比图：写在最后在以上的两个案例中，仅仅通过添加一个维度的技巧，就让画面的视觉完全变得不一样了，是不是既简单又实用的方式呢？设计不是一蹴而就，再小的技巧如果使用得当，都可以起到增加画面效果的作用，大家可以尝试起来了。OK，今天的文章到这里结束了，大家加油！下期见！欢迎关注作者微信公众号：「摆渡鱼生」本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-dimension
作品集 封面 案例 最近看了一圈 新发布的一些作品集，本身质量先不提，光是封面的做法，就让我觉得对治疗低血压有神奇的疗效……鉴于封面对于作品集的作用，以及作品集本身的重要性，我打算单独输出几篇针对它的专题分享，帮助大家做出 “正常” 的作品集封面。今天这篇先从反面案例开始说起，通过这些总结来帮助大家刷新对封面设计的认识，然后再在下一篇分享封面设计的相关思路。更多作品集设计干货：设计师工作需求很琐碎，作品集没大项目怎么办？编者按；平时工作太过琐碎，没有遇到大项目，感觉设计作品集里没东西可以展示？阅读文章 > 一、照片的错误应用第一个要讲的，就是封面中个人照片的错误应用。因为这阵子直播课程中正好看到一份非常有代表性的案例，所以必须先从它开始说起，案例见下图。不知道大家看完有什么样的感受，至少我看到的第一反映，就是它像一份地产、保险、4S 店的销售应聘简历……不是说在封面放自己照片不行，反而我非常建议这么做，但第一照片不能这么拍，第二展示不能这么“小气”。作为设计师，一定不要穿廉价的职业装拍照，因为那在国内的环境下是一线销售的标准装扮。一定想穿西服，也要走偏休闲、定制的款式，但你确定自己驾驭得住（总之就是不建议）？要放自己的照片那就一定要自然，有审美趣味，比如下面这些案例。什么？你说自己不是靓仔美女？这恰恰是审美趣味表现的途径之一，并不是长得好看才能有好的照片，这一方面考验摄影师的功力，另一方面反映你自我的审美要求。比如下面这些长相并不凸出的照片案例：Nigo色部义昭一定不要整得过于花哨，“前卫”过头风险太大，不是匹配的行业的话是很难有好的反馈的。比如过于杀马特、赛博朋克、末日废土，或者干脆拿个武士刀的中二都市机能……觉得实在没有合适的，对长相也自卑得抠脚（是得纠正），大不了不放也没关系。但绝对不要因为觉得自己不行，然后就放个老外的照片。这在我这边收到过的简历和网上看到的案例中也非常普遍，比如下面这些真实案例。觉得自己不行，所以放个鬼佬的照片就行了？这是一个非常离谱的思路，我一直没办法理解这是怎么想的。设计师的作品集就是简历，简历里放照片一方面是有必要的，另一方面可以很好的提升整体的可信度，能带来一些正面的影响。虽然最终关注的是作品质量，不放加分拿不到，但起码不要在这种地方呈现自杀性负分操作。二、字体使用混乱第二种，就是字体应用混乱，不仅使用的字体类型超出合理的范畴，而且很多字体风格明显不搭但强行应用，比如下面这些案例。字放的多，在平面海报设计是很常见，但这需要明确的排版思路支撑，以及对字体类型的合理搭配。尤其在字体选择和参数应用上，存在大量的细节需要关注。比如多数特殊字体正负形的比例很失衡，非常不适合作为大标题。非标题性英文几乎都有字间距手动控制的需要，防止浏览效果太离散。英文数字的字号字重往往需要独立调节才能和中文形成合理的搭配……很多 UI 设计师对排版的理解仅仅是把字放进画布里，随便改改参数，而并没有真正理解背后的应用逻辑。所以导致他们即时直接照抄一些优秀的版式，做出来的设计还是很奇怪。而且想要把画面塞得越满，效果也就越差。封面不是字数越多，字体越特殊，排得越满越好，而是要在非必要的情况下给出足够的留白，塑造舒适的空间感。重申一遍，不是挤满元素的做法不行，而是要做那种设计就得有对应的驾驭能力，不要在你自己没有想清楚的情况下乱抄，这样不仅做起来没简约留白多的设计容易，效果也不会更好。同时，中文的应用上我只建议使用标准的黑体类型，如普惠、旗黑、兰亭、鸿蒙、MiSans、OPPO Sans 等，不要去用一些风格太强烈的字体。尤其是一些免费的标题体，它们大多是针对互联网运营场景开发的营销字体，只会让你的封面产生一股廉价又浓郁的互联网营销风……三、使用奇怪的3D元素因为对平面认识的匮乏，很多人在设计的时候想放主体元素，就会找插画或者 3D 元素。但往往这些素材的质量非常差，根本无法作为一份设计作品集的封面主体元素，比如下面案例。还有一种情况，就是有一些人用了一些比较不错的素材，然后立马有一大群人跟着一起用，导致同类素材泛滥。比如下面的 3D 胖手，用我在招聘中的学员讲的话就是，10 份作品集一半里有这个东西。3D 和插画实际上和 UI 项目并没有太大的关系，要放也要证明自己有专业的输出能力，而不是放一些低质量作品、素材，在第一页告诉观看者你 3D 或插画能力是不及格的。完全不建议在方面出现这些元素，最多使用一些科技化的、没有复杂轮廓的渲染元素，来提供相关氛围。四、烂大街模板的使用经常在这几个网站看作品集的话，应该下面这些案例没少看，都是我从不同作品集里截图出来的。很多人以为的作品集就是买个模板，改改字，或者演都不演一个字没动就完稿，这是没有意义的。这种直接套模板的方式满屏输出着 “敷衍” 的态度。可以直接给一个定论，直接买网上模板，还是完全跟着教程做，或者直接模仿已经是大路货的封面，是没有任何前途的，对于专业的，经验丰富的设计团队来讲，看到封面就可以关掉了，没有往下看的必要！五、矩形元素滥用套娃还有个特别奇怪，或者说不应该发生的，就是很多封面喜欢“套娃”，在里面画矩形框，比如下面这种。我们正常在电脑上看一份作品集，就是弹窗模式下查看，它本来就有个外部窗口。然后再这个窗口内，再强行画一个窗口，只会让整体的展示更局促、小气、业余。这和前面说的问题类似，封面一定要做好空间的管理，减少这种不必要的分割，通过留白来提升页面的展示效果。六、流行风格的滥用UI 圈子每一阵子会流行一种平面风格，原因是 UI 设计师整体的平面水平不足，所以总是要在某些优秀案例问世后一窝蜂的“致敬”。日常练习没关系，但作为作品集带有个人印记的内容上，完全不建议大家模仿流行的风格。即使你觉得别人做出来的效果好，但只要用的人多，就绝对不要去跟风。比如这两年比较流行的酸性风格、真空包装袋、毛玻璃等。这种直接跟风的做法也非常容易拉低整体的分值，尤其成熟的设计团队会觉得套用烂大街风格，那么该设计师毫无个人积累和个性，会抗拒接收这样的作品集。建议所有在做作品集的同学，在国内互联网上看到别人的作品集，尤其是高热度的，还是很多人都那么做的东西，直接放弃和他们做一样的风格，因为那种不是第一批做的跟风者，是吃不到螃蟹的，徒增反感。七、没有原则的色彩应用还有色彩的问题，很多封面的用色处于没有理由的激进，完全没有专业设计师作品集该有专业感和稳重，让人觉得非常的浮夸。或者缺乏主色，颜色呈现得很混乱，没有办法构建一个完整的画册视觉观感。封面的色彩应用一定要控制色彩数量，不要想着做成五彩斑斓的黑，或者使用了一些国潮、赛博朋克才会用的激进霓虹配色。我们的作品集是 UI 作品集，不是平面、品牌、电商作品集，而且只有面向这些潮流领域的设计师作品集才有场景做成这个样子，尤其是 B 端设计师这么做只会让人觉得非常不稳重不专业！确保你的封面有主体的颜色，且除了图片的用色数量尽量控制在 3 种以内，才能体现稳重和秩序。封面的配色是要在后面的展示页面中有关联的，所以尽量在完成整体设计后再回过来做出调整，可以比较好的保证整体的统一性，提升观看者体验。八、用力过猛虎头蛇尾很多人也意识到作品集封面的重要性，所以会花很多精力去处理它。确实有一部分作品集的封面完成度是不错的，也感觉出来花了非常大的精力，但后续的内容完全跟不上封面的质量……这个就不找图例了，需要大家自己在网站列表中看那些封面做的特别吸引人的作品集，点击进去完整看一遍感受一下，就会发现有很多作品集实际内容不尽如人意。如果封面一开始投入的精力过多，拉起了我们的期待值，那么面试者就会对后续的内容有较高的期望。但如果后面的内容页面设计明显出现断层，那么这个失望的情绪就会被放大。以及因为这种落差，会认为封面是不是你直接抄了优秀的作品不是自己完成的。一定要记得封面是作品集整体的一部分，而不是一个独立设计的作品，在投入的精力中必须确保前后内容的统一和一致性。结尾以上就是关于作品集封面常见问题的总结了，建议大家多在相关网站多浏览作品集的列表，体会下收简历的人的心情。你们就会明白，大多数设计师找不到工作不是没有原因的，很多人的作品集从封面看到的那刻起，就可以直接关了，压根没必要往下看！作品集是需要很认真和严肃对待的东西，但是很明显很多人没有想明白，所以不要光抱怨外部环境，好好从作品集出发作出优化吧！我会在后续更新封面设计的相关思路，敬请期待！我们下篇再贱～欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/cover-of-portfolio
用户 案例 操作 长久以来，我们一直强调 B 端设计，最重要的输出产物不在于样式，而是交互。优秀的交互设计可以显著的提升操作效率，更快完成工作任务，从而提升经济效益。但是要怎么讲清楚它是很痛苦的一件事，理论上的交互原则，和真实工作场景遇到的困难很难匹配。大家会有这种感觉：看再多的分享和原则，也做不好交互。所以，我们要来探讨一些 B 端交互的基本要求和特点，下面用一些近期的案例做简单的剖析。在 B 端项目中，所有的工作目标，都是围绕在更好的解决业务问题展开的。一个完整的业务需求，必然是包含大量的组件、流程的共同参与。我们在设计内容的过程中，往往会掉进过度关注某个单元的细节，而忽略整体对整体业务目标、重点的认知，出现本末导致的问题。所以，针对每个局部的组件，我们一定要思考它在流程中的重要性，使用频率，使用场景。比如前阵子分享的学员案例筛选组件，我们将左侧露出的筛选项进行折叠合并，修改成了右图的结果。光盯着组件看，可以明确的说案例 1 必然是更好操作的，因为筛选内容可见，操作步骤较少。如果你只想到这里，那么必然是没法处理好交互的。我拿到这个案例的第一件事，实际上就是搞懂这个页面是干嘛用的，处理什么业务，以及了解目前用户的一些基本诉求。最后得到的结果，就是操作员来到这个页面，主要查看异常的状态和它们的详情。因为列表本身是根据时间排序的，异常状态没有处理的也通常都在前面。所以，操作员直接查看列表是最高频的操作，并且表头因为支持排序切换，也是高频操作的内容之一。反而顶部的筛选，只有遇到一些特殊情况，需要将历史中的某些条目筛选出来，才会用得到。在正常使用过程中是会被自动忽略的。而且目前用户的主要反馈也出现，顶部的筛选过高，每次进页面都要下拉才能看见列表，操作极为不便。基于这样的前提条件，我就一定会压缩顶部筛选区域的高度，确保下方列表的大多数内容在一屏内可以显示完。那为什么还要改里面的筛选方法而不是简单做个折叠和展示？还有一个全局化的考虑，就在对一个筛选组件的设计，就是其它所有页面筛选组件样式的基础。这个页面我们只放了七行，其它页面最多的筛选项最高多达一倍。即使做成折叠的，展开后甚至一屏都放不完筛选内容，比如下面这样的示例。并且，筛选完之后，这个面板折叠还是不折叠，折叠了的话看结果列表就看不到前面选了哪些。不折叠同样也基本看不见，因为列表需要下拉，把上半部分内容隐藏。所以，最终进行多列排序的设计，就是舍弃最“初步”的便利性，为业务目标让步。同时基于全局的可用性做预判，对一个低频操作的模块减少过度信息的露出，让用户可以高效完成 1 级信息索引（找到选项标题），然后再去做 2 级筛选。在长期以来的 B 端项目实践中，我都始终践行业务优先的原则，检查处理的方案能不能满足我上面分析的特征，只有满足不了业务需要，我才会去修改它。而不是虚空树靶，光靠各自的 “觉得” 来讨论，这样的讨论不仅没有质量，而且不会获得有效的结果。做产品和交互，对用户的理解优先建立在共情和同理心上。了解用户，最好的方法不是你做了科学的实验，应用完善的理论，而是你自己成为用户！可惜很多设计师都想不明白这个道理，过度追求数据或者调研方式。在上一个案例中，也有同理心应用的部分，自己作为用户知道这个页面操作的重点，在权衡利弊的过程中你自然知道应该选择什么，放弃什么。下面再看另外一个学员案例，也是表单，但是是需要用户完整填写的大量表单内容。在右侧的改版里，我把单从横排改成了竖排，从原本省空间的方案改成了不省空间的方案，和上一个案例截然不同。为什么？看看下面的细节先。如果真当自己是用户，看一遍自己做的设计，给自己定个操作的目的，并尝试在这些内容做选择，那么你选择到这种模块，就必然开始混乱起来。上下的内容离得太近了，比左右同行同级元素还近，这样会极大损害信息识别的效率和操作顺畅度。尤其当我核对前面单选项是否选对的情况，阅读起来更是痛苦。而我们把内容进行上下排序，将亲密性表现得更合理，那么操作的舒适度就会显著的上升。至于多出来的高度，作为用户你沉浸在表单输入过程中，为什么会关注多出来的那点高度？好吧！如果一定要用理论方法来分析，那可以堆砌一堆的理论解释：亲密/对齐性：上下排序的亲密性可以完美符合左对齐视觉引导，以及不同模块跨度的划分菲兹定律：左对齐的选框位置距离极短，除了滚动外鼠标就负责上下移动，而不用全屏幕流浪心流理论：用户视线不要轻易被打乱，就容易沉浸到完成当前目标，而不是关注怎么设计美观……理论可以拿来在 PPT 里强化自己方案的说服力，但前提是别自己绕进去，纯粹通过理论的堆积来认为自己设计的是合理的。再看看下面这种表单页的案例，多列设计来让画布被填满的设计，思考下到底是为了设计而设计，还是为 “用户” 设计？第三点，就是有效的整理需要的设计模块的字段信息。从产品层面去理解该模块的诉求，信息层级，状态类型。有很多复杂的组件，如果我们直接动手画，是行不通的。主要问题源自需求层面的复杂性，不仅字段非常多，而且它们是有层级关系，集联性质。比如再看下图的学员案例，一个在公司平台上传公共文件时，进行素材权限编辑和信息管理的组件。在这个模块中，包含的功能和可操控的元素非常多。从整个面板的标题开始，作为最顶层的信息，向下可以延伸出不同的子模块和对应的二级标题。每个二级标题下，还有不同的下级元素。我们不仅要有效处理这些关系，同时还要分析权限的字段内容，它们包含了：权限类型标题、对象、对象权限、选择、删除、添加。这时候，我就会用文字的方法把这些信息整理出来：然后，重新梳理不同层级结构，再完成不同状态的兼顾，缩减无效的按钮，尽可能降低信息的复杂程度。下面是改动后的案例（只做了原型）。交互的很多工作并不在设计软件上，而是要跳出软件和设计稿，去理解实际的产品需求、信息、字段。除了一些树状图外，必要的交互流程图是无法省略的。多种工具导图和原型的共同作用，才能帮助我们在复杂的需求环境下 “试” 出足够多的方案找到最满意的那一个。最后，就是自己也拿不定主意，或者你的方案就是说服不了产品、开发的常见情况，怎么办？那就是真实的做测试和投票！B 端比 C 端最大的优势之一，就是如果真要做用户调研和测试，容易了无数倍。不管是给客户做方案还是做公司内部项目，你的目标用户群体是非常固定而且容易联系的。当我们在交互方案上僵持不下的时候，就不用纠结或者通过开会的撕逼来做决策。而是把这交互方案的高保真原型做出来，给对应的目标用户做测试。比如上面表单的案例中，新老两个案例，你都可以快速用 Axrure 或者 Protopie 等软件实现高保真的交互原型，1:1 还原真实操作场景。你可以从下面制作的初步案例中查看操作结果：请在电脑端打开，才能还原真实操作：原案例： https://cloud.protopie.io/p/f20dc7a0eb改后案例： https://cloud.protopie.io/p/42c51829cd这时候，方案哪个有效不就根本不用争论，交给目标用户去使用和投票不就明了了嘛？B 端交互方案的决策权，可以由目标用户来主导，而我们要做的就是去建立这样的决策机制，如何快速的来生成不同交互方案，并让目标用户决断。不要再在无穷无尽的 “你觉得”、“我觉得” 中损耗项目进度了……以上，就是一些 B 端交互设计中的思路实际解决流程。这些也是我最真实的工作状态下解决问题的方案，所以并不想写一大堆理论来欺骗自己了（狗头保命）。希望大家能从中获得收获！掌握表格设计，就掌握 B 端设计的半壁江山！（5000字完整版）虽然我们按节奏只剩最后一篇交互部分的，但感觉前面有不少需要优化的地方，所以干脆重新整合，一起优化一遍！阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/improve-sense-of-use
表哥
落霞与孤鹜
在路上
