Cihai Cloud App UI Design: Blue for Guidance, Song Type for Reading

Blue for guidance, Song type for reading

In 2019, Xinming Design designed the UI of the mobile app of Cihai (辞海) for Shanghai Lexicographical Publishing House; the project-stage name was Cihai Cloud (辞海云). The core decision fits in one line: blue for guidance, Song type for reading. The primary colour, tech blue (#007DF5), appears only on navigation bars, buttons, icons and the launch screen, showing users where to tap; headlines in the home feed and the text of dictionary entries are set in Song type (宋体), so that reading on a phone still feels like reading a dictionary. The design covers 18 screens, including the launch screen, home, several search modes, entry and encyclopedia detail, 3D Encyclopedia, Today in History, the personal centre, login and registration, together with colour, typography and two icon sets. The interface went live and is still in use.

A dictionary moved onto a phone

Cihai, published by Shanghai Lexicographical Publishing House, is a large comprehensive Chinese reference work that combines a character dictionary, a language dictionary and an encyclopedia. A printed dictionary is simple to use: find the entry, read it, close the book. On a phone, much more is expected:

· Speed: users want to find an entry by typing, speaking or taking a photo;

· Breadth: an entry carries not only a definition, but also photos, videos, related people and related entries;

· Credibility: once the screens look like a flashy news app, the dictionary loses its weight.

So the interface had to answer: how can Cihai on a phone be quick to search and complete to browse, and still read like a dictionary?

Three keywords

Before designing, Xinming Design set the tone of the interface with three pairs of keywords:

· Simple and efficient (SIMPLE): one step fewer, one layer fewer;

· Scientific and rigorous (RIGOROUS): entry layouts that hold up to close reading;

· Complete and professional (PROFESSION): characters, encyclopedia entries, photos and videos all reachable from one entry point.

The colours, typography, icons and screens all start from these three pairs.

Blue only to show the way

Colour works on three levels:

· Primary colours: tech blue (#007DF5) and steady grey (#7B7B7B);

· Accent colours: purple (#8350F5) and orange (#FF8E01), used on function icons;

· Text colours: four greys, #333333, #666666, #999999 and #DADADA, for headings, body text, captions and dividers.

The design notes put it plainly: the primary colour is not used over large areas; it appears on navigation bars, some buttons, icons and special screens, to highlight and set the tone.

Blue is a signpost, not a background. Most of each screen is white space and content; blue appears only on the search bar, the login button, the active tab and the top of the screen, so the eye always lands where it should tap. The one screen that uses blue at full size is the launch screen: a lake blue field with an open book, surrounded by three tags (Knowledge Topics, Character of the Day, Today in History), above the line "China's largest comprehensive dictionary".

Song type for content, sans serif for the interface

The typography guide sets two families: the system default Song type and the FZ Lanting (方正兰亭) series. In the designs, the two divide the work:

· Song type: home feed headlines and entry definitions, keeping the feel of a printed dictionary;

· FZ Lanting (sans serif): navigation, tabs, buttons and function entries, staying clear at small sizes.

Take the entry for Russia: the headword and pinyin come first, then fields such as Chinese name, English name, capital and main cities line by line, with the definition set in Song type. What users read on the phone is still a dictionary page.

Icons instead of words

There are two icon sets:

· Line icons: for actions within a screen, such as search, share, favourite, read aloud and play;

· Solid icons: for the bottom navigation and frequent entries, such as home, profile, camera and voice.

The principle in the design notes is to replace words with simple, easy to read icons wherever possible, making information visual, easier to use and more memorable for the brand. The four entries on the home screen (Knowledge Topics, Character of the Day, Word Cloud, Today in History) are told apart by four round icons in blue, red, orange and purple.

18 screens, laid out along the user's path

The screens are designed in five groups: enter, search, read, explore and me.

· Enter: launch screen and home. The home screen is a scrolling waterfall feed with the day's top knowledge stories; the four entries sit at the top; the search bar supports text, voice and photo search.

· Search: search start page (history and popular entries), full text search, picture search and video search. Results are split into tabs: full text, pictures, videos and featured.

· Read: entry page and encyclopedia detail page. The entry page opens with a large image and a one minute introduction, followed by tabs for definition, related videos and add to favourites; related photos are browsed by swiping left and right, which the design notes say lowers the chance of mistaken taps.

· Explore: 3D Encyclopedia, Today in History and More Functions. Today in History lines up years and events on a timeline; More Functions gathers entries such as Knowledge Topics, Character of the Day, Word Cloud, Browse and Era Conversion.

· Me: personal centre, profile editing, browsing history, favourites, account login, phone login and registration. The login and registration screens drop the cumbersome forms of earlier apps, keeping only phone verification and account password, plus login with Weibo, WeChat and QQ.

The bottom navigation has five items: Home, 3D Encyclopedia, More, Knowledge Map and Me.

The images, people and entry content shown on this page are sample content in the design files.

Deliverables and extensions

Interface guidelines

· Design keywords: simple and efficient, scientific and rigorous, complete and professional

· Colour: primary colours, accent colours, four text greys

· Typography: the division of work between Song type and FZ Lanting

· Icons: a line set and a solid set

Screen design (18 screens)

· Enter: launch screen, home

· Search: search start page, full text search, picture search, video search

· Read: entry page, encyclopedia detail page

· Explore: 3D Encyclopedia, Today in History, More Functions

· Me: personal centre, profile editing, browsing history, favourites, account login, phone login, registration

Looking back seven years on

Three points are worth taking from this project:

1. Use the primary colour sparingly. Blue appears only where users need to tap; the quieter the screen, the more credible the content.

2. Divide the work between typefaces. Song type for content, sans serif for the interface; the feel of the dictionary stays in the text, the efficiency stays in the controls.

3. Lay out screens along the user's path. From entering and searching to reading and exploring, each step does one thing, and users do not get lost.

For a dictionary app, the further the interface steps back, the more the content can stand.

How to verify

· Client: Shanghai Lexicographical Publishing House (www.cishu.com.cn)

· Product: the Cihai mobile app, project-stage name Cihai Cloud (辞海云)

· This case page: www.xinming.sg/en/portfolio/3133.html

Further reading

· Growth Assistant Mascot: A Young Eagle That Grows Up with the Child (www.xinming.sg/en/portfolio/3074.html)

· Many Idea Cloud: A New Identity Built on Connection and Flow for a Marketing Technology Company (www.xinming.sg/en/portfolio/3272.html)

· Kaiser Culture: A New Logo for a Listed Company Moving from Apparel to Entertainment (www.xinming.sg/en/portfolio/3275.html)

FAQ

Who designed the Cihai Cloud app interface?

The UI of the Cihai Cloud app was designed by Xinming Design in 2019 for Shanghai Lexicographical Publishing House. Cihai Cloud (辞海云) was the project-stage name; the interface went live and is still in use.

What is Cihai Cloud?

Cihai Cloud is the project-stage name of the mobile app of Cihai, the comprehensive Chinese reference work published by Shanghai Lexicographical Publishing House. The app offers character and encyclopedia search by text, voice and photo, with entries, photos, videos, a 3D Encyclopedia and Today in History.

What are the colours of the Cihai Cloud app?

The primary colours are tech blue (#007DF5) and steady grey (#7B7B7B); the accent colours are purple (#8350F5) and orange (#FF8E01). Tech blue is used only on navigation bars, buttons, icons and the launch screen, never over large areas.

Which typefaces does the Cihai Cloud app use?

Song type and the FZ Lanting series. Home feed headlines and entry text are set in Song type, keeping the feel of a printed dictionary; navigation, tabs and buttons use FZ Lanting, a sans serif.

Which screens were designed?

Eighteen: launch screen, home, search start page, full text search, picture search, video search, entry page, encyclopedia detail page, 3D Encyclopedia, Today in History, More Functions, personal centre, profile editing, browsing history, favourites, account login, phone login and registration.

Which organisations can learn from this case?

Publishers and reference or encyclopedia content owners; knowledge service products moving printed content onto phones; and content brands that want to keep their authority in an app while making search faster.

Xinming Design is a brand systems design firm. Its work centres on systematic judgment, turning brand strategy into structures that can run and be inherited. www.xinming.sg