一套产品颜色需要什么样的颜色:品牌色+提醒类型颜色(成功、错误、警告)+中性黑、白、灰颜色(各种字体、背景、分割线颜色等))thenthecolorsusedType:brandcolorbrandblackcontentbackgroundcolorglobalbackgroundcolorsplitbackgroundcoloriconcolortextlinkclickablecolorpromptmessageerrorprompterrorpromotiontextcolorimportanttextregulartextauxiliarytext1辅助文字2反白文字或图表辅助反白文字或图形分界线普通分界线(10%)、强调分界线(30%)、最弱分界线(5%)防白化:常规分界线(10%)、强调分界线(30%)、最弱如何确定分界线的品牌颜色(5%)在品牌颜色选择上,选择公司标志颜色最稳妥,容易与公司品牌标志保持一致,辨识度较好。如果因为公司的产品战略要求,需要将其与公司的其他产品区分开来,则更需要考虑产品本身的特点。例如,蓝色和绿色常用于医疗,给用户安全可靠的感觉;商品的颜色多以鲜艳为主,主要目的是唤起用户的购买欲望。首先,我们确定主色为:获得品牌色标后,在产品中选择其中的几种进行不断的试用和评估,最终确定:辅助色的选择是根据HSB法得到24种颜色相同色温以下:H值(色调)定为15,S、B不变,在主色基础上增加到24个色带。原理是15/360=24,刚好包围色环。色轮的辅助色是丰富应用中的辅助色。它将包含一种或几种与主色不同的颜色。除了品牌传播,它还有更强的实用性。真实辅助色的选择根据实际场景功能而定,如通知、提醒、取消使用鲜红色,确认同意使用绿色或蓝色,收藏、评分、评价使用橙色。都是已经在用户心目中建立起来的标准颜色类型。从色环中画出红黄绿三种颜色,将纯黑#000覆盖在这四种颜色之上,然后在混合模式中选择色相,这样就可以看出它们是否在同一个明度上,然后根据实际需要进行修正、比较、调整,直到舒服为止。改变所选辅助色的亮度和对比度,得到相应的色阶。如果不确定色标是否科学合理,也可以使用颜色工具,比如Antdesign的配色工具,Figma中有很多配色插件。可以快速得到相应的色标。根据实际应用场景进行合理配色。中性色选择中性色通常与文本颜色组合成一个灰色模块,通常包括背景色、分段元素颜色、反馈颜色和禁用颜色。使用卡片设计模式时必然会用到背景色,一般是浅灰色带一点主色。线段元素颜色包括普通线框元素、直线段元素和曲面段元素。反馈颜色包括悬停、按下、高亮等反馈颜色。中性色让整个页面更有层次感。中性色配置就是制定一个由深到浅的灰度等级,应用到相应权重的元素上。判断颜色重量的主要依据是HSB中的B(亮度)值。中性色虽然指的是缺乏个性,但并不局限于纯灰色。一种常见的做法是在中性色中加入适量的蓝色饱和度,以增强观看体验(满足RGB的某些特性)。根据选择的品牌色,采用上述中心色选择法选择中性色:利用以前的作品或现有的设计页面进行不断的匹配和调试,以确保最佳的整体页面效果。当然,我们也需要考虑一些特殊的场景。如果现阶段没有复杂或者特殊的应用场景,我们可以先统一使用颜色。随着产品的不断完善和迭代,当当前的中性色可能不能满足需求时,需要及时调整更新,保证整体的一致性和统一性。文字颜色在实际应用场景中,文字颜色的色阶可分为3-5级:重要的标题和文字、辅助内容的二次文案、次要级别的文字、需要进一步弱化的最次要的文字。当然,在命名文字颜色时,可以使用原色、二次色、三次色或其他命名规则来定义每一种阶梯颜色。此外,还有具有特殊语义的文本颜色,如链接文本颜色、强调文本颜色等。文本颜色的强弱代表了信息的重要性,也表明了信息的层次和逻辑关系,传达了告诉用户如何正确、快速地找到所需的信息。同时,文字颜色也说明了是否具有可操作性,这就要求文字颜色的各个颜色层次之间对比明显,语义清晰。SamGordain在Medium《Pick Better Colors with the Hue Shift Method》上有一篇文章很好地描述了他的阶梯颜色选择规则和技术的关键理论。综上所述,如果要从一个基础色拆分出一套阶梯配色,在调整透明度或明度的同时调整色相、饱和度、明度三个属性,这样最终的一套阶梯配色会更加协调和过度。更自然。文章链接:https://medium.muz.li/natural-color-palettes-7769e5b38ecd在进行配色时,我们大多数人都知道如何使用相似色、相似色、中差色、对比色等配色规则,互补色等。匹配颜色。但是在实际工作中,这些知识并不能满足我们的需求,尤其是在和几个设计师合作完成一个项目的时候,会出现很多问题:辅助色、文字颜色、背景、分割线、阴影等等。结果是,无法保证视觉一致性。在很多设计网站上,输入“配色”搜索,可以看到很多关于配色的文章。大家从很多原理和理论方面来讨论,但是他们详细描述了如何进行配色以及配色的过程。文章很少。在找了很多参考文章、配色理论和配色工具后,我们结合实际应用场景进行配色。希望本文能对有同样疑惑的设计师有所帮助。
