新生代UI設計

互聯(lián)網產品上線步驟

  • 研究》概念 Demo》產品立項PM》交互設計UE》視覺設計UI》前端后臺開發(fā)RD》測試走查QA》上線》產- 品迭代》研究
  • 流程:方向》調研》用戶研究》分析競品》思維導圖》低保真(Axure\墨刀 》(檢查層次問題)》- Sketch和PS畫高保真》輸出規(guī)范
  • 產品經理PM(Product Manager): 項目的核心,負責規(guī)劃產品方向,市場定位,產品功- 能,上線時間 ,產品利益。一般在工作中起到發(fā)起和協(xié)調的作用,負責整合資源和規(guī)劃項- 目。
  • 體驗設計師UE:關注用戶使用前、使用中、使用后的整體感受,包括行為、情感 、成就等。
  • 研發(fā)工程師 RD: 前端開發(fā) + 后臺人員
  • 運營 OP:從內容建設,用戶維護,活動策劃三個層次來管理產品內容和用戶。負責已有產品的優(yōu)化和推- 廣,運營UI設計師空缺大。
  • 測試QA :負責產品的錯誤排查,負責產品的多平臺適配,兼容性測試。

UI

  • GUI 圖形設計師
  • IXD交互設計師
  • UE / UX 用戶體驗

什么是UI設計?

  • 開發(fā)流程:戰(zhàn)略層(老板)→→戰(zhàn)術層(產品經理)→→結構層(交互設計師)→→表現層(UI 設計師)→→技術層(開發(fā)工程師)
  • 設計目的:UI設計的核心目的就是把產品的商業(yè)價值最大化
  • 技術屬性:科學與藝術結合的綜合技能

1、UI 、UX 、LXD、 UR 了解

  • UI用戶界面的設計:界面交互的屏幕,通常指用戶的操作界面,包含網頁、移動APP、智能的穿戴設備,- 是用戶與系統(tǒng)進行交互和信息交流的媒介,主要是以視覺的形式展示。

  • UX / UE: 用戶體驗是產品本身以外給用戶帶來的感覺,是用戶在使用產品過程中建立起來的一種純生主觀感受。人們對產品的體驗可以通過外觀,聲音,故事,互動和服務來獲得,在社會中的比重大一些

  • LXD: 交互設計師——交互設計通常是指用戶與機器互動的過程,注重的是用戶的心理和人體工程學等方面的內容。一個好的交互方式是可用、易用,讓產品更容易被理解和用起來更順手。

  • UR:用戶研究, 是一種理解用戶,經常聽到的問題,“我們的用戶是誰?”基本的工作就是訪問用戶,用戶調查研究市場數據等

UI與UX工作的區(qū)別

UI:視覺設計、布局設計、圖標設計、設計系統(tǒng)、高保真界面設計
UX:以人為中心、可用性測試、用戶故事、用戶研究、低保真原型設計

交互設計

  • 交互設計師:要善于表達,以網頁語言表達產品 所要告訴用戶的信息,同時顯示用戶的操作功能。網頁上的文字就應該由交互設計師來編寫,產品經理更了解產品,然而交互設計師才是最懂得如何向用戶表達的人。

  • 工作內容:對產品進行行為設計和界面設計,WEB的操作以點擊為主。

  • 頁面布局:內容展示等眾多界面展示。

  • 語言表達能力:要多花心思,較好的語言表達能力是與同事溝通的必要素質,也是一種能力的體現。

  • 日常工作能力:1、客戶訪談2、現場研究3、頭腦風暴4、撰寫文檔5、制作原型以及產品測試。

2、屏幕像素、分辨率了解

  • 分辨率:顯示器上所顯示的像素數量
  • PX(Pixel)像素是屏幕上組成的最小單位,它是沒有實際的物理尺寸的(沒有固定的大小。)分辨率不同像素的尺寸就不一樣
  • DPI: 像素密度,每英寸上的點的數量,最初用于衡量打印物上的每英寸的點數密度,當DPI的概念用于- 在計算機頻幕上時,就應稱為PPI:PPI =(v根號(長度像素數的平方 + 寬度像素數的平方))除以屏幕尺寸
  • DP:設備獨立像素,是安卓系統(tǒng)開發(fā)時用的抽象單位,它和設備的屏幕像素密度有關,根- 據不同的分辨率,與px有不同的應對關系。dp與 / px的換算公式:dp * ppi / 160=px

3、新生代UI設計的職責

  • 視覺設計
    一、風格定位(最講究創(chuàng)造力的設計):分析并設計出用戶對該產品期望的產品質感。 兩個關鍵點:1.抓準方向(需要 洞悉產品的本質,推導出用戶內心最根本的愿望)、2.極致技術。
    二、產品迭代:完善產品的過程
    三、Banner:是指掛在網頁上的橫幅廣告(主要是宣傳產品和活動)
    四、 專題活動:以某個主題來包裝一些網絡活動,來達到某種商業(yè)效果,通常是為了促銷產品或者拉新盤活用戶
  • 團隊交接:切圖標注
  • 平面設計
  • 一般ui設計師的工作都會視當前的公司工作有關,一般都會:負責web端和移動端的產品界面視覺設計(有時會涉及交互設計)需要掌握的設計能力包括版式設計、icon設計、插畫- 設計、動效設計,還有活動推廣設計、H5、平面設計等。

4、UI設計的風格演變

  • 擬物化設計:模擬真實物體的材質、質感、細節(jié)、光影等。
  • 扁平化設計:去除多余的透視、紋理、漸變效果的元素,在設計上強調了抽象、極簡和符號化。
  • 輕擬物設計:輕微而不厚重的擬物效果,就是介于擬物化和扁平化之間,既沒有太多逼真的材質- 感,但是比純扁平化多些細節(jié)。
  • 多色 / 撞色設計:一個元素或一個畫面上使用多種的顏色搭配,或者互補色相撞,使得視覺感更加- 強烈。(以前的抽像話的感覺,更年輕時代的演變)
  • 卡片式設計:隨著Material Design的流行,卡片式UI已經成為目前設計的一部分;每一張卡片里- 都獨立包含該元素的信息。
  • 無邊框設計:把用來劃分區(qū)域的邊框和邊線去掉,界面上可以通過距離的分割,各個區(qū)域的區(qū)分還- 是清晰可讀的。

5、UI設計的成長路徑

  • 軟件技術:UI設計類相關軟件
  • 臨摹階段:直接照著原圖畫--訓練對參數的理解
  • 積累作品:多做作品,有特色和展示自己的水平
  • 設計理論:看別人的排版自己調整--訓練對布局的敏感度,看別人的顏色自己調整--訓練對顏色的敏感度

6、UI設計需要養(yǎng)成的習慣

  • 素材的儲備:dribbble\behance\Pinterest\站酷、花瓣、ui中國、騰訊CDC, 其他,還有書籍等。
  • 設計思維:時刻留意生活中的設計感受,提升自己的設計敏感度,并思考這些作品背后的原理,提升設計的領悟力。
  • 行業(yè)了解:關注設計行業(yè),學習更多的專業(yè)知識,關注互聯(lián)網行業(yè),幫助你開拓視野。

UX和設計思維導論

1.UX的演變

  • 能夠實現想要的功能
  • 以人為本的宗旨,考慮人的情感,對這些情感上增加愉悅感減少挫敗感。
  • 瞬息萬變的環(huán)境:我們要面臨著一系列新挑戰(zhàn),將所有的內容捆綁在一起提供無縫的體驗。

2.UX設計的通用原則

  • 視覺語言:在視覺上創(chuàng)建的所有內容均是由一系列核心元素組成:點線面通過組合這些元素,我們可以創(chuàng)建圖標,組件,插圖,圖表,模式等。

  • 內容和版式:
    (1)內容要傳達的信息,用什么樣的文案來正確表達信息。
    (2)版式采用醒目的無襯線字體吸引人們的目光,將其與經典的襯線體結合使用可幫助提高可讀性。強大的層次結構可幫助讀者在頁面快速找到想要的內容。對比鮮明的紅色強調了單色的調色板,為頁面增添一些亮點。

  • 內容與版式技巧:
    1.當開始進行新項目時,請在項目開始的時候花一些時間選擇好傳達的內容文字。這樣可以確保您選擇的文字清晰,并能一致的傳達品牌的效果。
    2.確保每個頁面或屏幕上都有清晰的標志性用語。問問自己:“用戶想要實現什么?”并在設計時牢記一點。使用簡潔明了的語言,將大大的改進您的設計,并且您的用戶會更加快樂。
    3.考慮排版時,少即是多,配對字體并不容易。如果您只是剛剛起步,請找到一個“字體家族”并圍繞它建立。考慮標題和正文的對比字體。比如,網頁上襯線字體很適合用于正文內容,這可以與無襯線字體的標題和副標題形成對比。

敘事設計

  • 作為設計師:我們要考慮的兩個方面:速度、敘述的發(fā)展速度和緩慢程度;節(jié)奏,一系列看屏幕上的節(jié)奏或屏幕上的元素,為了創(chuàng)建引人入勝的故事并把用戶吸引到內容中,兩者都很重要。
  • 敘事設計技巧:
    1.當您開始設計一個新項目時,重要的是要考慮敘述的結構和節(jié)奏。對內容的結構和邏輯分組進行一些思考。進行紙質原型制作時通過用戶的敘述來感受用戶流量的最快方法。低成本的紙張非常適合在轉向軟件工具之前建立骨架。
    2.問問自己:每一個頁面需要傳達的最重要的信息是什么?建立好內容后,您便可以有效的交付內容。請記住用戶的通常時間不多,并且在大多數的情況下都希望快速交付的關鍵內容。
    3.一切都是故事,請問自己:您在手頭的項目中講的是什么內容。

3.UI設計的(用戶體驗)法則

  • ??硕桑簭娬{需要最小化的選擇以減輕客戶的認知負擔并幫助推動決策。
  • 菲特定律:如何通過仔細調整界面元素的大小和位置賴簡化交互提供的寶貴意見。頁面上的大小影- 響用戶的準確和使用的時間。文字的比例的大小,標題和正文的關系區(qū)分。
  • 米勒定律:強調“分塊”可簡化復雜任務的好處。列如:銀行卡的卡號分幾個數在一組。

APP開發(fā)

  • 1、消費人群定位
  • 2、需求分析
  • 3、產品定位
  • 4、產品特色
  • 5、市場分析 / 競品分析
  • 6、產品的結構圖
  • 7、產品的交互結構
  • 8、UI界面設計稿 / 設計階段
  • 9、開發(fā)實現、測試
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容