APP界面設計思路!

2021-01-11 設計智造

文/陳巖 手機界面在人機互動的過程中,是進行信息輸入和輸出的重要媒介。任何手機信息交換的大部分過程都是通過手機界面進行的,不同種類的手機界面也將帶給人不同的視覺感受。

與傳統PC桌面不同,手機屏幕的尺寸更加小巧操作,方式也已觸控為主,APP界面設計不但要保證APP功能的完整性和合理性,又要保證APP的功能性和實用性,在保證其擁有流暢的操作感受的同時,滿足人們的審美需求。

人在操作手機時,主要以人的意識為主體,手機起到輔助作用。設計師應考慮到人與手機的各自特點,使得兩者之間相互協調,從而使工作條件達到最優。在使用手機的過程中應儘量減少人的計算和記憶負擔,從而有效地提高對手機的使用效率。

①保證功能性和實用性。我們在對手機APP 界面進行設計時,需要考慮APP本身的使用特點,保證大多數用戶都能獲得使用體驗,界面中應儘量減少按鍵數量,保證APP功能的合理性,這樣的界面會使得用戶操作更加方便流暢,也能相應地減少手機的運算負擔。

②內涵豐富,寓意明確。設計時應在有限的二維空間中調整圖形、文字、按鍵、符號等元素的位置關係和比例大小,增加對界面內容表達的準確性和界面操控的靈活性。

③圖形簡潔,易識別。設計師應考慮界面中的點、線、面的構成,界面既要做到簡潔並具有概括性,使用戶能更容易理解和接受;又要做到內容豐富,不讓人感覺單調乏味。設計圖形要遵循一種秩序美,讓視覺上的感受更加平衡,增加界面操控的舒適感。

色彩是APP界面設計中的重中之重,這關乎是否能夠正確表現出產品氣質和定位。主色決定了手機APP界面的整體設計風格,這個主色代表了產品的文化方向,同時也向用戶傳達了產品的情感。

在設計線框圖之前,研發團隊的每個人就應明確產品的定位,提煉出最貼切產品的主色。許多手機APP界面的主色都是選擇了此款APP應用圖標的主色,在不同界面中主色的面積會發生大小變化,可能會有同色系漸變界面,也可能出現同色的系功能圖標,但主色的視覺效果依然是佔主導地位的。

在設計手機APP時設計師可以使用互補色,在手機APP界面設計中互補色的對比效果是最為強烈的,給用戶帶來強烈的衝擊,情感豐富,給人留下深刻印象。但這種顏色的過度使用過多也容易給用戶帶來視覺上的疲勞,導致用戶不知何處才是重點信息。

所以這種視覺衝擊很強的互補色只能在小面積使用,同時注意使用位置,要放在手機APP界面信息提示出。設計師還可以使用冷暖色對比,這樣的配色會使手機APP界面變得非常出彩,使得分類內容一目了然。

設計文字時應保證文字辨識度高和信息傳達的準確性。相對於圖片文字擁有更加清晰準確的表達能力,使得用戶能更加清晰從APP中獲取信息信息,界面內容也更加直觀。文字設計要遵循以下原則:

用語要簡潔,信息內容清楚,避免使用專業的語言,同時減少不必要的修飾詞語,使得用戶可以更加迅速的理解手機APP的功能,文字布局上也應做到排版布局合理,結構層次清晰。

在字體設計中不同風格的字體會給人帶來不同的視覺體驗,但無論使用哪種字體,都應該將文字與圖片看成一個整體。文字應該帶有「意向性」不同的文字給人帶來不同的視覺效果。

①親近感與柔和感。尖銳的物體會給人帶來危險的感覺,文字也有同樣的心理作用,想要文字給人帶來溫柔的感覺,首先應使用線條粗一些、前端渾圓的字體,最好是手寫體;其次避免使用黑色或藏藍色的文字,應選取與背景顏色亮度差異較小的暖色。

②未來性與先進性。應選擇裝飾性弱的無襯線體和黑體,或者利用圖形組成具有「圖形化」的文字,需要注意的是,越是抽象的字識別性越低,這種字可以用在logo上,注意小範圍使用。顏色則可以考慮黑白灰這些簡單的配色。

③纖細與美麗。女性化的文字通常給人優美、纖細的印象,需要選用線條細且有曲線的字體,流暢的手寫細線體可以運用在女性產品上,更能給人帶來嬌媚的視覺效果。

④懷舊與復古。字體的設計具有流行性,所以字體的設計通常可以反映出流行的趨勢。在字體設計時要選用與背景顏色差異大的色彩,比如黑色的粗字體配上明亮的背景色,視覺的衝擊力在哪裡運用都不會減弱。

字體設計的節奏感體現在字號對比、重量對比、色彩對比上。當字號越大時,文字就會顯得越重要,字號的大小變化能讓版面展現出強弱變化;最引人注意的標題,在版面中會比其他字體更粗;重要的文字可以換作其他顏色加以區分,紅、黃、橙等暖色被稱為前進色,它們比藍、綠這些冷色更能起到吸引人眼球的作用。

優秀的APP不僅僅需要滿足用戶對功能的需求,還需要滿足用戶對視覺層面的需求。

相關焦點

  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。
  • VR界面設計實踐指南
    在本文中,我們將以這款app的設計流程作為案例,首先對VR app的整體設計方式進行了解,然後重點聚焦於界面設計方面。 你也可以到Oculus的官網下載用於Gear VR的《經濟學人雜誌》VR app。
  • iOS7界面概念設計:多彩圓形App圖標
    iOS7界面概念設計:多彩圓形App圖標 2013-11-15 11:20 | 作者:瑪莎 | 來源:265G QQ群號:624022706 | 我要分享:
  • 10個最新手機美食APP界面設計欣賞
    移動軟體時代,簡單下載美食app,動動手指,滑動幾下手機屏幕,即可足不出戶,搜索,預定和購買各路美食。然而,對於作為手機app UI 界面設計師的你來說,最大的問題並不在於如何使用這些美食軟體來方便生活,而是在於如何才能為各類餐廳,酒店,咖啡館,水果以及飲料店設計出美觀,舒適且簡單易用的手機美食App,對吧?
  • 「手把手教你設計」—12個最佳手機APP界面設計教程
    How To Design a Mobile App Signup Screen in Adobe Photoshop如果你想要設計一個像Facebook或者Instagram這樣成功的登錄界面設計,那麼這個完全是你必看的基礎教程,視頻中教你如何選擇顏色,設計按鈕以及詳細的步驟來展示登錄界面的設計過程。視頻雖然是四年前的,但是裡面的設計依舊不過時。
  • 設計靈感 :12組文件管理App界面設計靈感
    文件管理 App 可以幫助我們管理自己的文件,分類管理,快速查找,精選 12 組文件管理 App 界面,雖然風格各異但都具有代表性,無論是版式排布還是顏色搭配都值得參考
  • 面試時,如何闡釋設計思路?
    正好本周在做一款界面的重設計,目前做了兩個頁面及一組圖標,現在就假設面試官讓我說說這兩個頁面,我會怎麼闡述呢?我的闡述思路大綱如下:我對這款產品有一定的了解我是一個對流行趨勢敏感的人我是這樣展現自己設計能力的我對用戶體驗也有一些改進當然我們需要看著頁面來講解,先來看一下改版前後的界面樣式。
  • APP扁平化界面設計方法!
    文/劉楠交互界面是人機互動的渠道,扁平化的界面設計是以設計或者優化人的行為為出發點的,其關注的是人的心理和行為,其目的是為了提升用戶在使用軟體時的良好體驗。②簡潔清晰的界面元素。扁平化界面設計中的元素追求簡潔清晰,其中的圖標、文字、按鈕、按鈕使用效果和背景都製作的非常簡潔清晰,降低用戶的認知障礙。③優化排版。在扁平化界面設計當中,我們多採用網格化的排版方式,這種方式有利於對空間的合理利用,也有利於對於軟體中常用功能的凸顯。
  • 界面設計中有哪些需要了解的基礎要素?
    界面設計中有哪些需要了解的基礎要素?對於剛開始學ui設計的新人而言,了解並且打下良好的基礎是非常重要的,所以,今天優行者小編將跟大家一起分享,界面設計中的基礎要素。
  • 這麼精緻的植物app界面,先欣賞(lin)完(mo)再說
    作為APP設計師,有沒有想要設計一種關於植物app的衝動呢?今天學堂君跟大家分享一些設計非常精緻的植物app界面給大家。欣賞花草的同時,還可以把這些植物app設計出色的地方學(lin)習(mo)了。1、植物電商app設計界面欣賞
  • 什麼是手機APP軟體的界面設計?
    然而說起到手機APP界面設計,許多朋友就不是那麼的知曉了,那麼接下來我就和人們來普及一下關於APP界面設計的知識。一、什麼是手機APP界面要知曉APP的界面設計,首先要知道什麼是APP應用界面。手機APP界面也可以夠說是手機應用界面,狹義上的手機應用界面是指應用中面向操作者而專門設計的用作操作採取及反饋信息的指令部分,出色的APP應用界面具備簡單好用,突出關鍵,容錯高等特性。廣義上的APP應用界面就是某樣事物面向外界時所展示的特性及功能的組成部分。簡單通俗的解釋就是手機APP界面,其實就是我們採取手機APP軟體時所接觸到的功能按鈕和APP的響應速度。
  • APP界面中的「圖形創意」!
    圖標主要用文字符號來構圖,以文字為圖標的設計元素,規則文字圖標體現嚴肅性和統一性,蘊含產品正品品質的企業文化。文字變體圖標,通過文字藝術化構圖,使文字圖形化,相較於圖形圖標更加直觀、易懂的特性。③圖文並茂圖標。根據APP的功能特徵進行圖文穿插,其設計思路為插圖匹配文字,圖形通過視覺上的烘託來增強圖形美感,文字符號可以進行意圖說明,兩者相得益彰。
  • 如何設計出極簡主義風格的APP界面?
    在APP的產品設計上,極簡併不是盲目追求形式上的簡單,而是複雜的升華,是充滿人情味的精簡設計。本文重點介紹了幾種極簡主義風格APP的界面設計方法。對於APP的設計而言,極簡主義風格的APP摒棄了複雜的操作界面,降低了用戶的使用難度,以簡約但不簡單的設計和功能,使整個產品既高效合理又簡潔美觀。二、極簡主義風格APP有哪些優點?從功能上來看,極簡主義風格APP的設計具有高度可識別性和較好的人機互動性。從美學角度上看,極簡主義風格設計符合當今社會的審美需求。
  • 優衣庫、MUJI等品牌app創新設計案例五大要點
    越來越多的傳統企業擁抱移動網際網路,以補充完善原有渠道的目標推出自有企業的品牌app,比如傳統雜誌社設計一款電子雜誌app、傳統實體店商家推出電子商城app。這些傳統的做法已經司空見慣,讓我們看看品牌大牛們有哪些不務正業的新玩法。  本文不談趨勢、不談技術,也不涉及廣告營銷思路。
  • APP界面設計中如何建立更好的層次感?
    下面從五個角度分析如何在界面設計過程中營造層次感。文字的層級區分在界面設計中,文字部分的層級區分是決定一個界面是否具有層次感的重要因素。一般情況下,文字可以進行調整的屬性有字體、字號、色相、明度等。其中字號的大小是拉開文字層級的首要因素。
  • 界面配色就靠它們,UI設計師必裝的手機配色參考APP
    大自然的世界具有天然的和諧配色:選取一處風景,對景物取色,形成的配色方案可以運用在平面設計,室內設計,網頁設計中~相比去配色網站尋找現成的配色方案,這種自然取色的方式更具有創造性哦~非常好用,UI設計師、插畫師和攝影師必備的配色APP。
  • APP界面的字體規範!
    文字設計是界面設計中最細節的部分,也是最不可忽視的基礎部分。在界面設計過程中要考慮兩大因素:文字辨識度和界面的易讀性。在任何一個有效的界面裡,具有層次的設計可以將界面上重要的部分與次要的部分區分開來,可以從對齊、間距、顏色、縮進和字體等方面做文章。當所有這些都調整運用得適當時,可以提高整個界面的可讀性。很多剛做APP界面的設計師,經常會因為字號、字體顏色、間距而困擾。
  • 案例研究:一款助眠APP的UI設計分析
    今天我們就來分享一款助眠APP——Slumber的UI 設計案例,該項目由UI / UX設計師Ernest Asanov主導。項目一款助眠APP的UI 設計。目標Slumber是為有睡眠問題的人設計的,裡面包含故事和冥想的內容。通過這些內容,Slumber希望能夠讓用戶放鬆,從而睡個好覺。
  • 如何在APP界面設計中把文字排版做到極致?
    做ui設計的朋友們,你們一定在設計中碰到排版的吧,根據我的經驗,排版是UI設計中最難的部分。它們存在於各種形式並與我們相處了很長的時間。還好我們有許多規則、實踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中,我將給你幾個實用的提示和技巧讓你可以在項目設計中使用。超越理論的實際案例雖然排版是一個非常吸引人的主題,但我不會用太理論的東西來煩你。
  • 界面設計方法(1):界面的概念與分類
    編輯導語:對於很多軟體工程師來說,工作內容都與界面設計有很大的關聯。而界面設計的本質又是業務功能的設計,基於此,作者在本篇文章中,從數據分類、業務功能分類以及界面分類這三個方面,為我們詳細地說明了界面設計方法,希望能夠對你有所幫助。