tinkoff.ruWebページの作成および保守方法

みなさん、こんにちは!私の名前はセルゲイ・ミハイロフです。ティンコフでは、買収設計グループの責任者として働いています。社内サービスを担当し、顧客獲得部門の設計コンポーネントも担当しています。コンストラクターを使用してページをすばやく組み立てる方法を説明します。





今の仕組み

Tinkoffにはさまざまなデザインの約2000ページがあり、アトラクション部門がこれらすべてのページを担当しています。カード商品、預金、投資、保険、モバイル、旅行などを担当する部門で構成されています。





すべてのページはブロックで構成されています。たとえば、メインページにはヘッダー、メインバナー、タイトル、製品カードのブロックがあります。





Figmaのブロックレイアウト
Figmaのブロックレイアウト

ページはコンストラクターのブロックから組み立てられます。





ページビルダー
ページビルダー

カードを使用したこのようなブロックの例を次に示します。





「フードカード」をブロックする
「フードカード」をブロックする

すでにインデントされたロジック、タイトルをオフにしたり、ボタンのスタイルを変更したりする機能が組み込まれています。また、ストレッチロジックはすでにブロックに埋め込まれています。たとえば、1024画面のブロックで、解像度が1360の場合、ブロックは引き伸ばされます。これがすべてのブロックの仕組みです。 





, , — CMS. — , .





収集したページと下書き画面

. 2 . , .





, , , , — . 





. , , — , -.





Tinkoffプラチナページのデスクトップおよびモバイルバージョン
« »

, . , «». .





, .





2016 : « — . , ?».





, 0. , . . , 1.0.





コンストラクターバージョン1.0
1.0

, - , , , . , , , , . 2.0.





コンストラクターバージョン2.0。
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , «», .





  • .





, , - . , . , , , User Story Mapping. .





3.0.





コンストラクターバージョン3.0。
3.0.

: , , , , . , (, ) «» — . . .





, , , -, . — . . , , .





, , , , — , - , - .





. -, , . -, — : « », , , .





::





  • . .





  • .





  • - , - .





, , . , : « », , , , , .





, , , , , , . — . , - , . .





- , «», , , . , .





:





  • — , , product owner.





  • — .





  • — .





  • — , . 





  • - — , (, , ).





  • — .





, , . . -, - . , Figma , - Figma . , :





, , Figma , - figma- , . , , .





:





  • . , .





  • . , , Figma, . , , , . , - figma-, , . , . 





  • . , , . , , , , .





  • . , , - — - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





? -, . , , - . , , , , .





: , , , ; Figma . ( — PDF Figma, ). 





. - , Figma, , , .





: , . , .





?

, ( ), . , : « ». , , , . , :





  1. , , — . . .





  2. , . Figma , , , , UI . , . .





レイアウト用のレイアウトブロック

Multistory, .





Multistory , , , , , .





MultiStory
MultiStory

, , .





コンストラクター内のブロックのライブラリ

RealStory. , (, ), , . : .





本当の話
RealStory

, -, . , . - , - . 





, , - , — : , . . 





, , . , , , , , . 





Notion, , - , , . .





概念のプロセス
Notion

?

-, - , , : « , ». , . , , . , (, ), . , , . 





, . , — . : , , -. - — , .








All Articles