设计师如何启动高质量设计网站的快速输出

无需加好友免费技术支持

中国和台湾的企业项目经常面临各种业务线路的需求和大量的网站设计需求，会遇到很多问题，如如何快速输出设计需求，制定统一的设计风格等。本文将详细介绍设计师如何启动高质量设计网站的快速输出

在过去的六个月里，我做了几十个官方网站的需求，从设计到开发，定义每个官方网站需要很多时间。因此，我总结了一套工作方法，可以在一天内快速生产多个网页设计。本文将从设计效率提高的角度与您分享设计方法：

（最右边banner@77设计）

01

网页设计中遇到的问题

面对庞大而复杂的企业中后台集合，将面临各种问题：

业务多，资源少，需求多，项目多，杂，导致超负荷。更好地理解业务也不方便。

人工成本高，设计资源有限。设计完成后，需要对不同业务线的开发进行多次设计检查，影响设计师的效率。

b端产品没有品牌，多样性设计无法形成品牌特色，传达品牌特色，导致中台业务线多但不精致

体验差

官方网站设计中也有许多类似的功能。面对许多需求，设计师的快速响应会产生重复的劳动力成本。只能满足功能，用户体验不是很友好。

02

突破问题

通过总结之前的工作，我们发现许多设计内容的重复率超过50%。我们需要做的是将50%的重复率形成系统的设计，建立资源整合，建立标准化的官方网站模块，并将模块设计反向产品，这不仅提高了设计效率，而且降低了产品工作和协同成本。

构建收集需求-集成归纳-定义组件-代码 提高设计效率的过程。

第一步：整合资源，建立和整合各业务线资源的模块，并根据业务系统进行分类：数据平台、技术平台、业务平台。面对这三类，官方网站的需求将达到数十个，第一件事是整合和分类。

对业务线进行分类，统计高频15 个组件模块：Banner、产品优势、产品特点、案例、信息内容、信息流程、合作伙伴、联系我们、使用流程、功能介绍、手机电脑信息显示、合作伙伴、地理地图、其他模块等...

第二步：根据模块类别的再利用率对模块进行梳理和分类，并输出设计模板。模板根据设计形式和布局进一步扩展，高再利用率的模块对应的模板更加丰富。

03

设计风格建立设计语言（理念）的建立与模块产出

视觉系统，B终端产品不同于C端，设计服务于体验，色彩丰富度相对较弱，单一。为了突出b端设计，我们决定选择轻拟态风格，即突出设计的细节，不会因过度设计而影响内容。根据业务系统和设计风格，完善设计语言关键词精炼：技术、高效、简单。

字体和颜色规范颜色可以起到视觉语言传达和信息承载的作用。企业级产品延伸matrix 配色系统以蓝色为主色，模块产生深浅色系，便于多方面选择。

设计布局

根据主页和内页的显示形式，使用删除系统定义布局

icon再创新图标也分为三个层次，用于不同的场景：

3D图标3d纹理图标。用于重要层次模块，数量控制在4个以内。

（3dicon设计:甜)

玻璃球标磨砂玻璃风格已广泛应用ui在产品的许多地方，我们在磨砂玻璃的基础上创新icon风格玻璃球icon，这种风格可以通过拼接组合和系统设计，与轻质设计相结合icon设计能在短时间内快速产生立体感icon，适用于8类以下的模块icon。

轻拟态线性图标3d线性图标适用于多场景模块，可大范围出现在页面中。

三维设计banner模块分为3d根据不同的业务线定义三维风格和二维平面图片的使用规则。例如，商业和公益相关产品，选择图片作为banner展示可以更准确地传达信息，而技术官方网站使用3d效果更能传达科技。

同时定义多种banner布局：左文右图，文字居中，banner加搜索模块，图片banner可根据需要自由选择。

（该banner 来源@七七设计）

为了反映网页设计的空间感 根据商业品牌语言，在网页设计中添加几何元素穿插 圆、三角、方定义辅助装饰元素。(圆-业务 ；方-技术 ；三角形-数据圆、三角形、方定义设计几何元素

多样性变化 根据业务线，在建立标准化组件的同时，还需要考虑设计中的考虑设计中的差异化业务线-营销产品，这更多地反映了商业性质。设计采用深色系统，技术官网更体现科技感，加入3d元素。背景白色/暗色和亮色/暗色也添加到同一模块的设计中。

（banner 来源@七七设计）

04

实际应用

目前我们已经产出500 模块，10个 网页模板，通过代码，建立网页生成工具云构建，并在生成平台上建立中间平台系统。目前，它支持多条业务线。从设计输出模块到开发实现模块代码，再到产品拼接选择，整个过程节省了设计资源，为产品研发提供了一站式解决方案。

（3dbanner：甜甜设计）

最后，还有一个重要的步骤：当我们完成项目时，我们定期访谈和制作用户体验地图，不断跟踪用户体验，收集体验问题，以便进一步优化。