Дизайн интерфейса приложения на WPF, и немного о юзабилити

    Дизайн в WPF строится по принципу матрешек. Главное окно — это большой контейнер, внутри которого располагаются элементы управления (контролы) или другие контейнеры. Координат нет, а чтобы содержимое не болталось — используются привязки. Допустим, нам нужно главное меню — создаем для него контейнер, делаем привязку к верхней стороне рабочего окна. Внутрь контейнера главного меню уже помещаем кнопочки с привязкой влево. Расположение объектов внутри контейнера скользящее, поэтому, если левая кнопочка увеличится в размере, то остальные просто без проблем пододвинутся и все.

    Всю эту компоновку можно делать в Visual Studio, но зачем нужен Expression Blend, спросите вы? А потому что там есть стили! По-хорошему, чтобы дизайнеру научиться работать в программе Blend — ему надо посидеть рядом с программистом, который бы объяснил что такое контролы, какой из них TextBox, а какой Button. Мне изначально казалось, что такие вещи должны знать все, кто занимается веб-дизайном. Наверное это верстальщики должны быть в курсе. А вот дизайнеры все как один живут под девизом «Достаточно знать фотошоп, а там хоть трава не расти». Для меня дизайн — это в первую очередь пропорции и гаммы, ну и потом уже закорючки. А фотошоп — это один из инструментов, которых много. И если мне нужно приложение, то я хочу чтобы дизайнеры мне расставляли кнопочки сразу прямо там где они и будут работать.

    Дизайнера WPF было найти сложно всего, если не считать проектировщика архитектуры — такового я вообще не нашел. Итак, мне крупно, повезло и я нашел самоотверженного человека, готового постигать Blend и WPF. После трёх объяснений на пальцах дизайнер без всяких взбрыков был уже морально готов творить. Я сам из породы не рисующих дизайнеров, как и Татьяныч, но все же сделал над собой усилие и открыл паинт. Получилось вот так:
    image

    Моему дизайнеру было совершенно не жалко свои силы и страшно было браться за Blend, поэтому он начал все же в фотошопе. После 4-5 итераций подкручивания и переделывания получилось вот такое:
    image

    Да-да, согласен, желтые кнопочки боковых панелей слишком оттягивают внимание, но это уже мелочи.

    Кстати, о птичках. Недавно видел обсуждение вопроса, о том, какое должно быть образование у специалиста по пользовательским интерфейсам. Говорят, что и гуманитарное и техническое, рассуждали которого больше. Мне как специалисту по профориентации это было смешно. Говорят, ведь, что образование ума не прибавляет. Точно образование и не влияет на способности человека к разным видам деятельности. А еще, художественная гармоничность и логика функциональности в одном человеке не могут сочетаться. Поэтому, дизайн пользовательского интерфейса не может быть продуктом труда одного человека, как минимум двоих тут надо.

    PS: Обращаюсь к дизайнерам, которые все же решились осваивать WPF или Silverlight — отписывайтесь мне на почту, я Вас друг с другом познакомлю, будете обмениваться опытом, shablonarium@tigrest.ru
    Шаблонариум
    Company
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 23

      +5
      какой же откровенный ужас получился. перестали б вы херней маяться с wpf и наняли нормального дизайнера…
        –4
        с какой стати вы решили в черновике разглядывать идеал? это все-равно что смотреть на небо через лужу
          +1
          с такой, что нигде не сказано о черновике. если так, то не понятно зачем такие пытки с дизайнером если сгодится wireframes :)
            –1
            во-первых, про wireframes в школе не рассказывают я бы с него начал, во-вторых — все-равно цвета надо посмотреть
              0
              Цвета тоже ужас
        +2
        Капитан юзабельность.
        Ужас…
          +1
          Еслиб только жёлтые кнопочки были проблемой. Это тот случай когда было горааааааздо лучше.
            +1
            Дизайн откровенно ужасен, зачем этот черный цвет с закосом под блики? Еще и градиентная розово-серая подложка и прогрессбар…
            В плане же интерфейса, мне кажется всё ок, разве что надо понять, так ли актуальная средняя кнопка («развернуть на весь экран»?) в блоках

            На счет WPF и Silverlight заинтересовался, надо поизучать, контакт ваш сохранил.

              –1
              я хочу в итоге сделать черный хромированный дизайн, но оказалось, что это не так-то просто, пока экспериментируем
                0
                Чем не подошла бесплатная темка ExpressionDark?
                +2
                если решили продавать софт, то лучше захотите сделать дизайн соответствующий гедлайнам системы. не мучайте пользователей рюшечками :)
                  0
                  что такое гедлайны системы?
                    +1
                    msdn.microsoft.com/en-us/library/aa511329.aspx
                    Дайте прочитать два абзаца Follow the UX Guide и скажите дизайнеру, что получилось говно на палочке
                      0
                      нет, я этого хорошего старательного человечка обижать не буду, мы же пока просто учимся
                  0
                  Жаль примера с хромированным дизайном в голову не приходит, это помогло бы вам
                    0
                    Office 2010?
                +1
                Дизайн? WTF?
                  +1
                  Лучше бы использовали бесплатный стили. Всё равно при создании своего дизайна, рано или поздно придётся переписывать стили и поведение почти всех контролов, а это труд не маленький.

                  А так сам макет гридами накидать 2 часа работы.
                    0
                    Татьяныч за такое руки по отрывал бы
                      0
                      Да-да, согласен, желтые кнопочки боковых панелей слишком оттягивают внимание — оттягивают внимание от чего? :)) Что тут должно его притягивать?))
                        0
                        рабочая область в середине окна — там документ будет
                          0
                          у вас в проекте документ — самое важное. Это ваша идея и весь смысл. А его в макете нет, какую задачу тогда решает дизайнер? Сделать черненько и чтоб блестело? Подход не приведет к результату, т.к. задача стоит неверно…

                          имхо конечно. Ото терпение и труд все перетрут :)

                      Only users with full accounts can post comments. Log in, please.