《移动UI设计法则》阅读笔记(三)

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注意转换界面中图标间的色彩


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,837评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 无尘大和尚住持临江寺,寺院又兴旺起来。 一炉火,一缸水,点化了怪和尚化尘。消息迅速传播。佛门佳话,人们争相传颂。 ...
    天下学问夜航船阅读 308评论 2 2
  • 你带我乘着宇宙忽快忽慢 你带我看这世界忽明忽暗 本来对陈粒的了解仅仅是奇妙能力歌,不像是对宋胖子...
    她是妖孽阅读 349评论 0 0