家好！我是一名UX设计师，希望可以与共同喜欢探索用户体验的朋友们一起成长！我会不定期地更新一些有关用户体验方面的文章。本文主要分享：无需ui和前端制作个人网站，只需一个Axure就能搞定！

越来越多的人想要创建自己的个人网站，把自己平时工作的总结和收藏分享出来，整理到自己的个人网站中，不仅能帮助同行互相学习，更是自己能力的体现。我自己用axure做了一个个人网站，以本网站为例，来为大家讲解如何用axure做出高保真的个人网站。

如果后期维护量较频繁的，还是建议正常开发网站，并且需要有后台进行日后维护。axure制作网站只适合维护量较小且简单的网站。

在正文开始前，先给大家看一下网站的效果（http://uxgao.com），觉得不错的童鞋可以继续往下看哦！

一、正常网站开发流程和axure制作网站对比

1. 正常流程

2. axure制作流程

二、什么的样个人网站不适合用axure制作

1. 需要后台维护

所谓的后台维护指得就是需要开发一个官网后台，日常通过后台上传新文章、新内容等信息。axure只能做出展示效果，所以该场景下不适用axure制作网站。

2. 页面数量和内容较多

首先axure制作的网站导出的html文件较大，相比正常前端开发出来的网站要大好多。如果网站整体页面较多，或单独某一个页面内容／图片较多。网站加载较慢，所以该场景下不适合用axure制作网站。

3. 有复杂的动效和交互

现在大多数复杂的动效和交互都是用h5、css3做的，过去我们可能还会看到网站上有flash或AE做的动效。目前大多数都是用flash、AE做出效果后，前端转换成代码实现。从而让网站浏览更加流畅。如果再axure里加复杂的动效和交互，那么绝对会影响网站的加载速度，从而大大降低了网站的浏览效率。

三、axure制作网站难点讲解

1. 整体尺寸把控

本网站做的效果是内容区域宽度固定，背景宽度自适应。

（1）内容区域宽度

考虑到主流的显示器分辨率，我设置的内容区域宽度为1200px。所有内容和图片都要放在这1200px以内。可在页面中拉一个参考线，拉到横坐标1200的位置。在做设计的时候从最左侧开始就可以了，不需要给左侧留出空间，下一条会讲到页面居中的方法。

（2）整体页面居中

之所以上一条说到不给左侧留空间，是因为我们要把页面设置成居中对齐。选择项目－页面样式编辑，在页面排版中选择第二个，居中对齐。选择这个选项后，在axure画图时页面依然是在最左侧，在浏览器预览时整个页面就会居中显示。

（3）背景宽度自适应

如果网站一个页面的背景都是同一个颜色，那么直接在当前页面点击一下空白处，然后选择样式－背景颜色，选择自己需要的颜色。

如果一个页面不同模块有不同的背景色，那么我们需要用动态面板来实现。首先拉一个动态面板，高度设置到你需要的高度，宽度随意，不过为了方便在这个模块上加内容，建议宽度拉倒跟网页内容宽度一样，比如1200px。然后在样式里设计你需要的背景颜色，然后勾选100%宽度。在浏览器预览后，该模块的背景色就是自适应各个分辨率了。

2. 导航

我做的导航效果是固定在浏览器顶部，之所以要固定在浏览器顶部，是因为页面内容较多时，用户滚动到下面后，直接就可以看到导航并进行操作。

制作过程：

（1）拉一个动态面板，导航的高度即为动态面板的高度，宽度拉到1200px。（宽度一定要拉倒内容区域的宽度，因为要在动态面板里面放导航的内容）

（2）设置动态面板背景颜色（即为导航背景颜色），勾选100%宽度。

（3）在属性中选择固定到浏览器，勾选固定到浏览器窗口，水平固定选择居中，垂直固定选择上。最下面的始终保持顶部，如果没有其它内容需要覆盖在导航上就勾选上，我的导航右侧有一个二维码需要覆盖在导航上，所以我的没有勾选。（没有勾选的要注意设计完所有页面时，要把导航的动态面板放到图层最上层。）

导航文字：导航的文字需要放在动态面板里，文字需要有3种状态，当前页面状态、鼠标悬停状态、正常状态。

3. banner处理

banner的图是整个网站中最大的图片，这里不建议大家直接把banner图放到axure文件里，既不能自适应，又影响了加载速度。

纯色背景banner制作过程：

• 类似上面的教学，用动态面板来实现banner背景色的自适应。
• 文字尽量用axure打上去，少用图片。
• banner配图需要用photoshop来处理，最后存成透明背景png的格式。然后把该图片拉axure文件里。

非纯色背景banner制作过程：

• 需要把banner背景修饰成非常宽的图片，有条件的情况下设置成5000px。动态面板的样式中选择背景图片－导入那张图片。在属性中勾选100%宽度。
• 文字尽量用axure打上去，少用图片。（如果有需要，可以将文字一并处理到背景图中导入）

4. 按钮的效果

所有可点击的图形按钮、文字按钮都需要有3种状态，正常状态、鼠标悬停状态、鼠标按下状态。

在属性－交互样式设置中设置鼠标悬停和鼠标按下的效果。

5. 二维码的效果

我做的二维码效果是鼠标悬停在导航右侧二维码图标时，由上向下推出二维码，鼠标离开时，由下向上收回二维码。

制作过程：

（1）拉一个动态面板里面放二维码图片，放到图标下面的位置上。

（2）选择固定到浏览器，水平固定选择居中（根据网站尺寸，调整边距），垂直固定选择上，勾选始终保持顶部。

（3）给导航动态面板中的二维码图标加两个事件，如图：

6. 跳转非本网站的链接

网站中有一些文章、推荐等模块，点击后跳转的是非本网站中的链接，我们需要对可点击的区域加点击事件，链接到外部链接，并且在浏览器新窗口打开。具体操作如图：

四、注意事项

1. 能用文本尽量少插入图片

比如banner上的文字，推荐里面的各种文字等，尽量不用以图片的形式放进来。尝试用axure进行排版。

2. 注意细节

既然是高保真，就不能做的像低保真那样粗糙，整个网站的字体、字号、间距、颜色等细节问题。都要像ui设计一样注重细节。

3. 交互效果统一

可点击的区域，比如文章，鼠标悬停的时候要有一个变化，比如外发光、描边等效果。要遵循设计原型，给用户每一个操作都有及时的反馈。

4. 图片压缩

尽量把用到的每一张图都进行压缩，前提是保证图片质量不会被看出来降低。

5. 购买域名

这个大家可以自行选择，去腾讯云、阿里云购买，哪个便宜买哪个。域名后缀尽量选择常见的，比如cn、com等。前面的字母可以以自己名字开头拼音或全拼来选择。

五、发布上线

这个我也不太懂，是朋友帮忙搞的，用的是github，大家可以上网搜一下。不用花钱买服务器，这里有一个注册与使用的教学希望可以帮到大家，链接：https://blog.csdn.net/p10010/article/details/51336332

上传完去域名后台管理解析一下就可以喽！

作者：高杰，微信号公众号：UX设计师高杰，从事交互设计和用户体验工作。

本文由 @高杰 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Pexels，基于 CC0 协议

为一个产品经理，虽说会画原型不是万能的，但不会画原型，是万万不能的。但，这篇文章不是讲如何画原型的~以某种方式更高效的打开原型，拉近与程序猿哥哥之间的距离，拒绝撕逼，用原型说话，让沟通更简单，更高效~

写在前面（Q&A）

1. 这篇文章主要是讲什么的？

这篇文章满满的技术干货，主要分为两个部分：第一，如何利用github上传原型，生成链接；第二，如何将APP原型放进手机，做成一个高仿原生APP？

2. Axure不是有自带的原型生成网址的功能吗(www.share.axure.com)，为什么要用github？

是，Axure是有自带将原型发布到Axure的功能，但，根据个人经验来看，其打开的速度实在太慢了，稍微没点耐心的人，还以为是你原型画的有问题呢。所以作为一个注重用户的体验的产品汪的我们，应该最好是能规避这种事情的发生~

github好处多多，本汪将在下面的章节中具体说明

3. 把原型放进手机，做成一个高仿原生APP，具体是什么样的呢？

简单地说，就是让桌面有应用图标，点进去可以有各种操作，生成这样的一个高保真APP原型。

话不多说，先上图（你能分辨的出此桌面哪一个APP只是个原型demo吗？）

Part 1：如何利用github上传原型，生成链接

为什么要使用github？

1、github是一个面向开源以及私有软件项目的托管平台，很多公司的技术团队都使用git或svn来管理代码，产品汪使用github会程序猿哥哥感觉你更专业~

2、github可以随时提交新版本以及回退到历史版本，使原型也有版本控制，再也不担心给错原型,同时每一版本的原型都有记录，方便和程序猿哥哥讨（si）论（bi）需求是否满足~

3、github是免费的，快速的，不用你租服务器发布项目等等复杂操作，入门成本相对较低，并且功能基本能满足PM的要求~

手把手教你如何利用github上传原型

Step 1：注册一个github的账号

网址：https://github.com/

填写个人基本信息，即可完成注册~

Step 2：创建项目

在登录了之后，会跳转到如下的界面，可通过“start a project”或者右上方“+”号下面的“New repository”创建项目。

跳转至下一页面，填写项目的名称，注意，项目名称（如下APP_Demo）一定要是英文，因为这个名称就是后面生成链接时链接的名字，所以中文字符无法识别，会被统一成“-”

Step 3：下载安装git客户端

github是服务端，要想把本地项目代码上传到网上，还需要使用一个git客户端。

点击set up desktop下载git客户端，然后安装并登录。

另外，有一个个人的小小经验，在官网下载后的GitHubSetup.exe，由于安装过程也是需要联网的，可能会由于一些未知的原因无法安装成功，所以我当时是使用的朋友发给我的github离线包。

如果在安装过程中遇到问题的朋友，可以下载离线版的github哦~

本小汪贴心给出网盘地址：链接：http://pan.baidu.com/s/1o7UzCoy 密码：afom

Step 4：copy项目到本地

将刚刚在服务器端创建的项目copy到本地，这样才能成功将本地项目代码上传到服务器。

操作如下：

这时会弹出浏览文件夹，也就是选择将该项目复制到你本地的哪个文件夹下，我一般会有一个固定放置github项目的文件夹。并且系统会自动生成克隆的项目，所以我的项目克隆最终文件的绝对地址是D:\GitHub\APP_Demo（搞清楚克隆项目的本地地址非常重要，因为我们需要在下一步中将原型文件生成到该目录）

Step 5：将axure原型生成到本地目录

Step 6：提交到服务器端

在axure原型文件生成以后，我们再回到git客户端，会发现上侧出现了“539 uncommitted changes”,表示有539个未提交的改变。这是因为我们将axure原型生成到了github的本地目录里面而产生的改变，git可以实时获取到。这是我们点击提交到服务器“commit to master”，并且点击右上角“Sync”进行同步

上传成功后，系统会有提示，同时还会给你一个“undo”撤销的选择。并且在“history”里面，我们可以查看到本次提交的版本。

Step 7：生成网页链接

右击该项目，点击View on GitHub ，可以看到本次版本修改的变动。

点击Setting，往下滑动，直到看到“GitHub Pages”

这样就可以得到原型的网址了（如上图Your site is published at http://……..(被我马赛克掉了~)）

这样你就可以很顺畅的浏览你的原型网站了，不用担心像share.axure.com上面那样卡到没脾气~

Step optional：版本更新

上文中也提到了，利用github来发布原型的一大好处就是可以随时提交新版本以及回退到历史版本，使原型也有版本控制，再也不担心给错原型,同时每一版本的原型都有记录。

那么接下来我们顺便来演示一下这个功能有多方便吧~

假设我们现在对原型做了一些修改，只需要在axure中点击“在HTML中重新生成当前页面”即可（但注意，要保证重新生成的页面地址没有改动过，仍然是APP_Demo在本地磁盘所在目录）

若是有很多页面改动，可以直接将新版本覆盖到老版本所在的目录即可。

这时我们重新返回到git客户端，可看到上方出现了“26 uncommitted changes”，按照同样的老方法，将改变提交到服务器，并且点击右上角“Sync”进行同步，如下图

再次点击“View on GitHub”可以看到这次版本的改变

再打开原网址，发现之前原型所做的修改已经更新发布，体现在该网址上面。

到此为止，一个可以与程序猿哥哥讨（si）论（bi）需求，讨论原型的高大上神器就完成了~

但是，如果你想要把这个原型演示给老板，客户，以及其他任何可以展（zhuang）示（bi）的地方呢，最好还是把原型放进手机里，做成一个好像真的APP一样！这样才能更好的说服老板，客户等等~

Part 2：把原型放到手机里

前提：你的原型最好是高保真原型

有动画有交互，这样才能像真的一样。否则就算放进手机里了，也还是不像真的APP~

所以，课余时间比较多的孩子，可能多练习练习高保真原型的制作，虽说产品经理是一个重思维的工作，但是“工欲善其事必先利其器”，有一个能够说服人心的高保真原型，提前让人看到成果，这可能比你苦口婆心对着程序猿说“求求程序猿哥哥帮忙做下这个需求吧，最后一个了”要来得更加有效率~

Step 1：选择合适的原型尺寸

事先百度下适合各种型号的手机的原型尺寸（逻辑分辨率）是多少？

这里给出一些常见的：

• iPhone 5/5s： 320*568
• iPhone 6/6S/7 : 375*667
• iPhone 6p/7p ： 414×736

也就是说，如果你有一个iphone7，375*667就可以铺满全屏。

但是，请注意，由于Axure导出的原型在iOS上处理status bar时有问题，需要在高度上减去status bar的高度20，就为375*647，所以保证原型的高宽为375和647,另外请保证你的原型图起点是在其x轴，y轴都在（0,0）处，这样才能保证原型刚好平铺手机屏幕，否则若是起点不在（0,0）处，虽然原型尺寸是刚好平铺手机屏幕，但由于起点（0,0）处，原型有可能就处于手机浏览器中央，仍然不能满足需求。如图在axure中设置如下

Step 2：在Axure生成原型时对“移动设备”选项进行设置

在axure中点击“生成HTML”，点击“移动设备”设置相关参数如图，其中主屏图标也即应用将会呈现在手机桌面上的样式，IOS启动画面设置也即启动应用时的页面。

特别注意，完成相关参数设置后，还是需要到git客户端去commit这些changes到服务器端，才能生效

本文上部分已有大篇幅讲述，本部分不再赘述

Step 3：手机查看原型

在safari中打开原型链接，也就是我们part 1部分做好的高保真原型链接。点击手机下方“close”关掉导航，并点击iPhone自带功能“添加到主屏幕”，具体如下图

这时，我们可以看到手机桌面已经多个一个名叫“成长吧”的应用，进入原型，这时候的原型已经适配了手机的尺寸，躺在桌面的icon，丝毫不会有人看得出这只是个原型~如下图所示

这才是原型打开的正确方式，拒绝撕逼，用原型说话，让沟通更简单，更高效~

写在最后

制作高保真原型，生成网页链接，更新版本，生成手机适配原型等等，虽然看起来很酷炫很方便，但也请各位产品汪不可本末倒置哦，在时间充足并且个人兴趣浓厚，或者在某些场合必须提前画出高保真原型用以打动老板，打动客户等场合才建议花时间做这些操作。重思维，多分析多观察，不为画原型而画原型，原型只是沟通方式的一种，并非产品经理的全部，与各位产品经理共勉~

作者：Jolin，微信公众号：iPM0223（欢迎关注），产品新人，武汉大学，目前任职京东大数据与人工智能部门_技术研发产品经理实习生，欢迎各位批评指正~

本文由 @Jolin 原创发布于人人都是产品经理。未经许可，禁止转载。

1 模拟丁香园的高保真原型

在一般的开发工作之前，我们通常会设计产品原型，大部分为axure绘制的线框图作为产品的PRD文档，供UI和开发进行前期工作，但是有的时候客户、领导想在开发之前，看到产品的概貌，就必须做产品的高保真原型进行模拟，这时如果做出来的原型能运行在手机端，那再好不过，如图1(注：上图是仿照丁香园的家庭用药，做的一个高保真原型，算是免费给丁香园打广告，是不是考虑给我点广告费?哈哈)。

原型制作软件有挺多，不过个人使用之后，最后还是依然坚持使用Axure,优点颇多，也可能是先入为主，这个教程Axure也是必须软件之一，适配为iphone5s。

1、 首选是制作高保真原型，如图2：

图2 高保真的原型图

(注：高保真原型最好不要用太多内部框架嵌套，加载速度有点慢，还是用动态面板慢慢做，层级多了要有耐心)

iOS的屏幕尺寸目前是有限的几种，原型尺寸要和其一致。比如iphone5s视网膜下像素为640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是说320*568已经可以铺满全屏，不过，由于Axure导出的原型在iOS上处理status bar时有问题，需要在高度上减去status bar的高度20，就为320*548，所以保证原型的高宽为320和548,如图3整体高度为548px：

图3 高宽为320*548

2、 F8进行生成设置，设置如下图4：

图4 配置设置

按照上图，设置参数(注：不过闪屏页面一直无法出现，这个问题我也没得到解决，有解决的可以回复我)

3、生成原型文件，上传到axureshare或者放置在EasyWebSevr的根目录下，用本机IP替代电脑名称，获得完整路径。(不清楚的点击上期内容如何用EasyWebSvr搭建axure本地环境)

4、复制生成的html中原型链接，选择without Sitemap,如图5：

图5 复制链接

5、在safari中粘贴链接，并打开，已经可以看到和屏幕宽度的界面，并添加到主屏幕，如图6：。

图6 添加到主屏幕

6、可以通过桌面的快捷icon，进入原型，这个时候已经适配了手机，躺着桌面的icon,丝毫不会让人看得出是原型，下图7：

图7 test桌面icon快捷启动

end!

我拿公司的产品原型按步骤做了下，可以实现的哟！还把公司程序员给忽悠了一下。小编给大家把细节补充一下：

1. 使用axureshare比EasyWebSevr要方便

2. 在得到链接后，需要使用iphone手机上的safari浏览器

3. 一定要记住你设置的文件密码哟！访问链接时需要输入的。

文章来源：Axure中文网

小编微信：chizhenwei