xml地图|网站地图|网站标签 [设为首页] [加入收藏]

【美高梅集团网址】Axure7.0练习——成立属于作者

澳门mgm4858集团登录网址,细节添加

整个作品到这里其实以及算完成了。不过,

为了引导用户使用产品,我希望做一些细节来进行提示,最好不影响到用户的体验,同时又有效。符合帕累托改善最好了。

主页切换提示

为了引导刚打开页面的用户滑动主页切换,我在主页加载两秒后,做了一个手指动作的引导,如图:

在页面载入的时候做逻辑如下:

在底部图标上,当鼠标移入时,会有阴影效果,我认为这样会产生立体感,增大用户点击的可能。

另外,我找了颜色不同的同样图标,在某个页面时,对应的图标用黑色表示。将当前页面对应的图标黑色版本置顶,其他置于底部即可。如图:

同样的,在工作经历页面,鼠标移入标题之后,颜色变化,同样是为了引导用户点击。相同的效果,还有兴趣爱好的简书、乐乎主页入口,鼠标移入后会有阴影变化。

图片切换效果引导

在竞品分析ppt哪里,我一直在考虑如何让浏览者了解,这个模块是可以通过上下浏览切换的。

后来我想到,可以做个堆叠的效果,让用户产生“这叠纸片可以翻动”的想法。

www4858mgmcom,然后就有了下面的效果。而且,当翻动图片后,下面的条数会跟着变化。

这个效果是在动态面板模块下,直接用两条矩形框填色后完成。在切换动态面板内容的时候,设置隐藏矩形框和推拉,就可以达到这个效果。

另外,在必要的地方,我都用鼠标移入提示做了说明,希望以此可以更好引导用户浏览。

写在结尾,至此,这个联系作品就到此为止。虽然小巧,不过希望能以此熟练自己的技术,增长见识。

  • 在本地克隆新建立的版本库。

    $ git clone git@github.com:gotgithub/gotgithub.github.io.git
    $ cd gotgithub.github.io/
    
  • 在版本库根目录中创建文件index.html作为首页。

    $ printf "<h1>GotGitHub's HomePage</h1>It works.n" > index.html
    
  • 建立提交。

    $ git add index.html
    $ git commit -m "Homepage test version."
    

确定主题

既然是个人主页,所以我想既包含简历内容,再添加一点简历无法体现得东西。所以初步将主页设置为

个人联系方式(最重要嘛~)、教育经历、工作经历、个人能力、练习作品、兴趣爱好(包括经常发布作品所用网址)

等几个板块。

 

先放上网址(Axure分享网站真的加载很慢):http://eu9nm1.axshare.com/#c=2

在GitHub,一个项目对应唯一的Git版本库,创建一个新的版本库就是创建一个新的项目。访问仪表板(Dashboard)页面,如图3-1,可以看 到关注的版本库中已经有一个,但自己的版本库为零。在显示为零的版本库列表面板中有一个按钮“New Repository”,点击该按钮开始创建新版本库。

确立风格

本来想做成网页并且用手机操作风格,发现1280*720用网页看的话,一个屏幕很可能装不下!所以折中之后,将界面改小了。然后我希望

整个页面通过左右滑动切换内容,并且可以通过最底部的按钮,快捷进入目标页面。

这样在浏览让更加便捷。如图:

美高梅集团网址,确立风格之后,我们就可以进入下一步啦~!

接下来,进入每个分页面的内容设计。由于初衷就是设想简单练习,并且模拟手机界面,所以每一页只留最少的东西。具体的想法为:

主页:留下姓名、联系方式等。

教育页:加个校徽好了。

个人练习:只放最近的作品。

个人喜好:图+文。

这样的规划之后就开始了最初的页面信息排布啦~!如下图:

(各主页图)

 

页面内容设计

某些页面需要再做效果,用以容纳更多的信息。所以,在每个页面有着更多的操作效果。

工作经历页面

由于工作经历的字数比较多,基本不能按照整体的字体风格装进去。所以我考虑做了个抽屉式的内容展开。

具体功能为:

在正常情况下收起,当要查看时,点击标题就能展开,再次点击能关闭。

如图:

在这里使用了隐藏/显示元件,同时拉动/推动元件。将详细内容做成隐藏,然后在鼠标单击时,交互动作设置为显示,同时推动下方的元件

就能做出抽屉效果。

个人练习页面设计

个人练习中我放了一个竞品分析的ppt。

如何才能让浏览者看到部分内容呢?

我想到了类似相册的tab功能。最后的结果就是上下拉动可以切换ppt页数,但是另一点就是Axure的分享网页打开特别慢,所以我只放了3张ppt,然后做了个外部链接,引导用户自行查看。如图:

这个效果实现也是依靠动态面板。

新建一个动态面板,将三张ppt放在三个不同的state。然后和主页面切换一样设置即可。不同的是左右拖动改成上下拖动。

兴趣爱好页面设计

在这个页面我打算放上几张自己的摄影照片。最好能切换查看,同时还能够大图查看。

所以我的设计思路为:

左右做明显的切换引导,并且单击图片可以放大图片查看。

如图:

这个效果同样依靠动态面板。

切换图片的动态面板命名为“摄影切换”,只要在首页再设置一个动态面板“摄影放大”,并且设置为隐藏。然后设置逻辑为:只要单击“摄影切换”,则根据“摄影切换”当前的图片改动“摄影放大”的状态,同时更改状态为显示。

如图:

  • 访问网址: 。

    最多等待10分钟,GitHub就可以完成新网站的部署。网站完成部署后版本库的所有者会收到邮件通知。

    还有要注意访问用户二级域名的主页要使用HTTP协议非HTTPS协议。

主页面动作设计

我觉得Axure7.0的动态面板是一个非常好用的元件。我几乎用动态面板做了三四层的嵌套。对于一个懂得程序语言的人来说,这样的嵌套并不算难。难的是需要用什么表现形式才能将切换体验做好,并且好看。自觉水平有限,所以尽力!

左右滑动效果

我将六个页面都做成主页面的一个动态面板的6个state。并设置逻辑

当在某个页面时,向左切换到它的前一个页面,向右切换到它的下一个页面。

换成C语言就是:

If(this=state2)

{

if(slip direction=left)

this=state3;

if(slip direction=right)

this=state1;

}

就这样,虽然繁琐了点,不过对于6个页面,工作量也不算大。如果工作量大,就要需求更好的优化方法了。这里并没有再深究。如图:

底部按钮动作

我是先上网收集了相关的图标,然后对每个图标进行单独设置的。

其实也很简单,只要在设置单击图标的时候,让动态面板切换到相应的页面就可以了。如图:

正确创建之后,你将会看到如下界面:

最早开始了解到产品经理、产品助理这样的职位,其实确实是从Axure开始的。了解到这是一个“画图软件”,感觉和PPT差不多嘛。后来对产品的兴趣越来浓厚,也逐渐自己捣鼓一下它的功能,感觉是个非常好用的软件!在这里尝试用Axure做一个简单的个人主页,以此练习,并记录下了思路和细节。

配置Hexo

修改全局配置文件

此段落引用自Hexo官方文档

您可以在 _config.yml 中修改大部份的配置。

 

进阶

如果成功完成了上述的全部步骤,恭喜你,你已经搭建了一个最为简单且基础的博客。但是这个博客还非常简单, 没有个人的定制,操作也比较复杂,下面的进阶技巧将会让你获得对Hexo更为深入的了解。

目录

参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 `downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。  

网址

参数 描述 默认值
url 网址  
root 网站根目录  
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_default 永久链接中各部分的默认值  

如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

 

 

 

 

   $ git push origin master

-----------------------------------------------------------------------------------------------------------------

 

$ ssh -T git@github.com
Hi gotgithub! You've successfully authenticated, but GitHub does not provide shell access.

-------------------------------------------------------------------------------------------------------------------------------

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 MMM D YYYY
time_format 时间格式 H:mm:ss

 

更换域名

首先,需要注册一个域名。在中国的话,.cn全都需要进行备案,如果不想备案的话,请注册别的顶级域名,可以使用godaddy或新网或万网中的任意一家,自己权衡价格即可。 然后,我们需要配置一下域名解析。推荐使用DNSPod的服务,比较稳定,解析速度比较快。在域名注册商出修改NS服务器地址为:

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

以新网为例,首先点击域名管理进入管理页面:

www4858mgmcom 1

然后点击域名后面的管理

www4858mgmcom 2

进入域名管理的操作界面,点击域名管理,来到域名管理界面:

www4858mgmcom 3

点击修改域名DNS,然后选择填写具体信息,在下面的空框中填入DNSPod的NS服务器:

www4858mgmcom 4

然后我们进入DNSPod的界面,开始真正进入域名解析的配置= =。在DNSPod中,首先添加域名,然后分别添加如下条目:

www4858mgmcom 5

最后,我们对Github进行一下配置。

在自己本地的hexo目录下的source文件夹中,新建一个CNAME文件(注意,没有后缀名。),内容为yourdomin.xxx。然后再执行一下hexo d -g,重新上传自己的博客。 在github中打开你自己的库,进入库的setting界面,如果看到了如下提示,说明配置成功了。

www4858mgmcom 6

在这一系列的操作中,包括修改NS服务器,设置A解析等等,都需要一定的时间。短则10分钟,长则24小时,最长不会超过72小时。如果超过72小时,请检查自己的配置过程,或者修改自己本地的DNS服务器。

参考:
https://xuanwo.org/2015/03/26/hexo-intor/
http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
http://luckystar88.github.io/2015/08/31/%E4%BD%BF%E7%94%A8hexo-github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
http://theme-next.iissnan.com/

 

初始化Hexo

接着上面的操作,输入:

hexo init

如图:

www4858mgmcom 7

然后输入:

npm install

之后npm将会自动安装你需要的组件,只需要等待npm操作即可。

分类 & 标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名  
tag_map 标签别名  

首次体验Hexo

继续操作,同样是在命令行中,输入:

hexo g

如图:

www4858mgmcom 8

然后输入:

hexo s

然后会提示:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在浏览器中打开http://localhost:4000/,你将会看到:

www4858mgmcom 9

到目前为止,Hexo在本地的配置已经全都结束了。

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

安装Hexo

在自己认为合适的地方创建一个文件夹,然后在文件夹空白处按住Shift+鼠标右键,然后点击在此处打开命令行窗口。(同样要记住啦,下文中会使用在当前目录打开命令行来代指上述的操作)

在命令行中输入:

npm install hexo-cli -g

然后你将会看到:

www4858mgmcom 10

可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。 然后输入

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字,下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:

hexo -v

如果你看到了如图文字,则说明已经安装成功了。

www4858mgmcom 11

www4858mgmcom 12

www4858mgmcom 13

下图可以看到访问协议增加了一个支持读写的SSH协议,访问地址为:git@github.com:gotgithub/helloworld.git。注意任何GitHub用户均可使用该URL访问此公开版本库,但只有版本库建立者gotgithub具有读写权限,其他人只有只读权限。在初始化版本库之前,最好先用公钥进行认证。(参考:)

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置  

添加新文章

打开Hexo目录下的source文件夹,所有的文章都会以md形式保存在_post文件夹中,只要在_post文件夹中新建md类型的文档,就能在执行hexo g的时候被渲染。 新建的文章头需要添加一些yml信息,如下所示:

---
title: hello-world   //在此处添加你的标题。
date: 2014-11-7 08:55:29   //在此处输入你编辑这篇文章的时间。
categories: Exercise   //在此处输入这篇文章的分类。
toc: true  //在此处设定是否开启目录,需要主题支持。
---

www4858mgmcom 14

使用Hexo

在配置过程中请使用yamllint来保证自己的yaml语法正确

Repository name下填写yourname.github.ioDescription (optional)下填写一些简单的描述(不写也没有关系),如图所示:

配置Deployment

首先,你需要为自己配置身份信息,打开命令行,然后输入:

git config --global user.name "yourname"
git config --global user.email "youremail"

同样在_config.yml文件中,找到Deployment,然后按照如下修改:

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

如果使用git方式进行部署,执行npm install hexo-deployer-git --save来安装所需的插件

然后在当前目录打开命令行,输入:

hexo d

随后按照提示,分别输入自己的Github账号用户名和密码,开始上传。 然后通过

更换主题

可以在此处寻找自己喜欢的主题 下载所有的主题文件,保存到Hexo目录下的themes文件夹下。然后在_config.yml文件中修改:

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

然后先执行hexo clean,然后重新hexo g,并且hexo d,很快就能看到新主题的效果了~

www4858mgmcom 15

扩展

参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC

进入代码库创建页面:

配置公钥验证后,显示如下:

  推送到GitHub,完成远程版本库创建。

本文由美高梅集团网址发布于彩票竞彩-投注|代销,转载请注明出处:【美高梅集团网址】Axure7.0练习——成立属于作者

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。