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