Elaine云想衣裳花想容-中国艺术合集.仕女图
今天来更新中国艺术合集第二弹，仕女图。 仕女图也就是美人画，古往今来，无论是欧洲还是亚洲，窈窕淑女君子好逑是永恒不变的主题。 美人往往也是美的多种多样的，有细腰杨柳，也有珠圆玉润，有恭默守静，也有古灵精怪。 下面就跟着大家们的画来看看这些穿越千年的美人们。调婴图 --（唐）周昉调婴图调婴，指的是对子女进行指导教育。内人双陆图 --（唐）周昉内人双陆图双陆，指的是一种棋盘游戏。仕女图 --（五代）周文矩仕女图梧桐树下，仕女凭栏阅读，旁还有一狸猫作陪，好不惬意～丽人行 -- （宋）李公麟丽人行画卷细节图这幅画很出名，根据杜甫《丽人行》诗，描绘唐朝杨贵妃的妹妹们等人骑马出游的场景。招凉仕女图 --（宋）钱选招凉仕女图细节图这幅画吸引我的是仕女们头戴的高冠，宋代的花冠是出了名的，我一直想做一个“花冠”的合集，可惜留下来的资源太少了，先给大家看看宋代皇后的花冠。（我会继续努力找资源的👊power！）宋高宗后坐像蔡文姬归汉图 --（宋）李唐文姬归汉图这幅画是东汉才女蔡文姬陷胡的坎坷经历为背景创作的历史故事画，总十八幅。每幅图除了图画，还有文字诗文，我只选了其中第三拍。听阮图 --（宋）李嵩...
Elaine国外产品UI Kits-字体篇
最近做国外产品，有很多心得，先整理字体篇。字体选择英语字体分为Sans Serif和Serif，无衬线和有衬线。有衬线字体很突出的产品就是时代周刊能看出来字体的结束有明显的装饰，粗细不一样。但互联网产品设计大多不用这类Serif字体，一般用Sans Serif，不带衬线的字体。 我大概总结了下，目前国外产品常用的五类英文字体分别是：Open Sans（一般用于安卓产品设计）LatoSource Sans Pro（Adobe产品的字体）PoppinsRoboto（Google类产品的字体）这五类字体很明显有一个共同的特点，偏圆，现在各种各样的产品设计，都喜欢圆角样式。字体设计在设计一个产品，整体字体样式的选择不应该超过两种，可以通过选择不同字体的粗细来区分。例如Lato它有10种类型可供选择，选3种给大家看看。一般字体大小是Line height的1.5x，如果你字体大小选择的是16px，那Line height选择24比较美观。同样以Lato举例，如果你选择的是3x的话，那显得字体间距就会很大，不美观。最后再整理下英语文案的注意事项，做产品设计的前期很容易忽视这些问题，我初期就没...
Elaine春风拂槛露华浓—艺术合集.浮世绘.铃木春信+喜多川歌麿
正值农历春节假期，我们继续来看看艺术。 前两篇文章介绍的康德和克罗耶都属于印象派画家，但其实我最爱的画派是浮世绘，我打算春节假期带大家来欣赏下日本的浮世绘。浮世绘介绍浮世绘，浮世二字和“现世”相对，来源于佛教用语，现实世界总有种种无奈与苦痛，但浮世往往指的是弹指繁华，我喜欢的《源氏物语》、《平家物语》都有着”浮世“的味道，包括中国的《红楼梦》也是。 首先用一首诗来演绎下“浮世”的含义，诗来自《平家物语》 祇园精舍钟声响，诉说世事本无常， 沙罗双树花失色，盛者必衰若沧桑。 骄奢主人不长久，好似春夜梦一场， 强梁霸道终殄灭，恰如风前尘土扬。发展梗概浮世绘发展梗概浮世绘的题材有很多种，包括：美人绘：以年轻美丽的女子为题材役者绘：以著名的歌舞伎演员为题材名所绘：以明山秀水为题材，例如富士山武者绘：以历史小说中的武士为题材花鸟绘：以花鸟虫鱼兽为题材等很多其他类型（例如相扑绘、历史画、漫画、春画，但著名的作品大多来自上面列出的美人绘、役者绘、名所绘、武者绘、花鸟绘今天来看看美人绘，首先来看铃木春信的。铃木春信铃木春信，1724年-1770年（46岁），早期的浮世绘一般是单色，全部是墨色即黑色...
可可爱爱
Elaine云想衣裳花想容-中国艺术合集.仕女图
今天来更新中国艺术合集第二弹，仕女图。 仕女图也就是美人画，古往今来，无论是欧洲还是亚洲，窈窕淑女君子好逑是永恒不变的主题。 美人往往也是美的多种多样的，有细腰杨柳，也有珠圆玉润，有恭默守静，也有古灵精怪。 下面就跟着大家们的画来看看这些穿越千年的美人们。调婴图 --（唐）周昉调婴图调婴，指的是对子女进行指导教育。内人双陆图 --（唐）周昉内人双陆图双陆，指的是一种棋盘游戏。仕女图 --（五代）周文矩仕女图梧桐树下，仕女凭栏阅读，旁还有一狸猫作陪，好不惬意～丽人行 -- （宋）李公麟丽人行画卷细节图这幅画很出名，根据杜甫《丽人行》诗，描绘唐朝杨贵妃的妹妹们等人骑马出游的场景。招凉仕女图 --（宋）钱选招凉仕女图细节图这幅画吸引我的是仕女们头戴的高冠，宋代的花冠是出了名的，我一直想做一个“花冠”的合集，可惜留下来的资源太少了，先给大家看看宋代皇后的花冠。（我会继续努力找资源的👊power！）宋高宗后坐像蔡文姬归汉图 --（宋）李唐文姬归汉图这幅画是东汉才女蔡文姬陷胡的坎坷经历为背景创作的历史故事画，总十八幅。每幅图除了图画，还有文字诗文，我只选了其中第三拍。听阮图 --（宋）李嵩...
Elaine国外产品UI Kits-字体篇
最近做国外产品，有很多心得，先整理字体篇。字体选择英语字体分为Sans Serif和Serif，无衬线和有衬线。有衬线字体很突出的产品就是时代周刊能看出来字体的结束有明显的装饰，粗细不一样。但互联网产品设计大多不用这类Serif字体，一般用Sans Serif，不带衬线的字体。 我大概总结了下，目前国外产品常用的五类英文字体分别是：Open Sans（一般用于安卓产品设计）LatoSource Sans Pro（Adobe产品的字体）PoppinsRoboto（Google类产品的字体）这五类字体很明显有一个共同的特点，偏圆，现在各种各样的产品设计，都喜欢圆角样式。字体设计在设计一个产品，整体字体样式的选择不应该超过两种，可以通过选择不同字体的粗细来区分。例如Lato它有10种类型可供选择，选3种给大家看看。一般字体大小是Line height的1.5x，如果你字体大小选择的是16px，那Line height选择24比较美观。同样以Lato举例，如果你选择的是3x的话，那显得字体间距就会很大，不美观。最后再整理下英语文案的注意事项，做产品设计的前期很容易忽视这些问题，我初期就没...
Elaine春风拂槛露华浓—艺术合集.浮世绘.铃木春信+喜多川歌麿
正值农历春节假期，我们继续来看看艺术。 前两篇文章介绍的康德和克罗耶都属于印象派画家，但其实我最爱的画派是浮世绘，我打算春节假期带大家来欣赏下日本的浮世绘。浮世绘介绍浮世绘，浮世二字和“现世”相对，来源于佛教用语，现实世界总有种种无奈与苦痛，但浮世往往指的是弹指繁华，我喜欢的《源氏物语》、《平家物语》都有着”浮世“的味道，包括中国的《红楼梦》也是。 首先用一首诗来演绎下“浮世”的含义，诗来自《平家物语》 祇园精舍钟声响，诉说世事本无常， 沙罗双树花失色，盛者必衰若沧桑。 骄奢主人不长久，好似春夜梦一场， 强梁霸道终殄灭，恰如风前尘土扬。发展梗概浮世绘发展梗概浮世绘的题材有很多种，包括：美人绘：以年轻美丽的女子为题材役者绘：以著名的歌舞伎演员为题材名所绘：以明山秀水为题材，例如富士山武者绘：以历史小说中的武士为题材花鸟绘：以花鸟虫鱼兽为题材等很多其他类型（例如相扑绘、历史画、漫画、春画，但著名的作品大多来自上面列出的美人绘、役者绘、名所绘、武者绘、花鸟绘今天来看看美人绘，首先来看铃木春信的。铃木春信铃木春信，1724年-1770年（46岁），早期的浮世绘一般是单色，全部是墨色即黑色...
Share Dialog
Share Dialog
可可爱爱
Subscribe to Elaine
Subscribe to Elaine
<100 subscribers
<100 subscribers
今天来讲讲页面布局，Layout。之前做产品经理用Axure画图的时候，只会注意左右对齐，并没有认真考虑过页面布局这件事。
如今用figma画图，发现网格系统Layout grid非常好用，今天就用一个Token price页面带大家看看网格布局。
网格由一系列垂直或者相交的线组成，这些线将页面划分成列或模块。 这种结构有助于设计人员在页面上安排内容，帮助管理页面上的元素之间的比例。 网格将用作页面布局的框架，将其视为一个骨架，设计师可以在上面以易于吸收的方式组织元素。
网格与排版密切相关，从书籍的早期开始，网格就帮助设计师安排页面布局，以帮助用户阅读。 从印刷术到工业革命，报纸、海报、传单的大量兴起，对印刷设计师的需求量很大。设计师必须解决两个问题：如何向不同的人群传达不同的信息；防止不同的部分竞争读者的注意力。 后来在第一次世界大战期间，印刷出版物必须使用三种官方语言-德语、法语、意大利语，设计师需要一个新的网格系统来实现这一点。Jan Tschichold 和 Herbert Bayer 等排版师采用模块化方法解决了这个问题。空白空间第一次被用作布局设计中的动态组件，这导致了复杂网格系统的发展。
无论是复杂的网格，还是简单的，都有一些共同的部分：Format、Margins、Alleys、Columns、Modules。
四种基本的网格：Manuscript grid、column grid、modular grid、baseline grid。
Manuscript grid是最简单的网格，也被称作单列网格； Multicolumn grid，多列网格，当你创建的列越多，你的网格越灵活。多列网格对于包含不连续信息的布局非常有用，当你使用多列网格时，可以为不同类型的内容创建区域； Modular grid，模块化网格将页面垂直和水平细分为模块。列和行和Alley创建了一个单元格或模块化矩阵。当你需要对更加复杂的页面进行设计时，模块化网格非常有用。模块化网格为页面提供灵活的格式，允许创建复杂的层次结构，网格中的每一个模块都可以包含一小块信息，或者可以将相邻的模块组合成块。 Baseline grid，基线网格是指导设计中垂直间距的底层结构，它主要应用在水平对齐和层次结构。使用这种类型的网格，可以确保每行文本的底部与垂直间距对齐。
首先让我们看看页面的网格布局，区分顶部和弹框。
再来看看弹框的网格布局，每个元素的都会对齐网格。
最后让我们看看最终呈现图
实话实说，这是我有史以来最工整的设计稿了！小声说句，产品经理的线框图就是帮助设计师理清页面元素的，然后根据元素内容创建不同的网格，这样设计稿看起来就会非常工整舒服啦！
查资料的过程中，发现国外的Product design会有一道在纸上画草稿图的流程，其实这部分工作在国内就是被产品经理替代了。这步骤还是蛮重要的，我在设计token price页面的时候，就迷惑了我到底应该用几行几列，最后元素全部设计完了，再重新创建网格去对齐，可能还是不太专业，后面我也会要继续学习，加油🌟
今天来讲讲页面布局，Layout。之前做产品经理用Axure画图的时候，只会注意左右对齐，并没有认真考虑过页面布局这件事。
如今用figma画图，发现网格系统Layout grid非常好用，今天就用一个Token price页面带大家看看网格布局。
网格由一系列垂直或者相交的线组成，这些线将页面划分成列或模块。 这种结构有助于设计人员在页面上安排内容，帮助管理页面上的元素之间的比例。 网格将用作页面布局的框架，将其视为一个骨架，设计师可以在上面以易于吸收的方式组织元素。
网格与排版密切相关，从书籍的早期开始，网格就帮助设计师安排页面布局，以帮助用户阅读。 从印刷术到工业革命，报纸、海报、传单的大量兴起，对印刷设计师的需求量很大。设计师必须解决两个问题：如何向不同的人群传达不同的信息；防止不同的部分竞争读者的注意力。 后来在第一次世界大战期间，印刷出版物必须使用三种官方语言-德语、法语、意大利语，设计师需要一个新的网格系统来实现这一点。Jan Tschichold 和 Herbert Bayer 等排版师采用模块化方法解决了这个问题。空白空间第一次被用作布局设计中的动态组件，这导致了复杂网格系统的发展。
无论是复杂的网格，还是简单的，都有一些共同的部分：Format、Margins、Alleys、Columns、Modules。
四种基本的网格：Manuscript grid、column grid、modular grid、baseline grid。
Manuscript grid是最简单的网格，也被称作单列网格； Multicolumn grid，多列网格，当你创建的列越多，你的网格越灵活。多列网格对于包含不连续信息的布局非常有用，当你使用多列网格时，可以为不同类型的内容创建区域； Modular grid，模块化网格将页面垂直和水平细分为模块。列和行和Alley创建了一个单元格或模块化矩阵。当你需要对更加复杂的页面进行设计时，模块化网格非常有用。模块化网格为页面提供灵活的格式，允许创建复杂的层次结构，网格中的每一个模块都可以包含一小块信息，或者可以将相邻的模块组合成块。 Baseline grid，基线网格是指导设计中垂直间距的底层结构，它主要应用在水平对齐和层次结构。使用这种类型的网格，可以确保每行文本的底部与垂直间距对齐。
首先让我们看看页面的网格布局，区分顶部和弹框。
再来看看弹框的网格布局，每个元素的都会对齐网格。
最后让我们看看最终呈现图
实话实说，这是我有史以来最工整的设计稿了！小声说句，产品经理的线框图就是帮助设计师理清页面元素的，然后根据元素内容创建不同的网格，这样设计稿看起来就会非常工整舒服啦！
查资料的过程中，发现国外的Product design会有一道在纸上画草稿图的流程，其实这部分工作在国内就是被产品经理替代了。这步骤还是蛮重要的，我在设计token price页面的时候，就迷惑了我到底应该用几行几列，最后元素全部设计完了，再重新创建网格去对齐，可能还是不太专业，后面我也会要继续学习，加油🌟
No activity yet