<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首页»移动开发»手机产品设计禁忌

    手机产品设计禁忌

    来源:elya 发布时间:2013-02-20 阅读次数:

      在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐?#27169;?#35753;用户?#38405;?#30340;产品心生怨念。刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉。

      1、没有不可点击的效果

      一般按钮会有四态,不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态,那么一定要?#19994;簦?#25110;者拿掉按钮,否则会给用户误导。

      2、菜单层次太深

      菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜单分类,不能有太多层级的菜单,否则很?#35328;?#26399;,也很难?#19994;劍?#23547;找和返回都会变得很麻?#22330;?/p>

      3、文字长度不加以限制

      手机界面很小,寸土寸金,一页只能显示下6~10个列表,一行只能显示下10~16个字,标题栏的字数以5个以内为宜,标签栏也以2~3个为宜,那么这时候出现文字过长的情况,一定要定义一下处理方式,如果是选择型?#27169;?#19968;般是截断或者打点缩略;如果是内容阅读型?#27169;?#21487;以折?#23567;?#20294;最合理的方?#20132;?#26159;精简文字内容,缩短文字长度。

      4、文字表意不明

      由于手机是碎片时间、片段式阅读,所以手机界面上的文字表意性要求的更高,更苛刻,一定要在用户瞟到的?#24067;洌?#20934;确的传达信息。除了表意清晰之外,还要求语言精简,避免啰嗦;使用用户的语言而不是程序的语言;产品文案体现产品性格。

      5、交互流程分支太多

      做交互的时候一定要有一个任务流程的概念贯穿始终,用户是为了完成某个任务而使用软件?#27169;?#20132;互设计师除了关注界面元素、跳转逻辑和交互反馈之外,还要关注用户任务,分得清主要任务和次要人物,给主要任务一个畅通无阻的清晰流程,不要给予太多可能的分支,干扰主要流程。

      6、相关的选项离的很远

      相关选项一定要具有操作上的?#26377;?#24615;,虽然手机屏幕看起来比电?#20113;?#24149;要小的多,但是手机在屏幕上移动的代价,却要比鼠标在电脑上移动的代价大的多,如果手机上相关选选离得很远的话,用户一是容易迷失,找不到下一步操作,二是需要移动手指,到屏幕另一端触发操作。

      7、一次载入太多的数据

      流量、电量、速度和稳定性是手机产品的四个硬指标,如果你的应用不能合理的帮助用户节约流量、电量,提升浏览速度和浏览体验,保证应用的稳定性能,就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、?#28982;?#30784;体验。

      8、按钮可点击?#27573;?#27604;看起来小

      我?#23884;?#30693;道移动端有个神奇的数字“44”,根据食指最小点触距离7mm、拇指最小点触距离9mm,可以推导出做设计的时候,最小的点触距离是44*32 px。你可以设计一个精美的小图标,但是在定义它的点触大小的时候,却可以做放大处理,但你千万不要设计一个傻大的图标,点触?#27573;?#21364;比图标要小,这样会给用户带来明显的误操作挫败?#23567;?/p>

      9、标签页跟内容没?#20889;?#23646;关系

      标签页跟内容需要有很好的联动关系,一般一个界面内有二级标签就足够复杂了,千万不要再有三级标签、四级标签。每个标签页都有?#32422;?#29305;有的内容,当切换标签的时候,内容跟着切换。标签页如果是点击切换,内容部分可以整体刷新,标签页如果是滑动切换,内容页也要跟着滑动切换,千万不要一个点、一个滑。

      10、把所有的操作都暴露出来

      手机产品交互设计要经历缩减、隐藏、附加、组织的过程,千万不要妄图把什么功能、什么操作都暴露出来,以彰显强大。你需要把?#32422;?#24212;用的所有功能所有操作做个优先级设定,那些常用的20%的功能,放在界面的主要位置上,其他80%的操作,放在次要位?#27809;?#21512;理归类组织后,隐藏起来就可以了。

      11、没有空数据界面设计

      我们在做设计的时候,往往是提供理想化的场景,用户都已经进来了,我们怎么玩。但是,往往应用刚推出的时候,是没有用户?#27169;?#29978;至当应用有了一定用户基础的时候,新进来的用户打开应用的时候,应用仍然可能?#19988;?#31181;没有数据的状态,再或者当用户清楚了全部数据,这三种情况下,用户都可能遇到空数据的界面。新手设计师往往不加设计,这时候用户就会看到一个空白界面,茫然失措。有经验的做法就是,提供一个情感化的界面,告诉用户当前没有内容;更具引导性的做法,就?#19988;?#23548;用户去执行操作。

      12、用户引导的滥用

      去年就预言用户引导将要泛?#27169;?#24456;明显设计部门都?#19981;?#29992;漂亮的引导界面告诉用户?#30053;?#30340;功能或隐藏的应用,但不是所有的应用、所有的功能都需要花哨的引导的。如果是通用的功能、非重点的模块,根本就不需要引导;如果是功能告知,只需呀轻量级的引导;如果?#21069;?#26412;更新?#24471;鰨得?#20070;式的引导可以采用,但?#19988;?#35328;简意赅。

      13、无加载中状态

      手机产品只要是需要联网,需要交换数据,都需要提供一个加载中状态?#27169;?#26080;论是菊花转还是Toast还?#23884;?#35805;框,你需要给开发人员一个全局的定义,并且要告知加载中是模态(前台加载)的还是非模态?#27169;?#21518;台加载)。且要考虑到加载时间过长、网络开关没?#20889;?#24320;、网络不通等情况分别怎么去处理。

      14、未定义Back的逻辑

      在为Android做设计的时候,会涉及到硬件交互,其中Back键的使用,?#19988;?#38376;学问,Android官方有一些指导原则可以借鉴,但是具体开发的时候,还是会有很多特殊情况,比如单一?#36947;?#30340;替换、键盘及一些中间状态,这种情况下,Back可能需要被定义一下,?#27809;?#21040;前一个?#36947;?#37027;就需要变成多?#36947;?#20102;)还是?#27809;?#21040;初始状态(清空输入内容或?#25351;?#21021;始状态)。

      15、无横屏模式的设计

      由于横屏模式下,纵向空间变得格外宝贵,导航栏、标签栏、键盘都需要被压扁,横盘模式一定要考虑是简单拉伸适配还是重新设计,如果你的应用不适合在横屏模式下使用,?#25512;?#34109;横盘,如果你的应用包括应用widget都需要支持横盘模式(甚至是带侧滑键盘的横屏机器),就需要提供设?#21697;?#26696;。如果是S60V5这种竖高的机器,甚?#21015;?#35201;重新设计。

      作为手机产品交互设计师,利用设计规避问题,提升产品用户体验,把体验转化成价值,是我们所追求的境界。

    QQ群:WEB开发者官方群(515171538),验证消息:10000
    微信群:加小编微信 849023636 邀请您加入,验证消息:10000
    提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
    网友评论(共0条评论) 正在载入评论......
    理智评论?#25343;?#19978;网,拒绝恶意谩骂 发表评论 / 共0条评论
    登录会员中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>