工具类电脑端设计实战

电脑端介绍

web端的主要功能服务（介绍功能，提供下载）。手机端：特点：随时随地、便捷、时间短。电脑端：特点，固定的位置、时间长、内容量大。

电脑端与移动端的区别：

电脑端介绍

使用场景：1，手机端：大多非办公场所，可以是任意地点。2，电脑端：大多办公场所，室内。

使用时间：1，手机端：碎片化时间使用。2，电脑端：长时间使用、连续使用、工作时间内为主。

任务类型：1，手机端：屏幕小，要求流程清晰，适合快速使用的任务，（例：笔记类，快速浏览，随时轻量级的记录）2，电脑端：屏幕大、能应对复杂规模大的任务，笔记类，记录长文、编辑。

载体特点：1，手机端：特有重力感应、GPS、手势等可实现特殊功能，比如听歌识曲。2，电脑端：鼠标键盘操作准确，效率高。

统一性：移动与电脑（包括界面使用的主色调和规范）

PC电脑端和MAC电脑端区别：1，下载渠道，相同点，官网有提供多端下载。2，安装过程：pc，有安装过程的界面，mac，app store一键安装，没有安装界面流程。安装包，一间拖拽安装。3，系统规范：pc窗口操作区在右上角，mac窗口操作区域在左上角

mac端4种类型：1，左右型，左导航一般用“重色”突出导航，左右轻重。特点：导航功能点比较独立，没有全局操作，适用于左右型。比如（旺旺，腾讯管家）。2，混合型：特点，除了左侧导航，还有全局操作，所以增加了顶部栏，这是和左右型的区别。3，上下型，特点：操作区需要较大的区域时，导航放在上面，一般会有两个层级。4，窗口型，特点：产品规模比其他3个更小更垂直，无导航，内容较少，一般以窗口形式。

Mac 客户端设计实战：设计趋势，苹果，iOS11的设计趋势为（卡片，阴影，大标题）。微软。dribbble。总结：更加简洁，大量使用卡片和留白，使用弥散阴影，增加层次感。大量使用无色系，突出主题，增加品质感。

设计实战：Teambition跨平台团队终端，改版，选用能表达这个产品功能的主界面。

如何该版？

简洁，先分析问题，1，上下型：导航区，导航层级过多，3层。内容区，信息层级过多。总结问题：背景色偏灰，视觉上不够简洁。信息层级过多，导致视觉元素多余。解决办法：做减法，合并信息层。

层次：先分析问题，1，不同的信息模块却在视觉表现上没有区分。2，不同等级的信息，需要不同的视觉表现。尽量简化。怎么解决: 使用卡片突出区域，减少视觉层级。使用弥散投影，突出新的浮层。3，改版细节:品牌色，延伸为深一点的蓝色，背景底色，蓝灰色,干净通透旧版灰色太过压抑。卡片布局:不要撑满，要四周流出底色，来突出卡片。

色彩:饱和度相同，看起来统一。避免大面积使用高饱和度的颜色，刺激眼睛。多种突出是同时使用，要避免缺乏对比和层次。

总结:1，用继承品牌色的底色，避免界面太灰。使用无色系的灰和白色来突出主色。2，卡片和弥散阴影结合使用，来增加层次感。3，字体颜色上带有品牌色，增加产品品质质感。3，使用统一的设计元素，避免多余的视觉干扰，尽量简洁。