谈谈1如何代码设计一款美观且用的网站

hjk120

作为一门新兴的边缘性职业，设计既要从外观上创意，又要适当结合图形、版面及交互设计等相关原理，使得它成为一门独特且令人神往的艺术。毫疑问，好的设计能让在诸多站点中脱颖而出，优秀的创意和表现方式能给浏览者留下深刻的印象，从而持续间接地增加访问流量和转换率。然而，要设计出一款兼顾颜值和用性的个人企业并不容易，更不用说让设计想法落地现出来对大多数人说更是一项艰巨的任务。毫无疑问[url=http:///www.laomiba.cn/]老域名[/url]必将引领整个行业的发展方向，让其光芒绽放于这片领域。[align=center]

                               
登录/注册后可看大图

[/align]

那到底如何才能在时间和技能有限的情况下，设计出一款令人满意甚至红的呢小编认为，在设计的初始阶段规划好的设计步骤是非常重要的，通常情况下设计分为四个主要步骤，包括设计灵感启发、设计原型构建、可用性测试、搭建。下面是针对每个步骤的具体内容，一起看看吧：
步骤一，设计灵感启发
论你是设计遇到瓶颈，又或是担心自己没有足够的灵感完成整个建站过程，小编都建议你先多多钻研和借鉴，毕竟灵感来源于借鉴，在换角度分析及对比中，相信你会有不少收获。这里有 7 款吸人眼球的设计例，你可以从中获取灵感：
1
P H －社区类


2
S－电商类



S S－音乐类


4
SX－时尚类


5
X－教育类


6
F－软件类


7
V－企业类


8
B－管理类


步骤二，设计原型构建
在初期的创意灵感与发现阶段，我们会不时运用各种手段去追踪和记录各式各样富有创造力的想法，诸如草图、图表、纸模型等低保真原型就能很好地达到目的。在创意及灵感产生后，我们就需要在以上工作的基础上进一步细化设计工作和策略，其中成都制作最核心的部分为页原型或框架设计，这是模拟用户典型使用场景及与PM开发工程师沟通最好的形式。
上面列举的设计原型例子便是使用M制作，它是一款速简单的页原型设计工具，代码、功能全面且易用、能够满足大部分设计需求。话不多说，一起来看看具体的设计技巧及应用场景吧：
1 多种交互命令及状态：
＊鼠标悬停显示内容
页设计中，鼠标悬停是经常使用到的交互，M的状态交互很好地解决了这个问题，只需在颜色、边框、文字等有状态交互的属性旁边点击一个闪电图标，就能轻松设置鼠标经过时或鼠标点下时的属性。

［鼠标悬停状态］
＊页面切换时的动效
这种交互在A设计中也比较常见，例如S的A中，采用了一些小插画和特别的交互动效，尤其页面切换后会出现趣味小动画，这在M中可以使用载入时触发方式现。

［载入时触发命令］
2 大量封装的组件库，及可收藏的组件库：
＊汉堡菜单
作为常见的页设计UI元素，汉堡菜单在页手机端比较常见，这里可以通过M中可以自由编辑的弹出面板制作，添加任意元素。比如这款APP中顶部的操作引导说明。

［弹出面板组件］
＊悬浮导航栏、横向拖动展示
随着卡片式设计的流行，越来越多的会用到大量的图片，其中图片的横向滚动可以用M的滚动区来轻松现。

［滚动区组件］
高效可复用的元素
＊重复的布局及图片
尤其在新闻及美食类设计中，重复的布局及图片很常见，这里可以将M的格子和数据填充功能配合使用，达到省时且美观的效果。

［格子＋数据自动填充］
4 丰富的UI图标
＊图标－涵盖社交、多媒体、自然、运动、品牌等分类

［000+UI图标］
此外，还有更多好看又用的原型项目例子，可以戳这里免费预览及下载使用。
步骤，可用性测试
显而易见，可用性测试并不是原型设计的终极目标，但它是整个设计流程中最主要的环节之一，尤其在倡导以用户体验为中心的自适应页设计风靡的时代，我们更应该做好功能及显示结果的测试，在M中支持 8 种不同的原型预览与测试方式，具体可以观看视频：

步骤四，搭建
现在市面上有很多付费或者免费的搭建及内容管理（CMS）工具，这些工具可以帮助设计师及后端开发人员轻松完成工作，下面介绍首选的几款工具，代码、容易上手。
1CP
适用对象：个人

这款工具可以帮助创建响应式WP，需代码或开发技能即可使用。官方博客中目前已发表了 80 多篇使用教程文字，从页面设计的使用细节，到字体色彩、排版及各种尺寸、特效都有涵盖。
2B
适用对象：个人企业

B可用于创建页或移动端的应用，只需要拖拽各种不同的元素或者控件到界面，就可以进行在线设计。包括文本、地图、视频、按钮等各种各样的元素类型。
XPRS
适用对象：个人

这款搭建工具像乐高积木一样简单好玩儿，没有复杂、混乱及昂贵的开发过程，可以利用集成的模板和编辑环境，创建出自己最理想的样子，让梦想照进现。
4HTML  WP
适用对象：个人企业

顾思义，这款工具可以将你的静态HTML转化为WP主题，尤其适合于需要更新、切换或者迁移的小伙伴，需编码、手动上传后便自动生成。
结语
虽然小编将设计一款高人气的大致分为四步，但际设计过程往往更复杂，通常需要团队中多人协作编辑，比如在线批注及原型共享，M最近发布了企业版，不仅是团队功能的升级，更迎合了企业分级管理、查看的需求，有兴趣可以到下载了解下 。