作为一门新兴的边缘性职业，网站设计既要从外观上创意，又要适当结合图形、版面及交互设计等相关原理，使得它成为一门独特且令人神往的艺术。毫无疑问，好的设计能让网站在诸多站点中脱颖而出，优秀的创意和表现方式能给浏览者留下深刻的印象，从而持续间接地增加网站访问流量和转换率。然而，要设计出一款兼顾“颜值和实用性”的个人/企业网站并不容易，更不用说让设计想法落地实现出来对大多数人说更是一项艰巨的任务。

       那到底如何才能在时间和技能有限的情况下，设计出一款令人满意甚至网红的网站呢？小编认为，在设计的初始阶段规划好网站的设计步骤是非常重要的，通常情况下网站设计分为四个主要步骤，包括设计灵感启发、设计原型构建、可用性测试、网站搭建。下面是针对每个步骤的具体内容，一起看看吧： 

步骤一，设计灵感启发

       无论你是网站设计遇到瓶颈，又或是担心自己没有足够的灵感完成整个建站过程，小编都建议你先多多钻研和借鉴，毕竟灵感来源于借鉴，在换角度分析及对比中，相信你会有不少收获。这里有 7 款吸人眼球的网站设计实例，你可以从中获取灵感：

       1. product hunt －社区类

       2. shopify－电商类

       3. so stereo－音乐类

       4. stylexstyle－时尚类

       5. edx－教育类

       6. fedena－软件类

       7. valet－企业类

       8. basecampe－管理类 

步骤二，设计原型构建

       在初期的创意灵感与发现阶段，我们会不时运用各种手段去追踪和记录各式各样富有创造力的想法，诸如草图、图表、纸模型等低保真原型就能很好地达到目的。在创意及灵感产生后，我们就需要在以上工作的基础上进一步细化设计工作和策略，其中最核心的部分为网页原型或框架设计，这是模拟用户典型使用场景及与pm/网站开发工程师沟通最好的形式。

       上面列举的设计原型例子便是使用mockplus制作，它是一款快速简单的网页原型设计工具，无代码、功能全面且易用、能够满足大部分设计需求。话不多说，一起来看看具体的设计技巧及应用场景吧：

       1. 多种交互命令及状态：

       网页设计中，鼠标悬停是经常使用到的交互，mockplus的状态交互很好地解决了这个问题，只需在颜色、边框、文字等有状态交互的属性旁边点击一个“闪电”图标，就能轻松设置鼠标经过时或鼠标点下时的属性。

       这种交互在app设计中也比较常见，例如starbucks的app中，采用了一些小插画和特别的交互动效，尤其页面切换后会出现趣味小动画，这在mockplus中可以使用“载入时”触发方式实现。

       2. 大量封装的组件库，及可收藏的组件库：

       作为常见的网页设计ui元素，汉堡菜单在网页手机端比较常见，这里可以通过mockplus中可以自由编辑的弹出面板制作，添加任意元素。比如这款app中顶部的操作引导说明。

       随着卡片式设计的流行，越来越多的网站会用到大量的图片，其中图片的横向滚动可以用mockplus的滚动区来轻松实现。

       3. 高效可复用的元素

       尤其在新闻及美食类设计中，重复的布局及图片很常见，这里可以将mockplus的格子和数据填充功能配合使用，达到省时且美观的效果。