By: Not Washing Dishes Studio – Ajiajia Jia
The author can be reached at [email protected]
The copyright belongs to the author, please indicate the source
(two months ago, I can say is a confused about the new, never involved in many aspects, but, “the best time to plant a tree was a decade ago, the second is” now, slowly, slowly in the older sister inspiration and suggestion to grow up, who also left a small summary, has carried on the classification to learn to sort out recently, To a certain extent, beginners can provide help in getting started. And so this little article was born. However, my naming and size are not standard, tools are not skilled enough, and now is still in the obscene period, so this article is not only for your reference, but also for their own, if there is anything inappropriate in the article, welcome criticism and advice, I hope to encourage with you, together with progress)
The fundamental tools
equipment
- A Mac can give you a leg up, or a black apple
App (Based on Apple system)
- Sketch is a simplified version of Photoshop for UI designers. It has all the features you need, it’s user-friendly, and for me it feels much easier to use than Photoshop. (Attached: Chinese User Manual for Sketch)
- Cut the figure tools
- PxCook (more on that later)
- Zeplin
The url
Designer navigation url (actually use this, enough)
- Design Navigation 1
- Design Navigation 2
icon
- Alibaba Iconfont
- flaticons
- icomoon
- Noun Project
Pictures (and sometimes souls)
- Figure worm
- Libre Stock
- Unsplash
- 500px
When you can’t do anything, what’s the best way to do it
- The UI China
- Learn the UI web (this website categorizes all interfaces)
Color material and inspiration
- dribbble
Logo design
- 25 school (inside the UI dry goods, quite good)
- Two apps on the phone can also be used for preliminary design (logo design in the pocket).
- Logo Market and Logo Shop
Hierarchical relationships (next, open your Sketch)
You design the interface, not only for you to see, and developers, not only for you to see, and the next UI to take over the project in the future, so, you have to have a clear classification specification, naming specification….. If you can make your catalog visible to people who have never worked on the project before, you’re halfway there. Next, let’s study together.
Three sentences proverbs
- Each app corresponds to a Sketch file
- A summary of each app’s individual interface corresponds to a page
- The small interface of each APP is an Artboard
Note: Within each Page, you also need to create a special Artboard to explain the size specification
- Color specification (different scenes in which color appears)
- Font size specification
- Icon specification (color when icon is selected and unselected)
- Button specifications (default and unclickable states, and others)
named
Generally speaking, Android or IOS developer is to receive the UI design after the start of the work, however, many times, in the processing of the image from the UI name, always more or less spend some time, because most of the “Chinese + number”, so Android designer in the drawing layout of the time need: Drawable (drawable); drawable (drawable); drawable (drawable) In fact, UI can add a “sprint” to this process. Imagine if the engineer could use this name as the ID when they get the cut image. This would save a lot of time, and at the same time, the English vocabulary of UI could increase significantly. Ha ha ha ha
-
Artboard name
- Module – Function
- Arrange all artboards according to serial numbers and put together the needs of the same module contents
- In addition, an extra Artboard is added to the top layer, which is mainly used to draw process lines and some information remarks, such as:
-
Name the Layer
- Divide the page into large blocks, build large file packages, and subcontract according to the layer content
- Type — range — function
-
Icon name
- Module — category — function — state
- Text color: text prefix
- Separator color: div prefix
Status:
- Default color, add the suffix normal
- Color when pressed, add the pressed suffix
- For the selected color, add the “selected” suffix
- Add the disable suffix to the color when not available
Category:
- Navigation bar: Nav
- Page title: Title
- Button: BTN
- Tags: label
- Hint text: hint
- Menu bar: TAB
- Background image: BG
- Default image: def
Basic concept
Android Developer
- Dp is used to indicate “length” units
- Sp is the unit used to mark “font”
Size of design draft
- Recommended 1080x1920px (Sketch User: 540 x 960)
Interface control size
-
Bottom (top) navigation bar
- Function: It is convenient for users to switch between pages and provide quick navigation
- If there are less than three Tabs, they can be replaced by Tabs. If there are more than three, they can be placed in other places, such as the navigation drawer.
-
The status bar
- Function: display power, time, signal, network, etc
-
TAB bar
Interface icon size (1080x1920px)
- Startup icon (Home page or APP List page) : 48 x 48 dp
- Action bar icon: the overall size is 32x32DP. The actual area of the figure is 24x24DP
- Context icon: the overall size is 16x 16DP. The actual area of the graph is 12x12DP
- System notification icon: the overall size is 24x24DP and the actual area of the graph is 22x22DP
- Minimum brush size: no less than 6px
Interface text
- The font
- English font: Roboto
- Chinese font: Source Han Sans or Noto Sans CJK
Image naming conventions
- Module – Category – Function – status.png
Fly high for you, make some assists
- How to learn AI in 4 hours
- IOS Design Specification
- Android Design Specification
- Interface diagram naming conventions
Graph cutting tool PxCook
Using the details
Specific operation: Pxcook
- Quick Export: Quick export to PxCook with one click, enjoy smart annotation seamlessly
- Data filling: Quickly batch filling name, time, date, mobile phone number, email
- Quick copy: Quick batch copy of design elements, pixel accurate
- Quick reference line
