设计常见问题与技巧汇总
本文汇总了10篇关于设计的实用文章精华，涵盖常见操作方法和解决方案。
初学者谈谈网站交互
由于所在团队的项目原因，开始接触实战的交互设计，第一次使用 Axure 来为一个网站设计一份交互。加入团队的时候，整体站点的功能和需求基本有了一个大框架，所以只提出了一些修改和增减的意见，主要针对网站在功能上的侧重以及交互上的缺失，而主体板块上面则没有做过多的变动。 在『自以为』完成了交互稿之后，看到视觉同学给出的效果图，似乎有点『心满意足』的感觉。很巧地，在人人上遇到了以前的老舍友，目前正在某大型网站做产品经理，于是就冒昧地提出把我做的网站原型拿给他看看，请求提一些建议。 结果是，出乎我的意料，但是又让我非常满意地，提出了很多至关重要的建议（正规公司的培训和自己摸索是完全不同的）。尤其是在学生团队中无论如何摸索也不容易自我觉醒的建议。所以趁热打铁，权当自己是一个初学者的典范，说说初学者对网站交互设计的一些误解。 误解一：交互设计，就是用软件做控件布局和跳转链接 从我和朋友的原型图就能高下立判，一个原型图逼近成品，而我的，则可能好一点的手稿也要比我的原型图清晰和美观。错误地把交互理解为设计主体布局和页面之间的跳转关系，并且简单呈现给视觉，是我做交互设计犯下的第一个错误。单调的页面也仅仅体现了布局，丝毫没有体现出交互，更没有表达出不同的切换效果、换页动画以及呈现方式，这会对视觉以及前端同学的工作造成很多的不便。 误解二：交互设计，只是体现一个大概的设计概念 此条与误解一有些许重叠的地方，总而言之就是设计太潦草和太简单。在我的设计稿中，已知的网站944像素宽度也没有体现出来，是根据目测随意设置的边距，并且每一个页面的边距都不同（因为都是目测随便摆的）。同样地，在高度方面更是没有细致的规划，没有考虑到每一屏所显示的内容，没有考虑到哪些控件可能出现屏幕上『青黄不接』的状态。实际交互和原型设计，应该是像素级的工作，应该让视觉和前端的同学明确知道每一个控件的精确位置，而不是让他们来替你做这件工作。工具方面，可以使用网格和屏幕分割线来划分区域，便于设计。 误解三：交互不对内容的排布做充分的考虑 首页过大的 banner 会导致分割了首页导航栏和主体内容，过度注重美观则使得内容打了折扣。同时，在活动列表等界面中，尽量保证每一屏中的几个活动所在的位置和体现效果『公平』，否则排序靠后的内容就非常容易被忽略掉（点击量落差巨大）。因此，在交互设计中，除了要确定某一个大区域中放置的内容，对于其中细节内容的排布也应当有所考虑和安排。否则，你的设计就会影响运营同学的工作。 总的来说，交互设计和视觉设计、前端实现构成了网站设计不可或缺的整体，我再次对前期工作的不严谨和不专业对前端以及视觉同学表示深刻的歉意。交互设计，绝不仅仅是使用 Axure 把控件拖来拖去的体力活，也不是拍脑袋决定某一个布局好看或者某一个区域的内容。所有的位置、信息和像素，都是产品的体现、都是需求的满足、都是功能，都是产品经理需要 care 的东西。 最后，大公司对于重要的页面的设计都会有高级负责人亲自过目和确认，保证最终的效果。而在我们团队中，则可能需要产品经理、设觉设计和 Leader 一起来把关。
网站交互：Web网站通知系统
写在前面： 通知系统是网站信息传播机制的重要的一部分，足够写一大章来说明。本文只梳理设计原则，后续相关内容会持续更新。 这里的通知包括但不限于公告、提醒或消息(不同使用场景下的功能定义不同)。 关于各客户端平台(ios、android、wp等)的通知机制，在其交互设计指南中有更详细的说明，大家可自行参考。 一、通知系统定义 通知系统，顾名思义即通知信息的传达处理系统。目的是为了让用户获得需要得到的消息及提醒并进行处理。 这里的“需要得到”有两层意思： 1、用户彼此互动触发的信息流(留言、评论或者回复、私信等) 2、网站希望用户了解关注的信息(系统公告等) 通知系统设计的原则可简单的归纳为： 1、消息传播效率最高(获取、处理、信息传达、用户反馈等效率) 2、避免产生骚扰(噪音、频繁提示) 二、通知分类 不用的平台和产品本身由于对业务的需求不一样，种类也是有区别的。 大致可分为以下几种： 三、通知逻辑实现机制 通知的逻辑精简后如下：  现对这几个环节分开说明： (一)通知合并 通知在推送之前需要进行汇总合并，目的在于提高消息传播处理效率;减少骚扰，降低噪音;平衡服务器压力。 1)合并周期： 固定时间内的消息全部汇总(24小时内/30天等); 无固定时间(只要未处理/未读即汇总) 当然一般都组合着用：合并24小时内未处理消息 2)分类合并 同种类进行合并(如n条留言合并为1条) 同一发起人合并(如张三给你发来的n条私信) 同一时间周期合并(如24小时共收到n条评论) (二)通知分发 通知按照规则汇总完成后，系统将其通过通知管道推送到用户，以便用户处理。 1)分发方式 分发方式与Feed系统类似，多采用Push方式，即在指定时间内主动推送给用户。部分特定类型需要用户请求(Pull)拉取未读消息。 目前大部分通知优先推送未处理通知合并后的总数，已提醒用户已有新消息需要处理。用户点击数字后再去服务端请求具体的消息内容。此种方式综合考虑了成本、压力和体验。当然，某些极端情况下需要进行优化处理：如未读消息超过1000，用户请求时先推送前50条或者放入cache中等。技术童鞋会有各种手段，这里不做详述。 2)分发频率(时间) 分发时间主要根据消息的优先级来做区隔： 3)分发管道 分发管道即消息通知的具体推送渠道，根据业务类型可以分为：Web、App、短信、邮件等。 (三)用户处理 根据前文提到的分发方式，对于通知的处理在逻辑上可以分为两层：通知状态的处理和通知内容的处理。 1)状态的处理狭义的理解即为是否已读(已处理)。 通常初始数字即为系统推送过来的未读总量，用户点击数字进入相关功能列表查阅后，读取的动作完成，未读数字相应减少。 有几种情况需要变通处理： 若用户未读信息较多(m=100)，但第一页列表只能显示(n=10)条的话，那未读数字即为m-n=90; 某些产品会将点击等同于已读。即用户只要点击无论是否打开列表查看均认为已读。 这样的处理一般用于重要级别较低的消息。点击即已读可有效降低骚扰。 某些重要级别较高的消息已处理状态可以定义为用户进行相关操作后才为已处理，而非查阅。 如用户进行评论、回复、点击忽略或点击删除等动作时才认为已处理。 2)内容的处理狭义的理解即为用户是否操作。 根据不同消息的种类和业务的需要，操作可分为： 处理：用户必须点击功能链接进行处理。如：你的密码过于简单，点此进行修改; 回复：如回复私信，对评论进行回复; 确认：对消息做出确认的反馈，如某些系统提示可设置”我已知道，不再提示”的选项; 忽略：用户进行忽略操作或不进行任何操作; 删除：用户删除本消息。 3)消息处理后的状态需要统一。 消息需要标记是否已处理的状态，且状态在不同的终端是打通的。 如：用户在客户端对消息进行了查看，在web站点本消息应自动标记为已读状态。 (四)通知回收 回收主要针对用户已处理消息的操作。 用户之间触发的消息一般需要留档保存。 如评论/回复/留言/私信等。产品可提供选项询问用户是否超过一定周期自动清理。 在部分产品中，还需要考虑功能的优先级。 如解除好友关系或加入黑名单后自动将删除双方的私信记录。 系统触发的消息一般设置一定的回收删除时间。 如系统提醒、通知、公告等。过期后自动在产品里删除。物理上可以设置是否备份。 过期但用户未处理消息(用户长时间未登录但收到他人的回复)可以根据业务需求来处理。 如未读的私信/评论/回复永久保留等。重要未读消息可尝试二次推送或使用其他途径(邮箱、APP、短信等)通知。 四、通知的交互方式(已读未读) 注：具体的交互需要考虑本身业务特点和目标需求。特定业务可能需要强调，某些业务又需要考虑骚扰，故抛开具体情境本身谈交互是无耻的。 这里只针对一般的社区网站，描述一下个人所喜欢的交互方式。 1、新消息到达时提
拒绝平庸：优秀WEB登录页面
大家每天使用的都很频繁了，每次上网都会习惯性登陆下微博，淘宝，邮箱，空间等，在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢？下面就谈谈这道不起眼的门。 推荐阅读： 《巧夺天工！20个「 联系我们 」的创意页面》 《留住访客！超有趣网站进度条设计》 《站上巨人的肩膀，让我们一起聊聊网页上的微创新》 从公共平台的角度看 用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。 从个人博客的角度看 个人登陆页面一般只有自己会用到，所以别人基本是看不到的，但也不排除像我一样无聊什么都好奇的人存在，什么都想看看，什么都想改改的。那么个人登陆页面的设计就完全是抒发个人情感，体现自身个性的一个地方，你完全不需要在乎它的交互是否友好等问题。你的地盘你做主。 各大网站的WEB登陆 现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。 优雅大方 如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验， 安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。 精致的质感表现 iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。 iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。 小清新的插图 在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力， 163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。 Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。 天猫和淘宝的话做为中国最大的在线交易平台的话，也是非常注重登陆页面的设计，而且还在登陆窗口下面设置了一个 ”登录页面”改进建议 按钮，可以看出淘宝是非常注重用户体验设计的.天猫的话就更多注重品牌化. 人文关怀的品牌传达 设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。 QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。 新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。不过如今新浪开始走营销路线，就连登陆页面也
增强品牌的印象 旅游网站如何404错误页面
永远不要把消极的一面展现给顾客，即便你的网站出现404错误页面之时。 一些旅游企业很认真地在处理这个问题，并花费了许多精力来打造一些有创意的/有趣的404错误页面。 一年半前，我们开始关注旅游企业网站的404错误页面，有比较漂亮的，有可爱型的，还有比较丑的。 到了今年，我们觉得是时候重新来看看这些可爱的旅游网站404页面了。我们通过一个并不存在的页面地址打开了超过100家旅游网站 在这些网站中，超过一半的网站的404页面看起来都不怎么样。一些网站仅仅显示“无法找到该页”，“您访问的页面不存在”，“请再次检查您的访问链接”。还有一些网站重新返回到了自己的网站首页。 一个吸引眼球的404页面也许能够增强品牌的印象，而且它还是一个展示企业幽默感的机会。 下面，享受这些旅游网站带来的视觉盛宴吧： MyGola LateRooms Accor 仅仅通过看到这种图片内容(脚部)，顾客就可以确定他们在访问的是酒店网站页面。 Uber Uber秉承了自己一贯的黑白配色以及字体风格。 Lonely Planet HolidayIQ 怎么到这个页面来了呢? Qiito Traverik Traverik网站巧妙地结合了品牌logo和404错误标志。 PoshVine 图片胜过一切。 Travel.co.jp Agoda 在404错误页面配上微笑。 Goibibo 幽默感的展现。 ixigo 幽默感。 Hipmunk 吉祥物也迷失在404错误中。 Kayak 没有图片内容，不过给出了一条颇具幽默感的信息。 Hot.co.uk 再一次地，图片说明一切。注：这家企业仅支持移动端业务。 TaxiForSure RedBus Southwest 西南航空公司有自己独特的表达方式。 Excursiopedia WorldNomads Purpletravel SmartDestinations Travelfish 非旅游网站范例：伊利诺伊斯州大学官网 该网站用一连串的陆续出现的信息黏住了用户。即便你等上20分钟，这个信息提示框还会继续把故事说下去。看来工作人员真的是做了非常多的工作啊。(Eileen 编译)
优秀手机应用需要遵循的8大原则
手机无线设计8原则： 原则1：用户界面应该是基于用户的心里模型，而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。 #左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型； #右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。 原则2：培养用户使用情景的思维方式做设计 要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。 对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比： 微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友 米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现 原则3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。 百度音乐的搜索先是把近期最热门的歌曲依次排列在列表中，当有字输入时，会出现歌手的候选词，这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。 百度地图也是我用得比较顺手的一个地图导航应用，在减少输入方面也做的比较出色，百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜，在用户输入到一半的时候，下面的候选列表就出现了目标地址，用户直接停止输入点击列表即可。 原则4：全局导航需要一直存在，最好还能预览其他模块的动态 全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。 全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。 Facebook 的朋友请求，消息，通知都是采用全局导航的方式，就是面板设计的丑了些~ 米聊的通知中心，里面包含的通知类型蛮多的，显得有点凌乱，希望下面的版本会筛选归类 原则5：提供非模态的反馈，不打断任务流 模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。 模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户。 Gmail是第一个把删除的模态弹框设计成List Notification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。 K歌达人第二版的弹框就是模态处理，界面很不友好，用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲，所以降低了用户的参与度。 原则6：不要让用户等待任务完成，用户还要发现更多有意思的地方 移动互联的核心就是给用户带来移动体验的方便和高效，这是 移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间， 所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他ap