打造卓越网站后台原型：UI设计的高效实践指南

如何打造卓越的网站后台原型 打造卓越的后台原型，我认为关键在于以下三个方面： 1. 对后台功能模块架构及页面逻辑有深刻理解 2. 精通原型设计工具 3. 追求卓越的设计风格与规范 其中，第一点是基础，第二点是进阶，第三点则是使原型脱颖而出的关键。 如何确保后台功能结构与页面逻辑的清晰性。 许多人绘制原型时，往往在没有充分考虑的情况下，就直接打开原型工具，随意拉几个框，或者模仿一个自认为不错的网站后台进行设计，这在我的看法中是非常危险的。网页后台与一般web界面不同，对功能模块划分和页面逻辑的要求非常高。一方面，网站后台的层次结构相对复杂；另一方面，网页后台的功能更偏向于前端页面的管理，导致功能之间的关联性和引导性可能较弱。在这种情况下，如果没有很好地理清后台结构就开始绘制原型，那么最终做出来的后台管理系统很可能只是一个功能堆积，功能易用性和操作流程性都难以得到保障。

绘制后台原型时，应时刻牢记以下几点： 1. 在绘制原型之前，先理清后台管理的功能模块，通过树状结构图来帮助划分页面和模块。 2. 理清模块后，就可以着手设计后台管理系统的框架，我将其分为三种：主模块（包括哪些独立的功能模块）、次级分类（每个功能模块包含哪些次级功能分类）、功能事件（具体到每个功能页面内存在哪些主要操作）。 3. 布局方式大致如下三种： a. 顶部选项卡划分主模块，左侧边栏划分次级分类； b. 左侧边栏采用汉堡包样式的层级分类； c. 左侧边栏二级分类列表浮出。 4. 思考路线应自上而下，在模块划分时不要拘泥于具体界面的展现形式。 5. 结构和逻辑的清晰（框架）>功能页面设计（具体到某个页面如何设计）>优化性功能设计（是否需要预览、实时存储等功能）>用户体验。 6. 必要时，可以牺牲用户初次使用的学习成本，以换取用户熟练掌握后的使用效率。尽量遵循亲密/对比/重复/对齐的四原则。 7. 对于重要但不知如何放置的功能，可以考虑放在顶栏右侧，而不是主模块上。 8. 频繁的弹窗并非好的选择（必要时该弹还是要弹的），如果可以的话，展开和右侧浮出半页都是不错的解决方案。

如何快速制作web原型——如何制作网站web原型 如何进行web页面原型图设计 最后半天心不在焉地拖拖拽拽，将各个部分搭建好，但做出来的页面却惨不忍睹，自己都没勇气打开。晚上回家后与邻居讨论了三个小时，最后熬夜完成原型图。虽然最终原型图未被采纳，但这次原型图却得到了表扬，领导说我的原型图有了提升。今天写下这篇文章，为这段时间的工作做一个总结。

原型设计前： 1. 明确页面需要突出的内容； 2. 突出功能目的，如引导注册或引导流量； 3. 如果是改版，要考虑改版要解决的问题； 4. 划分内容板块，确定每个模块内存放的内容； 5. 分析模块之间的关联性，确保逻辑清晰； 6. 设计页面流程，确保模块上下承接关系。

页面完成后： 1. 检查内容是否完整； 2. 确保第一屏展现最重要的内容； 3. 检查功能是否实现； 4. 确保流程顺畅。

注意： 1. 未完成的作品拿出来讨论，页面不完整不代表思想不完整，即使是不完整的页面，里面也应该有一个清晰的逻辑图； 2. 理清自己的思路，明确内容、功能和流程； 3. 坚持自己的想法，用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。

关于工具和作图： 1. 在掌握基本工具使用时，可以暂时忽略技巧； 2. 页面最重要的是你的想法，等到想法成熟后，再考虑工具的深入； 3. 思考过程和画图时间比例约为7:3，前期框架和流程思路想好后，后面的原型图也就水到渠成了。

最终半天心神不宁地拖拖拉拉地将各个部分搭建完毕，然而做出来的页面令人瞠目结舌，连自己都没有勇气打开。晚间回家后与邻居探讨了三个小时，最终熬夜完成了原型图。尽管最终原型图未被采纳，但这次的原型图竟然获得了表扬，领导表示我的原型图有了进步。今日便写下这篇文章，为这段时间的工作做个总结。

原型设计前：①明确页面需要突出的内容，这通常在前期的讨论中就已经确定；②除了内容外，功能方面需要突出的地方是什么？例如引导注册或引导流量至下一级页面；③如果是改版，需要考虑解决前一版页面存在的问题；④在绘制原型图时，需要考虑内容板块的划分，页面内容主要分为几个模块，每个模块内应存放相近的内容；⑤模块与模块之间的关联性：每个模块与其相近的模块之间应存在一定的逻辑关联性，不能随意拼接；⑥页面的流程：模块与模块的上下承接关系，模块与模块之间应存在一定的逻辑连接性。

页面完成后：完成原型图后一定要进行检查，主要从以下三个方面进行检查：①内容是否完整：对比框架中的每一部分内容，检查是否完整；②第一屏是否将最重要的内容展现出来：页面第一屏以外的内容基本是辅助内容，如果不能在第一屏就展现全部内容，基本上就等于内容不完整；③功能是否实现：想要表达的功能是否在明显的地方表现出来；④流程是否顺畅：将相应的流程走一遍，看是否流畅。

注意提示：①未完成的作品拿出来讨论，页面不完整不代表思想不完整，即使是不完整的页面，里面也应该有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再动手。②理清自己的思路，要有属于自己的清晰思路，对内容、功能和流程自己要先想明白，可以列举一些具体问题来辅助理清思路。③坚持自己的想法，每个人都有自己的想法，只要理清自己的思路，就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。

关于工具和作图：之前花了很多时间去研究Axure，学会了一些作图技巧，但渐渐发现这些对页面的提高基本不大。我觉得在掌握基本工具使用时可以暂时忽略技巧。页面最重要的是你的想法，等到想法成熟之后不妨慢慢考虑工具的深入，过多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3之间调整，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。

如何制作网站web 方法/步骤 第一步：百度搜索菲尔莱斯科技，打开菲尔莱斯科技官网，免费注册您的账号，注：（生成的网站二级域名会是：账号.，如不想使用二级域名可绑定自己的顶级域名）。 请点击输入图片描述 填写注册的相关信息 请点击输入图片描述 注册成功后进入后台页面，点击管理企业网站 请点击输入图片描述 填写网站标题，网站类型，进入电脑站，初次使用的用户，可以选择左上方的快速建站 请点击输入图片描述 选择适合自己的行业模板，不同行业模板后期也可改动适应自己的需求 请点击输入图片描述 例如：选择数码、家具、家具百货栏目里的电脑类，点击使用 请点击输入图片描述 免费制作网站后，可对标题、栏目、图片进行上传编辑，点击右上方可以预览生成的网站，点击左上方网站管理进入网站后台管理。 请点击输入图片描述 后台可浏览网站数据，如需绑定自己的顶级域名，点击系统设置-网站域名，按教程进行绑定 请点击输入图片描述 网站做完后网站上方会有，您的网站试用资格将于XXXX-XX-XX到期，打开菲尔莱斯科技官网点击-产品介绍-开通免费站，提交后即可正常使用。

web界面原型使用什么工具 Pencil是一款开源的原型图绘制工具，手绘风格的，就像自己在纸上画的那样。Pencil还可以用来绘制各种架构图和流程图，同时还提供Firefox的插件。 Framer是一个开源原型设计工具，使用CoffeeScript编写。支持动画效果和交互操作。