ofly 发表的文章

什么样的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设计师要把设计稿做严格的标注,各个元素的尺寸 和之间的间距,字体大小,颜色,透明度等。

js去除html标签

收集整理了关于js去除html标签,以方便参考。

function removeHTMLTag(str) {

str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag

str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白

//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行

str=str.replace(/ /ig,'');//去掉

return str;

}

php cli配置文件问题

root用户和非root用户使用的php可执行文件是不一致的

root => /usr/bin/php非root => /usr/local/bin/php

尝试着对这两个文件使用了php -v,结果下了我一跳,root用户的版本是5.3.3,非root用户是5.4.6,呵呵,我就呵呵了,谁部署的环境~,坑人啊。

尝试着将原有/usr/bin/php备份后,复制/usr/local/bin/php过来覆盖掉,在使用php -v发现版本一致了,也不报错了,至此问题解决。

纠结了半天,结果就是版本的问题。

SCWS-1.2.3 安装说明

以 Linux(FreeBSD) 操作系统为例1. 取得 scws-1.2.3 的代码wget http://www.xunsearch.com/scws/down/scws-1.2.3.tar.bz22. 

解开压缩包[hightman@d1 ~]$ tar xvjf scws-1.2.3.tar.bz23. 进入目录执行配置脚本和编译[hightman@d1 ~]$ cd scws-1.2.3

[hightman@d1 ~/scws-1.2.3]$ ./configure --prefix=/usr/local/scws ;

make ;

make install注:这里和通用的 GNU 软件安装方式一样,具体选项参数执行 ./configure --help 查看。

常用选项为:--prefix=<scws的安装目录>4. 顺利的话已经编译并安装成功到 /usr/local/scws 中了,

执行下面命令看看文件是否存在[hightman@d1 ~/scws-1.2.3]$ ls -al /usr/local/scws/lib/libscws.la5.

试试执行 scws-cli 文件[hightman@d1 ~/scws-1.2.3]$ /usr/local/scws/bin/scws -hscws (scws-cli/1.2.3)

Simple Chinese Word Segmentation - Command line usage.Copyright (C)2007 by hightman....

6 用 wget 下载并解压词典,或从主页下载然后自行解压再将 *.xdb 放入 /usr/local/scws/etc 目录中

[hightman@d1 ~/scws-1.2.3]$ cd /usr/local/scws/etc

[hightman@d1 /usr/local/scws/etc]$ wget http://www.xunsearch.com/scws/down/scws-dict-chs-gbk.tar.bz2

[hightman@d1 /usr/local/scws/etc]$ wget http://www.xunsearch.com/scws/down/scws-dict-chs-utf8.tar.bz2

[hightman@d1 /usr/local/scws/etc]$ tar xvjf scws-dict-chs-gbk.tar.bz2

[hightman@d1 /usr/local/scws/etc]$ tar xvjf scws-dict-chs-utf8.tar.bz27.

写个小程序测试一下[hightman@d1 ~]$ cat > test.c#include <scws.h>#include <stdio.h>main(){ scws_t s; s = scws_new(); scws_free(s); printf("test ok!\n");}8. 编译测试程序gcc -o test -I/usr/local/scws/include -L/usr/local/scws/lib test.c -lscws -Wl,--rpath -Wl,/usr/local/scws/lib./test9. 这样就好顺利安装完毕可以使用 libscws 这套 C-API 了10. 如果您需要在 php 中调用分词,建议继续阅读本文安装 php 扩展,否则可跳过不看。 假设您已经将 scws 按上述步骤安装到 /usr/local/scws 中。 安装此扩展要求您的 php 和系统环境安装了相应的 autoconf automake 工具及 phpize 。 1) 进入源码目录的cd /home/scws-1.2.3/phpext/ 目录 ( cd ~/scws-1.2.3 )
    2) 执行 /usr/local/php/bin/phpize #写全phpize的路径 (在PHP安装目录的bin/目录下)
3) 执行 ./configure --with-php-config=/usr/local/php/bin/php-config --with-scws=/usr/local/scws
       若 php 安装在特殊目录 $php_prefix, 则请在 configure 后加上 --with-php-config=$php_prefix/bin/php-config    

4) 执行 make 然后用 root 身份执行 make install

5) 在 php.ini 中加入以下几行[scws];; 注意请检查 php.ini 中的 extension_dir 的设定值是否正确, 否则请将 extension_dir 设为空,;

再把 extension = scws.so 指定绝对路径。;extension = scws.soscws.default.charset = gbkscws.default.fpath = /usr/local/scws/etc

6) 命令行下执行 php -m 就能看到 scws 了或者在 phpinfo() 中看看关于 scws 的部分,记得要重启 web 服务器 才能使新的 php.ini 生效。

移动端配置

移动端配置:

  RequireJS(按需加载,移动端上可以不打包,善用304缓存,腾讯搞出一个更牛叉的增量更新加载器MT,也可以试试)+

  Backbone(组织代码与路由管理)+

  Zepto(轻量DOM操作) +

  fastclick.js(点击穿透与延迟处理)+

  Hammer.js(各种触屏事件)+

  iScroll5.js(滚动条处理)+

  Animate.css(CSS3动画)+

  Enquire.js(处理响应式布局)。

JS代码的window.location属性详解

如果你稍微懂一些JS代码,一般都会知道 window.location.href 这个属性。并且用该属性获取页面 URL 地址:

window.location.href = window.location.href;

好吧,我告诉你,这样弱掉了。其实原生 JavaScript 真是什么都有。

window.location 对象所包含的属性

属性 描述
hash 从井号 (#) 开始的 URL(锚)
host 主机名和当前 URL 的端口号
hostname 当前 URL 的主机名
href 完整的 URL
pathname 当前 URL 的路径部分
port 当前 URL 的端口号
protocol 当前 URL 的协议
search 从问号 (?) 开始的 URL(查询部分)

window.location.hash

要使用 JS 定位锚点,完全可以使用 window.hash 配合元素 ID 完成。比如快速定位到页面的某条评论,则直接使用如下代码即可:

window.location.hash = "#comment-5981";

另外 Twitter、Facebook、Google 等已经开始大量使用 #! 这种形式的 hash 方法处理异步交互页面的 URL 可回溯功能。

window.location.search

如果有这样一个 URL 地址:

http://www.google.com.hk/search?hl=zh-CN&source=hp&biw=1400&bih=935&q=%E8%8A%92%E6%9E%9C%E5%B0%8F%E7%AB%99&aq=f&aqi=&aql=&oq=

如何利用 JS 脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。

另外,如果根据用户的搜索条件刷新页面,只需直接设置 window.location.search 即可。

Total: 286Page 2 of 36‹ Prev1234567Next ›Last »