UI阅读笔记

 

“设计不仅仅是它的外观怎样或者感觉如何，而是它是如何工作的。——史蒂夫·乔布斯”

   “简洁是终极的复杂。——莱昂纳多·达·芬奇”

   “设计是一项计划，它将所有元素以最好的方式组织起来去完成一个特定的目标。——查尔斯·埃姆斯”

     没有争论，就没有变革！

     

 

 

● 用户仅在三秒内就能对你的页面做出判定

● 为了吸引访问者的注意力并且降低页面跳出率，我们应该试着让我们的页面布局，浏览起来友好

● 就在中心位置划分你的布局，并且将重要元素调整到之字形的端点上，以确保你的访问者在浏览后记住更多的细节

本文仅仅是一个善意的提醒，我们在设计网页时，不应忘记使用基本布局和基本设计方法。实际上，如果应用合适的话，这将会提高你的转换率。

 

响应式设计

 

虽然响应式设计仍处于发展初期，但是毫无疑问，市场需求会激发它的快速发展，因此我们需要多掌握一些它的基本规则，多了解一点响应式设计。

 

弹性图片技术（Fluid Image），能够方便的解决问题，而且节省载入时间。这种自适应图像只占用一个htaccess文件，一个php文件，以及一行Javascript代码，能够判断访问用户的设备屏幕尺寸。

 

网站转换率=进行了相应的动作的访问量/总访问量

 

      

 

工具：

  Compass的工具--开源的CSS框架编写工具。

  JavaScript推荐一款工具叫UglifyJS，可以压缩代码。

   FitText是一款jQuery插件，自动改变字体大小。FitText只能解决标题问题，段落文本的问题无法解决。

 

扁平化设计

 

信息层级的简化、极简主义，这是我认为扁平化的核心，

 

长投影：延伸投影，一般都是45度角，投影一般为物体的2.5倍大，给图标加入了一种深度。阴影也是扁平的，无渐变、明暗和衰退。

 

移动设计空间节省之道：

    

一. 聚

即聚拢、收纳，最朴实的节省空间的方式之一

移动设计中也经常使用actionsheet、popover这些“容器”将各种菜单、通知、相关项收到一块。

二. 藏

偏向隐而不见

移动设计中可隐藏的东西有三类：

1有形的控件：如按钮、标签、菜单、导航……

2手势与重力感应：长按删除、横滑翻页、摇一摇都是这一类；

 

3操作路径：把不常用的功能或设置项藏得深一点，通过层层递进达到目的。

 

三. 换

替换，即利用共享空间交替展现

 

四. 合

“合并”更偏向融合，移动设计中的合并也常常见于各种组件的组合，如输入框与标签、导航与下拉菜单、网址栏的输入框与取消/刷新按钮等。

 

五. 分

在简单收纳的基础上，如果将空间继续细化，分割成不同的“小块”，会使得摆放更有秩序。

 

六.压

移动设计的挤压案例也蛮多。ios4新增的inbox展示方式就是一种自上而下的挤压处理，除此之外，facebook和path的从左往右的挤压布局最近也特别流行。

 

七. 顺

直接利用现有的边角或边缘位置，顺着这些特殊的“点”进行设计。

移动设计中，这些特殊的区域有那么几种：

<1> 屏幕边缘

<2> 角落

<3> 控件边缘

<4> 系统状态栏

 

三款旅游APP:面包旅行、蝉游记、在路上