分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
早在平面设计开始之初，就有对“栅格”的使用记录。（不过那时不叫栅格，而叫网格）因为印刷机器以及切割工具的限制，导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失，因此出现了当时非常火爆的《平面设计中的网格系统》一书。
虽然这是一本非常老的书，但是设计本身就是相通，将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义。
而在设计（网页端、桌面端）产品时，对于空间上的理解，一直以来都是令人头疼的问题。
我们将屏幕当中的设计空间分为 横向 与 纵向 两个维度：
横向：
由于大多数显示器都是宽屏的形式，导致我们大多数页面内容都是通过横向的方式进行列式排布，也就导致纵向导航、二三级内容分布较多；而市面上所要兼容的横向尺寸较多，大致分为：1920、1440、1366、1280，而怎样将如此多的尺寸，摆放不同的元素，这仿佛才是设计的难点。
纵向：
屏幕的纵向的空间同样十分关键，当内容在横向无法满足时，则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性，纵向的内容通过滚动条进行收折，进而实现兼容。
前面说了这么多，我们来聊聊栅格的定义。
栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于 图标与文字 间隔的小型元素。
这里有两个重要点：
横向排布：代表着栅格的用法，这也是为什么栅格都是一列一列的原因。
用于大型区块：不是任何内容都可以用栅格，比如在 卡片当中的图标、文字，更多是要分析整个卡片，将其看作一个整体，如上图。
在一个常见的栅格当中，一般分为 页边距、水槽、栅格宽度：
页边距：是栅格与外层信息的保护区域
因为在整个栅格系统当中，除了栅格之外，往往还会有其他的内容进行展示（如上上方图，栅格日常的使用页面），而我们正好可以通过页边距的方式，将其进行区分。我们以常见的B端界面为例，通过页边距可以将侧边导航与内容页进行区分，保证页面间的亲密性，常见的页边距尺寸一般为 20px、24px。
水槽：是确定栅格宽度间的固定间距，通常是帮助栅格内的元素进行更为合理的排布。
水槽目的就是为了统一元素间的距离。比如现在页面当中有两个卡片的内容，而使用水槽，我就可以将这两个卡片的内容，确定其间距（再次强调栅格用于确定横向内容）方便栅格当中元素的信息排列。
栅格宽度：是栅格当中内容所占的基本宽度，一个栅格宽度往往是通过 内容宽度、页边距、水槽 排除过后所剩的宽度平均得出，一般会分为 12栏、24栏 两种方式。
栅格宽度的确定，其实就是一个数学题，先给你一个公式（不建议使）：
(A×n) – i = W
A：一个栅格单元的宽度；a：一个栅格的宽度；n：正整数；i：水槽宽度；W：页面的宽度。
虽然公式好像是万能的，但我不喜欢死记硬背，来深入讲一讲这个公式背后的逻辑和使用方法。
以1440的页面为例，通常B端产品左侧会有一个导航菜单，假设为 200px，因此整个栅格的内容页则为1440 – 200=1240px。
然后设定页边距宽度为 24px，一个栅格会有两条页边距，剩下宽度则为：1240 – (24*2)=1192px
接着设定整个栅格为12栏，水槽宽度为8px。因为水槽位于 栅格 的左右两侧，也就意味着水槽的数量会比栅格少一列（别问为什么，问就自己去下面图片数一数）也就是1192 – (8*11)=1104px
最后因为在水槽已经确定栅格为12栏，整个栅格的宽度则为：1104/12=92px
如果还不能理解，建议跳到开头，再看一遍。
整个栅格的顺序不能乱：页面宽度→页边距→水槽→栅格宽度。因为我们的栅格一定是从大到小，从外到里，不然做出来的内容很容易无效。
将元素摆放在栅格中，还需要注意起始位置与结束位置。这里教你们一个口诀：起始在左，结束在右；换句话说就是元素的起始位置必须放在栅格宽度的左侧（也中的红线）；
结束位置必须放在栅格宽度的右侧（图中的蓝线）
这样的方式也是为了避免很多设计师知道画栅格而不会用栅格，出现一些低级错误。
关于栅格的定义就先聊到这，下期来与大家讲一讲关于栅格应用当中的自适应布局、响应式布局，以及其中的断点等内容，我们下期见～
原文链接：CE青年（公众号）
作者：CE青年
转载请注明：学UI网》B端设计指南 – 栅格的定义
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对于本能层，设计师需要在符合功能需求的前提下，尽可能的给用户带来听觉、视觉、触觉的感官刺激，极力去促成用户与产品的 “一见钟情”。
案例 1 ：App Store 的卡片推荐做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名为：熊帮手。
案例 2 ：微博长按点赞按钮，可以选择不同的点赞状态。图标还是动态的，很有趣。
案例 3 ：淘宝双十一预热，首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样，烘托氛围又打了广告。
案例 4 ：微信拨打语音的界面，在等待好友接听的过程中，可以看到好友朋友圈的图片，缓解用户等待时的无聊，也为即将进行的语音聊天提供了话题。
对于行为层，设计师需对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。
案例 1 ：当苹果公司发现用户最近在官方渠道购买了新的 iPhone ，老 iPhone 的设置页面就会给出提示，让用户为新的 iPhone 做好数据迁移准备。
案例 2 ：iOS 系统后台在看缩略效果时，会将用户的敏感、私密的信息的 App 页面进行模糊处理，保护用户的隐私安全。
案例 3 ：在屏幕很暗的情况下，打开微信支付二维码，屏幕会瞬间亮起，便于商家扫码付款。
案例 4 ：货拉拉在展示搬家车辆详细信息时，使用了剖面图，并模拟了不同搬家场景下的家具内容，让用户更好估算车辆空间。
对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。
案例 1 ：FigJam 是一款来自 Figma 的多人协作在线白板工具，可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能，比如：当两个人同时长按 “H” 键时，就会出现 highfive（击掌的动效），非常适合当设计师达成共识时使用：
案例 2 ：小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉，所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐，让人会心一笑。
案例 3 ：饿了么在异常天气下通过在界面上增加天气的元素，让用户看到外卖小哥的辛苦，使用视觉和内容共情，唤起用户的同理心，降低用户因外卖迟到而做的投诉和差评。
案例 4 ：QQ音乐上线了宠物功能，一共有五个品种的宠物让用户可以选择领取，多听歌能喂饱宠物，然后送它出去参加演唱会或者和好友进行互动。
原文链接：长弓小子（公众号）
作者：元尧
转载请注明：学UI网》案例锦囊｜交互设计中「情感化」设计优秀案例（二）
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
差不多主义：凡事都觉得差不多就行了，不是特别注重设计细节。
如果每个部门都是“差不多主义”，我来给你算一下最终实现的产品会变成什么样（我们就按还原度80%来算）。产品 → 交互 80%，交互 → UI 80%，UI → 研发 80%，最后则：80% x 80% x 80%=51.2%，最后实现的只有预期的 50% 左右，这个产品还怎么用？
每个设计师都要成为“处女座”和像素眼，如果你只是为了想快速完成工作而搞出粗制滥造的设计，你的价值也很难体现出来。而且现在互联网已经发展的比较成熟，很多产品差异化并没有很大，如果你连细节都处理不好，要你何用？要在有限的时间内做出更精细的产品，打造完美产品，拒绝粗制滥造。
而且近几年很多公司对【产品体验】越来越重视，比如我司就把前端部门改名为体验技术部，旨在全员打造高质量、优体验、重设计的产品。研发都注重体验了，你再“差不多”就真的差多了~
同时，有的设计师不善言辞，在对接需求或设计澄清的时候不会坚持自己的想法，有时候就算自己是对的，也会在其他人强势的情况下败下阵来。所以作为设计师一定要敢于力争，强大的沟通能力也是职场晋升的一个重要表现。
抄袭：你直接叫我名得了。
开始之前我们要区分一下抄袭和借鉴的含义。我专门查了下词典，根据《现代汉语词典》的解释：抄袭是把别人的文章、作品私自照抄作为自己的去发表，并且实质性相似；借鉴是与别的人或事相对照，以便取长补短或吸取教训。区别在于前者是“照样抄录”，后者是“参考仿照”。
把借鉴当做寻找灵感对任何设计师来说都是一个自然的过程。
学过美术的都知道，画画前期都是需要临摹的，这个就是借鉴、学习的过程，如果你拿临摹的画去商用，那肯定会被打~
我们经常做的竞品调研就是借鉴的过程，去了解竞对都有哪些值得学习的地方，哪些地方做的不好不适合我们，我们可以创新的。
不要直接把竞对的产品拿过来抄，一些初级产品经理就会经常这么干，看竞对有什么，他们就抄；竞对是怎么处理了，他们就怎么处理。永远跟不上市场的脚步，别人都产品化了你才开始搞，吃屎都赶不上热的~
设计真的很辛苦，我们可以把别人的作品作为“日常练习”，去从中学习原作者是如何思考、设计的。如果你拿他做除学习外的任何其他用途，都是不允许的。
其实设计已经发展到了几乎不可能 100% 原创的时代，我们就是要把所学所见混在一起，创造出一些新的设计。解决方案永远不止一个，思维够活跃，就有千万种可能。
在数字时代，你拿别人的设计搞事情，是藏不住的，我平时发一些“曝光抄袭类”文章的时候，浏览量比平时都要高很多，大家对抄袭还是很关注的。
平时我在面试的时候，如果你是“拿来主义”，一眼就会被看穿的，不要问我怎么看出来的，看多了你也就能一眼望穿了。
借鉴总是好的！但不要复制TA的风格或元素，试着创造你自己的风格和想法，这样才是好的借鉴形式。
这种“职场好人”性格其实是非常可怕的。不是所有的需求都是合理的，也不是所有的需求你都能做。但只要你接下了，你就要负责到底。
新手容易犯的一个错误就是：不会评估工作量，leader 给你工作的时候他会有个时间预期，但有时候也不是完全准确的，你要自己评估在这个时间内是否可以完成，完不成的话就要 say no，重新规划时间。
还有一个比较容易犯的错是：leader 给你任务，你为了凸显自己工作效率高，来几个需求接几个需求，完不成的话就自己硬扛着熬夜加班加点，虽然说这样可以多接触需求快速成长，但长此以往，如果有个需求加班加点都搞不出来，你又承诺了没问题，最后没完成导致研发延期了，只能你背锅。
要适当的合理安排需求，不要工作一年，加出来三年工作经验，你这是卷谁呢？
在设计澄清的时候，别人反馈的问题做记录，然后思考合不合理，不要一有质疑声你就觉得自己的方案不行，就改改改，有的质疑是合理的，有的不合理，你要有判断，设计决策你来把控。
平时自己做好需求的时间规划，细化到小时维度，这样别人再问你有没有时间接需求的时候，你就可以理直气壮的告诉他有 or 没有。
还有一个需要注意的就是，跨部门的上级找你做东西的时候，一定要让他找你的直属 leader，保证需求的统一入口，这样对大家都好。之前我部门就有个设计师，别的部门领导就老直接找他做东西，然后回头我们老大找他要之前任务结果的时候，他才说没完成~
摸鱼法则第一招：我很忙，需求往后排~
产品化的界面可不是你喜欢什么就设计什么的，要考虑整体风格。尤其是 B 端产品，风格统一和样式延展性是必要考虑的因素之一，你可以有个性化，但不要跟现有风格违和，适合的才是最好的。
当然了，这么说不是让你不要创新，是在原有地基之上创新产品。你设计的再好看，红杏出墙了有何用？新手和老手的区别，在于一个只关注当下，一个考虑全局。初级只会把当下做的尽善尽美，活灵活现；老手会在保证全局完整性的前提下最大化的产品创新和易用。
每年流行的设计风格是不一样的，专注视觉展现的产品来说，可以追随设计潮流，展现最新的设计风格是没问题的。但是像 B 端产品，风格迭代是要有时间周期的，而且大部分比视觉风格的周期要长，所以每次大改版的时候，要考虑未来的设计趋势。
刚才我也提到了，最佳方案永远不止有一个，找到适合自己产品的就可以，如果有一些方案都觉得不错，可以做 AB 测试，选出最好的方案做产品化。
鼓励多看、多学，自己思想加工好了融合到产品中，而不是一味地直呼：这个设计真 NB！我也要用！
字面意思很好理解，之前我们都说设计师是感性的，但是当设计与商业结合，就不能是纯感性的了。任何的产品设计都是基于数据、基于市场需求。我们大部分设计师都不是艺术家，都在为连接商业而努力。
而且设计师也在向理性化慢慢发展，拿设计师的价值来说，之前是很难被体现出来的，现在因为和商业结合，价值慢慢的被体现出来、慢慢可量化了。
我们在做产品设计的时候也是这样，基于调研和分析来做产品，而不是天马行空，想到什么做什么。设计从感性逐步走向理性，也是一个成长的过程，一切以结果为导向，善用理性思维思考问题，会更让其他人信服。一切设计都有理有据，和别人 battle 的时候也不怂~
ps：在和女朋友交往中恰恰相反，切记~切记~~
一切设计都是以结果为导向，YY 出来的飞机稿只能送到村东头的厕所里。我们在脑暴设计方案的时候，一开始都是天马行空，想到什么就写什么，但是最终都会聚焦到产品上，缩小聚焦点，最后产出可落地的方案。
设计师的创新能力是很重要的，为什么企业在招人的时候，会更看重年轻一些的呢？因为他的脑洞是打开的，有更多的 idea 迸发出来。如果你只是循规蹈矩的维护产品迭代，迟早会被淘汰。
设计本身就是一个开阔脑洞的一群人做事情，所以早些年设计师的价值是无法被量化的，近几年都在讲量化指标、结果导向，设计师的价值也慢慢的被量化出来。
一个好的产品设计师输出的方案不一定是最完美的，但是绝对是在能落地的基础上接近完美的。不够完美我们可以再优化，如果一直停留在 YY 层，永远不能落地实现，那你的价值何在？
我相信大家在面试的时候也都感受到过，线上作品远比飞机稿要重要得多，因为他可以验证你的方案是可行而不是你自己 YY 的，公司招你来是让你有具体产出的，不是来让你当艺术家烘托气氛。
我们经常会在大胆创新和为了功能上线的边缘试探，哪怕是多一点点的设计元素加进去，也是我们努力的结果。
要记住，我们是设计师，在飞翔的时候看清边界在哪，我们是带领世界品味走向的一群人，可以创新不要妄想。
最好的设计就是不用设计，最好的设计是简单的。
部分设计师在出方案的时候，为了凸显自己的设计能力，会有意无意的增加一些装饰元素设计，然而页面的承载量是一定的，装饰性的设计过多会直接影响用户找到页面中的重要信息。好的设计不需要过多的装饰，苹果的极简风就很棒，一直沿用至今。
其实现在产品上并不是装饰的重灾区，作品集才是！我们团队在招人，每天能看到大量的简历，确实有很大一部分人为了凸显设计能力，把作品集做的五彩缤纷，整成了大杂烩，而且装饰性的元素、样机比以往工作项目的占比还要多，这不就喧宾夺主了吗？这样的作品集基本就无缘了~
在设计之前，一定要了解最终目标是什么，然后基于目标再拆分行动项，把不必要的内容直接砍掉，用户在浏览页面的时候，有效时间就 3 秒钟，3 秒钟没有找到自己想要的内容，就会流失。
我们只会吐槽老板的那句：“放大放大再放大”。其实深入想一下，他只是想要突出一个点而已~
不要捡了芝麻丢西瓜。
设计中有很多很多的问题，我们也都是在不断的摸索中成长，今天给大家分享了几个典型的“罪”，希望引以为戒，哪怕其中一点对你有帮助，也不枉码这么多字~
今日金句：
在非洲大草原上，无论你是狮子还是羚羊，每当太阳升起，你唯一要做的就是奔跑。
叮铃铃~~下课！
原文地址：友设青年（公众号）
作者：Luckgg
转载请注明：学UI网》设计的「七宗罪」
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“不行，这个必须在首页！另外我还有俩新业务入口，你想想办法”，业务方出于对流量的考虑，总是希望做加法。
“别整那么多没用的，我就想找个xx，剩下从来不看的”，用户出于效率体验，总期望做减法。
加减之间，是业务与用户对立而尖锐的需求，同时也是多类型服务产品首页设计的重难点。今天，就以“58首页设计”为例，与大家谈谈解题思路。
以58为例，一方面，业务工具属性强，且用户耦合性低。说人话就是，用户都是来找工具的，但由于AB业务关联度太低，用A业务的用户几乎不会用到B业务，AB业务分别拥有独自用户群。这也就造成用户期望更高的推荐精准度，页面上任何一个无关信息都是干扰，都是对连接效率的打折。
但另一方面，平台上的业务很多，还都想在首页曝光。而且随着各业务设计师的不断努力，连接的形式也在不断丰富，视频、直播、VR，从业务贴到聚合推荐，层出不穷。首页面临更大的信息承载压力。
所以，这类型产品首页最大的挑战，就是“多业务的曝光需求和用户的精准连接之间的矛盾”，如何才能在推荐技术不变的情况下，通过设计来应对挑战呢？
既然是信息传递和收取之间的矛盾，那我们就从“人-场景-信息”的对应关系入手，分析信息在不同场景的优先级和适合的颗粒度。
人-场景-信息优先级和颗粒度
1、用户分类
根据用户需求分为三类。
1）预装用户：非自主下载，不了解产品功能
2）服务需求用户：使用相对固定的服务
3）内容需求用户：获取本地或相关服务信息
2、按照用户区分场景需求
1）预装用户：建立产品认知、保留用户不卸载
2）服务需求用户：更有针对性的服务展示，尽可能少的干扰信息
3）内容需求用户：更多类型的内容展示
3、按照场景定位信息的优先级和颗粒度
1）预装用户：
采用运营曝光策略。保留一级主服务入口，帮助建立产品认知。同时曝光更多内容信息和留存向的运营功能，以提升留存率。
预装型用户信息
2）服务需求用户：
采用目标服务曝光策略。保留一级业务主服务入口，方便业务切换。但扩展目标服务的二级信息曝光度，用以缩短路径。同时增加动态服务模块，来跟进用户动作，服务于用户。
服务型用户信息
3）内容需求用户：
采用平衡曝光策略。保留一级主服务入口，方便业务切换。同时扩展内容曝光度。
1、搭建扩展性框架：调整为顶部tab结构，释放更多定位信号，增加曝光渠道。
原腰部tab是对“原首页”内容的划分，现将整个“首页”置于第一个tab下，后续tab内容将与“首页”并列，从而释放更多独立的曝光渠道。
2、使用更灵活的组件：变形金刚与瀑布流。
首先，金刚位是一级服务入口的集合，且处于首屏上部，是非常好的建立产品认知的模块。将其原有打散在15个位置上的服务，按照大类聚合安置，更容易传达产品的主服务是什么。
金刚位结构对比
其次，为了应对用户精准简的需求，金刚也可以做灵活变形，曝光更多目标服务的二级选项。
变形金刚位
而瀑布流方式也为更多样的服务连接形式提供了承载能力。
列表与瀑布流
3、丰富的信息容器：
设计包含图、文、图文、VR、视频、聚合类目、动态服务模块等信息聚合方式的瀑布流卡片，同时加入即时推荐功能，让瀑布流具备包容和灵活的特性。
4、整合平台的运营能力：设计平台级留存向运营中心。
以往，各业务线运营功能深藏在业务页面中，用户往往需要通过较长的路径才能接触到运营功能，且用户也并不能发现平台上所有运营功能。这种分散式分布的方式，使得运营吸引力和留存能力上都打了折扣。现将所有业务的运营功能聚合，打造平台的运营中心，使发现路径更短，聚合吸引力更强。
原路径&现路径
从依靠推荐技术让内容适应用户需求，到设计灵活可变动的组件来适应chang场景的信息承载，我们希望可以在产品和用户需求的矛盾中寻求更优的平衡点。
原文地址：58UXD（公众号）
作者：环铁艺术家
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
开始学习啦！
输入文字。鼠标右键单击，选择变换——对称，之后选择水平，并点击复制。
把文字镜像复制一个。
整体旋转90°，并调出符号面板。选中文字，鼠标拖入符号面板备用。
用椭圆工具制作一个正圆
之后选择效果——3D——凸出和斜角。勾选预览，调整角度和凸出厚度。
之后点击贴图，勾选三维模型不可见，选择第3个面，符号选择我们刚刚拖进去的文字，也就是新建符号，点击缩放以适合，让文字贴合画面，点击确定。
再稍微调整角度，调到合适的位置，就可以了。
之后对象——扩展外观。
右键取消编组，再右键释放剪切蒙版。
这样就可以随意更改文字颜色啦。
看起来步骤很多，其实操作起来还是很简单的。everybody，学起来啊！
那小分享就到这里吧，下期再见哦~
原文地址：诗人星火宇宙（公众号）
作者： 星火君
转载请注明：学UI网》超喜欢，这个AI小技巧！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
s
另一种流行是关于星号和星号衍生图形的元素，星号在拉丁语中的意思是小星星。无论是五角、六角或是八角、这个符号元素都会给人留下深刻的印象。太阳、星星、花朵、火花，星号的衍生图形可以表达的意思比你想象得更多。
a
对四边形进行四等分，作为一个容器或者说框架来进行设计很容易表达多样性而同时又具有统一的秩序。但是要注意内部元素的简化和整合，否则设计会散乱而牵强。
这个风格很有趣，很难去定义，但是你一看就能懂了，它的特点很明显。往往就是伴随着一个路径的转变，可能像一条扭转的丝带。通常可以表达连续性的同时又具有转换性的意味，就像某个重大时刻或者是一个关键的转变，总之代表一个意义非凡的时刻。
对于设计师来说，没有比圆形更基本的图形了，两个圆形相减得出的圈是十分简单的操作，但是更是一种经典的组合。它可以代表永恒、完美、统一、循环、洞、通道等等，结合渐变或是其它形式的设计，又可以呈现出一种新的意义。总之，这个形状所蕴涵的能量还有很多很多！
原文地址：设计师深海（公众号）
作者：设计师深海
转载请注明：学UI网》2022年LOGO设计新趋势
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
没有想法？没有好的配图？那么就只需要用到万能的黑色和白色，就可以迅速获得一个具有正确构图的“抽象主义设计”。在作品中善用黑白将帮助你理解平衡、留白以及如何使用文字和几何图形。
让我们快速看一个例子，黑白的运用对作品的展示简单而有效，看起来就很高级。
我喜欢用我自己发明的“东西”来测试我的设计，我称之为“平衡方案”。这是一个黑白的内容块方法，我会用简单的几何图形来代替内容。
我的这个方法是让黑色块盖住元素，然后计算左右的黑色面积，大致相等的话，就视为平衡。如果把这个原理应用到界面中，会得到这样的结果：
用黑色矩形替代主要内容，灰色是次要内容。显然你必须靠眼睛观察，但其实我们也可以直接计算。左侧区域的黑色矩形面积之和为（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右边的大矩形面积为（446×446） = 198916px。他们之间的差别很小，误差只有3.9558%
我现在在设计之前不用去计算，经过多年的练习，这种意识就变成了自然而然的事情，因为你的眼睛会感觉到不平衡。
（彩云注：关于视觉平衡，这里其实讲的是视觉面积要大致相同，人眼才会感知到平衡。正好彩云在上一篇文章《为什么你的设计总感觉不舒服？很可能是视觉平衡没有做好》中有分享更全面的画面平衡知识，一定要读一读了。）
我在前面那个例子中是用了一个灰色的背景来展示设计作品，但其实可以尝试不同的元素，这有助于增加画面空间感和背景效果。
但要注意，在一个真实的网站中，页面周围可能没有这么多多余空间，所以这只是一个作品展示技巧。
在上面这个作品展示中，咖啡豆给人的感觉是有深度和有品质的。
不用浪费时间整天去测试尺寸。我建议段落文字尺寸大约是14-18pt，副标题是24-36pt，标题可以用更大一些的字号（我个人是习惯用96-144pt）。Figma的默认大小非常适合排版。
上面的尺寸看起来太小，这也正常，因为你在手机上看到的图，在电脑上全屏看就是正常的。
注意：有些字体比其他字体大或小得多。你应该使用像Roboto这样的标准字体，如果字体大小跟14-18pt的Roboto差不多，那么它是完美的正文字体。
段落18，导航24，标题96
（彩云注：我建议刚入行不久的小伙伴，比如不知道网页规范，移动端规范，一个比较快且行之有效学习规范的方法就是去截图大厂的应用，网页和APP都可以。然后，对着截图直接量就好了，记住人家在做界面的时候，字体用多大，什么颜色，间距，字号等等。记住这些参数，至少不容易出错了。之后，在自己项目中自定义规范，关于设计规范如何制定我之前也专门写过文章，想了解这块知识的一定要去看看《原来设计规范要这样理解，早知道就好了！》）
如果你有一些透明的图片，可以利用它们来设计一些3D图层。如果你没有，你可以使用remove.bg ，网页版AI自动抠图，神器！
作为CSS中的Z-index，你可以将透明图片放在其他项目的后面或前面，给人一种三维的错觉。这对增强设计感来说，是非常有效的。
让我们看看我使用这种技术的一个简单设计。
鸟嘴巴从绿色背景中出界到黄色背景中，强化了整体的视觉冲击力。
明亮的颜色很棒，但没用好的话，往往会导致激进的设计和糟糕的画面。此外，浅色设计（性冷淡设计）如今非常流行，所以让我们开始尝试颜色选择器的一个新区域。
在这个红框范围内可以快速选到一些比较好的颜色
两种配色都没有啥问题，这是一个审美的问题，但如果你想要表达一些更高级的设计感觉，可以尝试浅色。
在我看来，大的留白比太少的留白要好。杂乱满档的设计很糟糕， 呼吸感可以通过多种方式获得：
更大的留白（在上图中指的是黑色区域）会显得更加高级。
通常当我们思考设计时，我们想到的是干净、流畅、清晰的概念。但太干净的画面会让人感到不真实，缺乏质感。
在设计中，噪点是一个很好的朋友，尤其是当你想给你的网站有一个优雅或艺术的外观时。此外，应用一个微妙的噪点让画面能有一个电影级的外观，这种处理手法非常适合用在视频和动态网站中。
你可以使用Photoshop在白色背景上创建2-4K大小的杂色-高斯分布的纹理，然后将它放到页面的最上层。
整个网页中都增加了一些噪点，这让画面整体拥有更强的质感。（这里噪点的效果比较微妙，小图可能看不清，放大可以看到噪点效果）
其实有很多设计的比较糟糕的字体，尤其是那些预装在我们电脑上的字体。可以从网上找到很多优秀的第三方字体，但是要小心:很多字体都不是免费的，没有授权就使用它们可能会给你带来麻烦。不过，别担心，可以从这个网站中找到很多免费的字体 https://alternatype.net
有很多不同的字族和风格，但总的来说，我把它们分为三大类:
常用的衬线字体，如Abril Fatface, Playfair Display, Volux, Chalga等。
无衬线字体包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
这可能是最难使用的技巧，但如果使用正确，它定会大放光彩。
使用几何图形有助于加强概念和布局中的顺序，甚至不需要配图。找到合适的几何形状是困难的，我至今仍然不能很好地掌握它。
一个好用的技巧是将文案中的字母、数字和标题作为几何形状:让它们变得巨大而巧妙，或者使用一些特殊的字母作为形状(A很管用)。（这个技巧非常实用，彩云经常在一些视觉内容较少的页面，用一个大的几何图形比如大写的字母作为底部背景，用很浅的颜色，看起来视觉上就能更丰富了。）
本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium
作者：Lorenzo Doremi
译文地址：彩云译设计（公众号）
译者：彩云Sky
转载请注明：学UI网》老板说作品没有设计感，这10个优化技巧简单有效，你一定要知道
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
狼人杀作为聚会必备推理类桌游非常火爆，“一入狼坑深似海，从此节操是路人”。
一局APP自研时下最火的线上桌游【一夜狼人杀】，这款桌游不同于以往逻辑推理版狼人杀，没有夜里死亡，适合休闲娱乐，满足每个人的参与感，更像是真相探索游戏。
本文以制造积极情绪、打造体验峰值为设计目标，设定游戏世界观，构建游戏故事背景，绘制精美插画，赋能魔力特效，打造标杆小游戏。解密小游戏设计秘籍，接下来让我们揭开小游戏设计的神秘面纱吧。
1
欢迎来到一夜狼的世界，夜幕降临，一群身怀绝技的冒险者们准备在幽暗的森林里度过一夜，明天即可到达森林中心，那里的古堡中有古老家族遗留下的宝藏和数不尽的财富。但队伍中一直隐藏着狼人和他的同伴，他们准备在今晚发动袭击，伺机夺取宝藏。幸存的几位冒险者在夜里暗中施展绝技，要在到达古堡的前一天，揪出隐藏许久的狼人，以保证能够顺利取得宝藏……
结合故事背景设定，以易用性原则为基础，加入情景化设计，在【触发期】制造惊喜感，合理布局，明晰操作，快速上手游戏；【兴奋期】代入沉浸感，黑白场景切换，沉浸游戏；【结束期】凸显成就感，高光时刻，强视效感知，胜负判定。
美式轻写实风格，以游戏背景与角色设定为依托，提取古堡、岩石、沙漏等关键元素贯穿整个游戏界面设计。
卡牌作为整个游戏的灵魂，代表玩家的身份，同时也会做成实物卡牌周边，作为奖品发放给玩家。身份角色设定：共计9个角色，分为三大阵营。好人阵营：预言家、守夜人、捣蛋鬼、强盗、失眠者、酒鬼；狼人阵营：狼人、爪牙；第三阵营：皮匠。
人物形象根据角色职业技能进行设定；设计风格为强氛围感的美式魔幻风格，突出卡牌氛围感并保证人物清晰度，角色比例选择展示腰部以上，角色以正面和四分之三面为主，角色的姿态和样貌根据角色设定具体设计；三大阵营以边框和氛围颜色做区分，同阵营边框（除道具外）不变；卡牌设计包含底框、边框、角色，道具设计在边框顶端两侧，根据角色替换。
卡片设计拆解
三大阵营设计
卡背设计
运用动效手段在游戏的关键节点打造峰值体验，刺激用户游戏情绪，快速带入游戏人物和情节。
[触发期]-[情绪带入阶段]
引发好奇心，极具仪式感的动画（发牌和确认身份）推动用户快速进入游戏氛围，感知游戏。
[沉浸期]-[情绪沉浸阶段]
流畅的操作体验和反馈、场景转场动画提升游戏沉浸感与趣味性。
[结束期]-[情绪满足阶段]
通过整场的悬念铺设，在最终的结果公布缓解来到情绪的高峰时刻。
游戏体验情绪变化曲线
仪式感渲染-模拟牌桌发牌，卡牌掉落的过程，表现卡牌质感和厚度在现实世界中的感受，身份确认动效添加强烈的反转效果刺激用户，不同阵营不同的色彩倾向强化对抗感知。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-727d86881a8f.gif)
游戏体验沉浸感-流畅简单的操作体验和环节转场动画明确游戏进度，降低游戏难度给玩家带来的焦虑情绪，强烈的操控感与烧脑悬疑玩法结合，使游戏体验心流曲线趋于专注、乐趣、享受。动效平缓削弱视觉刺激保证玩家的专注。
游戏体验心流区间
白天黑夜场景用日月升起和场景氛围的变化提示玩家环节的转换，在平缓的游戏感受中自然的进入下一环节，沉浸在游戏线索思考和角色代入中，仿佛一切变化都是理所当然而不会因为意料之外的事件发生导致分心。
游戏体验情绪高峰时刻-经过正常的悬念铺设，最终在结果展示环节用强烈的光感和卡片破坏动效，引导用户产生强烈的成就感和刺激感。并在此环节中游戏情绪达到了高峰时刻。
动效设计过程中运用了粒子插件、辉光插件，以及一些伪3D的技法。为了保证落地效果，技术使用游戏引擎开发，设计师采用拆解组合标注的方式交付研发-动效标注（代码实现，如位移、简单粒子效果）+序列帧&MP4视频。最终达到了80%还原度。
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-227d2907a829.gif)
作为第一款自研游戏，我们分为三条线：UI、主美、动效，紧密协作，联合研发同学还原设计效果。游戏上线后，取得了一定的热度，大大提升了一局的日活跃量。后续我们会继续将业务目标与设计目标相结合 ，逐步迭代，提高游戏体验。
原文地址：百度MEUX（公众号）
作者：文娱平台用户体验
转载请注明：学UI网》游戏UI设计项目分析–狼人杀
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Semi Design 是针对抖音的中后台产品线进行研发的设计系统，其目的也是为了解决 抖音 一系列的中后台产品的效率问题。
而 Arco Design 是基于 字节跳动 所有的中后台产品，其前身是 Byte Design 升级而来，能够看到二者的定位是截然不同，一个是基于抖音产品，一个是基于 字节 这家公司，因此在后续很多内容的不同，根本也是因为定位所造成的。先说说这两个系统的具体功能。
当看到这个工具时，其实是非常激动，作为设计师，对于一个设计系统样式上的细微调整早就已经深恶痛绝，如果可以，自己绝不想通过前端之手进行“实现”，但以往的 Element 方式似乎又有些许麻烦，且能力不足。当我使用两款系统过后，都给到了我不少的惊喜。
首先是Semi，颜色自动提供 WCAG 检查，让你能够快速看到自己设定的颜色究竟是否合理；设计系统的引用关系，可以了解到设计系统颜色之间有哪些不同；圆角的可视化编辑，可以快速知道修改过后的最后实现样子。每一个功能都是设身处地的为设计师考虑，在日常的工作当中经常会遇到的问题，但是也会有些许的遗憾。
比如：可定制的组件内容实在太少，目前能够提供给用户定制的只会有：颜色 、 字体、圆角、阴影，想要从 Semi Design，到 Any Design 还是会有一定的距离；Figma 插件还未上线，确实不能够与设计软件进行快速打通。不过官方已经回复说插件正在审核，期待它的后续体验。
当我用了 Arco 的主题风格配置过后，我觉得可以好好来说说。简直太牛了！可以编辑的维度从基础的颜色、字体、阴影、 到 组件的按钮、导航、分类、表格 一共有接近40款组件，并且都是可以进行可视化编辑与调整的。如果你用了 Arco 过后，或许不用苦苦的站在前端后面，让他帮忙调整页面，作为设计师自己就能够搞定，并且每一个组件可以调整的粒度是非常之细，包含 各种宽度、图标大小、颜色、投影，等等…
真的有些颠覆！假如你需要去定义一个官方的设计系统，完全可以通过 Arco 进行搞定。
仔细阅读文档，你会发现文档这次文档对于设计者而言，更加的友好。首先你可以通过 组件设计，去了解到每一个组件的具体构造，这是很多基础薄弱的设计师能力欠缺的一个点
其次对于 组件状态、何时使用、交互行为 都解释得非常清楚。之后有人问我关于组件相关的问题，我只需要给他扔一个链接过去就可以。
并且两个系统都支持查看组件的更新记录，作为一个刚面市的设计系统，调整修改是在所难免，因此提供这样的入口确实能够使用体验上更为高效。
关于文档的细节以及具体的书写质量，这个只能在后面深度使用过后给到大家反馈，在说说 Semi 与Arco 在文档上的不同，你会发现 Semi 在整个文档内只会有对 组件的使用细则，而 Arco 则提供了：设计价值观、设计原则、样式指南、组件用法，Semi 缺少了设计系统灵魂的这一部分，也就意味着在项目资源的投入上两者还是会有较大不同。
什么暗黑模式、国际化 就不做不过介绍，感兴趣的同学可以自己去官网体验体验。最后说说两者的差异和自己的感受。
其实早在20年的时候，我就已经看到 Semi Design 的原形，但当时看到整个官方文件有点简陋，不过今天看这个设计系统，成熟度还是蛮高的，无论的整个组件的质量，又或者是 Figma 当中对于Variants 的支持，暗黑模式的探索（老实说，我觉得暗黑模式的场景不会特别多），也能够看到抖音设计团队在这个系统的付出。
当然，在整个设计系统查看下来，发现 Semi 仿佛是一个半成品，因为缺少了设计系统最为重要的设计价值观与原则、整个页面模版，因此对于这个内容本身还是抱有一些小小的遗憾。不过从定位上来说，我觉得也是非常合理。
因为作为服务于抖音产品线的设计系统，其实无意去和一些国内外的著名设计系统进行对标：比如 支付宝的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是从自身实际问题出发，去解决在产品研发过程当中的一系列问题。而比肩国际设计系统的任务，交给了老大哥 Arco Design 上，同样能够在 Arco 上看到字节的野心，尝试去搭建各种生态：图标、物料、风格配置。很显然对于我们用户而言是一件好事，因为有竞争才会更快发展，我们之后在设计系统的选择上又可以多一个选项。也希望之后能够发展的越来越好。
两个系统名字的由来：Semi 取自英文的词组，寓意 “一半”，表示在一个企业应用是有业务逻辑与前端界面构成，希望Semi能够成为前端页面不可获取的一半。
你知道 Arco 设计系统名字的由来吗？
原文链接：CE青年（公众号）
作者：CE青年
转载请注明：学UI网》聊聊上周很火的设计系统“两兄弟”
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com