把作品放在一起,才看得出选择
以下观察以已查看的图像为依据,目的是练习视觉推导。用图库搜索作品名或 ID,打开大图,再读相关段落。不要求每个任务执行全部路线,不把这些作品当作唯一标准。
01 同一外壳,信息如何改变形状
打开 product-raycast 的 Flight Tracker、Calculator、File Search、My Schedule,再看 original-things 和 product-linear-build。
航班以大号航班号建立对象,黄色 Delayed 独立表达状态,两地代码左右相对,飞机把路线变成关系。时间与时长留在下方细分区域,没有把每个字段做成按钮。计算器则让输入和输出隔着箭头相接;文件搜索有列表与预览,日程按时间分组。相同软件中的信息形状因对象而变,统一外观不需要统一成一种容器。
Things 的空心复选框是完成动作,小型标记与分组标题不必长得像它;Linear 的密集项目界面提供另一种工作状态。新任务中先确定什么是对象、关系、状态和动作,再决定形态。值得迁移的是这些区别,不能把航班的视觉结构硬套到所有任务。
02 大字不只有一种声音
对照 Lovably、Glide Typeface、PP Neue Montreal、Signal-A Studio。前两者将字形与强色场推到前面,Neue Montreal 把字样放进带水平细线的旅行册式结构,Signal-A 的编排像有页边与题头的编辑作品。
不要把差异简化成“都用了大字”。观察字的宽窄、密实程度、边界与图像占比。把你自己的标题写进去,看它的长度和笔画会怎样改变构图。尤其中文不能直接继承拉丁字的字距与断行。
03 密集不等于挤,网格不等于卡片墙
对照 Groth Studio、Lowercase、Flim、Amanda Guo Design。Groth 用贯穿的右侧研究栏与左侧项目面形成两种阅读速度;Flim 把图像集合做成可扫视的视觉资源;Amanda 的文字自述与大图段落切换节奏。
先看整页的区段变化,再放大文字与图片的接缝。想象删去所有圆角和阴影后,关联是否仍由位置、连续性与比例表达。这个问题不禁止圆角或阴影,而是让你辨认谁真正承担组织作用。
04 材质能否成为对象性格
对照 Dialkit、Transport、Huge.、Max Milkin。旋钮、被摆放的实体、柔软字形与克制的物件展示,各自在不同位置制造“触感”。
注意材质出现的面积、与平面文字的距离,以及它是否在说明对象。给新页面加材质前,先想清它使哪件东西变得具体;无需把所有面板都做成同一种质感。
05 图像与文字谁先占据空间
对照 Kinfolk、PRIMARY PAPER、Alone in New York、White Desert。看文字是站在图外、盖住图、与图争夺尺度,还是像片头字幕一样进入场景。
照片不是填充剩余面积的背景。观察人物、地平线、光线和留空如何影响标题的位置。换成你实际能获得的素材后重新判断,不能保留参考构图却用无关图片填进去。
06 趣味能否进入信息本身
对照 Depo Budget App、Nodeck、Locker Land。Depo 的蓝图方格、奶油黄设备和红色入口共同形成漫画式工具语言;Nodeck 以厚轮廓字与办公物件形成演示场景,箭头承担推进;Locker Land 提供游戏化场景的另一条路径。
先区分趣味发生在内容对象、导航方式还是装饰层。装饰可以存在,但若移走它就只剩熟悉的按钮排队,构思还没进入功能关系。静态截图不能证明交互实现,具体动作需看原站。
07 颜色如何从作品内部长出来
对照 Le Petit Bleu、Juggle、Le OFF Paris、Lovably。Le Petit Bleu 的蓝绿从真实室内条纹、招牌与线描建筑延伸到界面,颜色与地点形成连贯的记忆;其他作品通过强色碰撞、字形与插画建立不同的音量。
不要从“餐饮/金融/科技”标签推导配色。观察颜色与摄影、笔触和字体的共同来源,以及明亮部分到底承担哪一件事。同一种颜色在不同面积和邻色下会产生完全不同的感受。
08 窄屏不是桌面的缩小复印
打开 Le Petit Bleu 的桌面与移动图,再看 sankou-stylem 的桌面、手机首页和手机菜单。
餐厅桌面把信息栏与室内照并置;手机将照片与标题叠在一起,并重新强调点单入口,下方建筑图与地址仍成对。STYLEM 的手机菜单让主要章节成为大号文字行与加号,外部入口用描边胶囊加斜箭头,末尾辅助文字更轻。它们并非所有项目等权按钮,而是按导航关系分形态。
这些移动图大多只有首屏,不能据此宣称整页适配已经验证。实际项目必须用真实长度的中文、图片和内容打开窄屏复核。
09 日文编排提供的另一种空间感
对照 STYLEM、nome、馬路村森林組合、SHIJIMA ATAMI。观察短行、纵向关系、文字周围的空场、摄影裁切与图形如何一起控制阅读。STYLEM 的细彩线斜穿句子断行,纤维的方向与文字相遇;不只是铺一张好看的背景。
不要把“日式”理解成小字加留白。它们之间的图文关系也不同。处理中文时从当前词句重新断行,保留有意义的停顿,不硬搬日文的节奏。
10 从静态图继续走到时间
从作品详情中的动态记录或原站进入,观察一次完整的进入、切换、打断与退出。记录对象从哪来、到哪去,以及动作发生后何时给出反馈;用静态图无法判断的事情,不要写成已经验证的结论。
实现时再用 animate 的技能与配方。为当前动作选择连续性,不把某个弹簧参数当作“高级感”。首次观感与频繁操作的感受可能不同,需要实际反复操作判断。
把观察带回当前任务
挑一件最能触发想法的作品,再选一件解法相反的作品。写出它们真正不同的关系,用你的真实内容各做一个小范围构图尝试,选择有表现力且能成立的方向。保留差异的原因,而不是记下一套固定尺寸。
图库中的逐件观察是助手的读图笔记,用户评价才是个人审美依据。评价可在详情中记录并导出 JSON;由用户明确交给 AI 后再用于校准。不要把收藏、标签或模型自评自动当作喜欢。