浅谈设计交互.ppt

手机WEB与PCWEB区别案例分享 手机WEB的视觉效果的注意点，及与PC上显示的差异化 1、视觉效果的差异化2、交互差异3、CSS的不同之处的运用4、图标的应用5、颜色与字体 手机WEB的视觉效果注意点，及与PC上显示的差异 视觉效果的差异化 手机PSD的格式，总体视觉效果会比在手机预览时 显得粗造，原因在于为了让手指可以直接触到整个按钮，而不至于还要按得很细，或者如果太小，还会按到其它地方时，所考虑的，手机的按钮在做的时候可以手指轻触屏幕自己去感受下，当然，这样会到致你在PC上预览时，整体的视觉会相对粗糙。 交互差异 在PC上，我们习惯每个页面上都有导航的存在，但在手机上，你甚至根本不需要导航，导航他有那个高度，可以把这个高度省了，直接放产品主题。 CSS的不同之处的运用 或许你在做PC上久了，经常会做hover的效果，在手机上甚至可以不使用hover，不过要注意的是点后的当前效果，不能遗忘哦！ 图标的应用 在平时做图时，记得要收藏比较常用的图标：首页，返回，列表，客服，电话，地图，分享，on,off，箭头，聊天，喜欢，购物车，更多，关闭，搜索， 颜色与字体？ 案例分享！ 这是什么？什么类型的站？ 这是我最近刚做的一个模板，我是来自313部门的设计师，这个模板主要的方向是企业站，所以，我分享的这个案例，是以模板中的企业站的交互设计。 案例分享！ 案例分享！ 产品页 大现在大家看到的是产品页，顶部我直接显示的是客户显在的位置，及反回上一层，还有一个列表，为了让客户更迅速的找到自己的产品，我直接把产品的主要类别放在上面，这样就可以减少几屏的长度。 为什么我产品选择的是左右图文排列呢，因为模板本身产品比较少，用这种方示，客户可以看到的产品更直观 案例分享！ 列表 现在你们看到的是点击后显示的列表，为什么我选择的是弹出，而不是成生新的页面呢。这是为了减少客户到时候还要返回这个产品时产生的步骤，所以我选择了弹出。 案例分享！ / * 最近刚做的一版手机WEB 手机案例网址介绍 不同的网站不同的手机案例不同的风格 2、在流览别人的手机届面参考的时候，为什么感觉有点粗糙呢？ 1、手机的布局有几种方式？ 其实刚开始做WEB视觉的时候我以为都要把图片放大二倍去做，因为手机的图片在写代码的时候要比原使大小小两陪，否则就会糊掉 2、几屏的原则 PC上经常会出现1.5屏以上的视觉，这样让使用者感觉，你这个站的内容比较丰富，但在手机上，要避免太多屏，因为没人会愿意手指一直往下拉，手机上更需要的是在你一屏内，看到自己所想要的，手机的排列方式，更多的倾向于，直接切入主题，例如：直接用图标与文字显示产品，功能…… 手机由于屏幕比较小，所以他的布局只有一种，就是一栏下来。 2、导航上的使用 1、为什么不要把PC上的操作经验搬到手机上 3、上一页下一页及，more的使用注意 手机上的视觉设计上，个人觉得，直接做滑动，就可以显示更多的产品，而不是 还要用户去点上一页下一页，你要把人想得要多懒就有多懒，懒到连一个动作都不想用 首先，手机没有PC大，所有的操作都是用手指头去轻轻的触碰，而且手机上的网络上的加载明显比PC弱很多，你让用户过于频繁的用手指去碰个个点，或者去等待，是你，都没有那个耐心 2、hover的使用 1、CSS3的使用 手机上做成HTML页面给前端带来了空前的发挥，不需要在考虑到恶心的IE6，所以你在做视觉效果的时候，可以尽管的去用圆角，阴影，三角形。当然如果你本身不会前端在阴影的使用上要与前端商量好，可以不用图就不要用图 3、定位的的使用 在PC上，我们使用定位的时候会比较少，因为ie会有各种bug，但在手机上，定位中的视觉效果显得由其重要 4、自动排序法则 C在手机上如果不是很复杂的站都用100%比较多，所以经常用到一些随着届面的变化而伸长的CSS，在视觉这 边，要注意到的是，一列排序，例如导航，不能超过四个。 2、常用图标 1、图标的重要性 手机上如果一点开就是密密麻麻的文字，显得别人看着都累，何况手机屏幕还很小，如果是图文的排版，手机上的空间又有限制，这时候用图标，与标题的使用，就显得直接，进入主题，所以在PC上更多的是图片与标题的结合 3、扁平化与质感？ 扁平化的特色：优点：图形 比较 简易，不复杂，缺点：不够突然。 质感：优点，视觉冲击力强烈。 缺点：看上去比较复杂，需要眼神停留的时候比较长点，比较占位置，否则太小，质感就显示不出来 总结用法：1、内容较多的网站时，可以大部分用扁平化来做图标，在选则状态的时候，在加上一些质感，这样，他的重点就出来了。 2、在只需要图标与标题的网站时：这时候你就可以用相对质感的图标来做效果 在手机WEB的视觉上，我个人觉得，与PC最大的不同之处，就是黑色与灰色的运用，在