借助“用户属性”来思考网站内容(未完待续)

音乐类网站,这里聊的主要是单一乐器类型的音乐网站,为了让思考简单一点不谈行业关系,网站和终端用户的关系是一个三角关系(网站、用户、乐器)。那么从网站来思考符合用户需求的内容时候,就要去琢磨另外两点的关系——用户和乐器。

所以,我们可以用一个“用户属性”模型,来定义用户的需求:
y0
简单的说,就是用户和乐器之间的交际,无非是:音乐、教学、生活三种。而在不同的职业群体中倾向不同。

音乐类型用户:
y1

教学类型用户:
y2

普通爱好者:
y3

未完待续…

开发:篮球战术演练工具

最近公司篮球队约赛,输了两场。输球不要紧,得总结。所以自己开发了一款【篮球攻防演练工具】。

整理了一些常用的联防站位,和一些适合我们球队的高位挡拆战术。

1) CSS3 设计球场,比例:1m = 60px
2)jquery + jquery UI 完成交互设计
3)画板功能等有空再继续写吧。

DEMO:http://www.hiheng.com/demo/hibkball/

【转】5种实用App导航菜单设计方案

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机App导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感。

这5种App菜单设计方案也许有很多设计师已经在使用,但不能否认它是目前实用的,而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚,希望你看了后会有灵感收获,能把你的菜单设计得更棒,好好学习吧。

APP导航设计类型:

  1. 列表式菜单
  2. 矩阵、网格式菜单
  3. 底部菜单
  4. 顶部菜单
  5. 扩展菜单

一、列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的,遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计,使得菜单更多加美观。

GIF Aimation

f43643be91eab60a022c3c8a02c12fde

Elevatr

56d16d91223e2af59d975c519e9fb83e

HabitClock App

cf08fcdea961d78e201c260756136f6f

Instagrab for iOS

ae047189c6c0aecd50cd22d194d8f4db

二、矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块,优点简约而不简陋,导航清晰、明显,并能提高效率。但设计时切记不分青红皂白的去使用色彩哦,这可能会让用户不知所措和产生疲倦感。

Vectra

47471e98a59588878741b612eecfa278

Arrivo Mobile App

6730c9aed231d541911dc88209eabb8e

Abracadabra App

d1b28e90cc01722a3430ddf4f2d43811

TRAVERSE

33e8ceab141eb541238de0a120683bfb

三、底部菜单

底部菜单主要是列出应用程序重要的功能。

Badoo concept

13f5d840671755150aa0a27a0d7ab463

Animated sliding tab bar

7e456aecc2d148b44ddc7309a77ac1b7

四、顶部菜单

顶部菜单和底部意义差不多,把菜单放在顶部,可以遵循上至下的阅读习惯,不过我认为有个缺点就是不能单手操作。

Horner

fa85eab84e80e8c75d2e05cbf8e4a5b6

Discovery Channel

164f07e5297f7ce938eedf0b31159def

Air flow calculation app

a6b87db17f73f056339d1c9b6ab4020f

Shario App

8c1e097c2b149c4b9dfa55af877779c5

五、扩展菜单

扩展式菜单设计现在连网站也很常用,当我们觉得菜单比较点用位置的时候,可以尝试用这种方式来隐藏菜单,需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek

54996f3f977cdfedbb000e9286ba583a

Univit UI

e09813307b249da8c6b5661ff84b70b1

SVOY app design

9aa69becada4730d7ca0259eb5d87f17

Időkép

9518440ca9191894094f219d38348107

总结

从上面5个菜单设计方案中可以看出都有自己的优缺点,所以我们应该选择对你项目最为有效的方案,并能提高用户体验。

【转】新的APP演示良方:GIF动画

原文作者:Nataly Birch 译者:十萬個為什麼

每种事物都有回归的本能,长期以来,GIF动画在开发者当中,失去了它的统治地位,不再受欢迎,不再通用,近期它摆出了回击的姿态。尽管还是一如既往展示图像序列,但它不再像当年那些生硬的低画质视频,没有粗糙简陋的过渡效果。如今,GIF动画能够通过抢眼的效果和流畅的过渡,有效地聚集人气,给最终的动画一种柔滑精致的感观。

UI/UX开发者迅速估量了这种动画图片的潜力,它们虽小却非常有效,极具解释性。我们都知道,有时向客户或最终用户解释APP最后看起来将是什么样,会是多么困难、气人且耗时的事情;没有华丽的高质量截屏,精心绘制的用户界面配上一大堆解释和“手势”说明效果,并不怎么管用。只有视频和这些简短的GIF动画,才能轻松展示操作流程,并传达一款“活”APP的所有魅力,在众多功能组件之间,有效地展现交互。

颇具讽刺意味的是,我们的展示工具集中,最近补充了一种新工具,而它实际上一直以来就近在咫尺。

今天,我们汇集了一系列GIF动画作品,愉快地展现了各种移动应用的操作流程。

第一件作品是Dmitriy Chuta的Chapps,你可以欣赏它整个漂亮的动画效果,一组不同职业人员的照片卡。这张GIF图片展示了一种讨人喜爱的方式,通过令人愉快的视觉表现,来在数据库中进行选择和搜索。

First shot in Chapps

Bastien Leprince的APP概念设计,这里,我们的主要注意力,集中在地图组件内嵌的拖拽筛选功能上。所展示的所有功能界面和组件,相互间完美互动,为用户提供了一套流畅的操作流程。

App concept

George Frigo的FaceScan APP概念设计,尽管动画只持续了12秒,但它足够清晰地表达了这个APP的主要创意。对于那些想要一睹完整版的人,这位UI设计师也提供了AVI文件。

FaceScan app concept

Alexander van Ravestyn设计的WIP音乐发现APP,就如名字所暗示的,设计师想将用户的注意力引导到多媒体内容的浏览过程上来,不出所料,最终来到一个设计精美的音乐播放器界面。

Discover Music app

Jakub Antalík设计的Speedcam APP动画,设计师非常棒地通过动画表现他的APP。GIF漂亮地展示了speedcam的一部分,光彩夺目。

Speedcam app animation

Barthelemy Chalvet的Workflow Payment,这个团队展示了他们新APP的几张GIF。下面这张将关注点固定在支付流程上,看起来相当优雅便捷。其他GIF突出了时间轴、支付/费用、卡片和账户处理。

Workflow Payment

Barthelemy Chalvet的Dashag Tour,这个团队只是展示了一张小GIF动画,让人想起他们之前的项目。如果你想完全熟悉这个APP,可以访问他们的官方网站,里面包含了一大堆GIF动画,展示几乎所有的功能界面。

Dashag Tour

Sergey Valiukh的GIF动画设计,这个一流的界面有着令人愉快的精心处理的过渡动画,表现了在基本地图组件与主菜单间切换的简短流程。通过舒服的动画效果,一切相互衔接良好。

gif animaton

Devin Ruppert的Walkthrough动画,这张GIF展现了一个欢迎界面,带有多个动态图的幻灯片和登陆按钮面板。一切都活了,有效地表现了这个APP所带来的功能。

Walkthrough Animation

Mihnea Zamfir的交互概览,这是个非常简短却有效的动画,初衷是描绘一个从卡片目录中添加和删除项目的简单流程。

Interaction overview

Tobs设计了给队友删除和添加任务的动画,这张GIF动态展现了标准的滑动技巧,有效地支撑了整个审美取向,让APP看起来更鲜活、现代和诱人。

Delete task and assign task

Jan Losert的团队信息工具,这个团队为用户提供了大量解释性资料,不仅用来展示带有描述的静态屏幕截图,还有视频和一张巨大的GIF动画,展现这个APP的真实操作过程。

Ben Dunn的菜单交互GIF,这个动画GIF被当作展示动态美感的工具,表现了菜单优雅地从左侧滑出,并列出所有必要链接的过程。

Menu interaction

Ed Sansom的Poppin添加任务效果,这个APP有着讨人喜爱的圆形氛围和优雅的扁平美学取向,集各种柔滑效果于一张GIF,使它得到了恰到好处的强调

Adding a task

Dennis Terrey的第一件UI动画作品,这张GIF试图示范,如何使一个基本的菜单看上去干净、时尚和细腻。

UI Animation

Danny Spitzer-Cohn的Zite新鲜事设计,我希望用这个讨人喜爱的GIF动画来补充这篇作品集,它对高雅和传统的运用,绝对给人带来一丝愉悦的怀旧感。

Next for Zite

对于那些想要尝试这种展现方式的人,我们也准备了几样赠品——可以被轻松拆解成组件的GIF动画。赠品:

PixelBuddha的扁平风格预加载动画

Freebie: flat preloaders

Areus Wade预制的触摸手势动画

Precomposed Touch Gestures

就APP创造者和客户(或最终用户)间的互动而言,像Adobe After Effects这样的视频编辑软件充满了机会和可能,能够解决很多问题。GIF图片可以用来简短的解释动画效果,有效的展现操作流程,让人更好地理解这是怎么回事。

jQuery 1.9版本的变化

项目终于面临jquery 版本升级问题了,又要开始读各种文档,写各种demo。话说也很久没静下心来写码了。

.toggle(function, function, … ) 方法移除
toggle() 方法: 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
在 jQuery 1.9 版本中该方法被移除,未提供替换方法。

$.browser() 方法移除
在 jQuery 1.9 版本中该方法被移除,需要另写插件来完成。

.live() 方法移除
.live()方法:为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
在 jQuery 1.9 版本该方法被移除,升级后的方法用 “.on()” 来替换。

.die() 方法移除
.die() 方法:移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
在 jQuery 1.9 版本中“.live()”方法被移除,因此该方法也一样被删除。 由“.off()”来替代。

.sub() 方法移除
.sub方法: 可创建一个新的jQuery副本,不影响原有的jQuery对像。
在 jQuery 1.9 版本该方法被移除。


ajax事件需要绑定到document上
如.addBack()、 .addStart(),需要绑定在document。

jQuery官方文档:http://jquery.com/upgrade-guide/1.9/

移动端WEB开发常见问题

项目的移动端开发工作量剧增,解决各种问题又没有时间去系统整理,在这里先做一个持续的碎片记录笔记。

一、meta标签声明移动端布局
常用的声明方式:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />
  • width:控制 viewport 的大小,可以指定的一个像素值,如“1024”。常用特殊值: device-width (设备的宽度)。
  • height:同 width。
  • minimum-scale:允许用户缩放的最小比例,如:1.0(不可缩放)。
  • initial-scale:初始缩放比例,常用:1.0
  • maximum-scale:允许用户放大到的最大比例。
  • user-scalable:用户是否可以手动缩放。 值:0/1

二、移动端浏览器javascript判断方法:
《javascript判断手机/平板电脑浏览器》

二、微信浏览器的判断方法:
《如何判断微信浏览器?》

三、IOS下表单按钮显示默认风格(如图),无法按设计需求显示。
ios_submit
解决方法,取消IOS默认风格:

input[type=submit],input[type=button]{-webkit-appearance: none;}

四、移动设备横竖切换时,页面字体变大问题。

CSS
-webkit-text-size-adjust: none;
text-size-adjust: none

未完待续…