Lisa 2016-04-05T06:55:42+00:00 kejinlu@gmail.com 阅读书单 2016-03-28T00:00:00+00:00 Lisa http://ruxia.github.com/2016/03/Books 简约至上交互设计四策略

书中主要通过大量的例子阐述了简约设计的重要性。通俗易懂。其中所传达的“简约至上”的理念非常值得每一个人学习，特别是新生产品经理和设计师。

用户体验要素

《用户体验要素:以用户为中心的产品设计》是AJAX之父Jesse James Garrett的经典之作。本书最经典的是开篇的例子，以此让读者认识到用户体验的重要性。后面主要从表现层、框架层、结构层、范围层和战略层五个层次阐述用户体验的要素。此书内容偏讲产品设计的结构，个人认为更适合架构设计师阅读。强烈推荐阅读书中开篇关于用户体验的例子

人人都是产品经理

不得不说苏杰对产品经理这个职位的理解已经非常深刻。其中从为什么要做产品经理到什么是产品经理再到如何成为一名产品经理，最后介绍了产品经理应该具有的修养，爱生活，有理想，会思考，能沟通。作者根据自己的真实经历向读者阐述了产品经理的真正内涵。非常适合初步接触产品经理行业的人们学习。力荐

产品经理的灵魂：

“爱生活，才会爱产品。”
“有理想，就不会变咸鱼。”
“会思考，活到老学到老。”
“能沟通，在什么山头唱什么歌。”

结网

作者王坚，糗事百科创始人，凭靠自己的亲身经历对产品经理职业的理解做了很好的诠释。本书从一个产品的创建到推广给了读者很多实用的方法。适合新生产品经理阅读。力荐

Rework

《Rework》通过犀利的语言，向每一个人阐述了如何做到极简主义，特别是产品经理、创业人士等。 我认为其中最可贵的是坚定的执行力、敢于尝试的勇气以及坚持自我的信心。书中传递的精神值得每一个人认真学习。力荐

下面是书中我比较欣赏的几句话，与大家共勉。

“现在的你籍籍无名，这是件好事。籍籍无名就是一个绝佳的状态，你要庆幸自己目前还身在暗处。”
“起于浮萍之末，能最大限度地保住你的自尊和自信。”
“传道授业能为你建立起凝聚力，这是传统市场策略不可望其项背的。”
“每个人在属于个人的成长历程中，早已获得了解决问题的丰富宝藏。请信任我们的潜意识，它必定能在正确的时机产生恰当的回应。告诉你一句悄悄话——有时候，信息将以非语言的方式揭露真相。”

人月神话

《人月神话》讲述了软件开发以及项目管理过程中的一些注意事项和技巧。作者Freder ick P.Brooks曾荣获美国计算机领域最具声望的图灵奖桂冠。我个人认为此书确实在人力资源分配方面的见解一语中的，但总体介绍可能太过细节，不太适合初期产品经理等人员阅读，当然可作为科普读物。

Don't Make Me Think

此书只要讲的是web设计。其中Krug可用性的三条定律发人深省：1，别让我思考。2，点击多少次都没关系，只要每次点击都是无需思考、明确无误的思考。3，去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。书中的每一句话都能体现出作者具有丰富的web设计经验和web可用性体验。力荐

写给大家看的设计书

此书侧重讲了页面设计原则，包括结构、字体、颜色等搭配。适合设计师初学者阅读。

]]> AxShare 2015-02-03T00:00:00+00:00 Lisa http://ruxia.github.com/2015/02/AxShare

AxShare

  • 简介
  • 使用
  • 优势

AxShare简介

这里我简单介绍下，官网是英文的，感兴趣的可详细阅读。
简单说，AxShare，全称Axure Share，类似于百度云，为大家分享Axure RP原型提供便捷的服务。值得一提的是，AxShare是私有的，可分享连接给别人，并可设置不同的权限，大大提高了安全性。
AxShare官网简介 。

AxShare的简单使用

  1. 首先，点击WORKSPACES，可以新建workspace，点击下方projects，可查看上传的Axure RP原型；

  2. 这里，可以看到已经上传的Axure RP以及各自对应的访问链接，可直接分享给好友。关于分享，还可以设置更多的权限，具体可看这里 http://www.axure.com/learn/axshare/security；

  3. 很值得一提的是，这里可添加自己的域名（当然这个要审核），比如我的http://ruxia.me/ ，然后这个域名便可指向所建立的projects，进而，我们分享给好友的时候便可以使用自己的域名，也可直接放到简历上了。（下图域名在审核中）

AxShare用起来很简单，但是可以给我们提供很大的便利，因为当我们和别人分享原型时，很难把所有的文件都发给别人，使用AxShare就便捷多了。

AxShare的优势

  1. 私有，安全，空间大。

  2. 可将自己的域名指向文件，方便分享（这样是否需要密码访问，有待于考察）。

比较基础，欢迎补充。

]]> Font Awesome 2015-01-31T00:00:00+00:00 Lisa http://ruxia.github.com/2015/01/FontAwesome

Font Awesome

  • 安装
  • 在Axure RP中作为字体图标
  • 在web或应用开发中作字体图标

Font Awesome简介

Font Awesome的由来

还苦于开发网站或者应用找不到好的美工吗？那么，请看这里，集开发美工于一人之身。Font Awesome，原只为Bootstrap而设计的字体图标，目前icon更新到519个，包括web application、video player等14种。跟我一起来用Font Awesome，节省设计和图片缓存的时间，提高开发效率，改善产品体验。

下载

到Font Awesome官网下载，双击点击安装。 Font Awesome官网 。

在Axure RP中作为字体图标使用

使用方法

  1. 在Axure中拖入一个元件，并设置该元件使用FontAwesome字体；

  2. 设置页面交互中页面载入时文本值为该样式代码（例如图形代码）；

  3. 生成原型（快捷键点击F5）便可查看效果。

icon所对应代码

部分icon代码截图如下，其他具体的可到官网查询，官网icon代码。

在开发中作为字体图标使用

使用方法

  1. 几个小例子，如下图可见。

  2. icon具体使用代码可到官网查询，官网icon。

  3. 首先找到合适的图标
  4. 可见其代码

以上是我觉得font awesome可以给大家带来福利的两个方面，希望可以给开发者们带来灵感与便利。 最后推荐个Axure 学习网站 http://www.iaxure.com/。

]]> Android Studio的安装配置 2015-01-21T00:00:00+00:00 Lisa http://ruxia.github.com/2015/01/SettingsofAndroid Studio

Android Studio的安装和配置

  • 安装
  • 字体、颜色配置
  • 快捷键、便捷功能配置
  • 插件配置

Android Studio简介

Android Studio的推出

2013年5月16日，在I/O大会上，谷歌推出新的Android开发环境——Android Studio，并对开发者控制台进行了改进。首先解决的一个问题是多分辨率，开发者可以在编写程序的同时看到自己的应用在不同尺寸屏幕中的样子。而且，增加了五个新的功能，包括优化小贴士、应用翻译服务、推荐跟踪、营收曲线图、用版测试和阶段性展示。而且给出一些工程模板，比如Google Maps Activity，login Activity等，非常方便。个人而言，Android Studio的出现确实给Android开发者们提供了更加友好的开发环境。

下载

Android Studio更新速度比较快（可见下图），目前最新版本为v1.0.1，所以需要时可自行到官网下载 Android Studio官网 。

Android Studio安装

JDK的安装

关于JDK的安装没什么需要特殊注意的，最容易出现错误的就是配置环境变量的过程。本人由于当时少了一个\，纠结了很久找不出问题，如此简单的过程这样实在是费时费心。所以这里给出精确的环境变量配置，望给大家的配置过程提供一些便利。
共有三个环境变量需要配置，首先，找到“计算机→属性→高级系统设置→高级→环境变量→系统变量”，然后进行下面三步：

  1. JAVA_HOME→D:\Program Files\Java\jdk1.8.0_25\
    新建JAVA_HOME变量，变量值填写jdk的安装目录，比如 D:\Program Files\Java\jdk1.8.0_25\。（我当时就是忽视了最后的\导致的问题）

  2. Path→%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
    找到Path变量，编辑，在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;（注意原来Path的变量值末尾有没有分号，如果没有，先输入分号再输入上面的代码）

  3. CLASSPATH→.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
    新建CLASSPATH变量，变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

检查是否配置成功，运行cmd，输入java -version，如下图所示，则配置成功。

配置

字体颜色配置

  1. 更改主题。默认的Android Studio为灰色界面，感觉黑色的Darcula主题很炫酷。Settings --> Appearance --> Theme，选择Darcula主题即可。系统字体中文显示可改为这样，Settings --> Appearance，勾选 Override default fonts by (not recommended)，微软雅黑效果不错。

  2. 更改编程字体。Settings --> Editor --> Colors & Fonts --> Font。最漂亮的编程字体当属Consolas，15。由于系统默认的是不能编辑的，所以若要更改，则需要保存一份自己的设置，点击右侧的Save As，保存自己的设置，在Editor Font中即可设置字体。勾选Show only monospaced fonts，表示只显示等宽字体，因为编程等宽字体使用效果较好。

快捷键、便捷功能配置

  1. 快捷键设置及更改。Settings --> Keymap。个人觉得一般不用更变。

  2. 显示行号。Settings --> Editor --> Appearance，勾选Show line numbers。

  3. 显示空格。有利于规范格式。Settings --> Editor --> Appearance，勾选Show whitespaces。

  4. 自动导入所需引用。当从其他地方复制一段代码到Android Studio中，默认的Android Studio不会自动导入这段代码中使用到的类的引用，所以可设置如下。Settings --> Editor --> Auto Import，勾选Add unambiguous improts on the fly。

插件配置

  1. 插件禁用。Settings --> Plugins，显示已默认安装的插件列表，取消勾选即可禁用插件。我禁用的插件：
    • CVS Integration（CVS 版本控制系统）
    • Google Cloud Tools For Android Studio（Google云）
    • Google Login（Google账号登录）
    • hg4idea（Mercurial版本控制系统）


注意：如果禁用了上图列表2和3选项，将导致不能使用导入官方样例的功能（import sample）。
2. 插件安装。Settings --> Plugins --> Browse repositories，搜索安装。比如我安装的Git版本控制插件.gitignore support，如上图。
注意：如果使用Git进行版本控制，需要设置Git的安装文件目录。Settings --> Version Control --> Git，在右侧中选择Git的安装目录。

以上是我第一次安装设置Android Studio过程中的一些经验和技巧，希望可以帮助新手们更快的上手，也欢迎大家补充。

]]> Responsible Design响应式设计 2014-10-28T00:00:00+00:00 Lisa http://ruxia.github.com/2014/10/ResponsibleDesign 引言

很久很久很久以前，每个人都只有一件衣服（Website），不管有钱没钱大家每天都只穿这一件。 后来有人发明了舞会（移动互联网），大家都争先恐后地想要参加，于是一个裁缝甲「开发」忽悠人>们说进舞会最好订做一件专门的礼服（Mobile Site），大家想想也对，上班和出去哈皮都穿同一件衣>服多无聊啊，舞会就要有舞会的样子。于是乎只要有点闲钱的人都做了礼服，他和原来那件衣服是完全不 一样的，面子不一样，里子也不一样。 后来舞会的种类越来越多了，很多人被迫做了好多好多件礼服，于是又有一个裁缝乙「前端」站出来说 你们每年要新做那么多衣服，多费钱啊，而且一出门钥匙啊钱包啊名片都要在不同衣服里换来换去多麻 烦。你看，我们新发明了一个手艺「Responsive Design」，只要把你原来那件衣服稍微那么一 改，以后去哪个舞会都可以只穿这一件衣服，衣服的里子永远都差不多，但面子可以按照要求自适应不同 的舞会。 于是所有人都开始换上这种响应式的衣服了。

Responsible Design的提出者

Ethan Marcotte（伊桑·马科特）于2010年5月提出Responsible Design的理念。尤其是2013年，响应式设计被大量应用到博客等各网站中，风靡一时。

  • Ethan Marcotte是一个多才多艺的用户体验设计师和开发者。
  • 曾为纽约杂志(New York Magazine)、哈佛大学以及世界互联网组织W3C等客户服务。
  • 后加入Happy Cog—是为企业家服务的高度优化的网站托管供应商，专门为高端拥有巨大流量的网站效力。
  • 参与编辑Bulletproof Web Design，Designing With Web Standards

Responsible Design

响应式设计，简单来说，就是一个网站能够兼容多个终端。主要包括响应式布局和响应式内容，这里主要讲的是响应式布局。响应式布局就像下图中所示，在不同大小的屏幕上，网页自适应的显示不同的布局。

  • CSS media query 技术
  • 用Javascript来操作HTML内容
  • 在服务器端操作HTML内容

Media query

Media type

css2有Media type，特性如下：

  • Media类型：aural（声音），braille（触摸），print（打印），handheld（移动设备），embossed，projection，screen，speech，tty，tv。
  • @media规则可以在同一样式表里为不同终端使用不同的样式 由于Media type当时并不被多数移动终端支持，所以没有被广泛使用。

Media query

css3有了Media query，Media query已经被大多数移动终端支持。

  • 表达式： @media 媒体类型 关键字 (设备特性) {样式代码}
  • 关键字：and，not，only
  • 设备特性：min-width, min-height等

当然Media query依然有Media type的10中媒体类型，通过指定相应的媒体类型和设备特性，media query 技术会自动跟你设置的css进行匹配。

Media query在网页中的位置

  1. 在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="link.css"/>

  1. 在样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation: landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

Media query写法

@media screen and (min-width: 320px) and (max-width : 479px)

这是Media query最简单的一句代码，大家应该都能看出来，这是屏幕在320px到479px时要显示的部分。

@media screen and (max-width : 320px){ body{...} }

@media screen and (min-width: 800px) and (max-width: 1024px){ body{...} }

此处有一个特殊情况，对于高像素比的终端，比如iPhone4以上的retina屏幕。

这里普及两个小知识： - 像素比：指的是图像中的一个像素的宽度与高度之比。比如640×480的像素比1.0，720×480的像素比0.9。 - retina屏幕：分辨率超高的屏幕。如iPhone4、iPhone4s：3.5寸 960x640，iPhone5：4寸 1136x640。可见iPhone的像素比是超高的，所以已经不能保证一般的图片在该终端上依然显示清晰，必须进行特殊的处理。

为了适配高像素比终端，就要加上下面这段代码：

@media only screen and (**-moz-min-device-pixel-ratio: 2**), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){ body{ font-size:24px; } .box2{ background: url(d/20.png) #ccc; **background-size:50%**; }}

通过以上代码，使得1px的图片，首先做成2px的图片，再缩放到50%，显示为1px，这样便可清晰地显示在高像素比的终端上。

响应式设计的优缺点

优点： - 面对不同分辨率设备灵活性强； - 能够快捷解决多设备显示适应问题。 缺点： - 兼容各种设备工作量大，效率低下； - 代码累赘，会出现隐藏无用的元素，加载时间加长； - 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

相关链接

觉得本文还过得去的话，别忘了回到主页顺便看看作者的其它原创文章哟？

]]> Axure RP的使用说明 2014-09-18T00:00:00+00:00 Lisa http://ruxia.github.com/2014/09/AxureRP

Axure RP的特性

  • 快速创建wireframe（线框图）文件
  • 一键生成html文件
  • 一键生成word原型设计文档

Axure RP简介

介绍

Axure RP（后面简称Axure），Axure发音为Ack-sure，代表美国Axure公司；RP是Rapid Prototype（快速原型）的缩写，Axure是美国Axure Software Solution公司的精心杰作。

Axure Software Solution公司简介

Axure Software Solution公司成立于2002年5月份，2003年1月Axure 1.0上线。目前，Axure最新版更新到7.0，已经支持html5的特性，尤其今年特别火的响应式设计（Responsible Design）已经支持。

面向的用户

主要面向用户为产品经理、用户体验设计师、交互设计师、界面设计师、架构师以及程序开发工程师等，目前，在很多大型互联网公司如淘宝、当当等已经广泛使用Axure。

原型设计工具对比

  • 纸笔：简单易得。但难以表述页面流程和交互信息；
  • word：可画流程图、可有文字说明。但交互不好，且不易演示；
  • PPT：易画图、做演示。但不利于文档表达；
  • Visio：善于画流程图，框架图。不易写文字说明及做交互演示；
  • PS：易画图。不易交互与写文字说明，且难度大，需要一定的PS技术基础；
  • Dreamweave：不易写文字说明，并且需要一定的html知识与技巧。 通过对比，可看出Axure的特性还是非常实用便捷的。

Axure的使用

Axure结构

  1. 命令区。和操作所有office软件一样，包含文件、编辑、查看和帮助，这些功能差不多。而Axure特有的几个特殊的命令栏目是线框图（wireframe），包含所有画原型线框图的相关命令；对象（object），包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以及脚注命令等；生成（generate），自动生成html演示文件、word说明文档，以及对生成规则进行自行编辑、定义。
  2. 工具栏。基本和office风格一模一样，功能也很容易上手。
  3. 工作区。这就是平时操作创建prototype的空间，想法实现的地方。
  4. 站点地图。Axure创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。
  5. 器具箱。这里有所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区，进行操作。对于这里面的对象，我们有必要一一详细了解。
  6. 复用模块区。这里创建的页面文件和sitemap的页面相似，唯一不同的是，master的每个文件，可以当作一个整体，被sitemap反复调用。这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。也更容易理解网页文件的关系，了解网页设计师、程序员是怎么构建网站的页面的。
  7. 页面笔记与交互区。这个注释和交互和8不同，7针对的是页面，用来对当前创作页面进行注释与说明，同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。
  8. 控件注释与交互区。这里针对的是页面中的元素，也就是一个个widgets。

控件的交互

控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的RIA（Rich Internet applications）行为，所定义的交互都可以在将来生成的原型中进行操作执行。 在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：

  • 用户操作界面时就会触发事件，如鼠标的 OnClick、OnMouseEnter和OnMouseOut；
  • 每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；
  • 每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。

学习途径

汉化方法

PC windows，将汉化文件解压后放在新建的lang文件夹中，然后将lang文件夹放到Axure安装文件的根目录下即可。

]]> 关于Lisa 2013-09-21T00:00:00+00:00 Lisa http://ruxia.github.com/2013/09/aboutLisa 简介

昵称: 如夏
English Name: Lisa

标签

自由随性 占卜 音乐 舞蹈 羽毛球

自我认知

创造力 专注 敏锐 热爱生活

]]>