XiaoMi News APP Product Design

Background

项目背景

Leveraging the existing information ecosystem of Xiaomi Browser, I led the creation of a news application targeting the lower-tier market, integrated natively.

基于小米浏览器已有的资讯生态沉淀, 衍生偏向下沉市场的随原生安装的资讯应用

I streamlined the overall information architecture, dissected modules and tasks, aligned timelines with the project team, and optimized processes to enhance development efficiency. Independently handling end-to-end design, including interaction, visual, and motion aspects, I actively contributed to product design. I drove improvements in team collaboration, aiming to shorten development cycles and boost overall work efficiency.

梳理项目整体信息架构, 拆解模块和任务, 评估时间与项目组对齐, 进行流程优化调整, 提高整体开发效率,独立负责整体设计: 交互、视觉、动效等; 深入参与产品设计;推动优化团队协作模式,缩短开发周期提高工作效率  翻译上一段

Design

设计方案

While adhering to the MIUI design guidelines, strike a balance between interface whitespace and effective information presentation. When designing, consider maintaining rich information display while creating visual distinctions between each card. Ensure unity across the cards with a restrained and cautious approach to these subtle spacing details, enhancing overall interface cleanliness.

遵循MIUI设计规范的前提下,平衡界面留白与信息有效展现。设计时思考保持信息丰富呈现的同时,使每个卡片之间即形成视觉差区分,又能够保持统一,用克制谨慎的态度对待这些细微的间距,使界面更趋于整洁。


Card Design Detail

卡片设计细节

Search design emphasizes: effective and user-friendly information display, easy clickability, and flexible space expansion. Enhance the atmosphere of popular searches through icons and colored numerical fonts.

搜索设计注重有效友好的信息展示、易点击、灵活的空间拓展。通过图标与彩色数字字体加强热门搜索氛围

By employing brand colors to create a design atmosphere, users can instantly perceive the opportunity for earning money. Clear hierarchical information presentation is crucial. Many cluttered task layouts can make users feel lost, so we need to provide clear guidance to users.

运用品牌色通过设计氛围的烘托让用户立刻能感知到“有金可赚”,层级分明的信息呈现,很多混乱的任务排版会让用户在当前“迷路”,我们需要给用户明确的指引.

End :)

NEXT

QIFU Mindfulnes APP Design |起伏APP产品设计

Tencent Wealth Management App - Portfolio Diagnosis|腾讯理财通APP 持仓诊断产品设计

Study Room Visual Design|自习室视觉设计

ClassIn Icons Guidelines & Update Design | ClassIn 全局图标升级设计

ClassIn Visual Design Upgrade| ClassIn 视觉升级