如何设计出色的网站后台原型？

3. 协同办公平台钉钉

钉钉是我们耳熟能详的办公软件，严格来说它属于客户端案例，而非后台原型，这里提出来是因为它具有非常丰富的管理功能，当我们在面向前后端一体的项目时，可以作为参考。

设计亮点：

它主页面采用了左右结构框架，业务逻辑条理清晰，功能全面。模板制作了页面滚动效果，解决：当一个页面出现了很多内容时阅读不便的问题。

设计方法：

通过原型设计工具摹客RP的锚点定位功能，我们可以很轻松实现页面的滚动效果。具体实现方法可以查看 摹客RP官方教程。

4.VMware 网站后台原型 Exploration

设计师：Clay

设计亮点：

流畅吸睛的图表联动设计

联动设计，作为Web/App主控页面设计最常见的设计方法之一，为用户快速查看数据提供便利的同时，有效提升界面设计的可定制性。

而此款网站后台原型设计，就通过采用饼形图与折线图之间的联动设计，为用户更加直观流畅的呈现各类数据。

设计方法：

利用联动和下钻等设计方法，简化网站后台原型设计的同时，提升用户体验。

5. Photo 网站后台原型

设计师：Dumnoi Ikechukwu
设计亮点：

布局清晰的网格设计

此款图片展示类网页的后台界面设计，为方便摄影师自由地管理客户照片，通过采用布局清晰的网格设计，结合简约易懂的设计风格，打造了布局十分清晰直观的网站后台原型设计。其栅格内填充的图片，也使整款网页设计更加美观，有效地避免了 极简主义网页设计带来的枯燥乏味之感。

设计方法：

利用对称或不对称网格打造清晰直观的界面布局。

网格设计，一直以来都是网页设计中不可或缺的重要页面布局方式。网站后台原型设计，也是如此。在使用摹客RP制作此类原型时，设计师可轻松使用其“ 等距克隆”的功能，结合文本和图标组件，快速创建类似的优质网站后台。

如图，完成以上漂亮的页面原型，仅仅只需简单拖拽和“Ctrl+D”即可。

6. 网站后台原型 UI Interaction
 

设计师：Aman Singh

设计亮点：

极具互动性的交互设计，是提升网站后台原型设计可用性和吸引力的重要方式。而此款设计就采用了多样的交互式设计，为用户提供了更加流畅而愉悦的用户体验。

设计方法：

利用摹客RP交互设计，提升界面互动性

二、实用的CRM系统模板分享：

CRM-Desk是一款依托全新设计理念，全新管理思想，通过数据展示、工作任务管理、发票管理、即时通信和工作报告管理五大功能，为大中小组织创建全新的高效协同办公环境。我运用了Mockplus基础组件、扩展组件、图标组件等多个组件库，制作了页面间跳转、添加项目、删除项目、添加工作、实时聊天等多个交互效果。简单拖拽，方便快捷。

点击下载：

高效网站后台原型设计原则和技巧

通过分析以上最新的设计实例，我们可以轻松的总结出一些高效网站后台原型界面设计原则和技巧：

1. 合理搭配色彩，打造极具视觉魅力的主控界面设计

合理的配色方案， 渐变色的使用，结合阴影以及色彩透明度的变化，轻松打造极具层次感的视觉设计。

如图，色彩的不同，会给人完全不同的视觉体验。

注意：色彩使用也要注意把握分寸。过度使用色彩，反而会增加界面干扰，造成重点不再突出，从而给用户带来困扰，影响用户体验。

2. 重要信息或数据尽可能放置在网站后台原型界面的左上角或中间区域

无论是哪种类型的网页或App界面设计，设计师都需要遵循用户的阅读习惯 （即人们习惯从上到下，从左到右，中间位置最能吸引关注的阅读习惯），将重要的内容或数据集中展示在主控界面设计的左上角或中间区域。

如图，将最具吸引力或最重要的内容展示在中间，更能吸引和留住用户。

3.注意界面可交互式设计

交互式联动设计，能够有效的增加界面实用性和互动性，激发用户参与的兴趣，从而降低界面跳出率，促进商业价值的实现。

4. 注意界面可视化设计

现今Web/App设计中，极大部分网站后台原型设计都涉及数据的分析和展示。为提升界面实用性，打破死板无趣的数据展示，打造极具视觉效果的可视化设计，也相当重要。

而这就需要设计师灵活的选用各类图表展示数据的同时，结合色彩、图标、动效以及交互设计，创建可视化界面。让用户进入界面，即可清晰的查看相关数据信息。

5. 一般设计和可定制化设计相结合

一般设计，例如表格、图表、图片等设计，能够帮助设计师直观简洁的展示网站后台原型相关数据和信息。为提升用户体验愉悦度，适当的添加个性化设计，例如方便用户搜索详情的搜索框设计，方便用户根据需要重新排列界面信息的拖拽设计，以及可根据用户需求改变界面背景色彩的皮肤选择设计等等，打造定制化主控界面设计。

如图，添加搜索框等设计，打造可定制化网站后台原型界面设计。

注意：过分定制化，又会影响一般数据的展示，给用户决策带来不利影响。

总之，网站后台原型界面设计过程中，利用清晰爽利的网格布局、卡片式设计、色彩、图表以及图标等设计，尽可能简洁直观展示数据信息的同时，也不要忘记整体的视觉效应，打造层级清晰，重点突出，交互流畅，可总览，可定制的最优设计。

三、网站后台原型设计工具推荐

高效直观的网站后台原型设计，离不开简单实用的原型工具和设计协作。

无论设计师设计理念或创意如何，优质高效的网站后台原型设计并非一蹴而就。也需要设计师根据实际的Web/App情况，一次次更迭和打磨，并在后期交付阶段，与其他设计师、开发人员或产品经理无障碍沟通，完美执行和呈现，最终打造出美观实用的设计。

而这一过程中，设计工具的正确选择，也很大程度上影响整个产品团队的工作效率和成果：

摹客RP-助你快速搭建网站后台原型

摹客RP是一款完全免费的原型设计工具，它集快速设计、强大交互、矢量编辑于一体的设计工具。支持多人实时编辑，更能与摹客平台完美结合，快速进行设计协作和交付。

总之，三言两语，道不尽人和事。好的设计工具也是如此。

唯有亲身体验，洞悉其精髓，方能惊喜不断，流连忘返。