文/郝晓 手机阅读类界面设计中不仅遵循传统的平面设计的视觉传达方式,还遵循形式美法则,如对比、虚实统一、节奏、对齐、空白等,同时也在原有的基础上赋予了平面元素的新特点。
![b7abe50457016e74d9f87f890521111d.png](https://i-blog.csdnimg.cn/blog_migrate/13d021c0d812c40b5add61bc505aeed1.jpeg)
![400e6b8103407a703f2ad3affc963932.gif](https://i-blog.csdnimg.cn/blog_migrate/616fae3df2c324c43e5af71a8d154caf.gif)
文字是能起到画龙点睛作用,很多的设计作品是以文字为创作核心,将字体图形化和符号化。手机界面可以用字体大小的对比来烘托界面阅读气氛。较大的字体用以强调的作用,较小的字体可以作为辅助信息,较小的字体可产生整体感和精致感,但阅读性较差。
![7cd76975291a6973ffa3cfa2e729f0af.png](https://i-blog.csdnimg.cn/blog_migrate/65c9fa4a4aa782c104afe7a592b7dd67.jpeg)
![af1758cb893e8f65a4bb83817eec3442.gif](https://i-blog.csdnimg.cn/blog_migrate/2272d3d3ecdf7376e0b2856fdce82ee6.gif)
在手机阅读应用中,由于屏幕尺寸的原因,信息图形种类不宜过多,主要分为两种类型:一类是传统信息图形元素;另一类是简易化、具有交互性的信息图形。在手机阅读类应用界面中传统图形元素多采用摄影、手绘插图等体现主题的表现形式,构成阅读界面中的主图与背景图片。
![2e360fdcfa6bad2f8c60d883fa650b56.png](https://i-blog.csdnimg.cn/blog_migrate/b3a002b77d3adab55f88d9cda9faa86e.jpeg)
手机阅读类应用界面要在交互设计下才能得以实施,所以简易化、具有交互性的信息图形,成为阅读界面不可缺少的设计元素,读者通过易读简化的图标、层次分明的按钮、以及其它的信息图形元素与手机进行互动。
![ab01b6962306d299245bb1ceee50090b.png](https://i-blog.csdnimg.cn/blog_migrate/2f71438908f55b5f14976e7275acf3a3.jpeg)
利用人们日常生活中的经验、与真实事物的相似度和功能性隐喻来引导读者识别各种信息图形,通过效仿人们日常化生活中熟悉的视觉形象和行为来设计图形界面,易于被读者理解和使用。
![8bd6231e2ee134e602f70e1fe515e2f6.png](https://i-blog.csdnimg.cn/blog_migrate/1baa1deb222e82aee820e1579c8215ed.jpeg)
![659268dd0b02e56d66741e876db74d44.gif](https://i-blog.csdnimg.cn/blog_migrate/a6068e3e9a6e435444cc14b5d5f6ddcf.gif)
在手机阅读类应用界面中,色彩的表现形式多种多样。手机阅读应用界面色彩给人以浓烈的视觉冲击力和艺术感染力,会在读者脑中留下长久的印象。一般界面色彩都是由主色调、辅色调两部分组成。根据阅读界面的性质和内容来确定主色调,色彩种类不能过多,纯度也不宜过高,要便于阅读。
![e49f25117dbe6b21ad1542173fe1e766.png](https://i-blog.csdnimg.cn/blog_migrate/9da1ea047e13621e0637c5a2ae2b92b2.jpeg)
主色的合理选择有益于提高信息传达准确性及醒目性,通常辅色调的选择多是主色调的互补色、对比色或者是邻近色,避免界面颜色过于单调和没有层次,增加界面的生动感和层次,同时巧妙地运用其它色彩作为点缀,可以使阅读界面活跃而又不喧宾夺主。
![e77b8cd383fd2e22db65ff8e83767edc.png](https://i-blog.csdnimg.cn/blog_migrate/0bd90722d702cc3b09bf2b4e9e41c63d.jpeg)
人对色彩的记忆,一般情况下暖色系要比冷色的色彩记忆性强,高纯度比低纯度易于唤起大脑中的记忆。色彩较少、形态简单的阅读界面比色彩较多、形态复杂的容易记忆。
![297f9d517c0dd25bd6399c81e7c0eb40.png](https://i-blog.csdnimg.cn/blog_migrate/df74ad7040102b39074b5eac158fc4d0.jpeg)
![e9d5e407d0f2eb8a32b90d11f153ae79.gif](https://i-blog.csdnimg.cn/blog_migrate/79abe63ec1327d62341c73cfc56e9641.gif)
界面空间将文本、图形、色彩、多媒体等视觉要素有机地统一排列,清晰、有层次地把艺术与信息传递给读者,构建一个具有设计感的版式空间和结构形式,从而达到美化界面的效果。界面空间架构有四种导航样式,即列表菜单式、选项卡式、陈列馆式、超级菜单式。
![58bc11b3a02774aa6df73fe23bcd7b88.png](https://i-blog.csdnimg.cn/blog_migrate/b1b066013df6ee05e146ebb552ecee95.jpeg)
①列表菜单式,很适合用来显示较长或拥有文字内容的标题,界面采用色块或分割线区分阅读信息,整齐具有规划感。
![1b3cd9a9f1ae6275a54a3a694674eec8.png](https://i-blog.csdnimg.cn/blog_migrate/604288f3f9552403bc7e6ece00533802.jpeg)
②选项卡式,多在界面的头部或底部,为已选择的界面设置不同的视觉效果,读者能够清晰地知道自己选择了哪一项,并且设计使用易于识别或带有标签的信息图形。
![988208d655b9853bdfa8de5f0939c886.png](https://i-blog.csdnimg.cn/blog_migrate/ad10e4666ba24c5b8557dbbc070e35bb.jpeg)
③陈列馆式,能很好地应用于读者需要经常浏览,频繁更新的信息,同时整齐的排列,减少空间的不必要流失。
④超级菜单式,在一个较大的覆盖面板上分组显示已经设计好的信息图形方便读者的选择和切换。很多阅读类应用界面多采用两种以上样式的随机组合。
![1ba003a033333e8dcf22aa69b999a164.png](https://i-blog.csdnimg.cn/blog_migrate/9d109b17fb7417ac2a5c43462433bcbd.jpeg)
![9f549c5abb534ecde7d22c3b2da3c900.gif](https://i-blog.csdnimg.cn/blog_migrate/b110e09ea65f487d586e1f1747117b06.gif)
对于界面设计而言,无论是阅读逻辑还是界面布局都是建立在视觉习惯上,我们视觉习惯是从左往右的阅读顺序,这种习惯性的阅读经验不仅影响了现今绝大多数版面的阅读顺序,也影响了现今在手机阅读界面中对于设计平衡的判断准则。
![ae123f4231bd86ca12c56799a4f81aa7.png](https://i-blog.csdnimg.cn/blog_migrate/096840ff6ab94f3900484c2384140cab.jpeg)
在界面版式上,左侧重要于右侧,上半部重于下半部,所以阅读应用的最新信息放在界面的上部,其它的信息依次排开。界面版式中都会有视觉关注点,视觉关注点通常比较突出,吸引读者。按照重点突出的原则,加强主要的视觉中心点的力量,通过色彩突出、文字放大等方式来吸引读者。
![e413471a225a586fe592176ca001c226.png](https://i-blog.csdnimg.cn/blog_migrate/d6ae5bf0afdd156776b28bcec8dde00f.jpeg)
![700581a84c03233004bd62ad35da6ada.gif](https://i-blog.csdnimg.cn/blog_migrate/bed81bc0b380058af757b3f66eca4aec.gif)
在手机应用界面设计中,有很多精彩的细节,细节之所以细,在于难以觉察,却又纤毫毕现。例如:精确到像素的图标设计,用像素制造出投影、凹凸、高亮等惟妙惟肖的立体效果,在界面视觉上给读者带来无限的惊喜。
![fce3c56b13a8a4b4670d7a7d692be461.png](https://i-blog.csdnimg.cn/blog_migrate/2f6b63ba8924789f17900cfe9b7c074c.jpeg)
![312b263f18c5f2946233204c9ddd7c44.png](https://i-blog.csdnimg.cn/blog_migrate/4f4c1459f1f4b3bcc78442e3d91f634d.jpeg)