文章分类: 视觉/交互设计

技术不能拘泥于语言,设计也不能拘泥于平台,视觉和交互设计不分家。

解决Retina屏幕的MAC上Photoshop显示比例过小的问题

最近发现老婆大人出的网页设计稿虽然设计风格仍然是一流的,但字体和按钮都做得偏大,在我开发页面的时候造成了一定的困扰。看了一下她的MAC屏幕才知道原来每次用Photoshop CC 2015做设计都要把图片放大了做,再缩小了看全局,导致习惯性地会把文字做大一些以免用户看不清,显然这个显示方式导致了一些尺寸上的感知偏差,而且这样反复放大缩小也很浪费精力…

我们希望的PS显示界面是这样的:
Retina屏幕的MAC上Photoshop显示比例过小的问题
查看详细 »

为网站添加Windows8磁贴

虽然我自己现在也只是用Win7,在Windows8开始普及之前,有必要为网站做一点小准备。新名词 – Pinned Site,顾名思义就是把自己的网站Pin到别人的Win8桌面上,就像冰箱上的磁贴一样,够酷吧!现在做的人还不多,但相信Win8普及也是迟早的事。正好和老婆一起成立的工作室网站刚刚完成不久,就为这个网站做一批Windows8磁贴吧!

同做favicon一样,微软有自己的生成工具,戳这里:http://www.buildmypinnedsite.com
步骤非常简单,根据指引一步步做,第一步需注意的是图片有4个尺寸,要分别调整,不要漏了。在右侧会自动生成效果预览
为网站添加Windows8磁贴
查看详细 »

AxureRP6.5原型设计-移动端切入式菜单效果制作

接上篇移动端左右滑动菜单效果制作,这次记录一下切入式菜单的在AxureRP中的实现方式。

首先在画板上先按屏幕尺寸建立一个顶部的区域,宽320,高40;顶部左侧放菜单的按钮;在下面剩下的区域放一个动态面板,命名为(top_menu),宽320,高450,覆盖屏幕减去顶部的全部区域: 查看详细 »

AxureRP6.5原型设计-移动端左右滑动菜单效果制作

这两天在研究AxureRP这个原型设计软件,为公司的一个APP制作原型。总结了几个模仿移动设备滑动效果的制作过程,首先是左右滑动菜单效果。左右滑动菜单在移动端是是很常见的菜单展现方式,通过AxureRP的动态面板结合几条简单的事件就能轻松实现它。

首先在页面添加一个动态面板(Dynamic Panel),命名为MainMenu,在自动生成的场景1(State1)中再添加一个动态面板,命名为MainMenu-menu。 查看详细 »

AxureRP6.5原型设计-模拟网站登录功能

AxureRP不但能画线框图,也能模拟一些简单的网站功能,比如网站登录。要记录用户的登录状态,在服务器端一般是用Session,在AxureRP中则要借助于全局变量。

我做的一个网站的原型,简单实现了登录功能,在顶部能反应登录的状态,其实这就是一个动态面板的两个state 查看详细 »

VOILÀ网站改版完成

VOILÀ网站(www.vhr.com)是公司最重要的平台网站,由我全面负责网站的改版,需要进行前端的全部重构工作。由于每天都有大量日常的零碎工作,这个网站的改版总需要我另外“挤”时间去做,历时大半年才算完成。所幸的是可以完全根据自己的想法来设计构架,做起来也很过瘾。

这是一个酒店的查询和订房平台,www.vhr.com是它的域名。但我们还为这个网站绑定了几十个其他域名,需要根据不同的域名载入不同的CSS,实现“换肤”的功能,以便让网站能够根据不同的酒店品牌实现“本地化”。实现原理也很简单,把大部分样式写在一个主样式表中;把“换肤”用到的颜色,图片等设置分别写在每个域名对应要载入的样式表中即可。经过一番“样式表大作战”,使我对网站重构有了更加深入的认识,获益良多。 查看详细 »