F(x)Lab Works | 细节制胜：Randomevent 品牌小程序设计实录

数英评分

收藏评论

举报 2019-05

扫描,分享朋友圈

Randomevent×fxlab.jpg

2019 年全新上线的 Randomevent 官方微信小程序是国潮数字化趋势中的领跑者，其简洁而不失质感的设计反映了 F(x)Lab「大道至简」、「细节制胜」等诸多设计理念。F(x)Lab 基于其对街头文化本原的洞察，致力在小程序这一新兴领域中营造绝佳氛围，讲好品牌故事。在此我们以 Randomevent 小程序为例，为您呈现 F(x)Lab 的设计实录。

The Randomevent Mini Program launched in 2019 is the pioneer in the digital transformation of the Chinese fashion brands. Its design highlights the design principles of F(x)Lab from all aspects, including simplifying everything and focusing on details. Based on our insight into the origin of the streetwear culture, we are committed to helping brands tell their stories by sending good vibes. Here we take the Randomevent Mini Program as an example to present the design record of F(x)Lab.

字体规范：层级分明

Clearly Structured Font Standard

字体规范对于信息排布与视觉美感均有着极重要的作用。不同的层级，不同的页面，字体大小和间距各有其讲究之处。以 Randomevent 小程序首页为例，banner 上方的标题文字以颜色的深浅引导阅读的主次；英文 title 与中文 slogan 字重迥异，粗细对比鲜明，吸引注意力的同时不失易读性，留给用户深刻的品牌印象。

The font standard plays an important role in information layout and visual effect. For different classifications and pages, the font size and spacing have their own particular rules. Taking the homepage of the Randomevent Mini Program as an example, the title above the banner guides the order of reading by the depth of color. The English title and Chinese slogan have an obvious contrast in font weight, which attracts attention while retaining readability, leaving users with a deep brand impression.

主标题与次标题在字重与字间距上有着微妙的差异：主标题第二行字号远小于第一行，缩短字间距以显得紧凑；次标题更纤细，更松散，读着更轻松。阅读的节奏感由此而生：用户在主标题处逗留，以逐字读取重要信息；又在次标题处轻快一瞥，以过渡至下方的商品卡片。

There are subtle differences in font weight and word spacing between the main title and the subtitle. The second line of the main title is much smaller than the first line, and the word spacing is shortened to be compact. The subtitle looks thinner and looser, also it is easier to read. The rhythm of reading results from this: the user stays at the main title to read the important information word by word, then takes a quick glance at the subtitle to transition to the item cards below.

在商品卡片处，货币符号「￥」字号缩小，显得精致且能突出价格数字；价格数字每满三位数加逗号隔开，以利于阅读；按钮采用黑底白字，吸引用户点击。

In the item card, the size of the currency sign “￥” is reduced, which makes it delicate and can highlight the price number. The price number is separated by commas every three digits to facilitate reading. The button uses white characters on the black background to attract users to click.

图标规范：匀圆精致

Exquisitely Rounded Icon Standard

Randomevent 小程序的图标在简约几何形的基础上增加了圆角效果，与圆角卡片、圆角按钮相呼应，提升高级感和品质感。有别于一般小程序图标 1:1 的比例，宽高比 4:3 的图标给底部栏带来更多留白，显得更为从容不迫。

The icon standard of the Randomevent Mini Program adds rounded corners on the basis of simple geometry. It corresponds with rounded cards and rounded buttons to improve the sense of superiority and quality. Different from 1:1 ratio of general Mini Program icons, these icons with a width-height ratio of 4:3 leave more space in the bottom bar, which is more relaxing.

内容设计：沉浸体验

Immersive Content Design

遵循沉浸式体验设计的原则，Randomevent 小程序的内容排布旨在让用户进入「心流」模式，专注于购物本身。首页醒目的品牌 logo 与满屏的图文 banner 将用户快速带入品牌语境。分类卡片大小约为商品卡片的 1.4 倍，用户可横向滑动卡片来挑选心仪的分类/商品。卡片被点按时略微缩小并加上白色半透明遮罩，增进互动感。

Following the principle of immersive experience design, the content layout of the Randomevent Mini Program aims to let users enter the “flow” mode and focus on shopping itself. The eye-catching brand logo on the homepage and the full-screen banner bring users into the brand context quickly. The size of the category card is about 1.4 times that of the item card. You can slide the card horizontally to select the target category/item. The card is slightly zoomed out plus a translucent mask to enhance the sense of interaction.

分类页采用左右双栏排布，左侧一级分类，右侧二级分类，检索方便自如。品牌联名与当季型录均显示在一级分类中，方便快速查看。商品详情页采用大图模式，各颜色随心切换，优惠价格即时显示，模特尺码信息详尽，更可一键加入购物袋，整体流程轻松愉快。

The category page is arranged in two columns, categories on the left and subcategories on the right. Brand cooperations and seasonal lookbooks are displayed in the left column for your quick view. The item page uses full-screen mode, and you can switch to check any color you want. The preferential price is displayed in real-time. The size information is detailed. You can add items to your cart with just one click. The whole process is easy and delightful.

配色设计：内敛克制

Restrained Color Palette

在界面配色上，Randomevent 小程序以黑白灰色调为主，内敛克制，让用户更容易聚焦内容本身，明确信息层级，减少视觉干扰，符合品牌调性。

The color palette of the Randomevent Mini Program mainly focuses on black, white and gray. It is introverted and restrained, making it easier for users to focus on the content itself. In this way the layout of the information is strengthened, the visual interference is reduced, and the brand image is clarified.

纯色线性图标与大面积的留白，体现现代、简约的感觉，增添国际化风范。界面切换处采用灰色缺省页作为过渡，减少数据加载时用户潜在的焦虑心理，带来舒适流畅的体验。

Single-colored linear icons and a rich area of white space present a modern and simple feeling and an international style. The user interface uses the gray default page as the transition to reduce the user's potential anxiety during data loading and bring a comfortable and smooth experience.

设计理念：细节制胜

Details Make Perfection

在 Randomevent 小程序中，所有的动效、过渡、预览、加载……每一个场景，都有物理世界的参照可依循，有内在的逻辑呼应。用户的每一个动作都能得到反馈，每一种反馈都由我们测试调整多次，以创造愉悦的使用体验。

In the Randomevent Mini Program, all actions, transitions, previews, loads and many other scenes have their own reference to the physical world and internal logic to echo them. Every action of the user can get feedback. We test and adjust every feedback over and over to create a delightful user experience.

「大道至简」、「细节制胜」是 F(x)Lab 的设计理念，我们追求合理、和谐的境地，注重设计一致性、图片清晰度以及文字可读性，让用户享受美好的品牌氛围。与全世界的卓越品牌共创美观、实用且深入人心的数字产品，是我们不懈的追求。

It is the design principle of F(x)Lab to simplify everything and focus on details. To be reasonable and harmonious, we do pay attention to the consistency of design, the clarity of pictures and the readability of words, and therefore the users can enjoy the good vibe of the brand via our Mini Program. It is our untiring pursuit to co-create beautiful, practical and popular digital products with extraordinary brands around the world.

长按小程序码畅游线上商店

Long press the code to visit online store

fxlab关注二维码.jpg