• B端设计基础:帮你快速掌握面包屑导航

    UI交互 2023-04-08
    面包屑导航是从网站技术兴起就伴随出现的老组件了,至今还在使用,为用户提供了许多好处,而对设计几乎没有任何成本,前辈们也做了大量的研究和实践,证明是可行的。所以这次分析面包屑导航设计,希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。更多导航设计干货:如何做好B端产品的导航栏设计?

    面包屑导航是从网站技术兴起就伴随出现的老组件了,至今还在使用,为用户提供了许多好处,而对设计几乎没有任何成本,前辈们也做了大量的研究和实践,证明是可行的。所以这次分析 面包屑导航 设计,希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。

    更多 导航设计 干货:

    如何做好B端产品的导航栏设计?来看高手的5000字总结! 编辑导读:导航栏是用户对产品架构了解的第一途径,是作为产品各个功能之间的桥梁,能够对产品功能进行分发、引导。

    阅读文章 >

    一、什么是面包屑

    面包屑,英文:Breadcrumbs 直译过来,来源于格林童话中《汉赛尔与格莱特》,讲述的是一对兄妹在继母的怂恿下遭到父亲的遗弃,通过石子或面包屑做标记,找回家的路,虽然面包屑被鸟吃掉了,没找到回家的路,但面包屑的思路在网站的设计中沿用了下来,形成我们现在口中的面包屑组件。其中这个面包屑的作用是:留下返回路径。

    什么是面包屑(breadcrumbs)?

    面包屑是一种导航组件,用于显示用户在网站或应用程序中的位置,并能向上返回。

    二、面包屑的形态 1. 面包屑的样式

    以下是面包屑的常用样式,当前正在查看的页面的名称不应该是可点击的链接,因为重新加载活动页面只会令人困惑。这 1 和 2 为面包屑的常用样式,两者都可以接受,功能是没有差别的,推荐使用“>”字符,箭头指向,前进路径更形象;3-7 为面包屑的样式扩展,可根据实际的业务场景对应选择。

    面包屑不仅只存在于 PC 端,面包屑不是 PC 端的专利,移动端也是可以考虑加上面包屑的,值得探讨的是,移动端加上面包屑的成本大于收益,不仅影响视觉/布局,交互上体验也较差,所以导致现在移动端的基本看不到面包屑。

    若任务允许,也是可以加入面包屑的。移动端设计面包屑需要注意:

    不要使用太小或太拥挤的面包屑; 不要使用包含多行的面包屑; 考虑缩短面包屑路径以仅包含最后一个级别 2. 面包屑的位置

    据国外的研究发现,面包屑的位置在它被点击的频率中所起到重要作用。

     

    显示在页面顶部的典型位置,就在全局导航栏的下方。轨迹显示当前页面在站点层次结构中的位置。

    将面包屑直接放在页面标题上方或旁边;直接放置在页面标题附近的面包屑获得了高达 82% 的所有面包屑点击量。

    3. 面包屑的分类

    当前设计中主要使用了 2 种面包屑类型,1 是基于位置,2 是基于属性。

    还有一种是基于路径的面包屑导航,这个很少见,这种类型的导航更像是历史记录,他们的功能基本上是和前进和后退的按钮是一样的,不推荐用于导航目的,因为它并没有真正的帮助。对于登录网站深处页面的人来说,它甚至可能会感到困惑。

    面包屑的另一种思考

    面包屑的目的是帮助我们找到回去的路,箭头方向指向左,不是更好吗?

    是的,指向左的箭头效果更好,设计中可考虑:

    跟移动端保持一致,尽量减少用户体验的差异; 冗余较少,可以减少当前页的显示,页面少一个元素让用户处理,反过来提高页面的可用性; 跟面包屑的初衷设计是一样的。 4. 面包屑的作用

    研究表明面包屑在 6% 的情况下被用作导航工具。相比之下,40% 的用户点击了嵌入式链接,31% 的用户点击了浏览器后退按钮,22% 的用户点击了导航栏。同一项研究表明,当没有面包屑路径存在时,导航栏和后退按钮的使用频率更高。

    另一研究表明,在研究过程中,研究人员向参与者指出了面包屑路径,并要求参与者在可行的情况下使用面包屑。接受面包屑使用指导的测试参与者完成任务的速度比没有接受指导的参与者快得多。

    在互联网上搜索了这个问题的答案,可以确认,面包屑可以改善 SEO,但不要在这方面投入太多,只通过面包屑改善 SEO 效果很小。

    三、面包屑如何使用 虽然眼下很多网站都流行使用面包屑导航,但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。

    层级较深,层级达到三层或三层以上的网站; 功能逻辑紧密,功能模块之间有关联,网站内容结构上独立不交叉结。

    最后的总结 面包屑导航是一种辅助形式的导航,减少了用户访问特定页面所需的点击次数,这有助于防止用户跳出。它甚至不会占用太多空间,因此没有正当的理由,建议还是加上面包屑导航。

    设计建议:

    面包屑不应取代全局导航栏或部分内的本地导航。 面包屑路径应该以指向主页的链接开头,完整的链接,无点击链接是不可取的(除当前页面)。 用于页面分层排列的大型网站和复杂产品(在设计三层或三层以上的网站时使用面包屑),让登陆页面的用户可以快速知道自己在哪里。 在产品中,确保面包屑不会在视觉上压倒页面,面包屑可以通过较短的名称或自动折叠来适应导航状态。 将面包屑放在屏幕左上角,页面标题上方或旁边。 参考文献

    https://www.nngroup.com/articles/breadcrumbs/ https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html https://arco.design/docs/spec/breadcrumb https://ant.design/components/breadcrumb-cn/?theme=compact https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 欢迎关注团队微信公众号:兆日 UCD

  • AI绘画进阶!爷爷都能看懂的 Midjourney 教学(附超多实战案例)

    UI交互 2023-04-08
    近期,职场设计师们应该能看到不少与 AIGC 相关的新闻。例如,网易内部要求其所有设计师都要掌握 AIGC,腾讯 ISUX 已将 AI 应用于实战,知名设计博主 NodYoung 更是明确表示 UI 设计师应该尽快准备好职业转型。腾讯平面设计实战!

    近期,职场设计师们应该能看到不少与 AIGC 相关的新闻。例如,网易内部要求其所有设计师都要掌握 AIGC ,腾讯 ISUX 已将 AI 应用于实战,知名设计博主 NodYoung 更是明确表示 UI 设计师应该尽快准备好职业转型。

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    AIGC 如今备受关注,但仍有许多设计师不知道如何利用它来提高工作效率。因此,我(言川)在这里想分享一些常见的设计工作,并提供对应使用 AI 绘画的建议,以便帮助大家快速的使用 AI 绘画,来提升职场竞争力。希望这些参考建议能帮助金三银四正在找工作的小伙伴们。

    没了解过的先掌握基础篇:

    超详细!AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法: 新用户可免费创作 25 张图片,超过需要办会员 版权问题:会员生成的图片版权归创作者所有 Midjourney相关资讯: 二、注册/链接 服务器 温馨提示:下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网,右下角选择"J

    阅读文章 >

    让我们先来探讨备受争议的 AI 绘画版权问题:

    一、AI 绘画的版权属于作者吗? AI 绘画的版权问题一直备受争议。特别是在 Midjourney 流行后,用户无需自己搭模型就可以轻松获取大量 AI 生成的图像,但其是否道德或合法,仍存在争议。对此,人们有两种看法:

    一方认为 AI 只是从现有的素材库中拼接和重塑内容,真正的创意都来自原始的艺术家;

    而另一方则认为 AI 绘画也需要创意,prompt 可以体现这一点。这是艺术社区和 AI 图片分享评论区里经常争论的话题。

    因此,各种艺术社区或 AI 图像分享平台的评论区都经常出现关于这个话题的争执。对此,各位小伙伴怎么看待这个事情呢?欢迎在评论区分享你的想法,和我们一起探讨这个话题。

    言川认为:

    旧的法律法规未能覆盖 AI 相关的场景,包括国内著作权内容都未对 AI 相关的说明。在新的法律法规出台之前,使用 AI 制作的图版权都可能是公版,即不能保证著作权。因此,为了确保自己的版权,最好将机器生产的内容作为原始素材,在后期上多下点工夫突出"人类创作"的部分。未来互联网上大量的 AIGC 内容会怎样发展,还有很多可能性。如果未来 AIGC 的内容都是无版权的,但可以低成本生产,那么生态会是怎样的?各位互联网从业者也可以思考这个问题,探索其中的机会。

    AI 那些令人叹为观止的画作

    二、如何把 AI 绘画应用到设计工作中? AI 绘画技术可以应用于设计工作中,帮助设计师更快速、更高效地完成设计工作,以下是一些常见的应用:

    1. 快速草图:AI 绘画技术可以帮助设计师快速创建草图和概念图,使其可以更快地探索和调整设计方案。使用 AI 绘画技术创建的草图还可以在后续的设计阶段进行改进和完善。

    2. 自动化创意设计:AI 绘画技术可以帮助设计师快速创建各种设计方案,从而加快设计过程和减少犯错。AI 绘画技术可以自动创建多种设计方案,并为设计师提供灵感和启示。

    3. 自动化颜色匹配:AI 绘画技术可以帮助设计师自动匹配色彩,使得设计作品更加协调和美观。

    4. 自动化插图绘制:AI 绘画技术可以帮助设计师自动化绘制插图,例如手绘风格的插图、卡通风格的插图等。使用 AI 技术可以加快插图绘制过程,同时保证插图的质量和一致性。

    当然,正确熟练地运用 AI 绘画会在更多工作场景中带来降本增效的效果。废话不多说,直接上案例。

    三、AI 绘画之摄影篇 1. 娇兰香水产品摄影图

    关键词:

    Guerlain Perfume, plant flowers, top light. cean natural backaround with water, saturation color scheme. The productis bright, Motled shading, studo lighfing, contrast high precision, Fine gloss, Centered composition, Photography, HD4Krealism --q 2 --v 5 --s 750 --ar 9:16

    娇兰香水,植花,顶淡。海洋自然背景与水,饱和的配色方案。该产品明亮,斑纹底纹,studo lighfing,对比度精度高,光泽度高,居中构图,摄影,HD4Krealism

    Midjourney 生成的图片:

    我们在这组关键词上多生成几组图片,然后找到你认为不错的照片,去 PS(或者其他后期软件)后期修改调整一下,然后进行文字排版,如下:

    娇兰香水产品海报:

    娇兰香水电商主图:

    有电商设计同学吗,是不是感觉可以去拍老板脑门要求涨薪了

    2. 美女模特摄影海报

    关键词:

    On a sunny summer day, a beautiful and innocent18-year-old Korean gir smiles brightly playing withwater in the stream --ar 9:16 --v 5

    在一个阳光明媚的夏日,一个美丽而天真的 18 岁韩国女孩在小溪里玩水,笑容灿烂

    Midjourney 生成的图片:

    美女人物海报:

    3. 江南清明节海报

    关键词:

    jiangnan, hangzhou,summer scenery, Green trees, small houses,brook2,Ultra-high definition picture, 8K --ar 2:3 --v 4

    江南,杭州,夏日风光,绿树,小房子,小溪 2,超高清图片

    Midjourney 生成的图片:

    江南清明节海报:

    后期一下,拿捏了...

    4. 奔驰 GT 商业海报

    关键词:

    Mercedes benz design,photorealistic,cleanoackground, ray tracking,8k,studio lighting, mattefinishing,DSLR ultra realistic, ulltra detail, wideanglle lens --ar 9:16 --q 5

    奔驰设计,逼真,干净的背景,光线跟踪,8k,工作室照明,抛光,单反超逼真,超细节,广角镜头

    Midjourney 生成的图片:

    奔驰 GT 商业海报:

    高级感不就有了吗,那摄影篇到这就结束,如果对你有帮助,3 连支持一下哇,我们继续往下看:

    四、AI 绘画之 IP 角色篇 1. 可爱的花裙小女孩

    关键词:

    a super cute girl, wearing a floral dress, wearing bootswearing a hat, holding bag, big watery eyes, full bodylooking at viewer, open hands, MD clothing, clothingwrinkles, surprise, clean background, dreamy, pop martmockup, blind box toy, disney style, fine luster, 3D ren-dering, OC, front lighting, face shot, best quality, 8K, ultradetoiled --ar 3:4 --niji

    一个超级可爱的女孩,穿着花裙子,戴着靴子,戴着帽子,拿着包,大水汪汪的眼睛,全身看着观众,张开双手,MD 衣服,衣服皱褶,惊喜,干净的背景,梦幻,流行的马丁模型,盲盒玩具,迪士尼风格,细光泽,3D 渲染,OC,正面照明,面部拍摄,最好的质量,8K,超累

    Midjourney 生成的图片:

    挑吧,考验大家审美的时候到了。

    小女孩 IP 设计:

    这里大家可以把 IP 扣下来,然后重新排版下效果会更好,我这里只是给大家演示一下,勿吐槽!

    2. 调皮的小男孩

    关键词:

    A handsome boy, dirty braids, trendy wear, a shoesfront view, ip pop mart blind box, front view,,animation effects,clean background, white background, morale group, movie lighting, light andshade contrast, 8k, best quality, super detail, 3d c4d, oc rendering, ultra high definition, 3d rendering --ar 3:4 --v 5

    一个帅气的男孩,时髦的穿着,aj 鞋前视图,ip pop mart 盲盒,前视图,,动画效果,干净的背景,白色的背景,士气组,电影照明,明暗对比,8k,最好的质量,超细节,3d, c4d, oc 渲染,超高清,3d 渲染

    Midjourney 生成的图片:

    后期后期...

    小男孩 IP 设计:

    没什么想说的,都在图里,看啥呢,你再看?(代入 IP 里皮一下,哈哈哈哈)

    3. 气泡雨衣女孩

    关键词:

    whole body!! a cute girl from futurecyberpunk, wearing a sliver raincoat and wearing a big goggle, charmingpose, floating glass balls, soft pastel gradients, popmart blindbox, clay material, brightbackground,award-winning,LED3d art, depth of field, Pixar trend.surreal, octane rendering, raytracing, complex details, animation lighting, c4d --ar 3:4

    整个身体! !一个来自 futurecyberpunk 的可爱女孩,穿着银色雨衣,戴着大眼镜,迷人的姿势,漂浮的玻璃球,柔和的粉彩渐变,popmart 盲盒,粘土材料,明亮的背景,获奖,LED3d 艺术,景深,皮克斯的趋势。超现实,辛烷值渲染,光线追踪,复杂的细节,动画照明

    Midjourney 生成的图片:

    气泡雨衣女孩 IP 海报:

    你们喜欢哪个呢,我都喜欢

    五、AI 绘画之 UI 设计篇 1. 直播礼物风格图标

    关键词:

    喂图+(Gift icon), cartoon style, solid color background luminous effect, 3d --iw 1 --v 5 --q 2

    卡通风格,纯色背景发光效果,3d

    这里需要去素材网站上找到你喜欢的 icons 风格,然后喂图给机器人,后面打上关键词就可以了,不知道怎么喂图的看我的第一篇文章《奶奶看了都会的 Midjourney 入门教程》

    (Gift icon)是可替换的关键词,比如(beer icon)啤酒图标、(Headphone icon)耳机图标.....

    Midjourney 生成的图片:

    礼物风格图标:

    一般这种图标会用在直播的礼物场景中...

    2. 主题应用 icons

    关键词:

    icon design, light texture, glow, Dribbble, 3D, frostedglass effect, 3d,ui, ux,--upbeta --q 2 --v 4 图标设计,光纹理,发光,Dribbble, 3D,磨砂玻璃效果,3D, ui, ux,——upbeta—q2—v4

    Midjourney 生成的图片:

    主题应用图标:

    这些生成出来的素材用来参考还是不错的。

    3. B 端图标

    关键词:

    喂图 +A data icon, blue gradient frosted glass, frostedglass building, white transparent technology sensewhite city building scene, data line link, chip, OCrenderer, big data, industrial machinery, high detailight gray background with simple linear details,studio lighting, 3d,c4d, pure white background, 8k

    一个数据图标,蓝色渐变磨砂玻璃,磨砂玻璃建筑,白色透明科技感白色城市建筑场景,数据线链接,芯片,OCrenderer,大数据,工业机械,高细节灰色背景与简单的线性细节,工作室照明,3d,c4d,纯白背景,8k

    Midjourney 生成的图片:

    B 端图标设计:

    质感还不错,大家可以多尝试喂不同构图的图片,喂图玩法对图片影响最大的是你给的参考图,建议多跑跑图。

    4. 音乐软件 UI 设计

    关键词:

    music app ui design, ux design, white, light, bright,data, modern,smooth, behance, dribbble, --upbeta --q 2 --v 4

    音乐应用程序 ui 设计,用户体验设计,白色,轻,明亮,数据,现代,流畅,behance, dribbble,——upbeta——g2——V4

    Midjourney 生成的图片:

    音乐 app 参考设计:

    可以看到,UI 设计并不规范,文字也很乱,所以 MJ 在这块只能作为一个风格参考,网上已经有很多 AI 生成的 UI 设计软件开始内测了,关注我,后续给大家出 AI 绘制 UI 设计的教程。

    六、AI 绘画之插画篇 1. 像素风格插画

    关键词:

    3D, 16-bit pixel art, Super mario, Minecraft, LEGO, pixel style, Blocksplicing, girl with long hair, Alice in Wonderland, garden background, 8K --uplight --ar 9:16 --v 5

    3D, 16 位像素艺术,超级马里奥,我的世界,乐高,像素风格,积木拼接,长头发的女孩,爱丽丝梦游仙境,花园背景,8K

    Midjourney 生成的图片:

    像素女孩插画:

    第一张其实并不完全是像素风格,但是我个人感觉效果还不错,很神奇。

    2. 手机壁纸插画

    关键词:

    mobile wallpaper illustrations, four seasons, natural landscapes, minimalist illustrations, line illustrations --ar 9:16 --niji

    移动壁纸插图,四季,自然景观,极简主义插图,线条插图

    Midjourney 生成的图片:

    手机壁纸:

    这个使用场景够实用了吧,再也不用去求壁纸了...

    3. 新海诚风格插画

    关键词:

    Makoto Shinkai animation style, a girl, 4K --ar 9:16 --niji

    新海诚动画风格,一个少女,4K

    Midjourney 生成的图片:

    新海诚动漫海报:

    不要看手,不要看手,不要看手!!!

    4. 国潮插画

    关键词:

    Make posters of James Jean, white deer, auspicious clouds, birds, distant mountains, Chinese China-Chic style, colorful, light color, gradient color --ar 9:16

    制作海报的詹姆斯让,白鹿,祥云,鸟类,远山,中国中国别致的风格,彩色,浅色,渐变色-ar 9:16

    Midjourney 生成的图片:

    国潮白鹿插画:

    七、AI 绘画之概念篇 1. 中国武术电影片

    关键词:

    Amazing epic chinese ancient theme,chinese ink style, a young man is preparing to climb the stonesteps ladder, martial arts style, dynamic, expressiveclean lines, cinematic, stunning, realistic lighting andshading, vivid, vibrant, 8k, octane render, unrealengine, very detailed, concept art, realistic --ar 16:9

    令人惊叹的史诗中国古代主题,中国墨水风格,一个年轻人正在准备爬石阶梯子,武术风格,动态,富有表现力的干净的线条,电影,令人惊叹,现实的灯光和阴影,生动,充满活力,8k,辛坦渲染,不真实的引擎,非常详细,概念艺术,现实

    (young man is preparing to climb the stonesteps ladder,) 其他的关键词不变,改变这句话创作出不同的场景

    Midjourney 生成的图片:

    中国武术电影:

    这质感,我只能说无敌了....

    2. 长安城夜景

    关键词:

    Chang'an City, Ancient times, BigsceneSea of clouds, an expansive view of, highangle view Soft moonlight, Twinklingstars, cinematic lighting,8k,Virtua engine,detailed, Digital illustration --ar 16:9

    长安城,古代,大场景云海,广阔的视野,高角度视图柔和的月光,闪烁的星星,电影照明,8k,Virtua 引擎,详细,数字插图-ar 16:9

    Midjourney 生成的图片:

    长安,长治久安:

    3. 中国古代女孩

    关键词:

    By Kuvshinov llya, amazing epic chinese ancient theme, water&ink style, Fantasy style, martial artsstyle, Temple, chinese dragon, Chinese fairytale,highly detailed,dynamic, expressive, clean linescinematic, stunning, realistic lighting and shading, vivid, vibrant, 8k, octane render, unreal engine, verydetailed, concept art, realistic, Cry engine --ar 16:9 --v 5 --s 250

    由 Kuvshinov llya,惊人的史诗中国古代主题,水墨画风格,幻想风格,武术风格,寺庙,中国龙,中国童话,高度详细,动态,富有表现力,干净的线条电影,令人惊叹,现实的灯光和阴影,生动,充满活力,8k,辛坦渲染,虚幻引擎,非常详细,概念艺术,现实,哭泣引擎-ar 9:16 -v 5 -s 250

    Midjourney 生成的图片:

    中国古代主题:

    4. 未来太空科技风格

    关键词:

    Amazing cosmic starry sky, ultra modern future theme, future technology style,surrealism.spacecraft, galaxy, planet, space, future story, hugeworld view, big scene, full of ignorance of future future futureexploration, astronauts, space creatures, highlydetailed, dynamic,expressive, clean lines,cinematic stunning, realistic lighting and shading, vivid8k,octane render, unreal engine, very detailed concept art, realistic, Cry engine --ar 16:9 --v 5

    令人惊叹的宇宙星空,超现代的未来主题,未来科技风格,超现实主义。宇宙飞船,星系,行星,太空,未来的故事,巨大的世界观,大的场景,充满了对未来探索的无知,宇航员,太空生物,高度详细,动态,富有表现力,干净的线条,令人惊叹的电影,逼真的灯光和阴影,生动的 8k, ctane 渲染,虚幻的引擎,非常详细的概念艺术,现实的,哭引擎

    Midjourney 生成的图片:

    未来太空科技风格:

    震撼,太震撼了...

    八、结语 以上就是本期为大家分享的商业案例,我们可以将 AI 视作一个工具,为自己的工作带来增效,而无需感到恐慌和被替代的担忧。祝大家生活愉快!如果本文对您有所帮助,也欢迎将其分享给需要的小伙伴。以上教程均经过实测。

    关注我,获取更多关于 AIGC 相关知识的资讯。

  • AI绘画进阶!爷爷都能看懂的 Midjourney 教学(附超多实战案例)

    UI交互 2023-04-08
    近期,职场设计师们应该能看到不少与 AIGC 相关的新闻。例如,网易内部要求其所有设计师都要掌握 AIGC,腾讯 ISUX 已将 AI 应用于实战,知名设计博主 NodYoung 更是明确表示 UI 设计师应该尽快准备好职业转型。腾讯平面设计实战!

    近期,职场设计师们应该能看到不少与 AIGC 相关的新闻。例如,网易内部要求其所有设计师都要掌握 AIGC ,腾讯 ISUX 已将 AI 应用于实战,知名设计博主 NodYoung 更是明确表示 UI 设计师应该尽快准备好职业转型。

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    AIGC 如今备受关注,但仍有许多设计师不知道如何利用它来提高工作效率。因此,我(言川)在这里想分享一些常见的设计工作,并提供对应使用 AI 绘画的建议,以便帮助大家快速的使用 AI 绘画,来提升职场竞争力。希望这些参考建议能帮助金三银四正在找工作的小伙伴们。

    没了解过的先掌握基础篇:

    超详细!AI 绘画神器 Midjourney 基础使用手册 一、前提条件 需要魔法: 新用户可免费创作 25 张图片,超过需要办会员 版权问题:会员生成的图片版权归创作者所有 Midjourney相关资讯: 二、注册/链接 服务器 温馨提示:下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网,右下角选择"J

    阅读文章 >

    让我们先来探讨备受争议的 AI 绘画版权问题:

    一、AI 绘画的版权属于作者吗? AI 绘画的版权问题一直备受争议。特别是在 Midjourney 流行后,用户无需自己搭模型就可以轻松获取大量 AI 生成的图像,但其是否道德或合法,仍存在争议。对此,人们有两种看法:

    一方认为 AI 只是从现有的素材库中拼接和重塑内容,真正的创意都来自原始的艺术家;

    而另一方则认为 AI 绘画也需要创意,prompt 可以体现这一点。这是艺术社区和 AI 图片分享评论区里经常争论的话题。

    因此,各种艺术社区或 AI 图像分享平台的评论区都经常出现关于这个话题的争执。对此,各位小伙伴怎么看待这个事情呢?欢迎在评论区分享你的想法,和我们一起探讨这个话题。

    言川认为:

    旧的法律法规未能覆盖 AI 相关的场景,包括国内著作权内容都未对 AI 相关的说明。在新的法律法规出台之前,使用 AI 制作的图版权都可能是公版,即不能保证著作权。因此,为了确保自己的版权,最好将机器生产的内容作为原始素材,在后期上多下点工夫突出"人类创作"的部分。未来互联网上大量的 AIGC 内容会怎样发展,还有很多可能性。如果未来 AIGC 的内容都是无版权的,但可以低成本生产,那么生态会是怎样的?各位互联网从业者也可以思考这个问题,探索其中的机会。

    AI 那些令人叹为观止的画作

    二、如何把 AI 绘画应用到设计工作中? AI 绘画技术可以应用于设计工作中,帮助设计师更快速、更高效地完成设计工作,以下是一些常见的应用:

    1. 快速草图:AI 绘画技术可以帮助设计师快速创建草图和概念图,使其可以更快地探索和调整设计方案。使用 AI 绘画技术创建的草图还可以在后续的设计阶段进行改进和完善。

    2. 自动化创意设计:AI 绘画技术可以帮助设计师快速创建各种设计方案,从而加快设计过程和减少犯错。AI 绘画技术可以自动创建多种设计方案,并为设计师提供灵感和启示。

    3. 自动化颜色匹配:AI 绘画技术可以帮助设计师自动匹配色彩,使得设计作品更加协调和美观。

    4. 自动化插图绘制:AI 绘画技术可以帮助设计师自动化绘制插图,例如手绘风格的插图、卡通风格的插图等。使用 AI 技术可以加快插图绘制过程,同时保证插图的质量和一致性。

    当然,正确熟练地运用 AI 绘画会在更多工作场景中带来降本增效的效果。废话不多说,直接上案例。

    三、AI 绘画之摄影篇 1. 娇兰香水产品摄影图

    关键词:

    Guerlain Perfume, plant flowers, top light. cean natural backaround with water, saturation color scheme. The productis bright, Motled shading, studo lighfing, contrast high precision, Fine gloss, Centered composition, Photography, HD4Krealism --q 2 --v 5 --s 750 --ar 9:16

    娇兰香水,植花,顶淡。海洋自然背景与水,饱和的配色方案。该产品明亮,斑纹底纹,studo lighfing,对比度精度高,光泽度高,居中构图,摄影,HD4Krealism

    Midjourney 生成的图片:

    我们在这组关键词上多生成几组图片,然后找到你认为不错的照片,去 PS(或者其他后期软件)后期修改调整一下,然后进行文字排版,如下:

    娇兰香水产品海报:

    娇兰香水电商主图:

    有电商设计同学吗,是不是感觉可以去拍老板脑门要求涨薪了

    2. 美女模特摄影海报

    关键词:

    On a sunny summer day, a beautiful and innocent18-year-old Korean gir smiles brightly playing withwater in the stream --ar 9:16 --v 5

    在一个阳光明媚的夏日,一个美丽而天真的 18 岁韩国女孩在小溪里玩水,笑容灿烂

    Midjourney 生成的图片:

    美女人物海报:

    3. 江南清明节海报

    关键词:

    jiangnan, hangzhou,summer scenery, Green trees, small houses,brook2,Ultra-high definition picture, 8K --ar 2:3 --v 4

    江南,杭州,夏日风光,绿树,小房子,小溪 2,超高清图片

    Midjourney 生成的图片:

    江南清明节海报:

    后期一下,拿捏了...

    4. 奔驰 GT 商业海报

    关键词:

    Mercedes benz design,photorealistic,cleanoackground, ray tracking,8k,studio lighting, mattefinishing,DSLR ultra realistic, ulltra detail, wideanglle lens --ar 9:16 --q 5

    奔驰设计,逼真,干净的背景,光线跟踪,8k,工作室照明,抛光,单反超逼真,超细节,广角镜头

    Midjourney 生成的图片:

    奔驰 GT 商业海报:

    高级感不就有了吗,那摄影篇到这就结束,如果对你有帮助,3 连支持一下哇,我们继续往下看:

    四、AI 绘画之 IP 角色篇 1. 可爱的花裙小女孩

    关键词:

    a super cute girl, wearing a floral dress, wearing bootswearing a hat, holding bag, big watery eyes, full bodylooking at viewer, open hands, MD clothing, clothingwrinkles, surprise, clean background, dreamy, pop martmockup, blind box toy, disney style, fine luster, 3D ren-dering, OC, front lighting, face shot, best quality, 8K, ultradetoiled --ar 3:4 --niji

    一个超级可爱的女孩,穿着花裙子,戴着靴子,戴着帽子,拿着包,大水汪汪的眼睛,全身看着观众,张开双手,MD 衣服,衣服皱褶,惊喜,干净的背景,梦幻,流行的马丁模型,盲盒玩具,迪士尼风格,细光泽,3D 渲染,OC,正面照明,面部拍摄,最好的质量,8K,超累

    Midjourney 生成的图片:

    挑吧,考验大家审美的时候到了。

    小女孩 IP 设计:

    这里大家可以把 IP 扣下来,然后重新排版下效果会更好,我这里只是给大家演示一下,勿吐槽!

    2. 调皮的小男孩

    关键词:

    A handsome boy, dirty braids, trendy wear, a shoesfront view, ip pop mart blind box, front view,,animation effects,clean background, white background, morale group, movie lighting, light andshade contrast, 8k, best quality, super detail, 3d c4d, oc rendering, ultra high definition, 3d rendering --ar 3:4 --v 5

    一个帅气的男孩,时髦的穿着,aj 鞋前视图,ip pop mart 盲盒,前视图,,动画效果,干净的背景,白色的背景,士气组,电影照明,明暗对比,8k,最好的质量,超细节,3d, c4d, oc 渲染,超高清,3d 渲染

    Midjourney 生成的图片:

    后期后期...

    小男孩 IP 设计:

    没什么想说的,都在图里,看啥呢,你再看?(代入 IP 里皮一下,哈哈哈哈)

    3. 气泡雨衣女孩

    关键词:

    whole body!! a cute girl from futurecyberpunk, wearing a sliver raincoat and wearing a big goggle, charmingpose, floating glass balls, soft pastel gradients, popmart blindbox, clay material, brightbackground,award-winning,LED3d art, depth of field, Pixar trend.surreal, octane rendering, raytracing, complex details, animation lighting, c4d --ar 3:4

    整个身体! !一个来自 futurecyberpunk 的可爱女孩,穿着银色雨衣,戴着大眼镜,迷人的姿势,漂浮的玻璃球,柔和的粉彩渐变,popmart 盲盒,粘土材料,明亮的背景,获奖,LED3d 艺术,景深,皮克斯的趋势。超现实,辛烷值渲染,光线追踪,复杂的细节,动画照明

    Midjourney 生成的图片:

    气泡雨衣女孩 IP 海报:

    你们喜欢哪个呢,我都喜欢

    五、AI 绘画之 UI 设计篇 1. 直播礼物风格图标

    关键词:

    喂图+(Gift icon), cartoon style, solid color background luminous effect, 3d --iw 1 --v 5 --q 2

    卡通风格,纯色背景发光效果,3d

    这里需要去素材网站上找到你喜欢的 icons 风格,然后喂图给机器人,后面打上关键词就可以了,不知道怎么喂图的看我的第一篇文章《奶奶看了都会的 Midjourney 入门教程》

    (Gift icon)是可替换的关键词,比如(beer icon)啤酒图标、(Headphone icon)耳机图标.....

    Midjourney 生成的图片:

    礼物风格图标:

    一般这种图标会用在直播的礼物场景中...

    2. 主题应用 icons

    关键词:

    icon design, light texture, glow, Dribbble, 3D, frostedglass effect, 3d,ui, ux,--upbeta --q 2 --v 4 图标设计,光纹理,发光,Dribbble, 3D,磨砂玻璃效果,3D, ui, ux,——upbeta—q2—v4

    Midjourney 生成的图片:

    主题应用图标:

    这些生成出来的素材用来参考还是不错的。

    3. B 端图标

    关键词:

    喂图 +A data icon, blue gradient frosted glass, frostedglass building, white transparent technology sensewhite city building scene, data line link, chip, OCrenderer, big data, industrial machinery, high detailight gray background with simple linear details,studio lighting, 3d,c4d, pure white background, 8k

    一个数据图标,蓝色渐变磨砂玻璃,磨砂玻璃建筑,白色透明科技感白色城市建筑场景,数据线链接,芯片,OCrenderer,大数据,工业机械,高细节灰色背景与简单的线性细节,工作室照明,3d,c4d,纯白背景,8k

    Midjourney 生成的图片:

    B 端图标设计:

    质感还不错,大家可以多尝试喂不同构图的图片,喂图玩法对图片影响最大的是你给的参考图,建议多跑跑图。

    4. 音乐软件 UI 设计

    关键词:

    music app ui design, ux design, white, light, bright,data, modern,smooth, behance, dribbble, --upbeta --q 2 --v 4

    音乐应用程序 ui 设计,用户体验设计,白色,轻,明亮,数据,现代,流畅,behance, dribbble,——upbeta——g2——V4

    Midjourney 生成的图片:

    音乐 app 参考设计:

    可以看到,UI 设计并不规范,文字也很乱,所以 MJ 在这块只能作为一个风格参考,网上已经有很多 AI 生成的 UI 设计软件开始内测了,关注我,后续给大家出 AI 绘制 UI 设计的教程。

    六、AI 绘画之插画篇 1. 像素风格插画

    关键词:

    3D, 16-bit pixel art, Super mario, Minecraft, LEGO, pixel style, Blocksplicing, girl with long hair, Alice in Wonderland, garden background, 8K --uplight --ar 9:16 --v 5

    3D, 16 位像素艺术,超级马里奥,我的世界,乐高,像素风格,积木拼接,长头发的女孩,爱丽丝梦游仙境,花园背景,8K

    Midjourney 生成的图片:

    像素女孩插画:

    第一张其实并不完全是像素风格,但是我个人感觉效果还不错,很神奇。

    2. 手机壁纸插画

    关键词:

    mobile wallpaper illustrations, four seasons, natural landscapes, minimalist illustrations, line illustrations --ar 9:16 --niji

    移动壁纸插图,四季,自然景观,极简主义插图,线条插图

    Midjourney 生成的图片:

    手机壁纸:

    这个使用场景够实用了吧,再也不用去求壁纸了...

    3. 新海诚风格插画

    关键词:

    Makoto Shinkai animation style, a girl, 4K --ar 9:16 --niji

    新海诚动画风格,一个少女,4K

    Midjourney 生成的图片:

    新海诚动漫海报:

    不要看手,不要看手,不要看手!!!

    4. 国潮插画

    关键词:

    Make posters of James Jean, white deer, auspicious clouds, birds, distant mountains, Chinese China-Chic style, colorful, light color, gradient color --ar 9:16

    制作海报的詹姆斯让,白鹿,祥云,鸟类,远山,中国中国别致的风格,彩色,浅色,渐变色-ar 9:16

    Midjourney 生成的图片:

    国潮白鹿插画:

    七、AI 绘画之概念篇 1. 中国武术电影片

    关键词:

    Amazing epic chinese ancient theme,chinese ink style, a young man is preparing to climb the stonesteps ladder, martial arts style, dynamic, expressiveclean lines, cinematic, stunning, realistic lighting andshading, vivid, vibrant, 8k, octane render, unrealengine, very detailed, concept art, realistic --ar 16:9

    令人惊叹的史诗中国古代主题,中国墨水风格,一个年轻人正在准备爬石阶梯子,武术风格,动态,富有表现力的干净的线条,电影,令人惊叹,现实的灯光和阴影,生动,充满活力,8k,辛坦渲染,不真实的引擎,非常详细,概念艺术,现实

    (young man is preparing to climb the stonesteps ladder,) 其他的关键词不变,改变这句话创作出不同的场景

    Midjourney 生成的图片:

    中国武术电影:

    这质感,我只能说无敌了....

    2. 长安城夜景

    关键词:

    Chang'an City, Ancient times, BigsceneSea of clouds, an expansive view of, highangle view Soft moonlight, Twinklingstars, cinematic lighting,8k,Virtua engine,detailed, Digital illustration --ar 16:9

    长安城,古代,大场景云海,广阔的视野,高角度视图柔和的月光,闪烁的星星,电影照明,8k,Virtua 引擎,详细,数字插图-ar 16:9

    Midjourney 生成的图片:

    长安,长治久安:

    3. 中国古代女孩

    关键词:

    By Kuvshinov llya, amazing epic chinese ancient theme, water&ink style, Fantasy style, martial artsstyle, Temple, chinese dragon, Chinese fairytale,highly detailed,dynamic, expressive, clean linescinematic, stunning, realistic lighting and shading, vivid, vibrant, 8k, octane render, unreal engine, verydetailed, concept art, realistic, Cry engine --ar 16:9 --v 5 --s 250

    由 Kuvshinov llya,惊人的史诗中国古代主题,水墨画风格,幻想风格,武术风格,寺庙,中国龙,中国童话,高度详细,动态,富有表现力,干净的线条电影,令人惊叹,现实的灯光和阴影,生动,充满活力,8k,辛坦渲染,虚幻引擎,非常详细,概念艺术,现实,哭泣引擎-ar 9:16 -v 5 -s 250

    Midjourney 生成的图片:

    中国古代主题:

    4. 未来太空科技风格

    关键词:

    Amazing cosmic starry sky, ultra modern future theme, future technology style,surrealism.spacecraft, galaxy, planet, space, future story, hugeworld view, big scene, full of ignorance of future future futureexploration, astronauts, space creatures, highlydetailed, dynamic,expressive, clean lines,cinematic stunning, realistic lighting and shading, vivid8k,octane render, unreal engine, very detailed concept art, realistic, Cry engine --ar 16:9 --v 5

    令人惊叹的宇宙星空,超现代的未来主题,未来科技风格,超现实主义。宇宙飞船,星系,行星,太空,未来的故事,巨大的世界观,大的场景,充满了对未来探索的无知,宇航员,太空生物,高度详细,动态,富有表现力,干净的线条,令人惊叹的电影,逼真的灯光和阴影,生动的 8k, ctane 渲染,虚幻的引擎,非常详细的概念艺术,现实的,哭引擎

    Midjourney 生成的图片:

    未来太空科技风格:

    震撼,太震撼了...

    八、结语 以上就是本期为大家分享的商业案例,我们可以将 AI 视作一个工具,为自己的工作带来增效,而无需感到恐慌和被替代的担忧。祝大家生活愉快!如果本文对您有所帮助,也欢迎将其分享给需要的小伙伴。以上教程均经过实测。

    关注我,获取更多关于 AIGC 相关知识的资讯。

  • B端设计基础:帮你快速掌握面包屑导航

    UI交互 2023-04-08
    面包屑导航是从网站技术兴起就伴随出现的老组件了,至今还在使用,为用户提供了许多好处,而对设计几乎没有任何成本,前辈们也做了大量的研究和实践,证明是可行的。所以这次分析面包屑导航设计,希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。更多导航设计干货:如何做好B端产品的导航栏设计?

    面包屑导航是从网站技术兴起就伴随出现的老组件了,至今还在使用,为用户提供了许多好处,而对设计几乎没有任何成本,前辈们也做了大量的研究和实践,证明是可行的。所以这次分析 面包屑导航 设计,希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。

    更多 导航设计 干货:

    如何做好B端产品的导航栏设计?来看高手的5000字总结! 编辑导读:导航栏是用户对产品架构了解的第一途径,是作为产品各个功能之间的桥梁,能够对产品功能进行分发、引导。

    阅读文章 >

    一、什么是面包屑

    面包屑,英文:Breadcrumbs 直译过来,来源于格林童话中《汉赛尔与格莱特》,讲述的是一对兄妹在继母的怂恿下遭到父亲的遗弃,通过石子或面包屑做标记,找回家的路,虽然面包屑被鸟吃掉了,没找到回家的路,但面包屑的思路在网站的设计中沿用了下来,形成我们现在口中的面包屑组件。其中这个面包屑的作用是:留下返回路径。

    什么是面包屑(breadcrumbs)?

    面包屑是一种导航组件,用于显示用户在网站或应用程序中的位置,并能向上返回。

    二、面包屑的形态 1. 面包屑的样式

    以下是面包屑的常用样式,当前正在查看的页面的名称不应该是可点击的链接,因为重新加载活动页面只会令人困惑。这 1 和 2 为面包屑的常用样式,两者都可以接受,功能是没有差别的,推荐使用“>”字符,箭头指向,前进路径更形象;3-7 为面包屑的样式扩展,可根据实际的业务场景对应选择。

    面包屑不仅只存在于 PC 端,面包屑不是 PC 端的专利,移动端也是可以考虑加上面包屑的,值得探讨的是,移动端加上面包屑的成本大于收益,不仅影响视觉/布局,交互上体验也较差,所以导致现在移动端的基本看不到面包屑。

    若任务允许,也是可以加入面包屑的。移动端设计面包屑需要注意:

    不要使用太小或太拥挤的面包屑; 不要使用包含多行的面包屑; 考虑缩短面包屑路径以仅包含最后一个级别 2. 面包屑的位置

    据国外的研究发现,面包屑的位置在它被点击的频率中所起到重要作用。

     

    显示在页面顶部的典型位置,就在全局导航栏的下方。轨迹显示当前页面在站点层次结构中的位置。

    将面包屑直接放在页面标题上方或旁边;直接放置在页面标题附近的面包屑获得了高达 82% 的所有面包屑点击量。

    3. 面包屑的分类

    当前设计中主要使用了 2 种面包屑类型,1 是基于位置,2 是基于属性。

    还有一种是基于路径的面包屑导航,这个很少见,这种类型的导航更像是历史记录,他们的功能基本上是和前进和后退的按钮是一样的,不推荐用于导航目的,因为它并没有真正的帮助。对于登录网站深处页面的人来说,它甚至可能会感到困惑。

    面包屑的另一种思考

    面包屑的目的是帮助我们找到回去的路,箭头方向指向左,不是更好吗?

    是的,指向左的箭头效果更好,设计中可考虑:

    跟移动端保持一致,尽量减少用户体验的差异; 冗余较少,可以减少当前页的显示,页面少一个元素让用户处理,反过来提高页面的可用性; 跟面包屑的初衷设计是一样的。 4. 面包屑的作用

    研究表明面包屑在 6% 的情况下被用作导航工具。相比之下,40% 的用户点击了嵌入式链接,31% 的用户点击了浏览器后退按钮,22% 的用户点击了导航栏。同一项研究表明,当没有面包屑路径存在时,导航栏和后退按钮的使用频率更高。

    另一研究表明,在研究过程中,研究人员向参与者指出了面包屑路径,并要求参与者在可行的情况下使用面包屑。接受面包屑使用指导的测试参与者完成任务的速度比没有接受指导的参与者快得多。

    在互联网上搜索了这个问题的答案,可以确认,面包屑可以改善 SEO,但不要在这方面投入太多,只通过面包屑改善 SEO 效果很小。

    三、面包屑如何使用 虽然眼下很多网站都流行使用面包屑导航,但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。

    层级较深,层级达到三层或三层以上的网站; 功能逻辑紧密,功能模块之间有关联,网站内容结构上独立不交叉结。

    最后的总结 面包屑导航是一种辅助形式的导航,减少了用户访问特定页面所需的点击次数,这有助于防止用户跳出。它甚至不会占用太多空间,因此没有正当的理由,建议还是加上面包屑导航。

    设计建议:

    面包屑不应取代全局导航栏或部分内的本地导航。 面包屑路径应该以指向主页的链接开头,完整的链接,无点击链接是不可取的(除当前页面)。 用于页面分层排列的大型网站和复杂产品(在设计三层或三层以上的网站时使用面包屑),让登陆页面的用户可以快速知道自己在哪里。 在产品中,确保面包屑不会在视觉上压倒页面,面包屑可以通过较短的名称或自动折叠来适应导航状态。 将面包屑放在屏幕左上角,页面标题上方或旁边。 参考文献

    https://www.nngroup.com/articles/breadcrumbs/ https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html https://arco.design/docs/spec/breadcrumb https://ant.design/components/breadcrumb-cn/?theme=compact https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 欢迎关注团队微信公众号:兆日 UCD

  • 从6个方面,帮你全面总结复选框类型+用法

    UI交互 2023-04-07
    Halo,这里是设计夹,今天为大家分享的是「复选框设计」。☑️复选框(Checkbox)是设计中常用到的组件,在B端表单设计中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。

    Halo,这里是设计夹,今天为大家分享的是「 复选框设计 」。

    ☑️复选框(Checkbox)是设计中常用到的组件,在B端 表单设计 中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。

    我们首先来介绍最基础的复选框样式,其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式,最后总结设计复选框时的五点注意事项,全面掌握复选框的设计~

    更多控件设计干货:

    UI设计中9个常用的控件规范,这篇都梳理好了! UI设计中常见的控件设计都有哪些规范?

    阅读文章 >

    一、基础复选框

    最基础的复选框由复选框+文本标签组成。点击选中,会有一个复选框选中的效果,取消选中时复选框显示为灰色描边的方块。

    1. 状态

    复选框常见的三种基本状态是:未选中、选中和不确定状态。

    不确定状态常用的场景是在级联选择器中,例如一级复选框能控制所有二级复选框的内容。如果有的二级勾选了,有的没勾选,那么一级复选框的状态就会判定为不确定。

    2. 尺寸

    在用一个产品中,建议页面中的所有复选框都使用相同的尺寸,这样有助于保持设计一致性。当然在某些特殊的场景下,也可以更改复选框的尺寸来灵活适应。

    例如,某些页面的复选框比其他页面的复选框更重要或者更频繁使用,就可以将它们放大来吸引用户的注意力。

    是否需要设计不同尺寸的复选框取决于复选框的数量、标签的长度、选项的重要性等因素。

    将以上提到的复选框的不同状态和尺寸混合起来,可以组合成基础的复选框组件。

    二、带有描述的复选框

    复选框下方的描述通常用来解释说明该复选框的功能,或者为复选框提供功能说明。

    这种额外的描述性文字尽量控制在两行以内,为用户带来更清晰的体验。

    1. 设计分析

    如果对这种类型的复选框采用左居中对齐方式,将复选框位于中心,看起来就会很奇怪:

    复选框应该始终保持与主文字左对齐,可以在距顶行几个像素的地方对齐复选框。

    三、带提示 icon 的复选框

    复选框上的信息图标也用来解释说明关于复选框的附加信息。当鼠标悬停在信息图标上时,显示对应的信息提示。

    1. 设计分析

    这里的对齐方式与基础复选框的对齐方式相同,保持水平对齐所有内容。

    四、带附加文本的复选框

    这里的附加文本常用来展示数量。例如在产品列表的过滤器中,在左侧显示属性(颜色、尺寸或品牌),在右侧显示具体的数量。

    又或者在 CRM 系统中,用来过滤不同状态的任务量。

    五、带图片的复选框

    通过复选框+图片相结合的展示方式,用户更容易理解他们正在选择什么。例如看到有同事照片和信息的复选框,就更容易将任务分配给他。

    1. 设计分析

    这种类型的复选框中,首先要保持复选框与图像水平居中对齐。如果有两行字段,需要将字段与图像保持上下对齐,让整体更协调。

    六、复选框设计注意点 1. 复选框和单选按钮视觉上有差异

    在产品设计中,方块通常表示复选框,圆圈用来表示单选按钮。这种视觉上的区别有助于用户理解两种控件之间的区别,并正确地使用它们。

    2. 对单个复选框进行右对齐

    如果字段文字较多出现折行的情况,复选框应该始终与第一行字段保持对齐,而不是跟随整个文本框居中对齐。

    否则就会产生类似右图的效果,看起来很奇怪。

    3. 尽量垂直对齐复选框

    在设计中,尽可能使用垂直对齐复选框的原因:

    可以让选项更易于阅读和理解;让复选框组更加紧凑,节省空间;垂直对齐能让每个复选框在视觉上区分更加明显。

    当然在某些场景中,也可以采用水平对齐的方式,具体用法需要灵活选择。

    4. 超过 7 个选项使用多选标签

    多选标签能够很好地替代具有七个以上选项的复选框(5±2 规则)。允许用户轻松点选和取消选择多个选项,而不需要在复选框列表中再次去选择并取消。

    5. 扩大可点击区域

    这可能是新手设计师和开发最常犯的错误之一。可点击区域应该比带有复选框和文本的区域要大得多,这样能方便用户操作和选择。

    最后 以上是「复选框」的类型+用法设计分析,希望这些学习能帮助大家更快更好地进行表单设计!

    慢慢来比较快,如觉得有帮助,请点个赞,谢谢!

    欢迎关注作者微信公众号:「Clip设计夹」

  • 从6个方面,帮你全面总结复选框类型+用法

    UI交互 2023-04-07
    Halo,这里是设计夹,今天为大家分享的是「复选框设计」。☑️复选框(Checkbox)是设计中常用到的组件,在B端表单设计中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。

    Halo,这里是设计夹,今天为大家分享的是「 复选框设计 」。

    ☑️复选框(Checkbox)是设计中常用到的组件,在B端 表单设计 中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。

    我们首先来介绍最基础的复选框样式,其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式,最后总结设计复选框时的五点注意事项,全面掌握复选框的设计~

    更多控件设计干货:

    UI设计中9个常用的控件规范,这篇都梳理好了! UI设计中常见的控件设计都有哪些规范?

    阅读文章 >

    一、基础复选框

    最基础的复选框由复选框+文本标签组成。点击选中,会有一个复选框选中的效果,取消选中时复选框显示为灰色描边的方块。

    1. 状态

    复选框常见的三种基本状态是:未选中、选中和不确定状态。

    不确定状态常用的场景是在级联选择器中,例如一级复选框能控制所有二级复选框的内容。如果有的二级勾选了,有的没勾选,那么一级复选框的状态就会判定为不确定。

    2. 尺寸

    在用一个产品中,建议页面中的所有复选框都使用相同的尺寸,这样有助于保持设计一致性。当然在某些特殊的场景下,也可以更改复选框的尺寸来灵活适应。

    例如,某些页面的复选框比其他页面的复选框更重要或者更频繁使用,就可以将它们放大来吸引用户的注意力。

    是否需要设计不同尺寸的复选框取决于复选框的数量、标签的长度、选项的重要性等因素。

    将以上提到的复选框的不同状态和尺寸混合起来,可以组合成基础的复选框组件。

    二、带有描述的复选框

    复选框下方的描述通常用来解释说明该复选框的功能,或者为复选框提供功能说明。

    这种额外的描述性文字尽量控制在两行以内,为用户带来更清晰的体验。

    1. 设计分析

    如果对这种类型的复选框采用左居中对齐方式,将复选框位于中心,看起来就会很奇怪:

    复选框应该始终保持与主文字左对齐,可以在距顶行几个像素的地方对齐复选框。

    三、带提示 icon 的复选框

    复选框上的信息图标也用来解释说明关于复选框的附加信息。当鼠标悬停在信息图标上时,显示对应的信息提示。

    1. 设计分析

    这里的对齐方式与基础复选框的对齐方式相同,保持水平对齐所有内容。

    四、带附加文本的复选框

    这里的附加文本常用来展示数量。例如在产品列表的过滤器中,在左侧显示属性(颜色、尺寸或品牌),在右侧显示具体的数量。

    又或者在 CRM 系统中,用来过滤不同状态的任务量。

    五、带图片的复选框

    通过复选框+图片相结合的展示方式,用户更容易理解他们正在选择什么。例如看到有同事照片和信息的复选框,就更容易将任务分配给他。

    1. 设计分析

    这种类型的复选框中,首先要保持复选框与图像水平居中对齐。如果有两行字段,需要将字段与图像保持上下对齐,让整体更协调。

    六、复选框设计注意点 1. 复选框和单选按钮视觉上有差异

    在产品设计中,方块通常表示复选框,圆圈用来表示单选按钮。这种视觉上的区别有助于用户理解两种控件之间的区别,并正确地使用它们。

    2. 对单个复选框进行右对齐

    如果字段文字较多出现折行的情况,复选框应该始终与第一行字段保持对齐,而不是跟随整个文本框居中对齐。

    否则就会产生类似右图的效果,看起来很奇怪。

    3. 尽量垂直对齐复选框

    在设计中,尽可能使用垂直对齐复选框的原因:

    可以让选项更易于阅读和理解;让复选框组更加紧凑,节省空间;垂直对齐能让每个复选框在视觉上区分更加明显。

    当然在某些场景中,也可以采用水平对齐的方式,具体用法需要灵活选择。

    4. 超过 7 个选项使用多选标签

    多选标签能够很好地替代具有七个以上选项的复选框(5±2 规则)。允许用户轻松点选和取消选择多个选项,而不需要在复选框列表中再次去选择并取消。

    5. 扩大可点击区域

    这可能是新手设计师和开发最常犯的错误之一。可点击区域应该比带有复选框和文本的区域要大得多,这样能方便用户操作和选择。

    最后 以上是「复选框」的类型+用法设计分析,希望这些学习能帮助大家更快更好地进行表单设计!

    慢慢来比较快,如觉得有帮助,请点个赞,谢谢!

    欢迎关注作者微信公众号:「Clip设计夹」

  • Midlibrary!收录 2000+ 风格关键词的Midjourney提示资源

    UI交互 2023-04-07
    大家好,这里是和你们一起探索 AI 绘画的花生~今天为大家推荐一个实用超强的 Midjourney 提示词资源网站 Midlibrary,它由国外艺术家 Andrei Kovalev 主导建立,目前收录了 2078 种适用于 Midjourney 的风格流派、艺术运动、技法及艺术家关键词,能为我们生成不同风格样式...

    大家好,这里是和你们一起探索 AI 绘画的花生~

    今天为大家推荐一个实用超强的 Midjourney 提示词资源网站 Midlibrary ,它由国外艺术家 Andrei Kovalev 主导建立,目前收录了 2078 种适用于 Midjourney 的风格流派、艺术运动、技法及艺术家关键词,能为我们生成不同风格样式的 AI 图像提供便捷的参考,下面为大家简单介绍一下它的主要功能~

    AIGC神器 Midjourney V5 强势更新!逼真到令人发指! 大家好,这里是和你们一起探索 AI 绘画的花生~ 备受期待的 Midjourney V5 在上周四终于上线了,而且一发布就引起了不小的轰动,因此这次 V5 模型的图像生成效果“太惊人了”,无限逼近真实照片,让人难辨真假。

    阅读文章 >

    Midlibrary 简介 Midlibrary 网站直达: https://www.midlibrary.io/ (使用魔法速度更快)

    Midlibrary 官网中主要包含风格(Styles)、特征(Features)、类别 (Categories)三大版块。

    ① 风格(Styles)

    风格版块里以标签的形式陈列了 2078 种艺术风格、流派、技法以及艺术家关键词,分类非常清晰,方便大家直接点击,查看对应的图像生成效果。

    比如点击“摄影师”进行内容筛选后,我们就能获得 200 多位世界知名摄影师的作品风格在 Midjourney 中的生成效果,只要我们在输入关键词的时候加上该摄影师的名字,就能生成类似的风格。点击摄影师的名字进入详情页后,可以对比查看同一摄影师作品风格在 v3、v4、v5 和 Niji 中的效果差异。

    ② 特征(Features)

    这个版块会按更宽泛的概念对关键词进行分类,比如按画风特征进行区分,有黑白的、古典的、可爱的、史诗般的风格等等;或是以主体进行区分,有人物、动物、风景,城市景观等;还有以色彩和人物肤色进行区别的。

    如果点击“柔和的色彩(Pastel Colors)”这一分类,就会得到 30 多个具备“柔和色彩”特征的关键词,涉及摄影师、插画师、动漫、技法等各个方面,关键词对应的效果也有直观的展示,我们可以直接复制用在自己的提示词中。

    ③ 类别(Categories)

    这个版块有 13 个大类,包括艺术流派和运动、艺术技巧、日式动漫、建筑师、平面设计师、时装设计师、电影、插画师、画家、摄影师、版画家、雕塑+装饰艺术家、街头艺术家等。

    个人感觉这个版块的实用性最强,也最适合我们设计师进行深入学习。比如进入“艺术流派和运动”分类,可以看到历史上各种风靡一时甚至延续至今的风格,比如抽象艺术、未来主义、新艺术风格、赛博朋克、包豪斯、达达主义、数字拼贴、野兽派、故障艺术、印象派、极简主义、波普艺术等等。尝试将这些关键词用在 Midjourney 中进行图像生成,说不定能给设计带来不一样的灵感。

    然后是艺术技法,这个分类里包含 200 多种常见的艺术创作手法和媒介,包括但不限于素描、水彩、油画、蚀刻、雕刻、浮雕、刺绣、毛毡、镜头、胶片、中国画、数字艺术等各个类型,所展现的效果极具艺术性,感兴趣的小伙伴可以直接复制关键词到 Midjourney 中进行测试。

    除了以上三大版块,Midlibrary 中还一个“MIDGUIDE(绘画指南)”版块,里面有对 V4、V5、Niji 模型的风格解析,以及各种流行主题的关键词合集推荐,从中可以学到一些更深入的 Midjourney 绘画知识和进阶提示词写作技巧。

    以上就是本期为大家推荐的高质量 Midjourney 风格关键词参考库 Midlibrary, 如果你在 AI 绘画的过程中缺乏灵感,不妨多去里面看看,肯定有很多你之前没见过、或者见过但是不知道名字的风格关键词。而对设计师来说,浏览 Midlibrary 也是我们拓宽知识面、提升审美的好方法。

    推荐阅读:

    AI绘画哪家强?Midjourney、文心一格等 6 大工具出图效果大比拼 大家好,这里是和你们一起探索 AI 绘画的花生~ 3 月份以来 AI 绘画领域又有了不小的变化,Midjourney 更新了 V5 版本、Stable Diffusion 推出了 Clipdrop Reimagine;微软 Bing 也推出了 Image Create (图像生成)功能

    阅读文章 >

    AI绘画必学!5种 Midjourney 进阶提示用法 大家好,这里是和你们一起探索 AI 绘画的花生 ~ 上一期为大家介绍了 9 种在 Midjourney 绘画中常用的后缀参数,可以帮助我们生成更符合自己需要的图像。

    阅读文章 >

  • AI绘画未来如何改进?来看斯坦福教授的预测!

    UI交互 2023-04-07
    编者按:这篇文章是来自斯坦福的年轻教授 Maneesh Agrawala,他本人既是斯坦福计算机专业的教授,也是斯坦福大学布朗媒体创新研究所的所长。他在去年 HAI 2022 秋季会议上发布了演讲「AI回路:演进中的人类」,而这篇文章正是演讲内容修订后的版本。对于 AIGC 当下存在的深层问题,AI 的逻辑以及未...

    编者按: 这篇文章是来自斯坦福的年轻教授 Maneesh Agrawala ,他本人既是斯坦福计算机专业的教授,也是斯坦福大学布朗媒体创新研究所的所长。他在去年 HAI 2022 秋季会议上发布了演讲 「AI回路:演进中的人类」 ,而这篇文章正是演讲内容修订后的版本。对于 AIGC 当下存在的深层问题,AI 的逻辑以及未来可能的改进方式,给出了详尽的解读和预测。以下是正文:

    最近我决定更新一下我的个人网站的图片资料:

    作为一名计算机专业的教授,我觉得现在制作一张高质量照片,最简单的方法,就是使用 DALL-E2 来生成。所以我写了一个简单的 prompt:「Picture of a Professor named Maneesh Agrawala」,然后 DALL-E2 给我生成了……额……这张照片:

    根据我文本提示,它生成了一张看起来有着明显印度裔特征的男性,给他穿上了看起来「专业」的服装,并且把场景设置在一个学术研究室当中。从整体上来看,物体、灯光、阴影和色彩都是连贯的,是单一且统一的照片。我对于 AI 生成的照片总体上是不会吹毛求疵的,不过手看起来比较奇怪,有一边眼镜腿没了,当然,从我更人需求的角度出发,我很希望它生成这个角色看起来年轻一点。

    总体上来看,AI 能够生成如此之逼真的照片确实是令人惊艳的,这是人类历史上从未有过的数字超能力。

    AI 能生成的不止是图片内容。先走的生成式 AI 对于用户而言,是一个巨大的黑箱。将自然语言作为输入内容,AI 能够生成素质惊人的文本内容(GPT4,ChatGPT),图片内容(DALL-E2、Stable Diffusion、Midjourney),视频内容(Make-a-Video),3D 模型(DreamFusion)甚至程序代码(Copilot , Codex )。

    那么这次我们使用 DALL-E2 重新生成一张照片看看吧。这次, 我想看看如果斯坦福以《银翼杀手》的风格呈现出来的时候,会是什么样子。斯坦福最典型的建筑就它的主广场,中间是被棕榈树包围的纪念教堂,而谈及《银翼杀手》的时候,我能想到的是霓虹灯,拥挤的夜市,连绵的雨水和大排档。所以我撰写了 prompt:「stanford memorial church with neon signage in the style of bladerunner」。

    在第一次迭代的时候,生成的图片并没有呈现主广场和棕榈树,所以我将「And main quad」添加到第二轮的 prompt 当中,在第三轮迭代中,我加入了「with palm tree」,生成的图像越来越像斯坦福的主广场,但是和《银翼杀手》的夜景没有啥关系。我开始周期性地修改 prompt,尝试找到更合适的 prompt,以产出我想要的图片内容。在第 21 次迭代之后,我在 DALL-E2 耗费了好几个小时,我决定在此止步。

    实际上,最终生成的图片依然不符合我的预期。更糟糕的是,我不清楚如何更改 prompt 以确保 AI 生成的内容能够进一步靠近我的想法。

    这个过程令人沮丧。(这大概才是绝大多数 AIGC 内容产出的真实情况吧?)

    事实上,寻求有效的 prompt 是如此之艰难,以至于现在诞生了专门的论坛(比如 PromptHero 、 Arthub.ai 、 Reddit/StableDiffusion )来搜集和分享各种 prompt,甚至还诞生了专门买卖 prompt 的市场( promptbase ),还诞生了大量的关于 prompt 的研究性的论文。

    良好的 UI 提供了可预测的概念模型 要理解为什么写出有效的 prompt 很困难,我认为唐纳德诺曼的《设计心理学》当中提及的一件轶事非常具有启发意义。这个故事说的是他自己拥有一个冰箱,而冰箱内设置温度的功能极度难用,因为它的温控大概是这样的:

    这个冰箱有着典型的冷冻室和冷藏室,它的两套设温控设施让人觉得两者有着独立的控制系统,实际上这个冰箱仅有一个冷却装置,而控制两者温度主要依靠一个阀门,来分配两者所用的冷气。这也意味着,原本的控制功能已经很难理解很难用了,而实际上的体系比我们看到的更加复杂,使用一个你看不到的阀门来耦合控制。

    使用不正确的概念模型,用户不仅无法预测输入的数值,也无法掌控输出的效果。实际在操作的时候,用户需要操控 (i) 设置控件进行调整,然后(ii)等待 24 小时等到温度稳定下来,并且 (iii) 检查最终的温度是否符合他们的预期,如果结果稳定且符合预期还好说,如果不符合,需要返回步骤 (i) 。这种操作带来的沮丧感,其实和当前 AI 给人的感觉类似。

    对我来说,这件事情给我的主要启示有 2 点:

    设计良好的界面能够给用户创建一个正确的概念模型,可以大体预测输入内容是如何控制输出内容的。 当概念模型不课预测的时候,用户就会被迫使用试错的方法。 UI 设计师 的工作之一,就是创建一个用户可预测的概念模型。

    AI 黑匣子不提供预测概念模型 生成式 AI 的黑盒状态,其实是最糟糕的界面,因为它们还无法给用户提供可预测的概念模型,目前绝大多数人都不清楚 AI 是如何将自然语言 prompt 转化为最终的输出结果,即使是 AI 的设计者通常也无法确知,怎样去构建一个让用户可以理解和预测的概念模型,来帮助用户更好输出内容。

    现在回到 DALL-E2 ,我试着使用「Picture of a cool, young Computer Science Professor named Maneesh Agrawala」来让它为我创建一个更好的照片:

    很多时候我确实不知道 prompt 是如何影响图片的,比如我使用「Cool」这个词,它映射到图片当中的特征是运动外套和 T恤的组合,还是年轻的面容?而「Computer Science」 是否意味着 DALL-E3 需要输出写实的图片而非插画?没有逻辑顺畅的预测概念模型,我也不知道答案是什么。我唯一能做的和大家一样,就是不停输入和修改 prompt 来等待结果。

    人类也是糟糕的 UI,但是比 AI 强一点 AI 的目标之一,是像人一样创造。你可能会说,自然语言是人和人进行沟通的语言,显然人是更好的 UI,这一点我不完全同意。人类本身也是产出垃圾内容的 UI。人类的可怕之处和 AI 黑箱的缺陷是完全相同的。当我们面对另外一个人的时候,我们其实面对着同样的问题,我们通常很难准确预测对方回复你的语言是什么。

    就目前而言,人类比起 AI 黑箱更优,这主要有两方面的原因。

    首先,身为人类的我们,在预测人类合作方的「行为模式」的时候,是根据自身响应需求的方式来预测的,也就是「以己度人」。我们对于行为模式和概念模型,有很强的先验性,因为我们会假设对方和我们一样。

    其次, 根据 Herb Clark 等语言学家所指出的 ,我们可以和人类合作方通过交谈,来构建共识,共享相同的语义。我们可以在语言沟通中,逐步消除歧义和误解,并且完善和调整策略。

    共同性、语义共享和修复策略是人类协作的基础。

    尽管人类之间拥有这样的优势,和另一个人想要形成高质量的协作,依然需要通过多次迭代才能完成。最有效的合作通常需要数周、数月乃至于数年的对话,才能建立起共同点(想想婚姻关系吧)。

    正如我所说的,人类是可怕的 UI,但是依然是比 AI 黑箱更好的 UI。

    向拥有对话界面的 AIGC 前进 那么我们要如何才能创建出更好的 AI 工具呢?有一种方法是支持对话式的交互。ChatGPT 等文本生成式工具,已经开始这么做了。这些工具开始支持多轮对话,可以是作为未来人与 AI 进行有效沟通的基础。上下文环境让 AI 和用户都可以参考之前对话中内容的概念,以此为基础达成共识。不过不清楚目前的 AI 系统包含有多少常识,AI 对语义概念的理解似乎还有所不足。但是人类用户而言,ChatGPT 到底懂得多少其实是不确知的,因此对话通常需要进行多轮来回,双方才能构建起基本的共识。此外,AI 和用户对话本身并不会直接更新 AI 本身的模型,为这些模型增加常识、基础概念、推理能力,依然是目前 AI 研究的主要推动力。

    Prompt-to-Prompt image editing [Hertz 2022]

    自然语言通常是模棱两可的。人类通过对话,来逐步消减歧义,确保大家在讨论的是同一件事情。有研究人员已开始将这种修复机制应用到文本生成图片的 AI 系统当中,比如 Prompt-to-Prompt image editing [Hertz 2022] , 用户可以先用 prompt 生成图片,然后优化 prompt 生成新的图片,这个过程中只需要进行微小的调整即可,上图中,通过添加额外的关键词,生成了更加准确的内容。这本身就是一种改进的方式。

    减少自然语言歧义的另外一种方法,是让用户添加约束条件。图到图转化 ( Image-to-image translation [Isola 2016] )就是一种典型的约束方式,通过机器学习生成对抗网络(GAN),在这种环境下,当你输入一种类型的图像(比如标签图、轮廓图),就能生成另外一类图像(比如照片或者地图),输入的图像会约束输入图像的特征。这样的约束方式比起用户模糊的语言描述会显得更强,提供了更加精确的空间特征。如今我们手底下很多小组在文本转图像的 AI 交互中,使用了这种方式来强化上下文环境。

    对话式交互能超越自然语言单一命令。在文本转图像的 AI 模型研究中,很多 AI 研究者已经开始研究「建立共识」的方法。 Textual Inversion [Gal 2022] 和 DreamBooth [Ruiz 2022] 都会让用户提供示例图,AI 模型则会将文本 prompt 和这些图像示例关联起来,这样用户和 AI 会建立某种共通的信息基础。

    而 「神经符号法」 则提供了另外一种创建 AI 模型对话界面的图形。一个 AI 模型不是直接生成内容,而是生成某种程序,只有运行了这种程序才能生成内容,这种程序在某种程度上就是 「共识」本身,它是人类和 AI 可以以相同方式理解的东西,而这就是将编程语言语义形式化的基础。这意味着,即使没有明确的语义,开发者依然可以通过检测代码内容来确定 AI 是否在做「正确的事情」。这个时候,开发者可以在编程语言层面上给 AI 提供修复建议,而不是简单的使用自然命令。

    结语 AIGC 的模型是令人惊叹的,但是它依然是糟糕的界面,只要输入和输出之间的映射不明确,它就一直是个问题。我们可以启用对话式交互来改进 AI,创建更多的「共识」。

  • 如何高效做好设计评审?高手总结了10条建议!

    UI交互 2023-04-07
    设计评审是每位设计师避不开的工作项目。你可能也有过这样的问题:做设计评审时如何清晰地阐述设计理念和亮点?设计评审的时候总被提问,我汇报的思路和节奏被带偏该怎么办?

    设计评审 是每位 设计师 避不开的工作项目。你可能也有过这样的问题:

    做设计评审时如何清晰地阐述设计理念和亮点? 设计评审的时候总被提问,我汇报的思路和节奏被带偏该怎么办? 每次设计评审都超过一个小时,该怎么提效? 本文就来为你解答这些问题,聊聊设计评审到底该怎样做。

    更多评审技巧:

    如何顺利通过设计评审会?我总结了3个注意事项! 编者按:如何通过设计评审?

    阅读文章 >

    一、设计评审的目标 我们先建立一个关于设计评审的关键认知:

    做 UI/UX 的设计评审,我们是为了展示自己的设计思路,更是为了让项目的相关方了解设计方案,评估方案的可行性,判断并解决潜在的问题,达成一致共识,从而推进项目稳步进展。

    所以,不要把设计评审当成是设计师展示个人能力的舞台,而是要将其当作是使项目的相关方对方案达成共识的重要环节。设计师做设计评审的目标应该是:

    “通过尽可能清楚地阐述设计方案,为大家提供解决问题的思路,最终促成一致的结论,推动项目进展。”

    下图为对设计评审的“×误解”和“√正解”:

    而作为设计评审的主角,你的工作任务是:

    1. 讲解设计方案

    清晰地描述设计方案,可视化地呈现设计细节。

    2. 评估他人建议

    当他人对于设计稿提出不同意见和想法时,能够综合评估,适当妥协之后仍能保证最基础的用户体验质量。

    3. 把控评审节奏

    控制评审的全局节奏,当大家因讨论某个问题而迟迟无法推进或得出结论时,你要及时控场。

    4. 做好会议纪要

    做好会议关键结论和问题的记录,并及时同步给相关人员,让评审结论有据可查,及时跟进。

    二、设计评审的技巧 从评审的前、中、后三个环节,我总结了大厂工作中的 10 条注意事项和实用技巧:

    1. 评审前:管理预期

    在评审前要预先发送会议邀请,管理好参会人的预期。建议你做到:

    ① 会邀的标题要清晰。

    会议邀请的标题写清会议性质、项目名称、评审内容,让参会人一目了然。你可以这么写标题:“「设计评审」XXX 功能名称”

    ② 附带设计稿的链接。

    你可以在会议邀请中加上设计稿的链接,让参会人提前浏览。如果设计稿尚未完成,可以先写注明:“设计稿稍后附上”,做好再加上。

    2. 评审中:把控节奏

    在评审过程中始终要控制好节奏。建议你:

    ③ 先简述需求背景和设计目标。

    评审开始时先简要说明设计需求背景和目标,尽量用几句话或一两张图来概括和介绍:

    评审的主要目标和内容; 设计需求和设计主要解决的问题; 使用的设计手段和方法等。 ④ 约定简单的评审规则。

    如果评审内容很多,在开始时就可以先和大家约定好简单的评审规则。你可以将评审内容分成几个部分,讲每一部分的过程中不接受提问,讲完一部分后给大家统一提问的时间,避免在过程中因为个别细节问题纠缠不清而影响整体评审。

    ⑤ 按照逻辑做设计讲解。

    在讲解设计方案时,你要找到一个讲解逻辑,比如你可以按照用户的操作步骤 / 链路来做讲解,这样的设计讲解更接近用户的操作习惯,也更容易被大家理解和接受。

    ⑥ 成果优先,过程后补。

    设计评审不是设计研究报告,参会人通常并不十分关心你的设计手法或设计过程,而更关注最终的设计产出。因此:

    如果大家对设计方案没有异议,设计的研究过程和证据不说也可; 如果大家对方案有异议,那你再展开讲讲设计研究过程,来证明设计决策的正确性。 ⑦ 突出真正的设计亮点。

    你可以突出讲解方案的设计亮点。不过这些“亮点”不仅是单纯的设计创意,更应该是能够体现业务价值、能够更好地实现产品和业务目标的设计方案。

    真正有价值的设计创新,并不需要你做过多的解释说明就能够得到大家的认可。只有成本和资源有限时,才需要进行平衡和妥协。因此你要站在业务、产品、用户的立场上,判断业务真正需要的设计“亮点”是什么,并在设计稿和设计评审中有所体现。

    ⑧ 形式服务于内容/功能。

    你不需要做花哨的设计方案汇报书或 ppt,因为汇报的样式和形式再丰富也不会为设计方案的质量加分。你可以将精力用于方案的清晰呈现,比如:如果某个 icon 的动画效果很重要,那就可以做个动效 demo 进行演示,简单的 demo 会减少很多沟通时间。

    3. 评审后:推进落实

    在评审后立即整理好会议纪要,并及时同步给相关方。建议你:

    ⑨ 执行项指定到负责人。

    评审过后产生的不确定项或待完成事项,需要指定到具体负责人,并注意督促落实。

    ⑩ 评审纪要需做好归档。

    评审纪要要同步给所有相关方和参会者,并做好归档,让结论有据可查。

    相信这 10 条建议会帮你顺利做好设计评审。

    欢迎关注作者微信公众号:「长弓小子」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通