Создание интерфейса текстового редактора для Android-устройств

Создание интерфейса текстового редактора для Android устройств

интерфейс текстовый редактор приложение

В настоящее время мобильные технологии интенсивно развиваются. Возможности, доступные для мобильных телефонов и планшетов, постоянно расширяются, что приводит к необходимости разрабатывать новые решения и приложения. Но, приложения должны быть интуитивно понятны и просты в использовании. Ведь создаются эти приложения для людей, обычных пользователей, которые не хотят вдаваться в подробности всего процесса разработки или структуры приложений. Пользователю важно другое, а именно: быстрота действия, безукоризненная работа и, самое главное, как уже было сказано ранее, простота и удобство в использовании. Достигается эта цель путем разработки удобного, понятного и простого интерфейса. И чаще всего, в качестве среды для разработки интерфейса используются графические редакторы.

Дизайнеры используют различные инструменты для создания дизайна приложения, в особенности выделяется графический редактор Adobe Photoshop. Adobe Photoshop — это самый мощный на сегодняшний день графический редактор. Возможности этой программы охватывают весь спектр различных операций, связанный с графикой, а именно: обработка фотографий, создание собственных рисунков, создание постеров, коллажей, обложек для разной продукции, создание открыток и многое другое.

Photoshop содержит в себе сотни инструментов, тысячи функций и миллион эффектов. Интерфейс в программе простой и понятный в обращении, всегда есть возможность установить множество новых эффектов, кистей, градиентов и узоров, которые сделают Вашу работу красивой и необычной. Следует отметить, что программа Adobe Photoshop является главным инструментом дизайнеров. 21 век — это век высоких технологий, нового слова в дизайне, поэтому большинство дизайнеров используют именно эту программу для работы. Что касается самих приложений, то разрабатываются они для использования на различных операционных системах, но чаще всего в сети интернет вы сможете обнаружить примеры дизайнов приложений для ОС Android.

Тема работы «Создание интерфейса текстового редактора для Android устройств» была выбрана потому, что на сегодняшний день эта тема является чрезвычайно актуальной, поскольку мобильные устройства стали неотъемлемой частью нашей жизни и использование их подразумевает не только в обычной жизни, но и в бизнесе. И тут требования куда более серьезные и особое внимание уделяется интерфейсу, ведь создаются они для того, чтобы сэкономить какие-либо затраты, будь-то финансы или время.

Но в данной курсовой работе мы не будем настолько глубоко `копать' и разберем простой пример разработки интерфейса текстового редактора для мобильного устройства на ОС Android в графическом редакторе Adobe Photoshop.

Цель работы: выяснить, какими способами создается дизайн современных приложений для мобильных устройств с помощью графического редактора Adobe Photoshop и применить на практике полученные знания в разработке интерфейса.

Объектом курсовой работы является интерфейс мобильных приложения Android и то, как специалисты-дизайнеры работают над его созданием.

Предметом работы является создание с помощью графического редактора Adobe Photoshop интерфейса текстового редактора для мобильного устройства Android.

Задачи:

§ определить роль интерфейса в приложении

§ рассмотреть Adobe Photoshop как многофункциональный графический редактор

§ с помощью графического редактора Adobe Photoshop создать дизайн интерфейса текстового редактора для мобильного устройства на ОС Android.

1. Роль интерфейса в приложениях и программные средства Adobe Photoshop

1.1 Дизайн интерфейса приложения как связь человека и ЭВМ

Разработка собственного программного обеспечения — сложный, трудоемкий процесс, требующий привлечения экспертов разного профиля. Команда опытных программистов, проектировщиков способна создать программу, удовлетворяющую любым техническим заданиям заказчика. Однако зачастую вне зоны внимания остается весьма существенный вопрос: а насколько привлекательна разработанная программа для конечного пользователя?

К сожалению, на сегодняшний день разработчики не всегда готовы дать внятный ответ на этот вопрос. А ведь конечный пользователь, как и заказчик, способен оценить программу только по ее внешнему виду — пользовательскому интерфейсу. Сложные процессы, алгоритмы остаются «за кадром».

Кнопки, иконки, текстовые данные, прочие элементы интерфейса создают у пользователя однозначное впечатление о потенциальных возможностях самой программы, системы. Кроме того, необходимо принимать во внимание тот факт, что пользователи программы будут каждый день работать с ней, а значит ее интерфейс должен быть привлекательным, легким для восприятия и не вызывать утомляемости. Для создания качественных пользовательских интерфейсов в команду разработчиков должен быть привлечен дизайнер-проектировщик.

Грамотный дизайнер способен решить все вышеописанные задачи, и сделать внешний вид приложения привлекательным. Пожалуй, излишне комментировать, что даже очень сложная программа может быть испорчена дилетантским пользовательским интерфейсом. Хаотично раскиданные кнопки, несочетающаяся цветовая гамма, агрессивные цвета, разный размер шрифта в разных участках интерфейса, все это вызовет однозначную реакцию со стороны пользователей — отвращение. Весь труд команды разработчиков станет жертвой непродуманного дизайна. Вторым важным фактором при создании интерфейсов является «юзабилити» (англ. usability — удобство и простота в использовании, применении). При организации интерфейса дизайнер руководствуется не только принципами красоты, но и практическим комфортом расположения управляющих элементов программы.

Потребитель не должен искать долго нужную ему функцию, кнопку. Управляющие элементы (кнопки, ссылки, закладки и т. п.) должны размещаться там, где пользователь ожидает их увидеть. Еще один важный аспект — графические образы, применяемые в программах. Любые образы, использующиеся, например, в иконках, должны давать четкое, однозначное представление о функции, кроющейся за картинкой. Неграмотное применение графики может дезориентировать потребителя программы, исказить восприятие. Становится очевидно, что пользовательские интерфейсы — это сложное и гармоничное сочетание красоты, удобства и корректности восприятия. В заключении давайте рассмотрим еще один вопрос, связанный с дизайном пользовательских интерфейсов. Как было отмечено ранее, любая программа в лице своего интерфейса должна создаваться для удобства работы конечного пользователя. Однако есть еще один «ценитель привлекательности» — бизнес. И если с конечным пользователем еще можно договориться, то бизнес переубедить невозможно. Ведь именно привлекательный внешний вид системы будет способствовать повышению продаж. Всегда необходимо помнить, что на рекламных материалах, презентациях, обложках дисков система может быть представлена только в одном виде, в виде своего пользовательского интерфейса. Всем нам хорошо известен принцип: чтобы продать конфету, нужно сделать красочную обертку. Также и в случае с программами. И именно пользовательские интерфейсы являются «оберткой», одним из ключевых факторов продаж продукта, а значит и успеха вашего бизнеса. Люди, глядя на интерфейс программы, должны захотеть купить систему, чтобы каждый день любоваться шедевром, сочетающим в себе красоту и функциональность.

1.2 Adobe Photoshop и его возможности

Программа Adobe Photoshop (АР) очень важна для нас. Без нее не обходится ни один фотограф, рекламный агент и даже обычный пользователь. С помощью программы Adobe Photoshop восстанавливают и реставрируют фотографии, изготавливают рекламу и многое другое. AP — один из многочисленных пакетов для обработки, изменения, сохранения графических объектов. Adobe Photoshop позволяет работать с палитрой, калибровать, сканировать, импортировать и экспортировать, выделять области, контуры рисовать / редактировать, выбирать цвета, слои, каналы и маски, фильтры, размер изображения и его разрешение, Цветокоррекция, преобразовать изображения, цветоделение, печать изображения.

Основные возможности этой программы:

— Обработка цифровых и отсканированных фотоснимков, цветокоррекция, спецэффекты, устранение различных дефектов съемки;

— Возможность создания многослойного изображения. При этом каждый элемент иллюстрации может быть сохранен в собственном, отдельном слое, который может редактироваться отдельно, перемещаться относительно других слоев и т. д.;

— Фотомонтаж, составление коллажей;

— Ретуширование и восстановление старых фотографий;

— Обработка эскизов, нарисованных вручную;

— Улучшенные инструменты для работы с текстом. Используя различные инструменты, эффекты и фильтры можно получить очень интересные эффекты. Создание текстур для 3D моделей;

— Создание графических элементов дизайна и оформления для сайтов, документов, печати и полиграфии;

— Подготовка изображений к печати или публикации в Интернете;

— Поддержка различных стандартов изображения (RGB, CMYK, Grayscale и т. д.);

— Поддержка различных графических форматов, как растровых (BMP, JPEG, GIF), так и векторных (AI, CDR);

— Раскрашивание фотографий. Можно подкрашивать участки изображения на черно-белых фотографиях.

Следует отметить, что программа Adobe Photoshop является главным инструментом дизайнеров. 21 век — это век высоких технологий, нового слова в дизайне, поэтому большинство дизайнеров используют именно эту программу для работы. Художники могут создавать свои картины уже не на холсте, а прямо в данной программе. У тех же, кто все-таки предпочитает работать с холстом и красками всегда есть возможность подкорректировать свое произведение искусства или добавить неожиданные элементы. На данный момент актуальна версия Adobe Photoshop, благодаря огромному количеству эффектов, позволяет делать работу интересной и разнообразной. Ну, а каждый дизайнер без этой программы вообще никуда. Практически все макеты для сайтов и приложений создаются в этой программе, кроме того, это программа позволяет создавать не только макеты, но и различную качественную графику, которая наполнит Ваш интерфейс программного продукта и сделает его неповторимым. В последних версиях программы появилась возможность создавать 3D модели. Также, дизайнеры используют эту программу для создания рекламы — от постеров, до анимированных роликов. А самые красивые и необычные авторские открытки также зарождаются в этой программе.

2. Создание дизайна интерфейса текстового редактора для мобильного устройства на операционной системе Android

2.1 Используемые инструменты в Adobe Photoshop для разработки дизайна интерфейса текстового редактора

Для разработки дизайна интерфейса понадобится графический редактор Adobe Photoshop и его инструментарий. Рассмотрим необходимые нам инструменты. Первое, с чего начинается работа, в большинстве случаев, это импорт в редактор каких-либо заготовок для дальнейшей работы. Это может быть, например, готовый исходник экрана рабочей области в мобильно приложении. После еще ни раз будет производится импорт различных изображений, заготовленных заранее, для дальнейшей обработки. В этой роли могут выступать фотографии, рабочие иконки приложений и т. п. Далее начинается основной процесс разработки. Обработка и расположение объектов в рабочей области будущего приложения производится с помощью различных инструментов. Первый — выделение области для обработки производится посредством использования инструмента «Прямоугольная область» (Рис. 1) Выделение — это обособление одной или нескольких частей изображения. Выделяя определенные области, можно редактировать или применять эффекты и фильтры не ко всему изображению, а только к его части, остальная часть изображения при этом остается нетронутой.

Рис. 1. Инструмент «Прямоугольная область»

Второй инструмент — «Пипетка» (Рис. 2). Очень удобен для подборки палитры цвета. С помощью этого инструмента отбирается образец цвета. Когда Вы кликаете этим инструментом на изображении, в цветовой палитре изменяется цвет. Цветовая палитра в программе Adobe Photoshop CS5 находится в нижней части панели инструментов. Цвет будет изменяться в переднем квадрате, который показывает основной цвет, то есть цвет рисования. (Рис. 3)

Рис. 2. Инструмент «Пипетка»

Рис. 3. Цветовая палитра После того, как выделили область для редактирования, подобрали цветовую палитру, начинают процесс закрашивания с помощью инструмента «Заливка» (Рис. 4). Он позволяет заливать цветом монотонные области изображения. Для этого следует выбрать данный инструмент на панели, выбрать цвет и щелкнуть в нужном месте на рабочей области.

Рис. 4. Инструмент «Заливка»

На этом все. Были рассмотрены необходимые инструменты для разработки дизайна интерфейса текстового редактора для мобильного устройства. Уже можно сделать вывод, что не нужно быть профессионалом в программе Adobe Photoshop, чтобы проделать следующую работу, которую мы рассмотрим в следующем пункте.

2.2 Разработка дизайна интерфейса текстового редактора в Adobe Photoshop

Конечная цель этапа разработки пользовательского интерфейса программы — это получение приятного, удобного, простого и интуитивно понятного для пользователя оболочки программы, через которую он и будет использовать программу.

Как пример рассматривается разработка дизайна пользовательского интерфейса текстового редактора для мобильного устройства на операционной системе Android, с помощью графического редактора Adobe Photoshop.

Первым шагом в разработке является размещение в рабочей области `голого' экрана приложения (Рис. 1)

Рис. 1. Исходный экран приложения Начало положено и теперь поместим на экран название текстового редактора в шапке «TextBox» и кнопки Файл, Изменить, Поиск и Выход (Рис. 2)

Рис. 2. Исходный экран приложения с кнопками и названием Изображений кнопок не обязательно рисовать самому, так как в сети интернет есть полно иконок в свободном доступе и без каких-либо ограничений, единственное, возможно придется их немного отредактировать. Вот так, например, кнопки выглядели изначально (Рис. 3)

Рис. 3. Изначальный вид иконок После, вставляется поле для ввода текста, с помощью инструмента в Adobe Photoshop «Прямоугольник с округленными углами» и задается его цвет (Рис. 4)

Рис. 4. Вставка поля для ввода текста с помощью инструмента «Прямоугольник с округленными углами»

И так, уже готов один из экранов приложения. Переходим к разработке интерфейса следующего экрана, а именно, нажатие на кнопку Файл, в контекстном меню которого дается возможность Создать новый документ (Кнопка Новый), Открыть уже существующий документ (Кнопка Открыть), Сохранить документ (Кнопка Сохранить) и Сохранить документ выбрав папку, куда он поместится (Кнопка Сохранить как) (Рис. 5)

Рис. 5. Контекстное меню кнопки Файл Следующий экран будет посвящен контекстному меню кнопки Изменить. После нажатия на которую, отображаются: кнопка Вырезать, которая позволяет вырезать выбранную область текста; кнопка Копировать — дает возможность скопировать в буфер обмена выделенную область текста; кнопка Вставить осуществляет вставку какого-либо текста из буфера обмена; кнопка Удалить удаляет выбранную область текста; кнопка Выделить все дает возможность выделить весь текст, находящийся в поле для ввода (Рис. 6)

Рис. 6. Экран контекстного меню кнопки Изменить Завершающий этап разработки — это создание экрана контекстного меню для кнопки Поиск. После нажатия на нее можно использовать такие возможности, как: найти фрагмент или слово в тексте нажатием на кнопку Найти, а так же перейти к определенному месту в тексте, после нажатия на кнопку Перейти к и в последующем заменить на что-то иное, нажав на кнопку Заменить (Рис. 7).

Рис. 7. Экран контекстного меню кнопки Поиск

Заключение

В работе было показано, что интерфейс любой программы должен быть простым и интуитивно понятным, а также приятен для восприятия человеком, а точнее пользователем. Красивый и удобный дизайн интерфейса в первую очередь предрасполагает к себе среди конкурентов, которые не уделили этому должного внимания, т. е. можно сказать, что грамотно разработанный и реализованный интерфейс позволяет завоевать большую часть аудитории в той или иной тематике приложений.

Так же, был рассмотрен более подробно графический редактор Adobe Photoshop и после этого, можно сделать вывод, что он является очень популярной в среде разработки дизайна интерфейсов различных программ. Основная причина популярности — ее универсальность. Практически любой пользователь, как любитель, так и профессионально работающий с графикой, может создавать различные по сложности проекты — от простого дизайна интерфейса текстового редактора и до сложных, объемных программ. Также немаловажным фактором является и высокая интуитивность интерфейса, благодаря которой весьма реально изучить принципы работы этого графического пакета методом «научного тыка». А возможность экспорта и импорта объектов позволяет использовать её для самых различных целей.

1. Дженифер Тидвелл Разработка пользовательских интерфейсов — СПб.: Питер, 2011 г.

2. Кузнецов Е. Ю., Осман В. М. Персональные компьютеры и программируемые микрокалькуляторы: Учеб. пособие для ВТУЗов — М.: Высш. шк. -1991 г. 160 с

3. Эстель Вейл HTML5. Разработка приложений для мобильных устройств СПб.: Изд-во «Питер», 2015 г., 1234 с.

4. С. Хашими, С. Коматинени, Д. Маклин. Разработка приложений для Android, Изд-во «Питер», 2011 г., 15−130 с.

5. Фигурнов В. Э. IBM PC для пользователя. Изд. 7-е перераб. и доп. — М: ИНФРА-М, 1997 -640 с.

6. Шенерт В. «Грядущая реклама» 1999 г.

7. PhotoShop. Библия пользователя. Диалектика. Киев. 2012 г.