3.1图片在界面中的布局展示形式
3.1.1传统矩阵式布局
矩阵式布局是最常见的多图形式,在进行移动产品界面设计时,使用矩阵式的布局通常会给用户带去规整、整齐的视觉感受,如下图所示
优点:这样能让界面显得更加简洁、从而能让用户短时间内快速浏览界面中图片信息、节省用户接收信息的时间
底色矩形将图片内容框在了一起,让用户能够清晰与明确明确他们之间的对应关系,为用户的操作带去指示感,让交互变得更加明确和清晰
缺点:大小统一、平铺排列的图片虽然会让界面显示得整齐,但却让界面的结构布局略显拘谨,从而让用户产生较为枯燥的浏览体验
适用范围:需要快速浏览信息的界面。其中较为典型的案例,便是Instagram产品中的发现界面。
3.1.2定宽不定高瀑布式布局
定宽不定高的瀑布式布局是指,在界面中将图片放置在宽度相等,但高度却不定的方框中,从而形成的一种图片布局形式,也就是等宽不等高的布局形式。而等高等宽的图片布局就类似于传统矩阵式布局,相比之下,等宽不等高的图片展示形式给与视觉上更能带来一种灵活与形式感。
优点:这样的设置节约了空间,省去了页码导航链接或按钮,让操作变得更为方便,也让界面从上到下,如同瀑布一般源源不断的出现新图片信息
错落有致,不拘一格,符合用户个性化心理特征,同时也带来了视觉的层级感,界面显得高效而具有吸引力,符合一眼扫过的快速阅读模式
缺点:不定高的图片尺寸分布在界面中,让用户产生任意流动的视觉流程,也在一定程度上缓解了因为固定模式带来的视觉疲劳感,但灵活的布局让本可以中规中矩、依靠惯性进行浏览的用户要花更多的时间去思考与搜索,用户需要在无规则的转移中花费更多的时间去找到视觉的落脚点,从而接收来自界面中的图片信息。
综上所述,定宽不定高的瀑布式布局适合进行快速浏览的移动端APP产品中,对于需要有一系列详细商品说明或需求进行大量跳转、搜索与查找的移动产品而言,这样的布局并不适用。
3.1.3承接关系的浏览布局
1.若隐若现的诱惑力
在页面中最大化显示某张图的同时,触碰控制按键后,下一张图片的部分预览信息会浮现眼前,这种若隐若现的表现方式,能引起用户的好奇心,从而更加吸引用户进行继续点击浏览的操作。
2.昙花一现也具有吸引力
利用用户的好奇心,浏览图片时页面中没有任何按钮,鼠标触碰到图片时便会出现页面下方的上下业按钮
3.缩略图让承接式浏览更加便捷
缩略图一张张的呈现方式能够让用户很好的浏览与注意到每一张图片,避免了用户在矩阵式布局或瀑布式布局中快速扫视和浏览图错过部分的图片内容
4.打破屏幕的局限的全景式布局
将应用与界面中图片使用全景式布局,能够打破屏幕的限制,呈现另一种布局的形式感。这种布局能够增加界面之间的联系感。图片铺满整个界面,也使得界面显得开阔而大气。
3.2注意界面中图片的尺寸与比例
3.2.1不要破坏图片的品质视觉感
3.2.2过度拉伸让图片失真
3.3图片处理凸显界面魅力
3.3.1透明和叠加效果带来的精致享受
3.3.2效果叠加
3.3.3“模糊”的质感也是一种美的体验
优势:这样的效果不仅让界面有了清晰与模糊的对比,更进一步突显了图片之上的文字与元素按钮的清晰感,增强了可读性与操作性,同时也让界面有了一定的质感表现以及前后强烈的景深次感,这也成为界面的设计亮点.
3.4图形符号的引导
3.4.1提高效率的反馈图形符号
快速地将界面的信息反馈给用户,相对于纯文字说明,结合图形符号的表达方式更能让用户一眼区分信息的差别,提高用户的界面操作效率,如下图所示
3.4.2让图形符号具有方向的引导性
3.5能让用户识别的图标设计
3.5.1保持设计的一致性
设计风格与系统特性相一致
3.5.2准确的隐喻塑造辨识度
图标达到了视觉上的一致性,且界面显得统一而简洁
3.5.3注意转换界面中图标间的色彩