UI 设计

MIOOR大约 3 分钟

软件界面设计思路

可以把功能或者需求类似的有机体封装成一个业务组件，并对外暴露接口来实现灵活的可定制性，就可以在不同页面不同子系统中复用同样的逻辑和功能了。

同理，不同页面中往往有可能出现视觉或者交互完全相同或者类似的区块，为了提高可复用性和提高开发效率，往往会基于基础组件和业务组件再进行一次封装，让其成为一个独立的区块以便直接复用。

通过这样一层层封装，就逐渐搭建了一套完整的组件化系统。

他们之间的关系如下。

在数据可视化设计中，布局了决定用户的阅读顺序。我们的大脑每天都要处理海量信息，眼睛会倾向于通过扫视来获取重要信息，扫视的视线流一般是从左至右、从上往下。

组件的重要层级有四类：次要信息、辅助信息、正文、强调信息。通过增加透明度来区分。

在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。

色调（H）： 通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。

饱和度（S）/ 明度（B）： 颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。

经典的配色理论，包括「邻近取色」「对比取色」「分裂互补取色」。

邻近取色：其中邻近取色沿着一个方向，按照相同的夹角取色，其优点是色彩具有很强的规律感和和谐度，缺点是整体区分度比较低。

对比取色：相邻两个色彩是一组成180度的对比色，其优点是色板具有很强的区分度，缺点是相邻两色会误以为是一组对比数据。

分裂互补取色：三个一组取色，前两个颜色是一组邻近色，第三个颜色是前两个颜色共同的对比色，这种取色方式兼顾了邻近色的和谐同时又有较高的区分度，没有明显的劣势。