Be For Web - HIG http://beforweb.com/taxonomy/term/79 en 近来在尝试养成空间思维习惯 http://beforweb.com/node/1123 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/Icon-vision-pro-spatial.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>一个月前,新平台随 WWDC23 登场。如此重大之事件,却未曾像七年前热衷于 VR/AR 的时期那样大书特书,也是稍有惭愧。仅稍有而已,毕竟一个月间没有哪一日不在忙碌于相关布道工作,只是输出平台不同。此刻回来这里落下些少许文字,像是回到属于自己的一片港湾。</p> <p>&ldquo;热衷于 VR/AR 的时期&rdquo;竟然已是七年前。&ldquo;时间真疯狂&rdquo;一类。顺手打开 Tom Waits。</p> <p>自己吭哧吭哧翻译 HIG 之事也有十年或不止?<a href="https://developer.apple.com/cn/design/human-interface-guidelines" target="_blank">官方中文版本《人机界面指南》</a>已于六月上线。继而规划相关工作。难以名状的时空跳跃之感。</p> <!--break--><p><img alt="" src="/sites/default/files/images/2023/%E6%88%AA%E5%B1%8F2023-08-18%2013_35_57.png" style="width: 640px; height: 395px;border: none;" /></p> <p>原本打算无论如何也要开门见山直切主题,意识流淌到指尖却又松松散散地凝聚成若即若离的&ldquo;前言&rdquo;,且毫无惭愧。也罢。十二年来无不如此,何须易之。</p> <p>近来在尝试养成某种习惯。面向空间计算的设计思维养成习惯。空间习惯。上下文是基于对 DC23 及《人机界面指南》相关内容的吸纳而尽可能抽象提炼出产品形态与交互体验设计思路主线并尝试带入长久以来习惯成自然的二维触屏或指针交互界面产品场景进而思考其存在于新平台输入与输出范式框架当中时大体会呈现出怎样一种面目。</p> <p>窗口与基本界面形态。</p> <p>空间容器与三维内容。</p> <p>空间与纵深。</p> <p>交互。</p> <p>共享空间与全空间。</p> <p>沉浸度。</p> <p>协作体验。</p> <p>譬如一个你日常惯用的 app,其基本架构及界面自身如何以窗口、挂饰的形式映射于 visionOS?</p> <p>基于内容的特质,窗口默认应该以更宽(如 Keynote 那样)还是更高(如 Safari 那样)的比例来呈现?</p> <p>窗口在空间环境中渲染的默认尺寸以及与用户之间的默认距离应该如何?</p> <p>哪些内容要素适合突破二维局限而以三维形式呈现于窗口之外或是空间容器之中?</p> <p>对应于这类内容的传统形式列表是否可能呈现为三维对象序列或某种集合视图?</p> <p>该序列或视图应该更接近于基本界面窗口本身,并通过眼手并用的间接操作来进行交互吗?还是更适合利用空间纵深拉至用户面前并通过直接操作的手势进行交互?</p> <p>与三维对象进行交互时,是否需要从多任务状态的共享空间进入独立聚焦的全空间?</p> <p>基于内容及其场景特质,在全空间中,应以穿透或渐近的形式提供半沉浸(如 Keynote 演示模式那样),使用户仍然可以与现实环境保持连接;还是经由塑造虚拟场景而提供全封闭沉浸(如 Keynote 排练模式那样),使用户进入完全不同的场景空间?</p> <p>产品自身的功能及内容特质是否适于提供多人共享/协作能力?是否可能针媒体类内容提供并排观看式的空间布局,或是针对可交互/协作的内容提供环绕式的空间布局?</p> <p>诸如此类。</p> <p>你也可以试一试,基于你的 app,或你所熟识的、常用的 app,考虑它基于空间的基本界面形态、空间与纵深的利用、适于其内容与场景特征的沉浸感程度、多人协作互动,等等。会很有意思。在我看来,这层&ldquo;习惯&rdquo;或&ldquo;训练&rdquo;,目前而言相比于直接上手使用 visionOS 界面组件库尝试设计界面,或使用 Reality Composer Pro 尝试进行场景与交互设计来说,会更加 essential 一些。</p> <p>大致这样。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/354" typeof="skos:Concept" property="rdfs:label skos:prefLabel">空间计算</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/362" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Vision Pro</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/230" typeof="skos:Concept" property="rdfs:label skos:prefLabel">AR</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li></ul> Sat, 29 Jul 2023 01:38:09 +0000 C7210 1123 at http://beforweb.com http://beforweb.com/node/1123#comments 十年了,Beforweb http://beforweb.com/node/1107 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/logo-icon-beforweb-ux-ui-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>十年了,呃。此时此刻翻看着2011年9月25日晚间在刚刚上线的 beforweb.com 发布的第一篇内容,&ldquo;<a href="http://beforweb.com/about" target="_blank">关于 Beforweb</a>&rdquo;,心情却平静的有些出乎意料。</p> <p>理应来上那么一句&ldquo;弹指一挥间,转眼就十年了呢简直毫无察觉&rdquo;一类。然而并不是。无论从哪个角度回头看这十年,&ldquo;时光&rdquo;这东西都充满了存在感。成长着,起伏而波折着,旅途一般前行着&hellip;丰盛着。</p> <p>时光真疯狂。</p> <!--break--><p>彼时的自己历经了作为网页设计师与前端工程师的五年,刚刚转入交互设计岗位。彼时的行业里&ldquo;UED&rdquo;的概念才开始普及开来,而自己连何时用草图沟通何时用线框稿演示方案都还分不太清。彼时的自己刚刚开始关注移动端设计,在资讯匮乏的环境中每天抱着 Apple 的 Human Interface Guidelines 狂学,周身每一个细胞都在无所不尽其极地享受着吸纳新鲜信息的快感;而十年后已将&ldquo;设计布道师&rdquo;作为职业而每天为开发者们传授解析着这套HIG。</p> <p>时光真够疯狂的不是吗。</p> <p>在还没有公众号的年代,要实现绝对个人化、独立化的个人媒介&mdash;&mdash;无论内容选材,还是风格气质&mdash;&mdash;自己通过 CMS 建站做博客似乎是唯一的解决方案(因此最初一两年的内容仅能在 beforweb.com 当中找到)。当时 Drupal 7 刚刚发布,仅博客前台页面模板自己就写了约一个月,在每天睡前一两个小时的时间里。上线后的第一条留言:</p> <blockquote><p>&ldquo;坐沙发恭喜,要坚持哦&rdquo;</p> </blockquote> <p>想对你说:谢谢支持,我已坚持了十年。</p> <p>十年间,从《iOS Wow Factor》、《触类旁通》、《设计体系》这样的全书翻译,到 iOS 和 watchOS HIG 的本地化,到各种译文、随笔、Ask Me Anything、访谈、案例分析、资源介绍&hellip; 从响应式设计,到移动端交互,到 VR/AR 和 Unity,到 Machine Learning 体验设计,到职业成长,以及&ldquo;About a Designer&rdquo;&hellip; 连同庞大繁杂的 Sketch 组件库也做了那么三四个的样子。</p> <p>在心底轻轻和自己说了一声&ldquo;哇哦&rdquo;。此时此刻无数和这些内容相关的情景像跑马灯一般在眼前忽闪而过&mdash;&mdash;在有家的时候,在每个周末只能逃去公司的时候,在独自泡在咖啡店和图书馆的时候,在有朋友陪伴的时候,在推推还在的时候,在只有斑斑窝在身边的时候&mdash;&mdash;可惜这些画面只有自己可以看到,无法分享给你们。</p> <p>你们&mdash;&mdash;有些从十年前就开始在这里,有些则是新朋友;有些日常就在 Beforweb 群里带薪群聊,有些常年潜水,也有些来了又走了。</p> <p>来了又走了,这十年间逃不开的人生主题。你看,无论怎样,这样一个&ldquo;绝对个人化、独立化的个人媒介&rdquo;,才是经过时间验证而常在自在的,不是么。这样常在而自在的存在,让我收获到了见闻和知识,收获到了专业技能,收获到了由点而连接成线的越发清晰的职业路线,收获到了行业内外成千上万的人与人之间的互动关联。我很开心和满足了。感谢你们,也感谢自己。</p> <p>不说什么&ldquo;下一个十年如何如何&rdquo;,我约么也还是只做着这些事而已,如果可以。像《爱死机》之《Zima Blue》里的小机器人一样终日擦拭着泳池里蓝色的壁砖,这已足够美好了。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/339" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Beforweb</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li></ul> Sat, 25 Sep 2021 09:27:02 +0000 C7210 1107 at http://beforweb.com http://beforweb.com/node/1107#comments 大家处于相同起跑线的时段 http://beforweb.com/node/1104 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-s-ux-sketching-pencil-wireframe-prototype-user-experience-ll.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>设计生涯 90% 的时间在利用成熟技术及设计模式来围绕着业务目标进行设计的大家,若遇到新技术发布且尚无任何产品/竞品可以参考时,该怎样设计你的场景、功能、交互逻辑与界面。譬如 SharePlay。</p> <p>每年七、八月便是大家处于相同起跑线的时段,从某几个特定平台的角度讲。</p> <!--break--><p>看透 WWDC 的技术特性与原理的相关视频,吃透 HIG 在第一时间提供的设计准则,将最基本与质朴的设计要素体现到流程逻辑与界面外观当中,你的设计也很可能成为接下来几年当中特定技术领域中的设计模式标杆。</p> <p>这是非常之简单与真实的现实,毫不复杂,也绝不卷了吧唧的,坐拥着所谓丰盛资源与行业影响力的&ldquo;成熟&rdquo;团队的设计师所能做的未必能比个人作战的开发者们更快、更好。当然,大家都要加油才是。</p> <p>仅致所有仍保守着海盗精神的、自由畅快的、敢打敢杀的独立开发者们。</p> <p>C 的胡言乱语,你可受得了?</p> <p>Keep on rockin&rsquo; in the free world.</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/292" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WWDC</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/330" typeof="skos:Concept" property="rdfs:label skos:prefLabel">SharePlay</a></li></ul> Tue, 03 Aug 2021 10:08:42 +0000 C7210 1104 at http://beforweb.com http://beforweb.com/node/1104#comments HIG 重要新增内容 http://beforweb.com/node/1102 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-wwdc-2019-apple-s.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Human Interface Guidelines 重要新增内容:</p> <ul> <li> Inclusion</li> <li> SharePlay</li> <li> Right to Left</li> <li> Spatial Interactions</li> <li> Location Button</li> <li> ...</li> </ul> <p>详见:<a href="https://developer.apple.com/design/whats-new/" target="_blank">https://developer.apple.com/design/whats-new/</a></p> <!--break--><p><img alt="" src="/sites/default/files/images/2021/0-6.jpeg" style="width: 620px; height: 339px;" /></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/news" typeof="skos:Concept" property="rdfs:label skos:prefLabel">时讯</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/326" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/327" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Human Interface Guidelines</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/330" typeof="skos:Concept" property="rdfs:label skos:prefLabel">SharePlay</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/331" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Location Button</a></li></ul> Tue, 08 Jun 2021 09:12:09 +0000 C7210 1102 at http://beforweb.com http://beforweb.com/node/1102#comments HIG 有什么用处? http://beforweb.com/node/1100 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-ux-ui-question-guess.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>HIG 有什么用处?很多设计开发人员问过这个问题。近来一位独立开发者为这个问题做了最基本和朴素的诠释:&ldquo;我一人开发所有这些 app,时间都 用在功能实现上,没有精力探究设计;所以我最大程度遵守 HIG 和原生设计模式,不用多操心就能确保界面易懂易用并符合各方面的设计原则原理。&rdquo;</p> <!--break--><p><img alt="" src="/sites/default/files/images/2021/0-4.jpeg" style="width: 620px; height: 343px;" /></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/326" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Apple</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/327" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Human Interface Guidelines</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/323" typeof="skos:Concept" property="rdfs:label skos:prefLabel">独立开发者</a></li></ul> Thu, 06 May 2021 08:45:36 +0000 C7210 1100 at http://beforweb.com http://beforweb.com/node/1100#comments iOS 13 设计指南:深色模式篇 http://beforweb.com/node/1046 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-dark-mode-ui-design-moon.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>很久没做官方的设计指南喽,上一次莫非还是2017年的 ARKit?毕竟此次深色模式非常重头,对界面设计相关工作带来的改变还是蛮大的;加之其他一些相关更新同样出彩,所以今年应该会零星选择几篇 HIG 来做译。</p> <p>上周的一篇&ldquo;暗黑模式设计原则浅谈&rdquo;泛泛地介绍了一些背景与高层原则,而官方的指南更侧重于细节层面,虽然篇幅较短,但仍然可以帮助你在真正上手新系统及深色设计之前,对相关设计原则,特别是颜色的适配机制与方法进行了解。同时也建议各位观看本次 WWDC 相关讲解视频,理解会更加全面。</p> <p>本文译自<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/"> iOS Human Interface Guidelines</a>。</p> <!--break--><h3> iOS 设计指南:深色模式篇</h3> <p><img alt="" src="/sites/default/files/images/201906/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-12%2023_12_33.png" style="width: 600px;" /></p> <p>从 iOS 13.0 开始,人们可以将系统全局的外观样式设置为深色视觉风格,即&ldquo;深色模式&rdquo;。在深色模式中,系统会为所有界面、视图、菜单、控件等等调用一套更深的背景色方案,同时通过更多的半透明虚化效果使前景内容更有效地从深色背景当中突显而出。深色模式同样支持所有的可访问性设计标准。</p> <p>人们可以将深色模式设置为系统的默认外观模式,也可以让设备在光照条件较弱的环境中自动切换至深色模式。</p> <p><strong>聚焦于内容</strong>。深色模式可以将焦点集中于界面当中的内容区域,使内容本身得以突显,而周围的界面元素则会隐退于背景之中。</p> <p><strong>在深色与浅色模式下分别测试你的界面</strong>。在某一种模式当中表现良好的设计方案,在另一种模式当中很可能出现问题。检视界面在两种模式下的表现,进行必要的调整,使其能够良好适配于每一种模式。</p> <p><strong>确保深色模式下的内容在调整过系统对比度和透明度之后依然清晰可读</strong>。在深色模式下,打开系统设置当中的&ldquo;增强对比度&rdquo;和&ldquo;降低透明度&rdquo;这两个选项,(在分别打开和同时打开的情况下)测试内容的可读性,你或许会发现一些暗色的文字内容在暗色背景上变得不再清晰。在打开&ldquo;增强对比度&rdquo;之后,暗色文字与暗色背景的整体视觉对比度也可能被降低。视力良好的人或许仍然可以阅读对比度较低的文字,但对于视力有所缺陷的人来说,这样的文字将难以辨识。你可以参见&ldquo;<a href="https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast">颜色与对比度</a>&rdquo;部分了解更多指导原则。</p> <h4> 颜色</h4> <p>深色模式的配色方案当中包含一系列较深的背景色以及较浅的前景色。这些经过仔细甄选的颜色可以在确保信息对比度的同时,良好地适配于深、浅两种外观模式,确保这两种模式下的视觉感知一致性。</p> <p><strong>使用能够适配于当前外观模式的颜色</strong>。使用 iOS 13 新引入的语义化颜色(Semantic Colors)的界面元素可以自动适配当前的外观模式,例如分隔线。当需要定制化的颜色时,你可以向 app 的素材目录(Asset Catalog)当中添加一套颜色组合,为浅色与深色模式各自定义一组颜色变量,使其能够根据用户当前的外观模式进行自动适配。避免通过硬编码的方式定义具体的色值,否则颜色将不具备自适应性。</p> <p><strong>确保颜色在不同的外观模式下都具备足够的对比度</strong>。建议使用系统定义的颜色来确保前景与背景内容之间具备足够的对比度。对于定制化的颜色,要确保其对比度达到 7:1,特别是对于小号文字而言。你可以参见&ldquo;<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors">动态系统颜色</a>&rdquo;部分了解更多指导原则。</p> <p><strong>柔化白色背景</strong>。如果你必须在深色模式下使用白色背景来承载内容,可以选择稍暗一些的白色(浅灰色),防止其在深色的界面环境中产生外发光效应。你可以参见&ldquo;<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color">颜色</a>&rdquo;部分了解更多指导原则。</p> <h4> 图片、图标与图形符号的颜色</h4> <p>iOS 13 使用 SF Symbols 字体图形符号,可以自动与深色模式进行良好地适配;而系统自带的全彩色图片也面向深、浅两种外观模式进行了优化。</p> <p><strong>尽可能使用 SF Symbols 图形符号作为图标</strong>。无论你通过系统定义的动态颜色对其进行着色,还是使用半透明虚化效果,这些图形都可以自动面向两种外观模式进行适配。</p> <p><strong>需要定制化图标时,面向深、浅两种外观模式各自提供一套素材</strong>。在浅色模式下,空心图标相比于实色图标更易识别;在深色模式下,情况则反之。</p> <p><strong>确保全彩色图片、图标的适配性</strong>。如果这些图形素材在深、浅两种外观模式下均有着良好的表现,那么仅提供一套素材即可。如果素材只能适用于其中一种外观模式,那么,要么对其进行修改以提升适配性,要么另行创建一套素材用于另一种外观模式。使用素材目录将所有素材合并成为单一的图形。</p> <h4> 字色</h4> <p>半透明虚化效果有助于在深色背景当中保持文字的良好对比度。</p> <p><strong>为文本标签(Label)使用系统提供的相应颜色</strong>。一级、二级、三级、四级文本标签色均可以自动适配于深、浅两种外观模式。你可以参见&ldquo;<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography">排版</a>&rdquo;部分了解更多指导原则。</p> <p><strong>使用系统提供的视图控件来实现文本输入框(Text Field)和文本视图(Text View)</strong>。系统提供的视图与控件可以使文字在任何背景之上都具有良好的表现,并能根据半透明虚化效果的有无而进行自动调整。在可以调用系统提供的视图与控件的情况下要避免自行绘制。你可以参见&ldquo;<a href="https://developer.apple.com/documentation/uikit/uitextfield">UITextField</a>&rdquo;与&ldquo;<a href="https://developer.apple.com/documentation/uikit/uitextview">UITextView</a>&rdquo;部分了解更多指导原则(注5,注6)。</p> <p><img alt="" src="/sites/default/files/images/s/Banner-PS-BFW-3x.png" style="width: 600px; height: 154px;border:none;" /></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/291" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS 13</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/290" typeof="skos:Concept" property="rdfs:label skos:prefLabel">深色模式</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Thu, 13 Jun 2019 08:46:06 +0000 C7210 1046 at http://beforweb.com http://beforweb.com/node/1046#comments iOS7第三方应用重设计的解决方案及案例参考 http://beforweb.com/node/257 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-ios7-app-store-iphone-ipad-application-ux-ui-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>10月3日,似乎是假期的第三天了,日子已经过到无可名状的样子了。把小病猫从医院接了回来,病情稳定了些,至少眼下还没有继续恶化下去。每天喂5种药,并且将猫粮泡成浆糊强行喂食。那么像现在这样可以在间歇当中抽些时间出来专心打几个字,更新一下博客,已经变成了奢侈的享受,很珍惜。</p> <p>不知这样的日子什么时候可以结束,希望是以好的方式逐渐恢复正常。但不知哪里来的勇气,在这样的状态里却悄悄鼓起了一些力气,一方面尽力维护小猫的状态,一方面努力珍惜分分秒秒空闲的时间看些书,做做事。总会好起来的。不过还是买了瓶JD陪着自己,这种时候还是需要一些的,半口下去头疼就能好些。另外也真心感谢在<a href="http://weibo.com/c7210">微博</a>和微信里给小猫祝福,给我鼓励的各位朋友们。</p> <p>那么就来看本周译文呗;之前的几篇都是资源和参考方面的更新,今天恢复一下常态吧。</p> <p>这里开始译文。乍看上去,&ldquo;为iOS7重设计&rdquo;无非就是新的应用图标、无边框按钮、与导航栏配色相匹配的状态栏等等。不过如果你再深入挖掘一些,便会发现很多耀眼的地方都体现着iOS7的三大设计主题,即&ldquo;<a href="http://beforweb.com/node/214">依从、清晰、纵深</a>&rdquo;。</p> <p>对于某些应用来说,这些改变带来了设计上的极大改善,而另外一些则甚至比从前还要糟糕,不仅可用性被破坏,而且品牌识别效应也大打折扣。本文会围绕着<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174">iOS7 UI过渡指南</a>当中提出的一些关键性的设计解决方案,介绍一些比较有代表性的应用案例。如果你正计划着升级自己的产品,或是以iOS7风格为准绳从零开始设计应用,那么这些例子可能会帮你更好的起步。</p> <!--break--><h3> 1.全屏布局与半透明UI元素</h3> <p>iOS7允许应用界面充分利用&ldquo;边到边&rdquo;的全屏空间。举个例子,如果你的应用当中会显示系统状态栏,那么在iOS7下,你也许需要让用户透过状态栏看到它&ldquo;后面&rdquo;的模糊化的内容。类似的,如果你的应用会用到其他一些标准控件,例如导航栏、标签栏、工具栏、搜索栏、范围栏(scope bar),那么在iOS7当中,这些控件背后的内容都可以模糊的呈现出来。如果你决定充分利用系统新特性来实现这些效果,那么就要确保内容视图的尺寸可以填满整个屏幕,包括这些控件背后的区域。更多细节可以参考iOS7界面设计规范当中的<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW1">Bars</a>一节。</p> <h4> 案例</h4> <p>大量的iOS7应用都使用了半透明状态栏,能够以模糊效果呈现底部的内容。Twitter的做法则相对保守,他们通过自定义控件的方式制作了状态栏和导航栏,使他们的颜色相配,并能呈现半透明效果。而其他一些应用,例如Instagram、Foodspotting和The New York Times等则打破了状态栏的边界,通过新的布局方式呈现全出血(full-bleed)效果的照片。</p> <p><img alt="01-nyt-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/01-nyt-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">The New York Times在状态栏和导航栏都使用了毛玻璃效果,并利用全屏空间来展示全出血效果的照片。</p> <p><img alt="02-twitter-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/02-twitter-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Twitter的状态栏与导航栏颜色相配,并且都可以呈现半透明效果。</p> <h3> 2.层与动效</h3> <p>iOS7 UI过渡指南推荐通过不同的层面来体现内容的层次,以增强界面对象之间的关联性。当用户在不同的层面之间切换时,要为其提供强化的动画效果来进一步增强内容层次与深度的概念。</p> <h4> 案例</h4> <p>在iOS7中,层面在很多时候被用来展示那些位于图片之上的文字,例如Yahoo!新闻中的照片,以及musicXmatch当中专辑的呈现方式。此外,层面还可以用来为用户提供某些快速访问的功能,例如iOS7自身的通知中心和控制中心。</p> <p><img alt="03-yahoo-ios7-app-design-ux-ui.jpg" src="/sites/default/files/images/201310-1/03-yahoo-ios7-app-design-ux-ui.jpg" /></p> <p>另外一个例子,Huffington Post应用通过一个单独的层来呈现&ldquo;全部分类(All Sections)&rdquo;界面。虽然交互方式没什么问题,但以模糊效果从该层面底部透出的照片却没有什么实际意义,反而会给用户造成困惑。</p> <p><img alt="04-huffpo-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/04-huffpo-ios7-app-design-ux-ui.png" /></p> <p>关于动画过渡效果,你可以在<a href="https://itunes.apple.com/us/app/luvocracy/id684437187?mt=8">Luvocracy</a>应用当中发现一些很有效的运用方式,例如其左侧导航的模糊放大效果,以及展示产品页照片时的弹跳效果等。另外,Flipboard在其封面上使用的视差动效也是个不错的例子。</p> <h3> 3.负空间(留白)与配色</h3> <p><a href="http://beforweb.com/node/215">iOS7界面设计规范</a>中的&ldquo;<a href="http://beforweb.com/node/214">为iOS7设计</a>&rdquo;一节建议设计师们移除界面中不必要的装饰性元素,并充分利用留白:</p> <blockquote><p>&ldquo;留白可以使重要的内容及功能更加突出。同时,留白还可以传达出一种平静和稳定的感觉,使应用看上去更加专注和高效。&rdquo;</p> </blockquote> <p>此外,他们还建议通过配色来简化UI:</p> <blockquote><p>&ldquo;一种关键的颜色&mdash;&mdash;例如备忘录应用中的黄色&mdash;&mdash;可以突出重要信息,并巧妙的暗示出元素的可交互性。同时,它也可以为应用带来具有一致性的视觉主题。&rdquo;</p> </blockquote> <h4> 案例</h4> <p>然而,很多应用要么忽视了这条建议,要么执行的有些过头。无论出于怎样的原因,大量应用当中充斥着过多的留白,而颜色却过于稀疏微弱。这种风格对于苹果来说也许是不错的,因为它们具有明显的iOS7风格,但对于应用本身来说也许会产生负面效应,因为这种平淡的设计风格可能会稀释掉产品的品牌识别效应。在大量浅色风格的应用当中,例如Snapguide这样配色丰富的应用也许能给用户带来更多惊喜,使其更受欢迎。</p> <p><img alt="05-snap-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/05-snap-ios7-app-design-ux-ui.png" /></p> <h3> 4.动态字体</h3> <p>动态字体可以针对任何字号的文字内容自动调整其字间距和行间距。如果你准备采用动态字体技术,那么应用中的文字内容格式会随着用户在系统&ldquo;设置&rdquo;当中对字号的调整而自动响应变化。那些以文字阅读为主的应用将会极大的受益于这项技术,例如新闻、文章、邮件、微博等等。对这类应用来说,采用动态字体技术就意味着用户无需进行很多设置便能得到更具一致性的阅读体验。</p> <h4> 案例</h4> <p>当前,采用动态字体技术的应用还不是很多。这里有一个很简单的原因:那些会受益于这项技术的应用当中,多数已经包含了字号调整方面的功能。不过这类订制化的解决方案并不理想,因为这意味着用户需要针对每个不同的应用来单独设置最合适的字号。</p> <p><img alt="06-nyt-dy-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/06-nyt-dy-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">采用了动态字体技术的The New York Times应用在大字号下的表现。</p> <h3> 5.自动布局</h3> <p>正如iOS7开发文档中所介绍的,充分利用自动布局技术的应用可以更加轻松的从iOS6过渡到iOS7适配,因为这些技术可以帮助应用自动调整UI元素的尺寸。如果同时采用自动布局及动态字体技术,那么应用的界面元素也可以随着字号的变化而响应式的调整,帮你实现诸如用户在调小字号之后界面布局自动从一列变为两列的需求。</p> <h4> 案例</h4> <p>当人们采用动态布局技术来解决从iOS6向iOS7过渡的问题时,从表面看来似乎难以发现什么明显的变化。而另一方面,如果同时使用动态字体技术,那么变化会更容易被发现。我的意思是,目前我还没找到这方面的实际案例;如果你发现了一些,不妨分享给大家。</p> <h3> 6.应用图标和控件图标</h3> <p>iOS7在应用图标方面有很多变化,详情可以参考iOS7界面设计规范当中的<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1">图标与图形尺寸</a>一节。其中,我们可以注意到的变化包括略微增大的图标尺寸、新的黄金分割率网格、新的配色方案、更加扁平的风格、曲线轮廓等等。此外,苹果建议第三方应用的设计师们重新设计控件当中的自定义按钮图标,使它们看上去更轻量,更贴近iOS7原生风格。</p> <h4> 案例</h4> <p>几乎所有的iOS7应用都重新设计了它们的应用图标,因为这一点在iOS7 UI过渡规范当中是有明确要求的。然而,只有一部分应用依照iOS7风格重新设计了它们的按钮图标。有些应用只是很勉强的做了些改变,特别是那些曾经为了突出品牌效应而自定义设计过图标的应用。这里也有一个时间的问题,也许所有的应用最终都会在它们看上去开始落伍的时候升级它们的图标设计,否则就可能被用户嘲笑&ldquo;哦,那个应用看上去太iOS6了!&rdquo;。</p> <p><img alt="07-shazam-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/07-shazam-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Shazam面向iOS7重新设计了他们的图标。</p> <p><img alt="08-ted-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/08-ted-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Ted应用同样重新设计了标签栏上的按钮图标。</p> <h3> 7.无边框按钮</h3> <p>苹果建议仅在非常必要的时候为按钮添加边框或背景。这里的基本原理是,用户通常都知道在各种控件栏和动作表单、警告框中的元素是可以交互的,因此边框并不是必需的。而iOS7 UI过渡指南当中也提到一些例外情况,例如内置的&ldquo;时钟&rdquo;应用当中用来启动计时的圆形按钮,或是iTunes当中带有边框的&ldquo;购买&rdquo;按钮。</p> <h4> 案例</h4> <p>无边框按钮已经在iOS7应用当中被广泛使用了,因为这个改变的成本及其造成的影响都不大。当用在导航栏当中时,它们是很明显的可交互元素;然而,当出现在主要文字内容附近时,有些无边框按钮看上去只是样式特殊的文字而已。造成这种情况的原因之一,就是对于无边框按钮来说,每个应用都有自己的&ldquo;关键色&rdquo;,例如Foodspotting的绿色,或是Opentable的红色。</p> <p><img alt="09-food-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/09-food-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Foodspotting里的一些无边框按钮在用户看来并不具备交互性。</p> <p><img alt="10-snap-head-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/10-snap-head-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Snapguide应用导航栏上的无边框按钮。</p> <h3> 8.其它视图和UI控件</h3> <p>iOS7当中包含大量的标准控件升级,例如日期选择器、添加联系人按钮、详情展开按钮、信息按钮、页码控制器、选择器、进度条、刷新控制器、分段控制器、滑块、计步器、切换、文本域等。例如动作表单、警告框、模态视图一类的临时性视图也在视觉呈现方式上发生了变化。对这些控件进行升级不会对应用产生重大的影响,因为它们的基本构成方式和交互方式并没有发生根本性的变化。更多详情可以参考iOS7界面设计规范当中的<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Controls.html#//apple_ref/doc/uid/TP40006556-CH15-SW1">Controls</a>一节。</p> <h4> 案例</h4> <p>大量的应用都开始使用iOS7风格的新标准控件,因为这类升级是完全&ldquo;免费&rdquo;的,无需代码方面的变动。这其中有一点值得提及,就是标准的切换控件在激活状态时的颜色是可以自定义的。虽然看上去没太大所谓,但这点细节可以使你的应用界面看上去更具一致性。另外一点受欢迎的变化就是新的列表结构,它可以延伸到界面边缘,给用户带来更多的可点击空间。</p> <p><img alt="11-luv2-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/11-luv2-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Luvocracy的注册界面使用了新的iOS7列表控件。</p> <p><img alt="12-redswitch-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/12-redswitch-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Luvocracy将切换控件的激活状态定制为红色。</p> <p><img alt="13-greenswitch-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/13-greenswitch-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Foodspotting当中的切换控件在激活状态时为绿色。</p> <h3> 9.手势</h3> <p>在iOS7里,用户可以从界面底部向上滑动,来展开控制中心。类似的,如果用户希望访问通知中心,他们可以从界面顶端向下滑动。那些使用了类似手势命令的应用可能需要重新考虑相关功能的触发方式,以避免和这些系统手势产生冲突。</p> <h4> 案例</h4> <p>不幸的是,即使在手势操作上与iOS7没有明显的冲突,应用也有可能受到这些系统级手势的影响。例如在The New York Times当中,用户在向上滚屏浏览内容时有可能不小心触发控制中心的展开。而有些应用改变了它们从前的导航风格,以避免与系统手势产生冲突。举个例子,新版本的Facebook应用在主屏使用标签栏作为导航,很可能是为了避免与系统级的右滑回退手势产生冲突?虽然苹果在手势操作方面的改变是值得赞赏的,但实现方式上也有一定的弊端<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="14-facebook-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/14-facebook-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Facebook重回标签栏导航的时代。</p> <h3> 10.系统改进</h3> <p>除了以上所说的这些在应用内部可能产生的改变以外,系统级的变化也可能影响第三方应用,这当中值得注意的一点就是包含了Airdrop功能的分享表单(Share Sheet),以及<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Multitasking.html#//apple_ref/doc/uid/TP40006556-CH38-SW1">多任务</a>机制。如果你的应用已经整合了系统原生的分享表单,那么在iOS7当中它们会自动更新到新的版本。同样,曾经仅限于内置应用的多任务功能现在有了更广泛的运用范围,这也意味着内容的下载和更新可以在后台自动执行了。</p> <h4> 案例</h4> <p>我们已经可以在很多应用当中看到包含了Airdrop功能的分享表单了,不过更多的应用仍在使用旧版的动作表单,或是自定义的解决方案。你不能指责他们,毕竟新的分享表单在实现方式上还是有一定复杂度的。</p> <p>对于多任务来说,当前有很多新闻或照片媒体类的应用都已经开始使用这方面的功能来实现后台的上传或下载。幸运的是,如果相关功能产生了性能方面的问题,用户可以在系统的&ldquo;设置&rdquo;当中手动关闭多任务功能,不过我怀疑有多少人有能力准确的发现这方面的问题。</p> <p><img alt="15-air-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/15-air-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">The New York Times使用了新的分享表单,包括Airdrop功能。</p> <p><img alt="16-album-ios7-app-design-ux-ui.png" src="/sites/default/files/images/201310-1/16-album-ios7-app-design-ux-ui.png" /></p> <p class="figure-caption">Albumatic仍在使用简单的动作表单。</p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/145" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Redesign</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/82" typeof="skos:Concept" property="rdfs:label skos:prefLabel">手势</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/106" typeof="skos:Concept" property="rdfs:label skos:prefLabel">动画效果</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Thu, 03 Oct 2013 11:22:33 +0000 C7210 257 at http://beforweb.com http://beforweb.com/node/257#comments 导读文摘130906 - App体验记录、更多iOS7设计规范译文 http://beforweb.com/node/250 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-digest-reading.png" width="70" height="90" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>周五晚上还算精神,既没有一周工作结束后的轻松与愉悦,也没有摧枯拉朽的疲劳与无力;平常心。</p> <p>于是临时来一发导读;不过眼看着已然10点半了,今天能不能发上来还两说的;平常心。靠在沙发上,看着傻猫猫仰面朝天的睡着,偶尔抖抖爪子,然后自己抱住自己的小脑袋瓜,也许是在做梦吧;听着Foo Fighters,完全是去年这个时节的节奏,仍是秋高气爽,却物是人非。</p> <p>今次的导读包括两篇已经放在<a href="http://beforapps.com">Beforapps</a>上面的App体验记录(均为投稿作品,欢迎各位投稿或瞎聊呗,发coda7210的gmail或者到<a href="http://weibo.com/c7210">微博</a>联系我都好),以及我目前所在团队中几位交互设计师翻译的若干章节的iOS7设计规范;个人认为是HIG中最关键的几个章节,关于各类栏、控件的外观、交互规则等方面。</p> <p>哦另外说,最近试着在这边一些页面侧边增加了一个&ldquo;推广&rdquo;,链到<a href="http://shop102288713.taobao.com/?spm=2013.1.1000126.d21.wAbIGM">一笔一画</a>的iPhone5草图本;她家还有其他一些不错的本子,喜欢的朋友可以看看呗。</p> <!--break--><h3> App体验记录 - 金山词霸 vs. 有道词典</h3> <p>来自<a href="http://www.weibo.com/csjungle">晓天隐</a>的投稿。</p> <blockquote><p>最近刚更新了金山词霸,新版的改动非常大,但个人觉得改动步子跨的有点大,于是乎&hellip;而同类产品有道词典也同样有了大的改动,但相比较金山词霸而言,其改动挺值得一赞的(好像eico design参与了设计)。不管是金山词霸还是有道词典,都在界面上添加了图片来增加应用整体的美观性,并且减少字典本身给用户带来的枯燥的感觉。但两者的效果却千差万别...</p> </blockquote> <p><a href="http://beforapps.com/?p=274">阅读全文</a></p> <p><a href="http://beforapps.com/?p=274"><img alt="Screenshot_2013-07-23-09-30-18-e1375019041525.png" src="/sites/default/files/images/201309-1/Screenshot_2013-07-23-09-30-18-e1375019041525.png" /></a></p> <h3> App体验记录 - BBC Weather</h3> <p>来自<a href="http://www.weibo.com/csjungle">晓天隐</a>的投稿。</p> <blockquote><p>个人觉得最简单的交互方式就是点击和滑动。而最近淘到的这款BBC Weather则是个人觉得比较典型的一款。期间你需要的操作除了点击就是滑动。它仅仅通过点击和滑动来与用户进行交互,通过界面的设置使得交互不显得单调,反而带来一种娱乐性。简洁而不简单,这样的交互个人非常非常的喜欢...</p> </blockquote> <p><a href="http://beforapps.com/?p=255">阅读全文</a></p> <p><a href="http://beforapps.com/?p=255"><img alt="01-bbc-weather-e1373809519905.jpg" src="/sites/default/files/images/201309-1/01-bbc-weather-e1373809519905.jpg" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 栏</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2802041697">WayneXia</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括状态栏、导航栏、工具栏、标签栏等的外观、行为与设计指导原则。</p> <blockquote><p>状态栏用于展示设备当前的状态信息。你可以为整个app来设置统一的状态栏,也可以为单独页面来设置。</p> <p>状态栏是透明的。不论竖屏还是横屏,状态栏显示始终在设备屏幕的最顶部。它展示如网络连接,时间,和电池电量等人们关心的信息。</p> <p>要慎重考虑是否要隐藏状态栏。因为状态栏是透明的,通常我们并不需要隐藏它。一味地隐藏状态栏,意味着用户要知道当前时间或看看网络是否有连接就得离开当前的应用程序...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/08/ios7-hig-17/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/08/ios7-hig-17/"><img alt="status_bar_default_2x.png" src="/sites/default/files/images/201309-1/status_bar_default_2x.png" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 控件</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2045962325">Skycai</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括活动指示器、日期选择器、联系人添加按钮、详情展开按钮、信息按钮、标签等的外观、行为与设计指导原则。</p> <blockquote><p>活动指示器显示了⼀项任务或者进程正在进行中。</p> <p>当任务正在进程中,活动指示器旋转;而在任务完成时,活动指⽰示器消失。用户不与活动指示器发生互动。</p> <p>不要显示不转的活动指示器,因为用户会由此联想到这个进程停⽌了。</p> <p>使⽤用活动指示器的目的,主要是让用户确定他们的任务或进程仍在进行中,而不是提示进程什么时候结束...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-019/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-019/"><img alt="activity_indicator_2x.png" src="/sites/default/files/images/201309-1/activity_indicator_2x.png" /></a></p> <h3> iOS7界面设计规范 &ndash; UI元素 &ndash; 临时视图</h3> <p>由交互设计师<a href="http://www.weibo.com/u/2045962325">Skycai</a>翻译,首发于<a href="http://wxd.ctrip.com/blog/">WXD</a>(携程无线事业部用户体验设计组)团队博客;包括警告、操作菜单、模态视图的外观、行为与设计指导原则。</p> <blockquote><p>警告窗口在app屏幕的中央弹出,浮在视图的最上层。警告窗口的外观与app没什么联系,是因为这强调了它的出现,取决于app或设备发生了一些变化,而不一定是用户的最新行动的结果。用户只有在取消警告窗口之后,才可以继续使用当前正在运行的app。</p> <p>警告窗口至少包含了一个按钮,让用户点击以解除警告。默认情况下,警告窗口会显示标题,可能也会显示一条消息,提供附加的信息。一个警告窗口可以包含一到二条文本输入框,其中之一可以是安全输入框。警告窗口的背景外观是系统定义的,不能更改。</p> <p>警告窗出现的次数并不多,这样可以让用户认真对待。确保让警告窗在您的app出现的数量降到最低,并确保每个警告都提供了重要的信息和有用的选择...</p> </blockquote> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-20/">阅读全文</a></p> <p><a href="http://wxd.ctrip.com/blog/2013/09/ios7-hig-20/"><img alt="alert_2x.png" src="/sites/default/files/images/201309-1/alert_2x.png" /></a></p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动设计" src="http://beforweb.com/sites/default/files/images/products/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动设计</a></h4> <p><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">作者从人-机-环的角度出发来阐述移动应用的设计,并建立了移动应用设计的基本原则;然后,根据移动端的情境、移动设备的特征,以及触摸的交互方式,总结了移动导航和框架设计的主要形式,并给出了导航设计的原则和思路...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/133" typeof="skos:Concept" property="rdfs:label skos:prefLabel">体验记录</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/25" typeof="skos:Concept" property="rdfs:label skos:prefLabel">导读文摘</a></li></ul> Fri, 06 Sep 2013 15:29:54 +0000 C7210 250 at http://beforweb.com http://beforweb.com/node/250#comments iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合 http://beforweb.com/node/227 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-7-human-interface-design-guideline-document-ui-ux-apple.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>突然就到了周日傍晚。你永远不会知道自己的生活在接下来的一周当中能够发生多少变化;各种不可预知性所带来的更多是快感还是焦虑与不安,冷暖自知。相比之下,白天工作当中那些需求列表与排期文档就显得那么可爱了,哪怕有各种临时任务或需求变更,也最多只是让人在身体上疲劳一些而已。但有些事就远没这么简单了。</p> <p>无名无状的话说到这里。今天的这篇更新是iOS7界面设计规范预发布版本第一章的最后一个小节了;我这边的汉化工程暂时告一段落。正如之前提到的,接下来会有我现在的一些同事参与进来,大家一起贡献更多的力量。届时,相关内容可能会首发到团队博客当中。那,眼下先感谢各位最近两周的鼓励与支持呗;从下周开始,没有意外的话,Beforweb会继续回到各种UX文章的更新上来。</p> <blockquote><p><strong>重要</strong>:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,<strong>但并非最终版本</strong>,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。<strong>这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试</strong>。该文档或许会随着API或相关技术在未来的发展而进行更新。</p> </blockquote> <p><strong>译文最后更新时间:2013-06-30</strong></p> <!--break--><h3> 使用标准UI元素</h3> <p>尽可能使用UIKit框架定义的各种标准UI元素。使用标准UI控件而非自定义元素,你和你的用户都会受益:</p> <ul> <li> 如果iOS本身经过重新设计,那么标准的UI元素在系统更新时可以随之自动更新,而自定义的UI元素不会。</li> <li> 人们会立刻了解怎样使用你的应用,因为他们已经习惯于标准的UI元素。</li> </ul> <p>为了充分发挥系统标准UI元素的价值,你必须:</p> <p><strong>在使用任何一个标准UI元素的时候都要依照设计规范的指导</strong>。当一个UI元素无论看上去还是用起来都符合用户的期待时,他们就可以依靠已有的经验来更快更容易的使用你的应用了。你可以在<a href="https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW1">UI元素</a>一章中找到各类UI元素的规范。</p> <p><strong>通常,不要为标准的交互行为创建自定义UI控件</strong>。首先问问自己,为什么要创建一个行为方式与标准UI控件完全相同的自定义控件?如果你只是想要一种订制化的外观,可以考虑通过UIKit框架当中用来订制外观的API来改变标准UI元素的样式,或是改变元素的配色风格。如果你想得到的行为与标准控件的行为有些许区别,那么首先要确认能否通过属性的调整来使标准元素完成同样的目标。如果你需要的是彻头彻尾的订制化交互行为,那么在设计自定义控件的时候,要确保它看上去不会与标准控件相似。</p> <blockquote><p>技巧:Interface Builder可以帮你很轻松的创建标准UI元素、使用订制外观的API、设置外观属性、向控件中添加系统预设或自定义图标等等。可以参考<a href="https://developer.apple.com/library/prerelease/ios/documentation/ToolsLanguages/Conceptual/Xcode_User_Guide/000-About_Xcode/about.html#//apple_ref/doc/uid/TP40010215">Xcode用户指南</a>了解更多详情。</p> </blockquote> <p><strong>不要为系统预设的按钮和图标赋予其他的含义</strong>。iOS提供了很多按钮与图标,你要读懂相关的文档,了解这些按钮与图标在语义上的含义,不要单纯依靠自己对它们外观的理解。如果你发现预设的按钮或图标无法准确的代表你想要表达的功能含义,那么可以自己创建。你可以在<a href="https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1">栏按钮图标</a>一节当中找到相关规范,帮你更好的设计自定义图标。</p> <p>如果你的应用可以带来沉浸型的体验,那么打造完全自定义的控件是合理的做法。因为你在创建一种独特的体验环境,对于用户来说,探索与该环境进行互动的方式也是他们所期待的体验之一。</p> <div class="embed"> <article id="node-264" class="node node-related-books" about="/node/264" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone应用用户体验设计实践与案例" src="http://beforweb.com/sites/default/files/images/products/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实践与案例</a></h4> <p><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 对横竖屏切换的响应</h3> <p>人们通常会希望能够在任何定向方式下使用iOS设备,所以最好让你的应用可以在这些情况下做出恰当的响应。</p> <p><strong>让用户在横竖屏状态下都能聚焦于最重要的内容</strong>。这个目标具有最高优先级。人们需要在应用当中查看他们所关注的内容,并与之交互;如果横竖屏切换会使用户失掉焦点,他们便会感到迷失,并觉得丧失了对应用的控制权。</p> <p><strong>通常,要让应用能够运行在各种定向模式当中</strong>。人们可能会期望在任何定向方式下使用你的应用,能满足他们的期望是最好的。特别是iPad用户,他们会希望你的应用能够运行在他们当前所使用的任何持机方式下。当然,有些应用确实只能运行在竖屏或横屏当中;如果你的应用是这样,那么你应该参考以下几点原则:</p> <ul> <li> <strong>应用在启动时只按照默认支持的定向方式进行加载,忽略当前设备的屏幕方向</strong>。如果一款游戏或媒体浏览类型的应用只能运行在横屏下,那么就直接以横屏模式启动,即使设备本身是处于竖屏状态的;这种时候人们会明白需要调转屏幕才能正常浏览内容。</li> <li> <strong>避免在界面中通过UI元素提示人们调转设备屏幕</strong>。直接按照默认支持的定向方式启动应用,这就已经清楚的告诉用户需要旋转设备了,不需要再增加多余的UI元素进行引导。</li> <li> <strong>同时支持两种子状态</strong>。譬如,如果你的应用只能运行在横屏当中,那么无论当前横屏的方式是Home键在左手边还是右手边,人们都可以正常使用;如果人们在使用过程中将设备调转180度,那么应用最好也可以进行响应,自动调转180度。</li> </ul> <p><strong>如果对于你的应用来说,调转屏幕方向是用户输入方式的一部分,那么你可以通过特定的方式进行订制化的处理</strong>。例如,在一款游戏当中,人们需要通过旋转屏幕来产生相应的行为,那么游戏本身就不可以再响应横竖屏切换的规则了。这种情况下,你可以允许用户在进入主线流程之前仍然能够切换子状态(Home键在左手边或右手边),而一旦进入主线流程,那么旋转屏幕就只能用来触发游戏当中的特定行为。</p> <p><strong>在iPhone上,判断用户在调转屏幕方向时的需求所在,并进行响应</strong>。人们从竖屏切换到横屏时,通常是因为想要&ldquo;看到更多&rdquo;。如果你只是简单的将内容尺寸放大,那么未必能满足用户的期望。试着调整每一行文字显示的字数,如果需要,甚至是重新调整UI布局,使其能够呈现更多的内容。</p> <p><strong>在iPad上,尽量支持所有的定向方式,满足用户的期望</strong>。由于iPad自身屏幕规格较大,所以上一条中提到的&ldquo;用户旋转屏幕以便看到更多&rdquo;的需求是相对较弱的。相比于iPhone,人们不太关注于iPad的设备框架限制,以及Home键的位置,所以在很多时候,人们不会将iPad看做一种有默认定向方式的设备。如果可以,尽量让人们在任何持机状态下都能在iPad中与你的应用进行互动。</p> <p>在为iPad应用设计横竖屏响应规则的时候,遵守以下几点规范:</p> <ul> <li> <strong>考虑改变辅助信息或功能的展示方式</strong>。虽然你必须确保重要内容始终能够获取用户注意力的焦点,但对于次要信息或功能,可以考虑随着横竖屏切换而改变呈现方式。以iPad内置的邮件应用为例,账户和邮箱列表就属于次要信息(当前选中邮件的详情是主要内容)。在横屏时,次要信息被放置在左侧面板中,而竖屏时,则是呈现在弹出面板里的。对于某些游戏,在横屏状态时的界面边界到了竖屏当中也许需要进行重绘,这就有可能导致边界上下留出额外的空余空间。这种情况下,可以考虑在这些空余空间当中展示一些游戏辅助信息或对象。</li> <li> <strong>避免无意义的布局变化</strong>。尽量在所有定向方式下都提供具有一致性的体验。具有相似性的体验可以让用户通过已经掌握的使用模式在横竖屏当中轻松操作。如果你的iPad应用会在横屏时以网格的形式展示图片,那么在竖屏时,就没有必要一定更改为列表形式。</li> <li> <strong>如果可能,在切换横竖屏时尽量避免对信息内容样式的重新定义</strong>。尽量保持内容具有相似的格式样式,特别是对于文字内容来说,不要让用户因为切换横竖屏所导致的版式变化而无法找到之前阅读到的地方。如果有些内容样式必须发生变化,那么要通过动画过渡效果来帮助人们更好的跟随这些变化。例如,当横竖屏切换时,内容当中必须增加或减少一行文字,那么可以考虑在增加和减少的过程里使用渐入和淡出的动画效果。为了让自己设计出更好的横竖屏切换方案,可以想象一下,如果你是在现实世界当中与这些内容进行物理性的互动,那么它们有可能表现出怎样的行为规律。</li> <li> 为横竖屏各提供一张单独的启动图片。这样,无论人们在那种持机方式下打开应用,都可以感受到平滑的启动体验。与iPhone当中的系统首屏不同,iPad的系统首屏是支持横竖屏切换的,人们有可能在任何方式下退出前面一个应用,并继续打开你的应用。</li> </ul> <div class="embed"> <article id="node-296" class="node node-related-books" about="/node/296" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="为iPad而设计:打造畅销App" src="http://beforweb.com/sites/default/files/images/products/42.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">为iPad而设计:打造畅销App</a></h4> <p><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书强调实际可行的操作步骤,而非模棱两可的建议,包括如何产生创意、手绘App、做出原型设计、组织协作项目,以及App营销方面独家并且内行的建议。作者还向读者展示了用来做出超棒App的最新代码库、讨论了界面设计方面的抉择...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 弱化文件和文档的处理过程</h3> <p>iOS可以帮助人们创建和管理文件,但这不意味着人们在使用iOS设备时必须思考文件系统方面的问题。</p> <p>在iOS当中,不存在类似OS X系统中的Finder这样的应用,用户也不应该被要求与文件直接打交道,特别是不该去面对任何会让他们联想到文件源数据或存储位置一类信息的东西,例如:</p> <ul> <li> 确认打开或保存文件的对话框。</li> <li> 关于文件访问权限的信息。</li> </ul> <p><strong>尽量让人们在不需要打开桌面端iTunes的情况下管理各种文档</strong>。考虑使用iCloud来帮助用户访问他们在不同设备上的内容。要为用户提供更好的iCould体验,可以参考<a href="https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/iCloud.html#//apple_ref/doc/uid/TP40006556-CH35-SW1">iCould</a>一节。</p> <p>如果你的应用提供创建及编辑文档的功能,那么可以尝试提供某种&ldquo;文档选择器&rdquo;,帮助用户打开已有文档或创建新文档。理想情况下,这样的文档选择器应该:</p> <ul> <li> <strong>具有高度的图形化外观</strong>。让人们可以轻松的通过图形化的界面外观来识别出他们想要的文档。</li> <li> <strong>让人们使用最少量的手势来完成目标操作</strong>。例如,通过封面流或网格的形式组织文档,让用户通过滑动手势进行浏览,并通过点击来打开。</li> <li> <strong>提供新建文档的功能</strong>。不要让用户必须到其他地方创建新文档,而是直接在文档选择器当中点击文档图形上的某种默认占位图片来直接创建。</li> </ul> <p>提示:你可以使用Quick Look预览功能让用户在你的应用中对文档进行预览,即使你的应用并不支持这类文档的打开操作。参考<a href="https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/QuickLook.html">Quick Look</a>一节了解更多。</p> <p><strong>给用户一种安全感,让他们知道自己的工作成果始终会被保存,除非他们主动取消保存或进行删除</strong>。如果你的应用提供创建及编辑文档的功能,要确保这些数据无需用户手动执行也可以得到保存。iOS应用应该承担起帮助用户保存输入内容的责任,无论是他们在当前文档仍然处于打开状态的时候去查看另外一个文档还是切换到其他应用。</p> <p>不过,如果你的应用的主要功能并不是创造内容,但你需要让人们可以在查看信息与编辑信息在两种模式间进行切换,那么在这种情况下你可以提醒用户对信息变更进行保存。通常,可以在查看信息的视图界面中提供&ldquo;编辑&rdquo;按钮,当用户点击了这个按钮之后,就会进入编辑状态,同时原来的&ldquo;编辑&rdquo;按钮变为&ldquo;保存&rdquo;和&ldquo;取消&rdquo;这两个按钮。这种变化可以提醒人们,他们现在正处于编辑模式,可能需要执行保存操作,而&ldquo;取消&rdquo;按钮则为他们提供了在不保存变更的情况下直接退出编辑模式的出口。</p> <h3> 必要的时候提供设置方式</h3> <p>有些应用可能需要向用户提供安装或设置选项,不过多数应用是不需要的,或是可以推迟必须进行设置的环节。成功的应用可以让多数用户立刻上手使用,而且会在UI当中提供一些可以调整体验模式的方法。</p> <p><strong>尽量避免将用户打发到系统的&ldquo;设置&rdquo;当中进行操作</strong>。要记得,用户必须首先离开你的应用才能进入系统的设置,你不会希望鼓励用户这样做的。</p> <p>如果你能按照目标用户群当中大多数用户的期望来设计产品,就可以减少这种设置方面的需求。如果你需要用户的某些信息,可以首先试着从系统当中存储的用户信息当中进行查询,而不是让用户再次进行输入。如果你决定必须在应用中提供设置功能,可以参考<a href="https://developer.apple.com/library/prerelease/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007072">iOS应用编程指南</a>当中的&ldquo;The Settings Bundle&rdquo;一节了解更多信息。</p> <p><strong>如果有必要,让用户尽量在你的应用内部进行设置</strong>。在应用内提供设置选项,可以让相应的变更可以直接体现出来,让用户即时的看到变更结果,而无需在你的应用与iOS的&ldquo;设置&rdquo;之间进行切换。</p> <p><strong>如果需要,尽量在应用的主界面中提供设置选项</strong>。特别是当设置选项对应着应用的主要任务,或是用户可能频繁的变更设置的时候,最好将相关的设置选项直接放置在主界面当中。如果你要提供的设置功能对用户来说只是偶尔才会用到,那么就尽量将它们放在单独的界面当中。</p> <div class="embed"> <article id="node-287" class="node node-related-books" about="/node/287" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍了如何突破基础、打破常规,从而提供“超赞”的用户体验。通过学习,读者将会学到如何使用标准控件,如何创建非标准控件和具备较高影响力的用户交互,以实现真正夺人眼球的应用设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>上一篇:<a href="http://beforweb.com/node/226">iOS7界面设计规范(12) - UI基础 - 品牌</a></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 30 Jun 2013 09:01:14 +0000 C7210 227 at http://beforweb.com http://beforweb.com/node/227#comments iOS7界面设计规范(12) - UI基础 - 品牌 http://beforweb.com/node/226 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://beforweb.com/sites/default/files/article-thumbs/icon-logo-ios-7-human-interface-design-guideline-document-ui-ux-apple.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><blockquote> <p><strong>重要</strong>:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,<strong>但并非最终版本</strong>,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。<strong>这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试</strong>。该文档或许会随着API或相关技术在未来的发展而进行更新。</p> </blockquote> <p><strong>译文最后更新时间:2013-06-29</strong></p> <!--break--><p>品牌,不仅是在应用中呈现品牌的配色或logo这么简单。最理想的情况是,经由创造独特的外观和感觉,为用户带来印象深刻的优质体验,从而打造出你的应用所特有的品牌。</p> <p>当你需要在应用中明确的向用户展示品牌信息的时候,要记住以下两点:</p> <ul> <li> <strong>将品牌元素中的色彩或图形进行必要的精炼,通过一种非侵入式的方式整合到应用当中</strong>。人们用你的应用,是为了完成某种任务或得到娱乐消遣,没人希望被迫去看广告。为了不影响整体体验,你需要安静的展示自己产品的品牌识别元素。在iOS7当中,你可以很轻松的定义一种和品牌相关的基本色,来表达元素的交互性和状态。</li> <li> <strong>不要从用户所关注的内容当中挤兑空间来展示品牌信息</strong>。例如在导航栏底部增加一个固定的信息条,只用作展示品牌信息,这样就会平白减少内容的显示空间;试着考虑其他非侵入式的方式,例如订制化的背景图片等等。</li> </ul> <blockquote><p>重要:应用图标是个例外,它应该完全聚焦在品牌识别性上。因为用户会很频繁的看到你的图标,所以要多花些时间在图标的设计上面,增强其对于用户目光的可识别性,这是很重要的<a class="eLink" href="http://beforweb.com">。</a></p> </blockquote> <p>上一篇:<a href="http://beforweb.com/node/225">iOS7界面设计规范(11) - UI基础 - 图标与图形</a></p> <p>下一篇:<a href="http://beforweb.com/node/227">iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合</a></p> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/115" typeof="skos:Concept" property="rdfs:label skos:prefLabel">视觉设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/142" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS7</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/125" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计规范</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 29 Jun 2013 07:29:44 +0000 C7210 226 at http://beforweb.com http://beforweb.com/node/226#comments