2017年08月的文章

UglifyJS2安装


npm 全局安装

sudo npm install uglify-js -g

你也可以通过 github 来下载源码使用

git clone git://github.com/mishoo/UglifyJS2.git
使用:

dir$ uglifyjs spa.js -m -o spa.min.js

* source-map [string],生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的网站访问地址。
* –source-map-include-sources,设置源文件被包含到source map中。
* –in-source-map,自定义source map,用于其他工具生成的source map。
* –screw-ie8, 用于生成完全兼容IE6-8的代码。
* –expr, 解析一个表达式或JSON。
* -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, –output [string], 输出到文件。
* -b, –beautify [string], 输出带格式化的文件。
* -m, –mangle [string], 输出变量名替换后的文件。
* -r, –reserved [string], 保留变量名,排除mangle过程。
* -c, –compress [string], 输出压缩后的文件。
* -d, –define [string], 全局定义。
* -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* –comments [string], 增加注释参数,如@license、@preserve。
* –preamble [string], 增加注释描述。
* –stats, 显示运行状态。
* –acorn, 用Acorn做解析。
* –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* –self, 把UglifyJS2做为依赖库一起打包。
* –wrap, 把所有代码合并到一个函数中。
* –export-all, 和–wrap一起使用,自动输出到全局环境。
* –lint, 显示环境的异常信息。
* -v, –verbose, 打印运行日志详细。
* -V, –version, 打印版本号。
* –noerr, 忽略错误命令行参数。





uglifyjs压缩批处理

新建一个txt文档,任意命名,将下面的代码粘贴进去,修改JSFOLDER后面的文件夹目录为你自己的,然后把.txt后缀改成.bat就可以啦!然后双击就可以批量使用uglifyjs压缩JS文件啦!

[html] view plain copy
  1. @echo off  
  2. :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS  
  3. SET JSFOLDER=C:\Users\Administrator\Desktop\page  
  4. echo 正在查找JS文件  
  5. chdir /d %JSFOLDER%  
  6. for /r . %%a in (*.js) do (  
  7. @echo 正在压缩 %%~a …  
  8. uglifyjs %%~fa -m -o %%~DPNa.min.js  
  9. )  
  10. echo 完成!  
  11. pause & exit  

什么样的APP算是好的

1、绝不考虑Web形态,一切考虑都基于APP。

2、产品优先级:
(1)有趣高于功能,产品必须有趣,必须Cool,才可能形成传播和口碑。
(2)功能高于交互,明确的功能满足明确的需求,用户不会在意炫酷交互效果。
(3)交互高于UI。便捷、快速的交互设计为先,围绕具体功能实现UI,而非有优质UI方案为此专门设立一个功能。

3、聚焦:一个APP只做一件事情,一个大而全的APP意味着全面的平庸。

4、永远一维化:让用户在一个维度里解决具体的问题,Twitter的Timeline就是一个好的范例。而类似Facebook、Path那样的滑出式菜单则是一个灾难,因为这使得产品拥有两个维度,加大了用户理解的困难。

5、保持主干清晰,枝干适度。产品的主要功能架构是产品的骨骼,它应该尽量保持简单、明了,不可以轻易变更,让用户无所适从。次要功能丰富主干,不可以喧宾夺主,尽量隐藏起来,而不要放在一级页面。

6、不要让用户选择。同一个页面之内,有多个入口;同一个功能,有多个实现方式;同一个界面,有多个展示方式。这对于用户来说是一种痛苦而非享受,因为他们只会因此而感觉到困惑和恐惧。用户宁可采取重复操作漫长而固定的操作路径,也不愿意使用多变的快捷方式。

7、隐藏技术,永远展现简单的、人性化的、符合人类直觉的界面。开发不可以为了炫技而展示功能,产品不可以为了炫耀而功能堆砌。

8、 拒绝个性化。除了依靠设计特色而立身的APP,换肤一类的个性化设计,除了让产品经理幻觉自己做了许多工作而自我满足之外,没有任何价值。它只能证明产品经理对自己的产品不自信,因为自信的产品经理凭借默认皮肤就可以满足用户。延伸开去,一个好的产品,其功能应该满足全球用户需求,无需为地区做特别定制化。

9、 产品一定程度上是为了满足人性中的贪嗔痴,这是用户的痛点。能把握住之后,产品经理应该超越其上,用产品帮助人们得以解脱。

10、想清楚自己究竟要做什么,不去迎合上司,不去讨好用户,不去取悦自己。

11、 分类!分类!分类!这是产品经理在确定产品主要功能构架之后,唯一应该为用户做的事情。分类无助于降低产品使用的难度,但是可以帮助用户认知产品和周边的世界。

12、永远围绕功能而做设计,永远不要倒过来做这件事情。

13、一个产品的基本功能不受用户认可,做加法也无济于事。

14、想不清楚一个功能点之前,宁可不做。

15、千万不要让用户在产品里“管理”什么。

体验分析文章

1、产品概览

主要包括 产品定位、目标人群、用户痛点、核心需求,可选内容有 运营策略、内容来源。作为用户体验五要素-战略层,是交互设计的基础。了解这些,在体验产品时才可能更了解设计背后的缘由。

2、功能模块分析

主要是梳理功能、功能点,熟悉背后的产品逻辑、机制、要点,并记录下来,对应用户体验五要素-范围层。通过这一步可以非常全面的了解这个产品是如何满足用户需求,除了主要功能模块还有哪些辅助功能。这样在下一步能更系统的做交互设计分析。

3、交互设计分析

1)分析App的信息架构/层级结构,明白这样设计的理由。

2)用户完成主任务的流程。

以购物为例,主任务之一的流程是——挑选喜欢的物品、加入购物车、从购物车中结算。而挑选喜欢的物品,则可以通过 首页、频道页、搜索结果页、详情页等页面完成。

3)重点针对与主任务流程相关的界面进行分析,撰写在界面布局和交互操作上如何做、有何亮点、是否有什么问题和建议。

4、用户反馈

在体验App期间,可以多翻翻用户的评论,有些资深用户的反馈还是挺有代表性的。针对这些反馈,可以从产品功能、交互设计上思考改进方案。

5、面临的挑战

产品最大的问题是什么?如果是我来做,我会怎么改进这个产品?

6、竞争产品

竞品有哪些?和竞品比,这个产品的优势是什么?劣势是什么?

以上几点,并不是每一点都得写,针对产品特性、以及对产品的了解可以适当调整。有时候为了防止自己拖延,我也会适当降低要求,重要写某几个模块。

移动APP设计师之APP整体构图速成法

一位优秀的移动APP客户端的UI设计师,在接到一个移动case的时候,脑海中应该浮现很多相关的一点APPui碎片。

肯定很多人会说,拥有这个功力肯定不是应届APPUI毕业生所能掌握的。25学堂的小编说,未必。只要平常我们多安装一些优秀的APP、每天来欣赏一款独特美的APP。

把这些好的APP 翻来覆去的浏览即可。

APP设计案例 移动App设计 界面构图设计

但是整体APP设计流程和设计模块,我们肯定要知道的。

一、APP图标设计

图标通常是传达给用户的第一视觉感受,它可以体现出产品风格 、功能,甚至品质。iphone独特的桌面展示方式,引领了”豆腐块”图标趋势,即在一个圆角方形的区域内创造各种可能。 分析众多优秀应用图标发现,要设计一款精致醒目的图标,大概可以遵循以下几点:

a、图形元素尽可能不超过2个,并且不可平均分布,突出主视觉;

b、桌面极少使用浅色,因此配色尽量以明亮浅色为主,以免被背景吸收掉;

c、为了让图标更加自然融合其中,符合ios平台的透视标准,尽量使用正面垂直角度,光源自上而下。

APP设计案例 移动App设计 界面构图设计

二、3-4张的引导界面设计

APP的新手引导,原本的出发点很简单,类似于一个简洁的产品说明书,其主要目的是为了向用户展示该APP的核心功能及用法。 一般出现在用户首次安装APP后打开的时候。欢迎界面一般为2 – 5屏的全屏静态图,左右滑动进行翻页,有跳过按钮;新功能指示及操作引导一般用蒙板加箭头指引的形式完成。

APP设计案例 移动App设计 界面构图设计

三、欢迎界面设计或者说是APP启动界面设计

欢迎界面(闪屏)像是应用的一道门,在使用前给用户一个预示,它通常包含图标、版本号、加载进度等信息。设计可以根据产品风格随意发挥,与图标呼应,强化产品的印象。

四、主要的功能界面设计

遵守IOS的交互习惯,功能界面的结构通常自上而下,分别是“状态栏、导航栏、标签栏、工具栏”

根据不同功能的界面、常见有以下几种设计方式:

列表视图——适合目录、导航等多层级的界面。将信息一级级的收起,最大化的展示分类信息。

分层的界面—— 利用iPhone本身独有的特性让其固定,或垂直、水平滚动,节省空间。

拟物化设计——适合实现独立功能的界面设计,界面的细节逼真写实。以现实的元素和操作唤起用户共鸣。

另外,当我们完成一系列辛苦的APP设计工作之后,为了让客户端开发人员完成我们设计出的效果。或者说要想准确传达自己的设计可以分三步来实施:

第一步:要实现快速可视化。

你可以选择任何用的顺手的工具,把自己的想法快速准确的呈现出来,就已经是成功的一半。

第二步:最大限度的还原使用场景。

如果是PC端,就在电脑上演示。如果是移动端,就在手机上演示。如果可操作,那最好做可交互的原型,当然,是在时间成本允许的条件下。

第三步:把设计参数化,尽可能减少让工程师凭感觉开发的情况。

相信我,如果你不希望工程师凭感觉调UI颜色,那么动效同理。一份精确的文档或者是高保真的原型效果图,是你专业性的体现。

总之:移动开发当中,app设计师要把设计稿做严格的标注,各个元素的尺寸 和之间的间距,字体大小,颜色,透明度等。