1. <xmp id="b249y"><nobr id="b249y"></nobr></xmp>

  2. <menuitem id="b249y"><dfn id="b249y"></dfn></menuitem>

      <track id="b249y"><source id="b249y"></source></track> <track id="b249y"><source id="b249y"><tr id="b249y"></tr></source></track>
      <dl id="b249y"></dl>
        1. 歡迎訪問合肥市數字交通運營有限公司官網

           

          新聞動態

          公司動態

          當前位置:首頁>新聞動態>公司動態

          UI設計,讓我們和細節較勁

          開局一張圖讓我們來了解一下UI設計師

          在APP開發過程中最常見的一個問題

          ?

          “你只設計了一套基于iOS的設計稿

          (375*667像素),

          但是安卓開發之后與設計圖相去甚遠,

          甚至iOS開發也有一定差異性,

          這是為什么呢?”


          在做適配頁面的時候,不同移動設備有不同的尺寸,安卓和iOS的手機尺寸簡直不要太多,設計師雙拳難敵四手,更何況這么多尺寸和各種不同環境。

          我們可以先從色彩、文字、圖標和成品頁面進行一遍由點到面的復盤,找出影響設計落地的各方面因素,從源頭上解決我們在設計到開發落地過程中遇到的問題,最大程度上去避免它。

          Part. 01

          色 彩


          在色彩的運用中,漸變色需要注意。設計可能會采用兩用方式:


          1、直接切圖,切圖的話沒啥問題,不會變化太多,注意適配問題即可;

          2、開發直接讀取顏色值來開發,要注意漸變的角度以及有幾種顏色漸變。


          Part. 02

          文 字


          文字包含字體大小和字體顏色灰度。在移動設備上,則有幾點需要注意:


          1、安卓與iOS字體大小的單位不同,會影響顯示效果,需與開發協調好之間的換算關系。

          2、字重不同。在設計軟件上與實際開發環境的不同,設計稿可以顯示常規的集中字重,Regular、Light、Medium、Bold等。不同字體在PhotoShop或Sketch工具中有不同的字重,設計的時候我們可以選擇細微差別的字體字重如Regular(常規)和Medium(中等)來做文字層級區分。

          3、行高顯示不同,不同瀏覽器、不同字體,文字行高不同,例如宋體的文章行高>黑體的行高,因此行間距也會不同,段間距也會發生變化,也是導致設計稿落地差的一個原因。我們需要與開發核對字符、行高、行間距,確保在對應模塊差異性達到最小。


          Part. 03

          Icon(圖標)


          Icon的差異性體現在切圖適配、設備色差、Icon視覺平衡這幾點上,設計的時候注意同模塊的Icon線條粗細一致,色塊顏色飽和度一致。


          Part. 04

          UI Review(界面審查)


          在開發完成之后上線測試之前,我們還可以在核對一遍成品頁面與設計稿之間的區別,做一個頁面的UI Review,對照設計稿與成品頁面,檢查一遍落地效果。有差異的整理成文檔并交給開發修改,并在開發修改后再次核對,以確保提出的問題在合理范圍內都被調整或改正,最后完成落地驗收。


          Part. 05

          結 語


          在UI設計師的開發流程中,UI設計就是在和細節計較,項目是需要大量溝通來回修改的,不是一錘子買賣。不斷重復從討論初稿到最終上線的過程,從而給用戶帶來更好的體驗。對待設計一定要抱有敬畏之心,更要對產品負責,對自己的設計負責,我們的目標就是完善設計,給用戶帶來視覺上和操作上的舒適體驗。


          国产又黄又大又粗的视频|中文字幕无码热视频|天堂网www在线中文字幕|一级片在线观看