-
网页宽度到底该怎么定?这篇全面好文告诉你!
PC 端网页设计对于很多从事 UI 行业的新人来说是一个充满未知的领域,对于怎么进行基本的画布创建,规格设置,都处于两眼一抹黑的状态。虽然这是因为多数人没有系统的学习 UI 知识,它并不是一个合理的现象。 接下来,我们会更新一些网页设计的干货,帮助更多 UI 设计师了解网页设计的基础知识。 首先,网页设计的第一步就是画布创建了,这也是困扰我们的第一个难题。由于市面上存在多种前端技术的应用,以及一些…- 55
- 55
- 149
-
干货来了!给网页设计师的18个免费超实用工具
每一个设计项目对设计师而言都是一次系统性的工程。将自己的时间精力投注其中,把自己的想法和需求结合到一起,力求做到最佳的表达,输出对受众最好的设计。每一张草图,每个概念,甚至每个图标都是设计师努力创造的结果。对于许多并不从事这一行业的人而言,设计师的工作是一场浪漫而有趣的冒险,对于深入其中的从业者而言,设计是一场伴随着精力和情绪牺牲的旷日持久的战争。 每一个杰出的设计作品背后,都意味着大量的努力。和…- 45
- 45
- 117
-
用麦当劳的案例,帮新手快速了解设计组件
前言 麦当劳是我们常见的全球大型跨国连锁餐厅,每次在回家路上都会经过几家麦当劳餐厅,但是通过观察发现麦当劳内进进出出的工作人员普遍年纪都不大,甚至有些餐厅除了主管以外其他大多数人都是大学生兼职,于是便产生了一些思考:他们是怎么做到新的店职员只需要经过简单的培训就直接工作以及怎么做到这么多门店口味统一。后续通过进入内部打探了一段时间后发现里面的食物基本都是通过使用半成品通过规定的烹饪时间和方式加工后…- 40
- 45
- 106
-
设计系统搭建全流程:开始前的准备工作
上一篇文章我们主要讲的是设计系统的必要性,接下来我将会继续用后续的文章详细讲解怎么搭建设计系统,希望可以帮助到有需要的人。 上篇回顾: 设计系统搭建全流程:认识设计系统 设计系统这个词,是近些年的一个热门话题,在初期的讨论关注点主要聚焦在是否有必要搭建? 阅读文章 > 在开始之前,我需要先解释一个问题: 为什么要制作自己的设计系统 很多团队一提到搭建设计系统,就会有人说,网上有很多公开的设计…- 40
- 45
- 118
-
腾讯出品!3个章节帮你快速入门C4D柔体动力学
导语 “一个能自我膨胀的石头、一个能被随意挤压变形的坚硬钻石、一堆失重漂浮在空中的玻璃球、一片随风飘动的柔软玻璃。或者是任何你能想到的奇幻场景…” 所有这些奇妙幻想,柔体动力学将全部满足。接下来本文将带你了解这个充满创造力的奇幻世界。 腾讯出品的C4D自学教程: 从入门到实战!腾讯高手总结的C4D自学必备指南 导语 近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领…- 40
- 40
- 101
-
年后跳槽,加这个技能的作品集特别抢手!
前段时间英伟达发布了 40 系列显卡,极致的性能让 C4D 玩家大呼过瘾,但高昂的价格也让人望而却步。 大部分设计师购买显卡,都是为了带动 C4D 和 OC,作为 3D 设计的老牌工具,C4D 确实成为很多人的学习首选。但正版近 2 万的售价和苛刻的硬件要求,也让越来越多的人开始选用 3D 设计新秀神器:Blender。 对普通的 UI 和视觉设计师而言,Blender 无疑更适合作为 3D 设计…- 40
- 40
- 98
-
实战案例解析!如何用4个步骤引导用户操作提高转化率?
前段时间负责一个运营活动的改版工作,该活动的设定是通过设置目标奖励,提升用户的购买力。但是通过该模块的数据反馈发现,活动的用户参与度与购买转化率都不是很理想。结合数据与相关的用户调研发现,导致这个结果的原因主要概括为两点: 活动曝光弱,用户不清楚活动内容,很少主动点击 大部分用户购买力远远低于设置的目标,导致“心有余而力不足” 更多引导设计干货: 新用户引导流程设计,需要做好这12个细节! 编者按…- 40
- 40
- 98
-
官方专业干货!11个面包屑设计技巧全面总结
Z Yuhan:本文翻译整理自 NN/g(尼尔森诺曼团队)的研究《Breadcrumbs:11 Design Guidelines for Desktop and Mobile》。 不论是手机还是 PC端,面包屑都是用来寻找路径的重要组件,可以让用户了解当前页面在整个网站结构的所处位置。NN/g 从1995年就开始推荐大家使用面包屑,因为它能在对界面设计产生极少影响的前提下,为用户提供很多便利。 …- 35
- 40
- 111
-
被Notion收购的下一代日历Cron ,有哪些值得关注的设计亮点?
一、导语 号称为专业人士和团队打造的下一代日历 Cron 最近正式开放注册,不再需要申请加入候补。作为 Cron 的不完全粉丝,我觉得是时候写篇文章来安利一下它了! Cron 是一款体量不大的免费日历工具,界面类似 Apple Calendar。如果你用过老牌的日历应用 Fantastical,应该不会觉得 Cron 有什么过人之处,但它在去年 6 月份被 Notion 低调收购,且 Figma …- 40
- 40
- 102
-
10个大厂产品细节剖析,看看高手是如何做设计的!
随着产品设计越来越成熟,呈现出来的优秀设计方案比比皆是,如何设计出差异化的方案变得至关重要。打破常规的设计才能在同质化的设计中脱颖而出,带给用户更好的差异化体验。 近期黑马哥在体验产品时,发现了一些突破常规的设计表现形式,希望这些优秀的案例可以带给大家更多设计灵感。 往期灵感: 10个出行产品细节剖析,看看高手是如何做设计的! 五一小长假即将到来,相信大家都已经非常期待啦! 阅读文章 > 一…- 30
- 35
- 96
-
几亿人都在用的谷歌翻译网页版,是如何做改版设计的?
@C7210 :这是一篇来自 Google Translate 团队设计师的改版经验分享。 Google Translate改版经验谈 2018 年底,我们上线了基于响应式布局和 Material Design 打造的全新网页版本 Google Translate。 鉴于 Google Translate 在全球拥有的庞大用户量,我们从一开始就知道必须为「改版厌恶症」做好准备。很多文章对这一话题进…- 35
- 35
- 84
-
看懂了!第一次见到把响应式布局讲得这么清晰的!
当拉伸钉钉 PC 客户端窗体的时候,内容会像流水一样随着窗体的大小改变布局或形状。窗体大小的改变带来的内容布局的调整对于用户来说是无感知的,这种丝滑自然的体验得益于钉钉 PC 客户端响应式的适配方案。 流水一样的响应式设计 下面我们以钉钉 PC 客户端为例,来解析它的适配方案,以便我们设计师能主动地把控产品在各种设备上的良好体验。 更多响应式干货: 用一篇文章,帮你看懂网页响应式布局原理 今天分享…- 35
- 35
- 96
-
如何设计报错信息?顶尖权威机构总结了 12 条原则!
编者按:用户和UI界面交互的时候,出现错误或者犯错风险的时候,系统通常需要发出报错和提醒信息,这种信息的交互和 UX 设计策略有哪些讲究?今天这篇文章来自UX领域权威机构 NNGroup,文章阐述了设计报错信息的 12 个原则和技巧,以下是正文: 通过高可见性、建设性的沟通方式,以及设计优秀的报错信息来帮助用户了解情况,维持良好的用户体验。 30 多年前,Jakob Nielsen 曾经提出了著…- 35
- 35
- 97
-
感觉 Banner 千篇一律不想点?腾讯动漫用这个设计让你点爆!
每张运营位中的视觉图,其实都代表着整个平台的视觉品质。不论是犄角旮旯,还是我们的开屏图、首页轮播位。 发现问题 首页头部轮播图的重要性决定了它的视觉品质不能有半点的疏忽,其中的复杂程度更是一言难尽。不仅有作品宣传,还有各类渠道合作,有内部设计师输出,还有大量的 CP 支持,那么统一高品质的视觉输出更是难上加难。将问题一一排除,我们花了将近一年的时间优化了 App 首页的所有 banner,将其打造…- 35
- 35
- 94
-
7000字干货!电动汽车仪表盘设计指南
当一辆电动汽车驶来时,人们最先注意到的可能是它那极具未来感的外观设计。但是,对于乘客来说,车内的仪表盘设计同样也是他们最先接触到的部分。在这个数字化时代,电动汽车的仪表盘设计也越来越成为了车辆设计的亮点之一。那么,让我们一起去看看电动汽车仪表盘设计是如何在美学和实用性之间找到平衡,并为乘客提供愉悦的视觉体验的吧! 往期车载设计干货: 6000字干货!四大章节掌握HMI车载设计指南(进阶篇) HMI…- 25
- 35
- 86
-
圣诞节专题没有思路?帮你梳理了9个主题切入点!
编者按:做圣诞节专题,没有思路怎么办?本文总结了9个主题切入点,让你灵感爆棚! 文章目录 圣诞树 圣诞礼物 圣诞美食 圣诞老人 雪 家庭团聚 雪人 圣诞袜 驯鹿 切入点:圣诞树 切入点:圣诞礼物 切入点:圣诞美食 切入点:圣诞老人 切入点:雪 切入点:家庭团聚 切入点:雪人 切入点:圣诞袜 切入点:驯鹿 「从素材到思路,圣诞节专题设计」 《你想要的圣诞设计素材,这里全都有了!》 《电商丨四步挖掘灵…- 30
- 35
- 95
-
阿里分析了 2200 组Banner,用大数据告诉你什么样的图最受欢迎!
创意是营销中离消费者最近的环节,同样也是最性感、最直接的部分。但为什么我们都看过杜蕾斯海报却依旧写不出好文案?一个好创意如何诞生? 近日,阿里妈妈发布《美妆行业淘宝首焦创意洞察》(以下简称《报告》),试图通过数据洞察的方式帮助品牌商家更懂创意,探讨什么样的创意真正能被消费者买单,怎样的创意生产能提升运营效率,最终帮助品牌实现生意增长。 以消费者运营为中心,好创意从洞察开始 如果说创意表现是营销的末…- 30
- 35
- 103
-
想让你的界面更精致?先掌握这8个设计细节!
哈喽,这里是设计夹,今天为大家分享的是「界面设计要素」。 当下大多数界面设计类软件都是以矢量图的方式工作。通过调整参数来定义图形的大小,并且在不降低质量的情况下对图形进行拉伸和放大。 在进行界面设计时,我们需要生成出各种尺寸的矩形、圆形等对象,规定这些对象的尺寸和样式,并对这些对象进行移动,将它们放到合适的位置上。 很多基础知识可能看起来很简单,容易被忽视。但随着设计经验越来越多,更建议大家牢固系…- 25
- 35
- 94
-
用一篇文章,完整梳理总结所有 iOS 导航模式
编者按:虽然苹果官方的人机交互指南非常详尽,但是很多信息都分散在设计规范的不同地方,设计师 Frank Rausch 结合 WWDC 的演讲和相关规范进行了详尽的整理,仅此一篇帮你梳理清楚 iOS 的全部导航模式,以下为正文: Frank Rausch 所创建的这个页面包含了目前 iOS 平台上主要的导航模式。比如Drill Down、模态、金字塔、分步导航等常见的模式,你可以将这些内容视作为 A…- 15
- 31
- 85
-
超详细!写给新人的 Lottie 快速上手指南(下)
前言 对于设计师而言,在使用 lottie 的过程中,有两个难点:第一是导出设置项,第二是功能支持列表。是否能熟练运用 lottie 来做动效落地,主要取决于这两部分。在上一篇,花了很多篇幅来为大家介绍 bodymovin(5.9.6)的相关设置项。掌握设置项是玩转 lottie 的基础,那么在这篇,除了功能支持列表,还会为大家介绍更高级的使用方法以及相关注意事项。 超详细!写给新人的 Lotti…- 30
- 30
- 88
-
看不懂不会用的栅格系统,这篇帮你彻底掌握它!
栅格系统在UI设计和前端开发中是被应用的很广泛一套体系,但真正能掌握并很好运用的人却不多,本期我为大家找到这篇干货文章,分享原作者通过多年实战收获的经验总结,一起来学习吧! 环顾身边常见的优秀设计很多都使用了栅格系统,你可能非常赞同在界面中使用栅格系统,但却没有人告诉你应该如何使用它们。 印刷中也会用到栅格,但就本文而言,我主要想讨论的是用于PC和移动设备上的栅格系统设计。 △ 色块放内容 内容块…- 30
- 30
- 84
-
从6个方面,帮你全面总结复选框类型+用法
Halo,这里是设计夹,今天为大家分享的是「复选框设计」。 ☑️复选框(Checkbox)是设计中常用到的组件,在B端表单设计中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。 我们首先来介绍最基础的复选框样式,其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式,最后总结设计复选框时的五点注意事项,全面掌握复选框的设计~ 更…- 20
- 30
- 78
-
标签页和面包屑该如何用?来看高手的分析!
面包屑(Breadcrumb)和标签页(Tabs)是 B 端产品中常用的两个组件。最近有同学问我: “带有下拉菜单的面包屑应该怎么使用呢?” “标签页可以当作面包屑来使用么?” 本文就来详细分析下这三者的区别和联系,帮助你做好应用。 更多组件干货: UI必看!帮你快速掌握店铺卡片组件的设计方式 一、组建介绍 说起店铺卡片,大家的第一反应肯定是“那不是和商品卡片差不多吗? 阅读文章 > 一、面…- 25
- 30
- 98
-
超全基础科普!全方位解析 C 端和 B 端的产品特性
近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的 C 端产品设计师开始涉足到 B 端产品的设计,这是一个知识迁移的过程,需要认识到这 2 类产品的特点和区别,你才能够快速适应这个迁移的过程。 在互联网和信息化高度发达的今天,我们都是 B 端和 C 端产品的用户,能切身体会到产品的好坏,那么两个完全不同类别的产品放在一起时,会…- 30
- 30
- 72

























