面向界面交互的色彩体系辅助设计技术研究

Color System Generation Technology Applied to Interface Design

中文关键词: 界面设计  色彩体系  用户体验  HSB色彩模型  无障碍设计  配色设计

英文关键词: interface design  color system  user experience  HSB color model  barrier-free design  color matching design

中文摘要:

      目的 探索界面设计中的色彩体系搭建技术，辅助设计师进行人机交互设计，提升工作效率。方法 分析当前互联网产品界面设计中色彩体系的应用场景及其搭建理论和方法。利用Web技术，开发一款快速生成批量色彩以辅助建立色彩体系的工具。工作流程为程序获取到用户的目标主色色值以及预生成的色彩数量，基于HSB色彩模型，生成一定数量辅助色并利用灰度公式自动矫正色彩参数以达到视觉刺激同频，在得到矫正后的辅助色后，通过自动计算色相、饱和度、明度来生成每一个辅助色的序列色板。此外提供用户手动调整自动生成的辅助色的功能，得到的色彩规范可以随着工具的插件版安装至UI设计软件Sketch中，供设计师进行配色工作。结论 工具的推出为视觉设计师的色彩体系搭建提供了快速处理能力，其高效性、科学性和便于传播性极大地提高了界面配色的美观性和统一性，有利于构建良好的用户体验，对产品研发团队具有一定的增值意义。

英文摘要:

      The work aims to explore the technology of color system construction in interface design, assist designers in human-computer interaction design, and improve work efficiency. The application scenarios, construction theories, and methods of color systems in current Internet product interface design were analyzed. Web technology was used to develop a tool that can quickly generate batch colors to assist in establishing a color system. Users' target primary color value and the pre-generated color quantity were obtained. A certain number of complementary colors were generated based on the HSB color model, and the complementary colors were automatically corrected through a grayscale formula to achieve visual frequency consistency. After obtaining the corrected complementary color values, the hue, saturation, and lightness were automatically calculated to generate a sequence palette for each complementary color. The complementary colors and swatches obtained so far could be obtained with one click, and users were also provided with the function of manual adjustment. The resulting color specifications could be installed as a plug-in version of the tool into the UI design software sketch for designers to work on color matching. In conclusion, the launch of the tool provides rapid processing capabilities for visual designers to build color systems, and its efficiency, scientific nature, and ease of dissemination greatly enhance the aesthetics and uniformity of interface color matching, which is beneficial for building a good user experience and has certain value-added significance for product development teams.